"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { Zap, ChevronRight, Star, Play, Check, Sparkles } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

const fadeUp = { initial: { opacity: 0, y: 30 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.6 } };
const stagger = { animate: { transition: { staggerChildren: 0.1 } } };
const headlineWords = ["Turn", "YouTube", "Videos", "into"];
const reelWords = ["Viral", "Reels", "Instantly"];

export function HeroSection() {
  return (
    <section className="relative pt-32 pb-24 px-4">
      <div className="container mx-auto max-w-6xl">
        <motion.div className="text-center" initial="initial" animate="animate" variants={stagger}>
          <motion.div variants={fadeUp} className="inline-flex items-center gap-2 mb-6">
            <Badge className="bg-violet-500/15 text-violet-300 border-violet-500/30 px-4 py-1.5 text-sm font-medium rounded-full">
              <Sparkles className="w-3.5 h-3.5 mr-1.5" />
              AI-Powered Viral Detection
            </Badge>
          </motion.div>

          <motion.h1
            variants={fadeUp}
            className="text-5xl md:text-6xl lg:text-7xl font-black leading-tight tracking-tight mb-6"
            aria-label="Turn YouTube Videos into Viral Reels Instantly"
          >
            <span className="block overflow-hidden pb-2">
              {headlineWords.map((word, index) => (
                <motion.span
                  key={word}
                  className="inline-block mr-3 md:mr-4"
                  initial={{ opacity: 0, y: 42, filter: "blur(10px)" }}
                  animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
                  transition={{ duration: 0.65, delay: 0.18 + index * 0.08, ease: [0.22, 1, 0.36, 1] }}
                >
                  {word}
                </motion.span>
              ))}
            </span>
            <span className="relative mx-auto mt-1 block min-h-[1.15em] max-w-4xl overflow-hidden pb-2">
              <motion.span
                className="absolute inset-x-0 top-1/2 h-px bg-gradient-to-r from-transparent via-violet-400/40 to-transparent"
                initial={{ scaleX: 0, opacity: 0 }}
                animate={{ scaleX: 1, opacity: 1 }}
                transition={{ duration: 0.9, delay: 0.55 }}
              />
              <span className="relative z-10 inline-flex flex-wrap items-center justify-center gap-x-3 md:gap-x-4">
                {reelWords.map((word, index) => (
                  <motion.span
                    key={word}
                    className="gradient-text-hero inline-block"
                    initial={{ opacity: 0, y: 48, rotateX: -70 }}
                    animate={{ opacity: 1, y: 0, rotateX: 0 }}
                    transition={{
                      duration: 0.75,
                      delay: 0.58 + index * 0.13,
                      ease: [0.16, 1, 0.3, 1],
                    }}
                  >
                    {word}
                  </motion.span>
                ))}
              </span>
            </span>
          </motion.h1>

          <motion.p variants={fadeUp} className="text-lg md:text-xl text-zinc-400 max-w-2xl mx-auto mb-10 leading-relaxed">
            Paste a YouTube URL. Our AI transcribes, analyzes, and identifies the highest-virality
            moments — complete with timestamps and scores. No editing experience needed.
          </motion.p>

          <motion.div variants={fadeUp} className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link href="/signup">
              <Button size="lg" className="bg-gradient-to-r from-violet-600 to-violet-500 hover:from-violet-500 hover:to-violet-400 text-white border-0 shadow-xl shadow-violet-900/30 px-8 h-12 text-base">
                <Zap className="w-4 h-4 mr-2" />
                Try For Free
                <ChevronRight className="w-4 h-4 ml-1" />
              </Button>
            </Link>
            <Link href="/pricing">
              <Button size="lg" variant="outline" className="border-white/15 bg-white/5 hover:bg-white/8 text-white px-8 h-12 text-base">
                See Pricing
              </Button>
            </Link>
          </motion.div>

          <motion.div variants={fadeUp} className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-zinc-500">
            <div className="flex items-center gap-1.5">
              <div className="flex -space-x-2">
                {["RM", "KR", "AN", "SP"].map((a) => (
                  <div key={a} className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-600 to-cyan-500 flex items-center justify-center text-[10px] font-bold text-white border-2 border-background">{a}</div>
                ))}
              </div>
              <span>2,400+ creators</span>
            </div>
            <div className="flex items-center gap-1">
              {[...Array(5)].map((_, i) => <Star key={i} className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400" />)}
              <span className="ml-1">4.9/5</span>
            </div>
            <span>· No credit card required</span>
          </motion.div>
        </motion.div>

        {/* Hero visual */}
        <motion.div initial={{ opacity: 0, y: 40 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8, delay: 0.4 }} className="mt-20 relative">
          <div className="absolute inset-0 bg-gradient-to-b from-violet-600/10 to-cyan-600/5 rounded-3xl blur-3xl" />
          <div className="relative glass-card p-6 max-w-4xl mx-auto">
            <div className="flex items-center gap-2 mb-4 pb-4 border-b border-white/8">
              <Play className="w-4 h-4 text-red-400" />
              <span className="text-sm font-medium text-zinc-300">How to Build a SaaS Product in 30 Days</span>
              <Badge className="ml-auto bg-emerald-500/15 text-emerald-400 border-emerald-500/30 text-xs">5 clips found</Badge>
            </div>
            <div className="space-y-3">
              {[
                { score: 94, time: "2:04 – 3:09", text: "The biggest mistake most founders make is building before they validate..." },
                { score: 91, time: "7:25 – 8:30", text: "Revenue went from zero to ten thousand dollars in just 47 days..." },
                { score: 88, time: "13:43 – 14:38", text: "Stop trying to compete on features. Your competitors have more money..." },
              ].map((clip, i) => (
                <div key={i} className="flex items-start gap-4 p-3 rounded-xl bg-white/3 border border-white/6 hover:border-violet-500/30 transition-colors">
                  <div className="flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-violet-600/30 to-cyan-600/20 flex flex-col items-center justify-center">
                    <span className="text-xs font-bold text-violet-300">{clip.score}%</span>
                    <span className="text-[9px] text-zinc-500">viral</span>
                  </div>
                  <div className="min-w-0">
                    <p className="text-xs text-zinc-500 mb-0.5 font-mono">{clip.time}</p>
                    <p className="text-sm text-zinc-300 truncate">{clip.text}</p>
                  </div>
                  <Button size="sm" variant="ghost" className="ml-auto flex-shrink-0 text-xs text-zinc-400 hover:text-white h-7 px-3">Copy</Button>
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}

export function AnimatedSection({ children, className }: { children: React.ReactNode; className?: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

export function StaggerCard({ children, delay = 0, className }: { children: React.ReactNode; delay?: number; className?: string }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5, delay }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

export function HowItWorksAnimation() {
  const stages = [
    { label: "YouTube URL", detail: "Paste link", color: "from-red-500/30 to-red-500/10" },
    { label: "AI Analysis", detail: "Transcribe + score", color: "from-violet-500/30 to-violet-500/10" },
    { label: "Clip List", detail: "Ranked moments", color: "from-cyan-500/30 to-cyan-500/10" },
  ];

  return (
    <motion.div
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.55 }}
      className="mb-12 rounded-2xl border border-white/8 bg-white/[0.03] p-4 md:p-6"
    >
      <div className="grid gap-4 md:grid-cols-[1fr_72px_1fr_72px_1fr] md:items-center">
        {stages.map((stage, index) => (
          <div key={stage.label} className="contents">
            <motion.div
              className="relative overflow-hidden rounded-xl border border-white/10 bg-black/30 p-4 text-left"
              initial={{ opacity: 0, scale: 0.94 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.45, delay: index * 0.16 }}
            >
              <motion.div
                className={`absolute inset-0 bg-gradient-to-br ${stage.color}`}
                animate={{ opacity: [0.25, 0.55, 0.25] }}
                transition={{ duration: 2.6, repeat: Infinity, delay: index * 0.35 }}
              />
              <div className="relative">
                <div className="mb-3 flex items-center gap-2">
                  <span className="flex h-7 w-7 items-center justify-center rounded-lg border border-white/10 bg-white/8 text-xs font-bold text-white">
                    {index + 1}
                  </span>
                  <span className="text-sm font-semibold text-white">{stage.label}</span>
                </div>
                <div className="h-2 overflow-hidden rounded-full bg-white/8">
                  <motion.div
                    className="h-full rounded-full bg-gradient-to-r from-violet-400 to-cyan-300"
                    initial={{ width: "0%" }}
                    whileInView={{ width: index === 0 ? "55%" : index === 1 ? "82%" : "100%" }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.75, delay: 0.25 + index * 0.18 }}
                  />
                </div>
                <p className="mt-3 text-xs text-zinc-500">{stage.detail}</p>
              </div>
            </motion.div>

            {index < stages.length - 1 && (
              <div className="relative hidden h-12 md:block">
                <div className="absolute left-0 right-0 top-1/2 h-px -translate-y-1/2 bg-white/10" />
                <motion.div
                  className="absolute top-1/2 h-2 w-2 -translate-y-1/2 rounded-full bg-cyan-300 shadow-[0_0_18px_rgba(103,232,249,0.8)]"
                  animate={{ left: ["0%", "100%", "0%"] }}
                  transition={{ duration: 2.4, repeat: Infinity, delay: index * 0.4, ease: "easeInOut" }}
                />
              </div>
            )}
          </div>
        ))}
      </div>
    </motion.div>
  );
}

export function CheckItem({ label }: { label: string }) {
  return (
    <div className="flex items-center gap-1.5">
      <Check className="w-3.5 h-3.5 text-emerald-500" />
      {label}
    </div>
  );
}