import React from "react";
import { Link } from "react-router-dom";
import SEO from "@/components/SEO";
import {
  OrganizationSchema,
  WebSiteSchema,
  FAQSchema,
  SoftwareApplicationSchema,
  SpeakableSchema,
} from "@/components/JsonLd";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  Sparkles,
  Sword,
  Globe,
  Clock,
  Users,
  UserPlus,
  BookOpen,
  Dices,
  Crown,
  Skull,
  Scale,
  Map,
  Droplets,
  Hammer,
  Lock,
  Footprints,
  Hourglass,
  ArrowRight,
} from "lucide-react";
import WaitlistSignup from "@/components/landing/WaitlistSignup";
import heroImage from "@/assets/hero-new-opt.webp";
import logoFull from "@/assets/logo-full-opt.webp";
import featureAiGm from "@/assets/feature-ai-gm-opt.webp";
import featureHeroForge from "@/assets/feature-character-opt.webp";
import featureWorlds from "@/assets/feature-worlds-opt.webp";
import featureDowntime from "@/assets/feature-downtime-opt.webp";
import featureGroup from "@/assets/feature-group-opt.webp";
import { CAMPAIGN_COVERS } from "@/lib/campaign-art";

/* ------------------------------------------------------------------ */
/*  Data — copy is unchanged from the previous design                  */
/* ------------------------------------------------------------------ */

const steps = [
  {
    num: 1,
    icon: UserPlus,
    title: "Create Your Character",
    desc: "Choose your species, path, and personality. Quick start in 2 minutes or full custom for veterans.",
  },
  {
    num: 2,
    icon: BookOpen,
    title: "The AI Sets the Scene",
    desc: "Pick a campaign. Your AI Game Master crafts a living, reactive world tailored to your character.",
  },
  {
    num: 3,
    icon: Dices,
    title: "Play Your Way",
    desc: "Make choices. Roll dice. Shape the world. Solo adventures or group sessions  -  on your schedule.",
  },
];

const features = [
  {
    icon: Sparkles,
    title: "An AI GM That Actually Runs the Game",
    description:
      "Not just a chatbot. StormQuill's AI Game Master resolves dice rolls, tracks your character sheet, manages faction relationships, and narrates consequences  -  like a real GM who's always available and never cancels.",
    tags: "Powered by advanced AI • 2d6 resolution • Infinite improvisation",
    image: featureAiGm,
    link: "/ai-game-master",
  },
  {
    icon: Sword,
    title: "Characters With Depth, Not Just Stats",
    description:
      "Build your character with beliefs, instincts, and a backstory the AI weaves into every session. Train skills through play, forge signature weapons that evolve, and watch your choices shape who you become.",
    tags: "Quick start in 2 min • Full custom for veterans • Grows every session",
    image: featureHeroForge,
    link: "/characters-depth",
  },
  {
    icon: Globe,
    title: "A World That Moves Without You",
    description:
      "Factions scheme. Economies shift. Your stronghold grows. Log in to discover what happened while you were away  -  then shape what happens next.",
    tags: "Faction politics • Stronghold building • Daily world updates",
    image: featureWorlds,
    link: "/living-world",
  },
  {
    icon: Clock,
    title: "5 Minutes a Day, Your Character Grows",
    description:
      "Train a skill at the academy. Negotiate with your faction contact. Check on your stronghold. Quick solo downtime sessions between group games keep your character progressing and the story alive.",
    tags: "Play daily in 5-10 min • Feeds into group sessions • Never lose momentum",
    image: featureDowntime,
    link: "/solo-downtime",
  },
  {
    icon: Users,
    title: "Multiplayer Is Coming Soon",
    description:
      "Solo adventures are live now. Multiplayer is in active development  -  soon you'll invite friends to your campaign and the AI GM will manage the whole party. No prep. No scheduling tools. Just play.",
    tags: "Coming soon • 2-6 players • Invite free players as Guild Master",
    image: featureGroup,
  },
];

const timeline = [
  {
    emoji: "☀️",
    time: "Morning",
    duration: "2 min",
    text: "Check the world news  -  your faction gained territory overnight",
  },
  {
    emoji: "🍽️",
    time: "Lunch",
    duration: "10 min",
    text: "Solo downtime  -  train swordsmanship at the academy",
  },
  {
    emoji: "🌙",
    time: "Evening",
    duration: "45 min",
    text: "Evening session  -  infiltrate the merchant guild, confront the betrayer",
  },
];

