"use client";

import { Fragment, useState } from "react";
import React from "react";
import { PhotoWithFallback, VideoModal, VideoPlayButton } from '../elements';
import type { WebsitePhotos } from '../../types/api/website-photos';
import type { CompanyInformation } from '../../types/api/company-information';
import { resolveCtaUrls, isExternalCtaUrl } from '../../lib/cta-urls';

interface HeroHomeProps {
    websitePhotos?: WebsitePhotos | null;
    companyInformation?: CompanyInformation | null;
    headline?: string;
    subhead?: string;
    ctaText?: string;
    /** Optional route override for the main CTA. When not set, uses primary CTA URL (booking or /contact) from company info. */
    ctaHref?: string;
    reviews?: { rating: number; count: number };
    onEmailSubmit?: (email: string) => void;
    videoUrl?: string;
}

export const HeroHome = ({
    websitePhotos,
    companyInformation,
    headline = "",
    subhead = "",
    ctaText = "",
    ctaHref,
    videoUrl,
}: HeroHomeProps) => {
    const [showVideo, setShowVideo] = useState(false);
    const resolved = companyInformation ? resolveCtaUrls(companyInformation) : null;
    const effectiveCtaHref = ctaHref ?? resolved?.primaryHref ?? '/contact';
    
    const heroImage = {
        url: websitePhotos?.hero?.url || '',
        alt: websitePhotos?.hero?.alt || 'Hero image',
    };

    return (
        <Fragment>
            <section className="py-24 md:py-32">
                <div className="mx-auto max-w-4xl px-4 text-center md:px-8">
                    <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl lg:text-7xl">
                        {headline}
                    </h1>
                    
                    <p className="mt-6 font-body text-lg leading-relaxed text-tertiary md:text-xl max-w-3xl mx-auto">
                        {subhead}
                    </p>

                    {ctaText && (
                        <a
                            href={effectiveCtaHref}
                            target={isExternalCtaUrl(effectiveCtaHref) ? '_blank' : undefined}
                            rel={isExternalCtaUrl(effectiveCtaHref) ? 'noopener noreferrer' : undefined}
                            className="mt-8 inline-block font-body text-base underline underline-offset-4 hover:no-underline transition-colors"
                            style={{ color: 'var(--color-text-brand-accent)' }}
                        >
                            {ctaText}
                        </a>
                    )}
                </div>
            </section>

            <section>
                <div className="mx-auto max-w-container px-4 md:px-8">
                    <div className="relative w-full h-[400px] md:h-[500px] lg:h-[600px]">
                        <PhotoWithFallback
                            photoUrl={heroImage.url}
                            photoAlt={heroImage.alt}
                            fallbackId="hero-home-brand"
                            className="w-full h-full object-cover"
                        />
                        
                        {/* Video play button overlay */}
                        {videoUrl && (
                            <div className="absolute inset-0 flex items-center justify-center">
                                <VideoPlayButton onClick={() => setShowVideo(true)} />
                            </div>
                        )}
                    </div>
                </div>
            </section>
            
            {/* Video modal */}
            {videoUrl && (
                <VideoModal 
                    isOpen={showVideo}
                    onClose={() => setShowVideo(false)}
                    videoUrl={videoUrl}
                />
            )}
        </Fragment>
    );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('hero-home', 'aman', HeroHome);
