import { motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { Particles } from "./Particles";
import heroImg from "@/assets/hero-gala.jpg";
import heroVideo from "@/assets/MC_Eventos2.mp4";
import { useI18n } from "@/i18n/I18nContext";
import { useState, useRef } from "react";

export function Hero() {
  const { t } = useI18n();
  const words = t.hero.title.split(" ");
  const [videoStarted, setVideoStarted] = useState(false);
  const videoRef = useRef<HTMLVideoElement>(null);

  const handleVideoPlay = () => {
    setVideoStarted(true);
  };

  return (
    <section
      id="accueil"
      className="relative flex min-h-screen items-center justify-center overflow-hidden bg-ink"
    >
      {!videoStarted ? (
        <motion.button
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
          onClick={handleVideoPlay}
          className="absolute inset-0 z-30 flex cursor-pointer items-center justify-center bg-black"
        >
          <video
            ref={videoRef}
            src={heroVideo}
            autoPlay
            muted
            playsInline
            onEnded={() => setVideoStarted(true)}
            className="h-full w-full object-cover"
          />
        </motion.button>
      ) : (
        <>
          <div
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: `url(${heroImg})` }}
            aria-hidden="true"
          />
          <div
            className="absolute inset-0 bg-gradient-to-b from-ink/85 via-ink/70 to-ink"
            aria-hidden="true"
          />
          <Particles count={50} />

          <div className="relative z-10 mx-auto max-w-5xl px-6 text-center">
            <motion.p
              key={t.hero.eyebrow}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="mb-6 text-xs font-semibold uppercase tracking-[0.4em] text-gold"
            >
              {t.hero.eyebrow}
            </motion.p>

            <h1 className="font-serif text-5xl leading-[1.05] text-cream text-balance md:text-7xl lg:text-8xl">
              {words.map((word, i) => (
                <motion.span
                  key={`${word}-${i}`}
                  initial={{ opacity: 0, y: 30, filter: "blur(8px)" }}
                  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                  transition={{ duration: 0.8, delay: 0.6 + i * 0.12, ease: [0.22, 1, 0.36, 1] }}
                  className="mr-3 inline-block"
                >
                  {word === t.hero.highlight ? (
                    <span className="italic text-gradient-gold">{word}</span>
                  ) : (
                    word
                  )}
                </motion.span>
              ))}
            </h1>

            <motion.p
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 1, delay: 1.8 }}
              className="mx-auto mt-8 max-w-2xl text-base text-cream/70 md:text-lg"
            >
              {t.hero.subtitle}
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 2.1 }}
              className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row"
            >
              <a
                href="#services"
                className="gradient-gold group inline-flex items-center justify-center rounded-sm px-8 py-4 text-sm font-semibold uppercase tracking-[0.2em] text-ink shadow-gold transition-transform duration-300 hover:scale-105"
              >
                {t.hero.ctaServices}
              </a>
              <a
                href="#contact"
                className="inline-flex items-center justify-center rounded-sm border border-gold/60 px-8 py-4 text-sm font-semibold uppercase tracking-[0.2em] text-gold transition-all duration-300 hover:border-gold hover:bg-gold/10"
              >
                {t.hero.ctaContact}
              </a>
            </motion.div>
          </div>

          <motion.a
            href="#apropos"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 2.6, duration: 1 }}
            className="absolute bottom-10 left-1/2 z-10 -translate-x-1/2 text-gold"
            aria-label={t.hero.scroll}
          >
            <ChevronDown className="animate-bounce-arrow" size={28} />
          </motion.a>
        </>
      )}
    </section>
  );
}