import { createFileRoute } from "@tanstack/react-router";
import hoodieImg from "@/assets/product-hoodie.jpg";
import vinylImg from "@/assets/product-vinyl.jpg";
import pinsImg from "@/assets/product-pins.jpg";
import doorwayImg from "@/assets/narrative-doorway.jpg";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "DARK_WORLD.SHOP — Official Deltarune-Inspired Merch" },
      { name: "description", content: "Premium Deltarune-inspired merch: hoodies, vinyl, pins, and plush. Limited drops, shipped from the Depths." },
      { property: "og:title", content: "DARK_WORLD.SHOP — Deltarune Merch" },
      { property: "og:description", content: "Artifacts for Lightners and Darkners. Limited editions only." },
      { property: "og:type", content: "website" },
    ],
  }),
  component: Index,
});

const products = [
  { name: "Vessel Signature Hoodie", desc: "Heavyweight French Terry / Crimson Details", price: "$65.00", img: hoodieImg, badge: null, accent: "soul" },
  { name: "The Dark Fountain OST", desc: "2LP Translucent Purple / Etched D-Side", price: "$48.00", img: vinylImg, badge: "LIMITED", accent: "soul" },
  { name: "Legend Trio Pin Set", desc: "Hard Enamel / Gold-Plated Finish", price: "$24.00", img: pinsImg, badge: null, accent: "soul" },
];