const campaigns = [
  {
    title: "The Forge Trial",
    hook: "Every legend begins with a single spark.",
    tone: "Epic",
    sessions: "3-5",
    icon: Hammer,
    image: CAMPAIGN_COVERS["forge-trial"],
  },
  {
    title: "The Shattered Crown",
    hook: "A kingdom has fallen. Can you reforge what was broken?",
    tone: "Epic",
    sessions: "20-25",
    icon: Crown,
    image: CAMPAIGN_COVERS["shattered-crown"],
  },
  {
    title: "Shadows Over Thornwall",
    hook: "Something lurks beneath this town. Trust no one.",
    tone: "Dark",
    sessions: "15-20",
    icon: Skull,
    image: CAMPAIGN_COVERS["shadows-over-thornwall"],
  },
  {
    title: "The Salt & Iron Trade",
    hook: "Three factions. One city. Your move.",
    tone: "Gray",
    sessions: "20-25",
    icon: Scale,
    image: CAMPAIGN_COVERS["salt-and-iron"],
  },
  {
    title: "The Hollow Ledger",
    hook: "Steal what was never meant to be owned.",
    tone: "Gray",
    sessions: "8-12",
    icon: Lock,
    image: CAMPAIGN_COVERS["hollow-ledger"],
  },
  {
    title: "The Wild Beyond",
    hook: "Map the unmappable. Survive the impossible.",
    tone: "Open",
    sessions: "15-20",
    icon: Map,
    image: CAMPAIGN_COVERS["wild-beyond"],
  },
  {
    title: "The Long Road to Karthwell",
    hook: "The road remembers every traveler. So does what walks beside it.",
    tone: "Open",
    sessions: "12-18",
    icon: Footprints,
    image: CAMPAIGN_COVERS["long-road-karthwell"],
  },
  {
    title: "The Year That Didn't Happen",
    hook: "You are the only one who remembers.",
    tone: "Intimate",
    sessions: "10-15",
    icon: Hourglass,
    image: CAMPAIGN_COVERS["year-didnt-happen"],
  },
  {
    title: "Blood of the Ironforged",
    hook: "You were betrayed. Now you want answers.",
    tone: "Intimate",
    sessions: "15-20",
    icon: Droplets,
    image: CAMPAIGN_COVERS["blood-of-ironforged"],
  },
];

const TONE_TINT: Record<string, string> = {
  Epic: "bg-quill-gold/15 text-quill-gold border-quill-gold/40",
  Dark: "bg-ember/15 text-ember border-ember/40",
  Gray: "bg-muted-foreground/15 text-muted-foreground border-muted-foreground/30",
  Open: "bg-primary/15 text-primary border-primary/40",
  Intimate: "bg-dialogue/15 text-dialogue border-dialogue/40",
};

const stats = [
  { value: "9", label: "Campaign Storylines" },
  { value: "1,152+", label: "Character Builds" },
  { value: "50", label: "Unique Creatures" },
];

const faqs = [
  {
    q: "Is this like AI Dungeon?",
    a: "StormQuill has real RPG mechanics  -  dice rolls, character sheets, skill progression, faction politics, and crafting. AI Dungeon is interactive fiction. StormQuill is a tabletop RPG with an AI running the game.",
  },
  {
    q: "Do I need to know tabletop RPG rules?",
    a: "Nope. The AI GM handles all the mechanics. You just describe what your character does. Veterans can dig into the systems; newcomers can just play.",
  },
  {
    q: "Can I play with friends?",
    a: "Multiplayer is coming soon! We're launching with an incredible solo experience first, and group play (2-6 players) is in active development. When it arrives, you'll invite friends and the AI GM will manage the whole party.",
  },
  {
    q: "How long is a typical session?",
    a: "Solo downtime scenes take 5-10 minutes. Full adventure sessions run 30-60 minutes. Play on your schedule  -  and when multiplayer launches, group sessions will go as long as your party wants.",
  },
  {
    q: "Is it free?",
    a: "The Free tier gives you ~25 sessions/month with 1 character slot  -  enough to get hooked. Upgrade to Adventurer ($9.99/mo) for 3 characters, 3 campaigns, and 10x more sessions.",
  },
  {
    q: "What makes the AI GM good?",
    a: "StormQuill uses structured state management  -  the AI doesn't just generate text, it tracks your character, the world, NPC relationships, and faction politics. It narrates around real game mechanics, so the story stays coherent and consequences stick.",
  },
  {
    q: "Will my progress carry over?",
    a: "Everything carries over. Your characters, campaigns, world state, and achievements are yours regardless of tier.",
  },
  {
    q: "Is my data private?",
    a: "Your campaigns and character data are private by default. We don't train AI models on your stories. You can export your data anytime.",
  },
];

