import React, { ReactNode } from "react";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";

interface HeroButton {
    label: string;
    href: string;
}

interface HeroDatas {
    title: ReactNode;
    description: ReactNode;
    video?: string;
    poster?: string;
    buttons: [HeroButton, HeroButton];
    wave: boolean;
}

const heroData: HeroDatas = {
    title: <span>Canyoning Jura & Ain<br />Saint-Claude • Ambérieu</span>,
    description: <>Guide professionnel depuis plus de 20 ans dans les plus beaux canyons du Jura (Grosdar, Coiserette) et de l&apos;Ain (Chaley, Rhéby). Sorties adaptées à tous niveaux.</>,
    video: undefined,
    poster: "/images/hero.jpg",
    buttons: [
        {
            label: "LES SORTIES",
            href: "#sorties"
        },
        {
            label: "ME CONTACTER",
            href: "#contact"
        }
    ],
    wave: true
};

export function Hero() {
    return (
        <section className="relative w-full h-screen z-20">
            <div className="absolute inset-0 -z-10">
                {heroData.video ? (
                    <VideoBackground
                        src={heroData.video}
                        poster={heroData.poster}
                    />
                ) : heroData.poster ? (
                    <BackgroundImage
                        src={heroData.poster}
                        alt="Background landscape"
                    />
                ) : null}
                <div className="absolute inset-0 bg-foreground opacity-40" />
            </div>

            <div className="container mx-auto h-full flex items-center justify-center">
                <HeroContent data={heroData} />
            </div>

            {heroData.wave && <WaveSeparator />}
        </section>
    );
}

function HeroContent({ data }: { data: HeroDatas }) {
    return (
        <div className="text-center">
            <h1 className="font-hardcore text-background text-6xl md:text-6xl lg:text-8xl mb-6">
                {data.title}
            </h1>

            <p className="text-background max-w-xl mx-auto mb-8">
                {data.description}
            </p>

            <div className="flex justify-center space-x-4">
                {data.buttons.map((button, index) => (
                    <Link key={index} href={button.href}>
                        <Button variant="default" className="uppercase">
                            {button.label}
                        </Button>
                    </Link>
                ))}
            </div>
        </div>
    );
}

function VideoBackground({
    src,
    poster
}: {
    src: string;
    poster?: string;
}) {
    return (
        <video
            className="w-full h-full object-cover"
            autoPlay
            muted
            loop
            playsInline
            poster={poster}
        >
            <source src={src} type="video/webm" />
        </video>
    );
}

function BackgroundImage({
    src,
    alt
}: {
    src: string;
    alt: string;
}) {
    return (
        <div className="absolute inset-0">
            {/* Version optimisée : Mobile 179KB, Desktop 662KB vs 2.18MB original */}
            <picture>
                {/* Mobile WebP ultra-optimisé (92% plus petite) */}
                <source 
                    srcSet="/images/hero-mobile.webp" 
                    type="image/webp" 
                    media="(max-width: 768px)" 
                />
                {/* Desktop WebP optimisé (69% plus petite) */}
                <source 
                    srcSet="/images/hero.webp" 
                    type="image/webp" 
                    media="(min-width: 769px)" 
                />
                {/* Fallback JPG pour compatibilité */}
                <Image
                    src={src}
                    alt={alt}
                    fill
                    priority
                    sizes="(max-width: 768px) 768px, 1920px"
                    className="object-cover"
                    quality={85}
                    placeholder="blur"
                    blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyLDyeD8q0QQ7Bqn1p1c1b+1OvM7jFJ/Q9m9p8V"
                />
            </picture>
        </div>
    );
}

function WaveSeparator() {
    return (
        <div className="w-full absolute -bottom-2">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 120 1440 200"
                style={{ transform: "scaleX(-1)" }}
            >
                <path
                    className="fill-background"
                    fillOpacity="1"
                    d="M0,128L120,160C240,192,480,256,720,282.7C960,309,1200,299,1320,293.3L1440,288L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z"
                />
            </svg>
        </div>
    );
}