import { motion } from "framer-motion";
import { ArrowRight, Sparkles, PlayCircle } from "lucide-react";
import Particles from "./Particles";
import AIOrb from "./AIOrb";
import { useT } from "@/i18n/LanguageProvider";
import { useLandingSection } from "@/cms/useLandingSection";
import SectionDraftBadge from "./SectionDraftBadge";

const Hero = () => {
  const { t } = useT();
  const { content, isDraft } = useLandingSection("hero", {
    badge: t("hero.badge"),
    title_1: t("hero.title.1"),
    title_2: t("hero.title.2"),
    subtitle: t("hero.subtitle"),
    cta_primary: t("hero.cta.primary"),
    cta_secondary: t("hero.cta.secondary"),
  });
  const stats = [
    { v: t("hero.stat.1.v"), l: t("hero.stat.1.l") },
    { v: t("hero.stat.2.v"), l: t("hero.stat.2.l") },
    { v: t("hero.stat.3.v"), l: t("hero.stat.3.l") },
  ];

  return (
    <section className="relative pt-24 pb-20 sm:pt-32 sm:pb-24 overflow-hidden">
      <SectionDraftBadge show={isDraft} />
      <div className="absolute inset-0 grid-bg opacity-50" />
      <Particles density={70} />

      <div className="container relative">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="relative z-10 max-w-4xl"
        >
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 0.2 }}
            className="inline-flex items-center gap-2 rounded-full glass px-4 py-1.5 text-xs font-medium text-muted-foreground mb-6"
          >
            <Sparkles className="h-3.5 w-3.5 text-accent" />
            {content.badge}
          </motion.div>

          <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl font-bold leading-[1.05] tracking-tight">
            {content.title_1}{" "}
            <span className="text-gradient">{content.title_2}</span>
          </h1>

          <p className="mt-6 text-lg text-muted-foreground max-w-2xl leading-relaxed">
            {content.subtitle}
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, scale: 0.96 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.9, delay: 0.3, ease: "easeOut" }}
          className="relative w-full mt-14 sm:mt-16"
        >
          <AIOrb />
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.5, ease: "easeOut" }}
          className="relative z-10 mt-20 sm:mt-24 grid lg:grid-cols-12 gap-8 lg:gap-12 items-end"
        >
          <div className="lg:col-span-8 flex flex-col sm:flex-row gap-4">
            <a
              href="/auth"
              onClick={() =>
                window.dispatchEvent(new CustomEvent("aiorb:burst"))
              }
              className="machine-btn group inline-flex items-center justify-center gap-2 rounded-full bg-gradient-brand px-7 py-3.5 text-sm font-semibold text-background shadow-glow transition-all"
              data-poi="true"
            >
              {content.cta_primary}
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </a>
            <a
              href="#solutions"
              className="machine-btn inline-flex items-center justify-center rounded-full glass glow-border px-7 py-3.5 text-sm font-semibold text-foreground transition-all"
            >
              {content.cta_secondary}
            </a>
            <button
              type="button"
              onClick={() => {
                const replay = (window as unknown as { __replayIntroWithSound?: () => void }).__replayIntroWithSound;
                if (typeof replay === "function") replay();
              }}
              className="machine-btn group inline-flex items-center justify-center gap-2 rounded-full border border-border/60 bg-background/40 backdrop-blur px-5 py-3.5 text-sm font-medium text-muted-foreground hover:text-foreground hover:border-primary/50 hover:bg-muted/30 transition-all"
              aria-label="Rivedi intro Two. One. GO. con audio"
            >
              <PlayCircle className="h-4 w-4 text-accent transition-transform group-hover:scale-110" />
              Rivedi intro
            </button>
          </div>

          <div className="lg:col-span-4 grid grid-cols-3 gap-6 lg:gap-4">
            {stats.map((s) => (
              <div key={s.l}>
                <div className="font-display text-3xl sm:text-4xl font-bold text-gradient">
                  {s.v}
                </div>
                <div className="text-xs text-muted-foreground mt-1">{s.l}</div>
              </div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default Hero;