com.gregkilmer.www/src/pages/interests/index.astro

---
/**
 * interests/index.astro — Interests Hub
 * ---------------------------------------------------------------------------
 * The "fun wing" landing page. A warm grid of cards linking into each interest
 * sub-page, using the spec's taglines. Sets surface="interest" so the whole
 * page reads warm (cream/amber) regardless of the global light/dark toggle.
 */
import BaseLayout from "@layouts/BaseLayout.astro";
import Reveal from "@components/motion/Reveal.astro";
import Icon from "@components/Icon.astro";
import SectionHeader from "@components/layout/SectionHeader.astro";
import AnimatedBackground from "@components/hero/AnimatedBackground.tsx";
import SacredGeometry from "@components/mystic/SacredGeometry.astro";
import ConstellationField from "@components/mystic/ConstellationField.tsx";

const interests = [
  {
    href: "/interests/ttrpgs",
    icon: "dice-multiple",
    title: "TTRPGs & Tabletop",
    tagline: "Have dice, will roll.",
    blurb:
      "Card Games, Board Games, and Long-running D&D and Daggerheart campaigns on Foundry VTT. Worldbuilding, NPC relationships, and player-driven narrative.",
    image: "/images/ttrpg-dice.jpg",
    alt: "Boardgame Shelf",
  },
  {
    href: "/interests/gaming",
    icon: "sony-playstation",
    title: "Gaming",
    tagline: "We do not talk about my backlog.",
    blurb:
      "PlayStation 5, Nintendo Switch 2, and a politely out-of-hand Steam library. RPGs, strategy, and anything with a deeply layered world.",
    image: "/images/gaming-setup.jpg",
    alt: "Gaming setup desk",
  },
  {
    href: "/interests/reading",
    icon: "book-open-page-variant",
    title: "Reading & Media",
    tagline: "Perpetually three books ahead of my to-read list.",
    blurb:
      "The Cosmere, Dune, the Pendergast saga, and Throne of Glass. Plus light novels, manga, manhwa, anime, and film.",
    image: "/images/fantasy-books.jpg",
    alt: "Fantasy bookshelf",
  },
  {
    href: "/interests/making",
    icon: "palette",
    title: "Making & Creating",
    tagline:
      "If it involves really nice cardboard or mastering a new craft, I am in.",
    blurb:
      "Resin dice in a pressure pot, fun and functional prints on the P1s, custom TCG proxies and decks. Passion and utility.",
    image: "/images/making-resin.jpg",
    alt: "Polyhedral dice on a dark bag",
  } /*
  {
    href: '/interests/pokemon',
    icon: 'pokeball',
    title: 'Pokémon',
    tagline: 'Metagross supremacy. This is not up for debate.',
    blurb: 'A lifelong obsession from Red and Blue to modern competitive. Steel/Psychic, beautiful design, absolutely devastating in battle.',
    image: '/images/pokemon-cards.jpg',
    alt: 'Trading card collection',
  },*/,
];
---

<BaseLayout
  surface="interest"
  title="Interests"
  description="The fun wing: tabletop RPGs, gaming, reading, resin dice and 3D printing, and Pokémon. Where Greg's passions live as stories and collections."
>
  <!-- Hero -->
  <section class="relative min-h-[60vh] overflow-hidden pt-28 sm:pt-32">
    {
      /* Full animated Milky Way field + stars, matching the Home hero treatment. */
    }
    <AnimatedBackground client:idle className="vt-sky" />
    <div
      class="container-prose relative z-10 flex flex-col items-start gap-6 py-16"
    >
      <Reveal>
        <SectionHeader
          tone="hero"
          kicker="The personal wing"
          icon="heart"
          title="Interests"
          subtitle="Warmer, more visual, personality-driven. Not a list of hobbies but a collection of stories."
        />
      </Reveal>
    </div>
  </section>

  <!-- Interest grid -->
  <section class="relative overflow-hidden py-12 sm:py-16">
    <ConstellationField client:idle className="opacity-45" tint="teal" />
    <SacredGeometry
      figure="metatron"
      class="pointer-events-none absolute -left-48 bottom-0 z-0 h-[38rem] w-[38rem]"
      style="color: var(--color-accent); opacity:.07;"
    />
    <div class="container-prose relative z-10">
      <div class="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
        {
          interests.map((item, i) => (
            <Reveal delay={i * 80}>
              <a
                href={item.href}
                class="card card-interactive group flex h-full flex-col gap-4 overflow-hidden p-0"
              >
                <div class="aspect-[16/10] w-full overflow-hidden">
                  <img
                    src={item.image}
                    alt={item.alt}
                    loading="lazy"
                    decoding="async"
                    class="h-full w-full object-cover transition-transform duration-700 group-hover:scale-105"
                  />
                </div>
                <div class="flex flex-col gap-3 px-5 pb-5">
                  <div class="flex items-center justify-between">
                    <span
                      class="inline-flex h-12 w-12 items-center justify-center rounded-xl"
                      style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
                      aria-hidden="true"
                    >
                      <Icon name={item.icon} class="h-6 w-6" />
                    </span>
                    <Icon
                      name="arrow-right"
                      class="h-5 w-5 transition-transform group-hover:translate-x-1"
                      style="color: var(--color-accent);"
                    />
                  </div>
                  <div class="flex flex-col gap-2">
                    <h3 class="font-sans" style="color: var(--color-text);">
                      {item.title}
                    </h3>
                    <p
                      class="font-sans text-sm italic"
                      style="color: var(--color-secondary);"
                    >
                      {item.tagline}
                    </p>
                  </div>
                  <p
                    class="grow text-sm leading-relaxed"
                    style="color: var(--color-text-muted);"
                  >
                    {item.blurb}
                  </p>
                </div>
              </a>
            </Reveal>
          ))
        }

        {/* Cross-link back to professional wing */}
        <Reveal delay={interests.length * 80}>
          <a
            href="/professional"
            class="card card-interactive group flex h-full flex-col justify-center gap-2 border-dashed p-5 text-center"
            style="border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);"
          >
            <Icon
              name="briefcase"
              class="mx-auto h-7 w-7"
              style="color: var(--color-accent);"
            />
            <p
              class="font-sans font-semibold"
              style="color: var(--color-text);"
            >
              The other wing
            </p>
            <p class="text-sm" style="color: var(--color-text-muted);">
              See where curiosity meets the day job.
            </p>
          </a>
        </Reveal>
      </div>
    </div>
  </section>
</BaseLayout>