/* ------------------------------------------------------------------ */
/*  Component                                                          */
/* ------------------------------------------------------------------ */

const Index = () => {
  const scrollTo = (id: string) => {
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div className="flex flex-col">
      <SEO
        url="/"
        description="StormQuill is an AI-powered game master for tabletop RPG adventures. Create characters, explore worlds, and play epic campaigns — solo or with friends."
      />
      <OrganizationSchema />
      <WebSiteSchema />
      <FAQSchema faqs={faqs} />
      <SoftwareApplicationSchema />
      <SpeakableSchema url="/" cssSelectors={["h1", "[data-speakable]", ".faq-section"]} />

      {/* ─────────── 1. Hero ─────────── */}
      <section className="relative flex min-h-[88vh] items-center justify-center overflow-hidden bg-background px-4 py-20 md:py-0">
        {/* Hero photograph */}
        <img
          src={heroImage}
          alt="Fantasy adventurer standing before a vast, magical world"
          className="absolute inset-0 h-full w-full object-cover"
          loading="eager"
          fetchPriority="high"
          width={1344}
          height={756}
        />
        {/* Cinema vignette — darkens corners, focuses center */}
        <div
          aria-hidden
          className="absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse at center, transparent 30%, hsla(0, 0%, 0%, 0.55) 100%)",
          }}
        />
        {/* Bottom gradient fades cleanly into the next section — no haze */}
        <div
          aria-hidden
          className="absolute inset-x-0 bottom-0 h-40 bg-gradient-to-b from-transparent to-background"
        />

        {/* Hero content */}
        <div className="container relative z-10 text-center">
          <div className="mx-auto max-w-3xl">
            <img
              src={logoFull}
              alt="StormQuill"
              className="mx-auto mb-6 h-48 w-auto sm:h-60 md:h-72 lg:h-80 mix-blend-screen brightness-110 contrast-105"
              fetchPriority="high"
            />
            <h1 className="mb-5 font-display text-3xl font-bold leading-[1.1] tracking-wide text-primary drop-shadow-[0_2px_16px_rgba(0,0,0,0.95)] sm:text-4xl md:text-5xl lg:text-6xl">
              The AI Dungeon Master You've Been Waiting For
            </h1>
            <p className="mx-auto mb-8 max-w-xl text-base text-foreground drop-shadow-[0_2px_8px_rgba(0,0,0,0.95)] sm:text-lg md:mb-10">
              Real RPG mechanics. Persistent worlds. An AI GM that adapts to every decision.
              Solo or with your party — no scheduling nightmares.
            </p>

            <div className="mb-10 flex flex-col items-center gap-3 sm:flex-row sm:justify-center sm:gap-4">
              <Link to="/signup">
                <Button
                  size="lg"
                  className="px-8 font-display tracking-wider text-base bg-primary text-primary-foreground shadow-[0_0_32px_hsl(var(--primary)/0.5)] hover:bg-primary/90"
                >
                  Play Free
                  <ArrowRight className="ml-2 h-4 w-4" />
                </Button>
              </Link>
              <Button
                variant="ghost"
                size="lg"
                className="px-8 text-foreground/80 hover:text-foreground"
                onClick={() => scrollTo("how-it-works")}
              >
                See How It Works
              </Button>
            </div>

            <div className="mx-auto max-w-md">
              <WaitlistSignup />
            </div>
          </div>
        </div>
      </section>

      {/* ─────────── 2. How It Works ─────────── */}
      <section id="how-it-works" className="bg-background py-20 md:py-28">
        <div className="container px-5 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            <p className="mb-3 font-display text-xs font-semibold uppercase tracking-[0.2em] text-quill-gold">
              How It Works
            </p>
            <h2 className="mb-4 font-display text-3xl font-bold sm:text-4xl md:text-5xl">
              Three Steps. Zero Prep.
            </h2>
            <p className="text-base text-muted-foreground sm:text-lg">
              All adventure, none of the setup.
            </p>
          </div>

          <div className="relative mx-auto mt-14 grid max-w-5xl gap-12 sm:grid-cols-3 sm:gap-6 md:gap-10">
            {/* Connecting rule (tablet+) — solid line under the icon row */}
            <div
              aria-hidden
              className="absolute top-12 left-[16.6%] right-[16.6%] hidden h-px bg-gradient-to-r from-quill-gold/0 via-quill-gold/40 to-quill-gold/0 sm:block"
            />

            {steps.map((s) => (
              <div key={s.num} className="relative flex flex-col items-center text-center">
                <div className="relative z-10 mb-6 flex h-24 w-24 items-center justify-center rounded-full border border-quill-gold/40 bg-card shadow-[0_8px_32px_rgba(0,0,0,0.4),0_0_24px_hsl(var(--quill-gold)/0.12)]">
                  <span className="absolute -top-2 -right-2 flex h-7 w-7 items-center justify-center rounded-full bg-quill-gold font-display text-xs font-bold text-background">
                    {s.num}
                  </span>
                  <s.icon className="h-9 w-9 text-quill-gold" />
                </div>
                <h3 className="mb-2 font-display text-lg font-bold tracking-wide sm:text-xl">
                  {s.title}
                </h3>
                <p className="max-w-[280px] text-sm text-muted-foreground sm:text-base">
                  {s.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────────── 3. Feature Cards ─────────── */}
      <section id="features" className="bg-background py-20 md:py-28 border-t border-border/40">
        <div className="container px-5 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            <p className="mb-3 font-display text-xs font-semibold uppercase tracking-[0.2em] text-quill-gold">
              What You Get
            </p>
            <h2 className="mb-4 font-display text-3xl font-bold sm:text-4xl md:text-5xl">
              Everything You Need
            </h2>
            <p className="text-base text-muted-foreground sm:text-lg">
              Tools forged for <span className="text-quill-gold">legendary</span> storytelling.
            </p>
          </div>

          <div className="mx-auto mt-14 grid max-w-6xl gap-5 sm:grid-cols-2 lg:gap-6">
            {features.slice(0, 2).map((f) => (
              <FeatureCard key={f.title} {...f} />
            ))}
          </div>
          <div className="mx-auto mt-5 grid max-w-6xl gap-5 sm:grid-cols-2 lg:mt-6 lg:grid-cols-3 lg:gap-6">
            {features.slice(2).map((f) => (
              <FeatureCard key={f.title} {...f} />
            ))}
          </div>
        </div>
      </section>

      {/* ─────────── 4. A Day in StormQuill ─────────── */}
      <section className="bg-background py-20 md:py-28">
        <div className="container px-5 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            <p className="mb-3 font-display text-xs font-semibold uppercase tracking-[0.2em] text-quill-gold">
              Daily Rhythm
            </p>
            <h2 className="mb-4 font-display text-3xl font-bold sm:text-4xl md:text-5xl">
              A Day in StormQuill
            </h2>
            <p className="text-base text-muted-foreground sm:text-lg">
              Your character grows every day, not just on game night.
            </p>
          </div>

          <div className="relative mx-auto mt-14 max-w-2xl">
            {/* Timeline rail */}
            <div className="absolute left-7 top-2 bottom-2 w-px bg-gradient-to-b from-quill-gold/40 via-quill-gold/20 to-transparent sm:left-9" />

            <div className="space-y-8 sm:space-y-10">
              {timeline.map((t, i) => (
                <div key={i} className="relative flex items-start gap-5 sm:gap-7">
                  <div className="relative z-10 flex h-14 w-14 shrink-0 items-center justify-center rounded-full border border-quill-gold/40 bg-card text-2xl shadow-[0_8px_24px_rgba(0,0,0,0.4)] sm:h-[72px] sm:w-[72px] sm:text-3xl">
                    {t.emoji}
                  </div>
                  <div className="flex-1 pt-1">
                    <div className="mb-1 flex items-baseline gap-2">
                      <p className="font-display text-base font-bold text-quill-gold sm:text-lg">
                        {t.time}
                      </p>
                      <span className="text-xs font-medium uppercase tracking-wider text-muted-foreground/70">
                        {t.duration}
                      </span>
                    </div>
                    <p className="text-sm leading-relaxed text-foreground/85 sm:text-base">
                      {t.text}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ─────────── 5. Campaign Showcase ─────────── */}
      <section className="bg-background py-20 md:py-28 border-t border-border/40">
        <div className="container px-5 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            <p className="mb-3 font-display text-xs font-semibold uppercase tracking-[0.2em] text-quill-gold">
              The Library
            </p>
            <h2 className="mb-4 font-display text-3xl font-bold sm:text-4xl md:text-5xl">
              Choose Your Adventure
            </h2>
            <p className="text-base text-muted-foreground sm:text-lg">
              Five campaigns. Infinite outcomes.
            </p>
          </div>

          <div className="mx-auto mt-14 grid max-w-6xl gap-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
            {campaigns.map((c) => (
              <CampaignPoster key={c.title} {...c} />
            ))}
          </div>

          <p className="mt-10 text-center text-sm text-muted-foreground">
            New campaigns added regularly  -  we're always building new worlds for you to explore.
          </p>
        </div>
      </section>

      {/* ─────────── 6. Stats ─────────── */}
      <section className="bg-background py-20 md:py-28">
        <div className="container px-5 sm:px-6 text-center">
          <p className="mx-auto mb-12 max-w-2xl font-narrative text-base italic text-muted-foreground sm:text-lg md:mb-14">
            "Built by a tabletop RPG player who was tired of scheduling conflicts."
          </p>

          <div className="mx-auto grid max-w-4xl grid-cols-3 divide-x divide-border/40">
            {stats.map((s) => (
              <div key={s.label} className="flex flex-col items-center px-2 sm:px-4 md:px-6">
                <p className="font-display text-4xl font-bold text-quill-gold sm:text-5xl md:text-6xl">
                  {s.value}
                </p>
                <p className="mt-2 text-xs font-medium uppercase tracking-[0.15em] text-muted-foreground sm:text-sm">
                  {s.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─────────── 7. FAQ ─────────── */}
      <section className="bg-background py-20 md:py-28 faq-section border-t border-border/40">
        <div className="container px-5 sm:px-6">
          <div className="mx-auto max-w-2xl text-center">
            <p className="mb-3 font-display text-xs font-semibold uppercase tracking-[0.2em] text-quill-gold">
              Questions
            </p>
            <h2 className="mb-4 font-display text-3xl font-bold sm:text-4xl md:text-5xl">
              Frequently Asked
            </h2>
          </div>

          <Accordion type="single" collapsible className="mx-auto mt-12 max-w-3xl">
            {faqs.map((f, i) => (
              <AccordionItem
                key={i}
                value={`faq-${i}`}
                className="border-b border-border/40 last:border-b-0"
              >
                <AccordionTrigger className="py-5 text-left font-display text-base font-semibold tracking-wide hover:text-quill-gold sm:text-lg">
                  <span className="flex items-baseline gap-3">
                    <span className="font-display text-xs font-medium text-quill-gold/70 sm:text-sm">
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span>{f.q}</span>
                  </span>
                </AccordionTrigger>
                <AccordionContent className="pl-9 pr-4 pb-5 text-sm leading-relaxed text-muted-foreground sm:text-base">
                  {f.a}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </section>

      {/* ─────────── 8. Final CTA ─────────── */}
      <section className="relative overflow-hidden bg-background py-24 md:py-32">
        {/* Subtle radial spotlight */}
        <div
          aria-hidden
          className="absolute inset-0"
          style={{
            background:
              "radial-gradient(ellipse 50% 60% at 50% 50%, hsla(185, 95%, 49%, 0.12) 0%, transparent 70%)",
          }}
        />
        <div className="container relative z-10 px-5 sm:px-6 text-center">
          <h2 className="mx-auto mb-5 max-w-3xl font-display text-3xl font-bold leading-[1.15] sm:text-4xl md:text-6xl">
            <span className="block text-foreground">Your Campaign</span>
            <span className="block text-quill-gold">Starts Here</span>
          </h2>
          <p className="mx-auto mb-10 max-w-md text-base text-muted-foreground sm:text-lg md:mb-12">
            Create your character. Choose your campaign. Let the AI GM take it from there.
          </p>
          <Link to="/signup">
            <Button
              size="lg"
              className="px-10 font-display tracking-wider text-base bg-primary text-primary-foreground shadow-[0_0_40px_hsl(var(--primary)/0.4)] hover:bg-primary/90 sm:text-lg"
            >
              Play Free  -  No Credit Card
              <ArrowRight className="ml-2 h-5 w-5" />
            </Button>
          </Link>
        </div>
      </section>
    </div>
  );
};

/* ─────────── Feature Card ─────────── */

function FeatureCard({
  icon: Icon,
  title,
  description,
  tags,
  image,
  link,
}: {
  icon: React.ComponentType<{ className?: string }>;
  title: string;
  description: string;
  tags: string;
  image: string | null;
  link?: string;
}) {
  return (
    <div className="group flex h-full flex-col overflow-hidden rounded-lg border border-white/[0.06] bg-card shadow-[0_8px_32px_rgba(0,0,0,0.4)] transition-all hover:-translate-y-0.5 hover:border-quill-gold/30 hover:shadow-[0_12px_40px_rgba(0,0,0,0.5),0_0_24px_hsl(var(--quill-gold)/0.12)]">
      {image && (
        <div className="relative aspect-[16/9] overflow-hidden">
          <img
            src={image}
            alt=""
            className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
            loading="lazy"
          />
          <div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-card via-card/40 to-transparent" />
        </div>
      )}
      <div className="flex flex-1 flex-col p-5 sm:p-6">
        <Icon className="mb-3 h-7 w-7 text-quill-gold transition-colors group-hover:text-bright-gold" />
        <h3 className="mb-3 font-display text-lg font-bold leading-tight tracking-wide sm:text-xl">
          {title}
        </h3>
        <p className="mb-4 text-sm leading-relaxed text-muted-foreground sm:text-base">
          {description}
        </p>
        <p className="mt-auto text-xs text-muted-foreground/60">{tags}</p>
        {link && (
          <Link
            to={link}
            className="mt-4 inline-flex items-center gap-1.5 font-display text-xs font-semibold uppercase tracking-wider text-primary transition-colors hover:text-cyan-glow sm:text-sm"
          >
            Learn More
            <ArrowRight className="h-3 w-3 transition-transform group-hover:translate-x-1" />
          </Link>
        )}
      </div>
    </div>
  );
}

/* ─────────── Campaign Poster ─────────── */

function CampaignPoster({
  title,
  hook,
  tone,
  sessions,
  icon: Icon,
  image,
}: {
  title: string;
  hook: string;
  tone: string;
  sessions: string;
  icon: React.ComponentType<{ className?: string }>;
  image: string;
}) {
  return (
    <div className="group relative aspect-[16/10] w-full overflow-hidden rounded-lg border border-white/[0.06] bg-card shadow-[0_8px_32px_rgba(0,0,0,0.4)] transition-all hover:-translate-y-0.5 hover:border-quill-gold/30 hover:shadow-[0_12px_40px_rgba(0,0,0,0.5),0_0_24px_hsl(var(--quill-gold)/0.15)]">
      <img
        src={image}
        alt=""
        className="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-110"
        loading="lazy"
      />
      <div className="absolute inset-x-0 bottom-0 h-3/4 bg-gradient-to-t from-background via-background/80 to-transparent" />

      {/* Tone badge — top-right */}
      <div
        className={`absolute right-3 top-3 rounded-full border px-2.5 py-0.5 font-display text-xs font-bold uppercase tracking-wider backdrop-blur-md ${TONE_TINT[tone] ?? ""}`}
      >
        {tone}
      </div>

      <div className="absolute inset-x-0 bottom-0 p-5">
        <div className="mb-2 flex items-center gap-2">
          <Icon className="h-4 w-4 text-quill-gold" />
          <h3 className="font-display text-base font-bold leading-tight text-foreground sm:text-lg">
            {title}
          </h3>
        </div>
        <p className="mb-2 text-xs leading-relaxed text-foreground/85 sm:text-sm">{hook}</p>
        <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground/70">
          {sessions} sessions
        </p>
      </div>
    </div>
  );
}

export default Index;