import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, Calendar, MapPin, Clock, Flame, Star, Users, Play, ShoppingBag, Instagram, Facebook } from "lucide-react";
import heroArena from "@/assets/hero-arena.jpg";
import eventPoster from "@/assets/event-poster.jpg";
import merchShirt from "@/assets/merch-shirt.jpg";
import merchHoodie from "@/assets/merch-hoodie.jpg";
import merchHat from "@/assets/merch-hat.jpg";
import merchPoster from "@/assets/merch-poster.jpg";
import { wrestlers, events, news } from "@/lib/cwf-data";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "CWF — Live. Local. Legendary. | Central Wrestling Federation" },
      { name: "description", content: "Central Wrestling Federation: The premier pro wrestling experience in East Texas. Live events, championship matches, and the toughest roster in the region." },
      { property: "og:title", content: "CWF — Live. Local. Legendary." },
      { property: "og:description", content: "East Texas's premier pro wrestling promotion." },
      { property: "og:image", content: heroArena },
      { name: "twitter:image", content: heroArena },
    ],
  }),
  component: HomePage,
});

function HomePage() {
  const nextEvent = events.find((e) => e.status === "upcoming")!;
  return (
    <>
      <Hero />
      <Marquee />
      <UpcomingEvent event={nextEvent} />
      <FeaturedWrestlers />
      <WhyFans />
      <VideoHighlights />
      <Merch />
      <NewsSection />
      <SocialProof />
    </>
  );
}

function Hero() {
  return (
    <section className="relative min-h-[100svh] overflow-hidden flex items-center">
      <img
        src={heroArena}
        alt="Wrestler standing on turnbuckle in packed arena"
        className="absolute inset-0 h-full w-full object-cover"
        width={1920}
        height={1280}
      />
      <div className="absolute inset-0 bg-grad-overlay" />
      <div className="absolute inset-0 bg-gradient-to-r from-background/80 via-background/30 to-transparent" />

      {/* Animated sparks */}
      <div className="absolute inset-0 pointer-events-none overflow-hidden">
        {Array.from({ length: 18 }).map((_, i) => (
          <span
            key={i}
            className="absolute bottom-0 w-0.5 h-3 bg-primary rounded-full"
            style={{
              left: `${(i * 53) % 100}%`,
              animation: `spark-rise ${4 + (i % 5)}s linear ${i * 0.3}s infinite`,
              boxShadow: "0 0 8px #FFD000",
            }}
          />
        ))}
      </div>

      {/* Flickering arena light */}
      <div className="absolute top-10 right-20 h-32 w-32 rounded-full bg-primary/20 blur-3xl animate-flicker pointer-events-none" />

      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 w-full">
        <div className="max-w-3xl animate-slide-up">
          <div className="inline-flex items-center gap-2 px-3 py-1 mb-6 bg-primary text-primary-foreground font-display tracking-widest text-sm">
            <span className="h-2 w-2 bg-destructive rounded-full animate-pulse-gold" />
            LIVE EVENT — APRIL 12
          </div>
          <h1 className="font-display text-6xl sm:text-8xl lg:text-[10rem] leading-[0.85] tracking-tight">
            <span className="block">LIVE.</span>
            <span className="block">LOCAL.</span>
            <span className="block text-primary text-shadow-gold">LEGENDARY.</span>
          </h1>
          <p className="mt-6 text-lg sm:text-2xl text-foreground/90 max-w-xl font-light">
            The Premier Pro Wrestling Experience In East Texas
          </p>
          <div className="mt-10 flex flex-wrap gap-4">
            <Link to="/events" className="btn-hero">
              Buy Tickets <ArrowRight size={18} />
            </Link>
            <Link to="/events" className="btn-hero-outline">
              View Next Event
            </Link>
          </div>
        </div>
      </div>

      <div className="absolute bottom-0 inset-x-0 diag-stripes h-2" />
    </section>
  );
}