function Index() {
  return (
    <div className="min-h-screen bg-background text-foreground scanlines selection:bg-soul/30">
      {/* Nav */}
      <nav className="sticky top-0 z-50 border-b border-border bg-background/80 backdrop-blur-md">
        <div className="max-w-7xl mx-auto px-6 h-14 flex items-center justify-between">
          <div className="flex items-center gap-8">
            <span className="font-mono text-sm tracking-tighter flex items-center gap-2">
                      DARK_WORLD.SHOP
            </span>
            <div className="hidden md:flex gap-6 text-sm text-muted-foreground">
              <a href="#shop" className="hover:text-foreground transition-colors">Apparel</a>
              <a href="#shop" className="hover:text-foreground transition-colors">Collectibles</a>
              <a href="#shop" className="hover:text-foreground transition-colors">Vinyl</a>
              <a href="#lore" className="hover:text-foreground transition-colors">Lore</a>
            </div>
          </div>
          <div className="flex items-center gap-4">
            <button className="text-sm text-muted-foreground hover:text-foreground transition-colors">Search</button>
            <button className="relative p-2 text-muted-foreground hover:text-foreground transition-colors">
              <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
            </button>
          </div>
        </div>
      </nav>

      {/* Hero */}
      <section className="relative pt-24 pb-32 overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="flex flex-col items-center text-center">
            <div className="mb-8 cursor-pointer animate-float-soul">
              <div className="text-8xl md:text-9xl text-soul heart-glow select-none animate-pulse-heart">♥</div>
            </div>
            <p className="font-mono text-xs uppercase tracking-[0.4em] text-soul mb-6">★ The fountain has opened ★</p>
            <h1 className="text-4xl md:text-7xl font-semibold tracking-tight text-balance leading-[1.05] mb-6 max-w-4xl bg-gradient-to-b from-foreground via-foreground to-fountain bg-clip-text text-transparent">
              A shop that exists <br className="hidden sm:block" /> between two worlds.
            </h1>
            <p className="text-base sm:text-lg text-muted-foreground max-w-[52ch] text-pretty mb-10">
              Premium artifacts for Lightners and Darkners alike. Forged in the cosmos, shipped from the Depths. Once the fountain closes, they're gone.
            </p>
            <div className="flex flex-col sm:flex-row gap-3">
              <a href="#shop" className="bg-foreground text-background text-sm font-medium px-6 py-3 rounded-full inline-flex items-center justify-center gap-2 hover:-translate-y-0.5 transition-transform shadow-[0_0_50px_-8px_var(--soul)]">
                <svg className="size-4" fill="currentColor" viewBox="0 0 20 20"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222 1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 100-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3z" /></svg>
                Shop Chapter 2
              </a>
              <a href="#lore" className="text-sm font-medium px-6 py-3 rounded-full ring-1 ring-border hover:bg-secondary/60 transition-colors text-muted-foreground hover:text-foreground backdrop-blur">
                The Archives
              </a>
            </div>
          </div>
        </div>
        <div className="absolute top-1/3 left-1/4 -z-10 opacity-50 blur-[120px] pointer-events-none">
        </div>
        <div className="absolute bottom-0 right-1/4 -z-10 opacity-30 blur-[140px] pointer-events-none">
        </div>
        <div className="absolute top-1/2 right-10 -z-10 opacity-25 blur-[100px] pointer-events-none">
        </div>
      </section>

      {/* Marquee strip */}
      <div className="border-y border-border bg-secondary/40 py-3 overflow-hidden">
        <div className="flex gap-12 font-mono text-xs uppercase tracking-[0.3em] text-muted-foreground whitespace-nowrap animate-pulse">
          <span>★ Free shipping over $80</span>
          <span className="text-soul">♥ Chapter 2 drop live</span>
          <span>★ Limited 500 units</span>
          <span className="text-soul">♥ Worldwide delivery</span>
          <span>★ Free shipping over $80</span>
          <span className="text-soul">♥ Chapter 2 drop live</span>
        </div>
      </div>

      {/* Products */}
      <section id="shop" className="py-24 bg-card/40">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
            <div>
              <span className="font-mono text-xs text-soul uppercase tracking-widest block mb-4">Chapter 01</span>
              <h2 className="text-3xl md:text-4xl font-medium tracking-tight">The Beginning Artifacts</h2>
            </div>
            <a href="#shop" className="text-sm text-muted-foreground hover:text-foreground border-b border-border pb-1 transition-colors">View all Chapter 1</a>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {products.map((p) => (
              <div key={p.name} className="group cursor-pointer">
                <div className="relative mb-4 rounded-xl overflow-hidden bg-secondary outline outline-1 -outline-offset-1 outline-border">
                  <img
                    src={p.img}
                    alt={p.name}
                    width={1024}
                    height={1280}
                    loading="lazy"
                    className="w-full aspect-[4/5] object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                  {p.badge && (
                    <div className="absolute top-4 left-4 bg-soul px-2 py-1 rounded">
                      <span className="text-[10px] font-mono text-primary-foreground tracking-widest">{p.badge}</span>
                    </div>
                  )}
                  <div className="absolute top-4 right-4 bg-background/80 backdrop-blur px-2 py-1 rounded border border-border">
                    <span className="text-[10px] font-mono">{p.price}</span>
                  </div>
                </div>
                <h3 className="text-sm font-medium group-hover:text-soul transition-colors">{p.name}</h3>
                <p className="text-xs text-muted-foreground mt-1">{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Storytelling */}
      <section id="lore" className="py-32">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-12 gap-12 items-center">
            <div className="lg:col-span-7">
              <div className="rounded-xl overflow-hidden outline outline-1 -outline-offset-1 outline-border">
                <img src={doorwayImg} alt="A glowing doorway opening to a starry void" width={1600} height={1024} loading="lazy" className="w-full aspect-video object-cover" />
              </div>
            </div>
            <div className="lg:col-span-5">
              <span className="font-mono text-xs text-muted-foreground uppercase tracking-widest block mb-4">The Narrative</span>
              <h2 className="text-3xl md:text-4xl font-medium tracking-tight leading-tight mb-6 text-balance">
                Don't forget. I'm with you in the dark.
              </h2>
              <div className="space-y-4 text-muted-foreground text-pretty">
                <p>Our collections aren't just merchandise. They are anchors to the world we share—tangible fragments of a story that continues to unfold across the boundaries of our reality.</p>
                <p>From the heavy drape of our hoodies to the silent warmth of our plush, every thread is woven for those who know that choices matter.</p>
              </div>
              <a href="#shop" className="mt-8 text-sm font-medium text-soul inline-flex items-center group">
                Explore the lore
                <svg className="size-4 ml-2 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-24 border-t border-border bg-card/40">
        <div className="max-w-7xl mx-auto px-6">
          <span className="font-mono text-xs text-soul uppercase tracking-widest block mb-4 text-center">★ ★ ★ ★ ★ — 2,341 reviews</span>
          <h2 className="text-3xl font-medium text-center mb-16 tracking-tight">Voices from the circle</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              { q: "The hoodie feels like armor. Got compliments at every con I went to.", a: "— K. Dreemurr, Hometown" },
              { q: "Vinyl arrived in perfect condition, the etched D-side is pure art.", a: "— S. Bramble, Card Kingdom" },
              { q: "The pin set is tiny but the detail is insane. Already ordered a second.", a: "— R. Prince, Castle Town" },
            ].map((t, i) => (
              <figure key={i} className="rounded-xl bg-background p-8 border border-border">
                <div className="text-soul mb-4 text-lg">♥ ♥ ♥ ♥ ♥</div>
                <blockquote className="text-sm leading-relaxed mb-6">"{t.q}"</blockquote>
                <figcaption className="text-xs text-muted-foreground font-mono uppercase tracking-widest">{t.a}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section className="py-24 border-t border-border relative overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 -z-10 opacity-20 blur-[140px] pointer-events-none">
        </div>
        <div className="max-w-3xl mx-auto px-6 text-center">
          <div className="text-4xl text-soul mb-6 animate-pulse-heart inline-block">♥</div>
          <h2 className="text-3xl font-medium mb-4 tracking-tight">Save your progress</h2>
          <p className="text-muted-foreground text-sm mb-8">Receive transmissions about restocks, secret drops, and the coming shadows. No spam — only signal.</p>
            <input type="email" placeholder="lightner@example.com" className="flex-1 bg-secondary border border-border rounded-full px-6 py-3 text-sm focus:outline-none focus:ring-1 focus:ring-soul/50 transition-all placeholder:text-muted-foreground/60" />
            <button type="submit" className="bg-soul text-primary-foreground text-sm font-medium px-6 py-3 rounded-full hover:opacity-90 transition-opacity shrink-0">
              Subscribe
            </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 border-t border-border">
        <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex flex-col items-center md:items-start">
            <span className="font-mono text-xs text-muted-foreground uppercase tracking-[0.2em] mb-2">DARK_WORLD.SHOP</span>
            <p className="text-[10px] text-muted-foreground/70 font-mono">© 2026 — A FAN-INSPIRED PROTOTYPE. NOT AFFILIATED WITH TOBY FOX.</p>
          </div>
          <div className="flex gap-6">
            <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest">Terms</a>
            <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest">Privacy</a>
            <a href="#" className="text-xs text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}