function Marquee() {
  const items = ["LIVE PRO WRESTLING", "EAST TEXAS", "★", "CHAMPIONSHIP MATCHES", "★", "FAMILY FRIENDLY", "★", "BUY TICKETS NOW", "★"];
  return (
    <div className="bg-primary text-primary-foreground py-4 overflow-hidden border-y-4 border-background">
      <div className="flex animate-marquee whitespace-nowrap">
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} className="font-display text-2xl tracking-[0.3em] mx-8">{t}</span>
        ))}
      </div>
    </div>
  );
}

function UpcomingEvent({ event }: { event: typeof events[number] }) {
  return (
    <section className="relative py-24 bg-background">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading kicker="Next Event" title="DON'T MISS THE ACTION" />
        <div className="mt-12 grid grid-cols-1 lg:grid-cols-5 gap-8 items-center">
          <div className="lg:col-span-2 relative group">
            <div className="absolute -inset-2 bg-primary opacity-20 blur-2xl group-hover:opacity-40 transition-opacity" />
            <div className="relative aspect-[4/5] overflow-hidden border-2 border-primary">
              <img src={eventPoster} alt={event.name} className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-700" width={1024} height={1280} loading="lazy" />
              <div className="absolute top-4 left-4 bg-primary text-primary-foreground px-3 py-1 font-display tracking-widest">
                MAIN EVENT
              </div>
            </div>
          </div>

          <div className="lg:col-span-3 bg-card border border-border p-8 lg:p-12 shadow-card relative">
            <div className="absolute top-0 left-0 w-16 h-1 bg-primary" />
            <p className="font-display text-primary tracking-widest text-sm mb-3">CWF PRESENTS</p>
            <h3 className="font-display text-5xl lg:text-7xl leading-none mb-4">{event.name}</h3>
            <p className="text-muted-foreground text-lg mb-8">{event.tagline}</p>

            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
              <InfoBlock icon={Calendar} label="Date" value={event.date} />
              <InfoBlock icon={Clock} label="Time" value={event.time} />
              <InfoBlock icon={MapPin} label="Location" value={event.city} />
            </div>

            <div className="border-t border-border pt-6 mb-8">
              <p className="font-display text-xs tracking-widest text-muted-foreground mb-1">MAIN EVENT</p>
              <p className="font-display text-2xl">{event.mainEvent}</p>
            </div>

            <div className="flex flex-wrap gap-4">
              <Link to="/events" className="btn-hero">Buy Tickets</Link>
              <Link to="/events" className="btn-hero-outline">Event Details</Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function InfoBlock({ icon: Icon, label, value }: { icon: React.ComponentType<{ size?: number }>; label: string; value: string }) {
  return (
    <div className="flex items-start gap-3">
      <div className="grid h-10 w-10 place-items-center bg-primary text-primary-foreground shrink-0">
        <Icon size={18} />
      </div>
      <div className="min-w-0">
        <p className="text-xs uppercase tracking-widest text-muted-foreground">{label}</p>
        <p className="font-display text-lg">{value}</p>
      </div>
    </div>
  );
}

function FeaturedWrestlers() {
  return (
    <section className="relative py-24 bg-charcoal">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-wrap items-end justify-between gap-6 mb-12">
          <SectionHeading kicker="The Roster" title="MEET THE SUPERSTARS" />
          <Link to="/roster" className="btn-hero-outline text-sm py-2 px-4">View Full Roster <ArrowRight size={16} /></Link>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {wrestlers.map((w) => (
            <Link
              key={w.slug}
              to="/roster"
              className="group relative block overflow-hidden bg-background border border-border hover:border-primary transition-colors"
            >
              <div className="aspect-[3/4] overflow-hidden bg-steel">
                <img src={w.image} alt={w.name} className="h-full w-full object-cover grayscale-[40%] group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700" width={768} height={1024} loading="lazy" />
              </div>
              <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
              {w.isChampion && (
                <div className="absolute top-3 right-3 bg-primary text-primary-foreground px-2 py-1 text-xs font-display tracking-widest">
                  CHAMPION
                </div>
              )}
              <div className="absolute bottom-0 inset-x-0 p-5">
                <p className="text-primary font-display text-xs tracking-widest">{w.nickname}</p>
                <h3 className="font-display text-3xl leading-tight">{w.name}</h3>
                <p className="text-muted-foreground text-sm mt-1">{w.status}</p>
                <div className="h-1 w-0 bg-primary group-hover:w-full transition-all duration-500 mt-3" />
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhyFans() {
  const items = [
    { icon: Flame, title: "Live Events", text: "Eight stacked shows a year across East Texas — every one of them a knockout." },
    { icon: Star, title: "Top Talent", text: "Champions, contenders, and rising stars from across the state." },
    { icon: Users, title: "Family Friendly", text: "Real action, real characters — entertainment built for every generation." },
    { icon: MapPin, title: "East Texas Pride", text: "Born in the Pineywoods. Built for the loudest fans in the country." },
  ];
  return (
    <section className="py-24 bg-background relative overflow-hidden">
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[600px] bg-primary/5 blur-3xl rounded-full pointer-events-none" />
      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading kicker="The Experience" title="WHY FANS LOVE CWF" />
        <div className="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {items.map((it, i) => (
            <div
              key={it.title}
              className="group relative bg-card border border-border p-8 hover:border-primary transition-all hover:-translate-y-2 duration-300"
              style={{ animationDelay: `${i * 0.1}s` }}
            >
              <div className="absolute top-0 left-0 w-12 h-1 bg-primary scale-x-0 group-hover:scale-x-100 origin-left transition-transform" />
              <div className="grid h-14 w-14 place-items-center bg-primary text-primary-foreground mb-5 group-hover:rotate-6 transition-transform">
                <it.icon size={24} />
              </div>
              <h3 className="font-display text-2xl tracking-wide mb-2">{it.title}</h3>
              <p className="text-muted-foreground text-sm leading-relaxed">{it.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VideoHighlights() {
  const videos = [
    { title: "Storm vs Dorado — Full 60 Minutes", category: "Championship", thumb: "https://images.unsplash.com/photo-1543367166-7e6533f1c3a8?w=1200&h=675&fit=crop" },
    { title: "Savannah Cruz Wins The Belt", category: "Title Change", thumb: "https://images.unsplash.com/photo-1517438476312-10d79c077509?w=1200&h=675&fit=crop" },
    { title: "Fans Lose It For Big Jack's Debut", category: "Fan Reactions", thumb: "https://images.unsplash.com/photo-1574629810360-7efbbe195018?w=1200&h=675&fit=crop" },
  ];
  return (
    <section className="py-24 bg-charcoal relative">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading kicker="Highlights" title="WATCH THE ACTION" />
        <div className="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-6">
          {videos.map((v, i) => (
            <div key={i} className="group cursor-pointer">
              <div className="relative aspect-video overflow-hidden bg-steel border border-border group-hover:border-primary transition-colors">
                <img src={v.thumb} alt={v.title} className="h-full w-full object-cover opacity-70 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" loading="lazy" />
                <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent" />
                <div className="absolute inset-0 grid place-items-center">
                  <div className="grid h-20 w-20 place-items-center bg-primary text-primary-foreground rounded-full shadow-gold group-hover:scale-110 transition-transform">
                    <Play size={28} fill="currentColor" className="ml-1" />
                  </div>
                </div>
              </div>
              <p className="mt-4 text-primary font-display text-xs tracking-widest">{v.category}</p>
              <h3 className="font-display text-xl">{v.title}</h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Merch() {
  const items = [
    { name: "CWF Classic Tee", price: "$28", img: merchShirt },
    { name: "Pullover Hoodie", price: "$58", img: merchHoodie },
    { name: "Snapback Hat", price: "$32", img: merchHat },
    { name: "Event Poster", price: "$18", img: merchPoster },
  ];
  return (
    <section className="py-24 bg-background relative">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-wrap items-end justify-between gap-6 mb-12">
          <SectionHeading kicker="Shop" title="REP THE FEDERATION" />
          <a href="#" className="btn-hero-outline text-sm py-2 px-4">Shop All <ShoppingBag size={16} /></a>
        </div>
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
          {items.map((m) => (
            <a key={m.name} href="#" className="group block">
              <div className="aspect-square overflow-hidden bg-card border border-border group-hover:border-primary transition-colors">
                <img src={m.img} alt={m.name} className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy" />
              </div>
              <div className="pt-4 flex items-center justify-between">
                <h3 className="font-display text-lg tracking-wide">{m.name}</h3>
                <span className="font-display text-primary text-lg">{m.price}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function NewsSection() {
  return (
    <section className="py-24 bg-charcoal">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="flex flex-wrap items-end justify-between gap-6 mb-12">
          <SectionHeading kicker="The Latest" title="NEWS & ANNOUNCEMENTS" />
          <Link to="/news" className="btn-hero-outline text-sm py-2 px-4">All News <ArrowRight size={16} /></Link>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {news.slice(0, 6).map((n) => (
            <article key={n.slug} className="group bg-background border border-border p-6 hover:border-primary transition-colors">
              <div className="flex items-center justify-between mb-3">
                <span className="px-2 py-0.5 bg-primary text-primary-foreground text-xs font-display tracking-widest">{n.category.toUpperCase()}</span>
                <span className="text-xs text-muted-foreground">{n.date}</span>
              </div>
              <h3 className="font-display text-2xl leading-tight mb-2 group-hover:text-primary transition-colors">{n.title}</h3>
              <p className="text-sm text-muted-foreground line-clamp-3">{n.excerpt}</p>
              <span className="inline-flex items-center gap-1 mt-4 text-primary font-display text-sm tracking-widest">
                READ MORE <ArrowRight size={14} />
              </span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialProof() {
  const testimonials = [
    { quote: "Best wrestling show I've been to outside of WrestleMania. Atmosphere was electric.", name: "Marcus T.", from: "Tyler, TX" },
    { quote: "My kids talked about it for weeks. We're season ticket holders now.", name: "Jenny R.", from: "Longview, TX" },
    { quote: "CWF puts on a major league product in a small market. Don't sleep on it.", name: "Derek L.", from: "Nacogdoches, TX" },
  ];
  return (
    <section className="py-24 bg-background relative overflow-hidden">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <SectionHeading kicker="The Fans" title="THE CWF FAITHFUL" />
        <div className="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-6">
          {testimonials.map((t, i) => (
            <div key={i} className="bg-card border border-border p-8 relative">
              <span className="absolute top-4 right-6 font-display text-7xl text-primary/20 leading-none">"</span>
              <p className="text-foreground/90 italic relative z-10">"{t.quote}"</p>
              <div className="mt-6 pt-6 border-t border-border">
                <p className="font-display text-lg tracking-wide">{t.name}</p>
                <p className="text-xs text-muted-foreground">{t.from}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-4">
          {[Instagram, Facebook, Instagram, Facebook].map((Icon, i) => (
            <div key={i} className="group relative aspect-square overflow-hidden bg-card border border-border">
              <img
                src={`https://images.unsplash.com/photo-${["1544698244-3f6cbb1c0bee", "1517438476312-10d79c077509", "1574629810360-7efbbe195018", "1543367166-7e6533f1c3a8"][i]}?w=600&h=600&fit=crop`}
                alt="Fan content"
                className="h-full w-full object-cover opacity-60 group-hover:opacity-100 transition-opacity"
                loading="lazy"
              />
              <div className="absolute inset-0 grid place-items-center bg-background/40 group-hover:bg-transparent transition-colors">
                <Icon className="text-primary" size={32} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SectionHeading({ kicker, title }: { kicker: string; title: string }) {
  return (
    <div>
      <p className="font-display text-primary text-sm tracking-[0.4em] mb-3 flex items-center gap-3">
        <span className="h-px w-12 bg-primary" />
        {kicker.toUpperCase()}
      </p>
      <h2 className="font-display text-5xl sm:text-6xl lg:text-7xl leading-none tracking-tight">
        {title}
      </h2>
    </div>
  );
}