---
/**
 * index.astro — Home (Landing)
 * ---------------------------------------------------------------------------
 * First impression page. Full-width hero with the animated background, the spec
 * headline/subheadline/intro paragraph, and the two CTA buttons. Below the fold
 * is the 3-column snapshot grid (Professional, Tabletop, Making) plus the wider
 * Reading & Media strip. All copy is verbatim from the spec.
 *
 * Emojis from the spec table are rendered as mdi icons (no emojis per spec).
 */
import BaseLayout from "@layouts/BaseLayout.astro";
import Reveal from "@components/motion/Reveal.astro";
import AnimatedBackground from "@components/hero/AnimatedBackground.tsx";
import Icon from "@components/Icon.astro";
import SectionHeader from "@components/layout/SectionHeader.astro";
import CelestialImage from "@components/mystic/CelestialImage.astro";
import AlchemicalDivider from "@components/mystic/AlchemicalDivider.astro";
import SacredGeometry from "@components/mystic/SacredGeometry.astro";
import ConstellationField from "@components/mystic/ConstellationField.tsx";

// Snapshot grid content from the spec, with spec emojis mapped to mdi icons.
// Each card now carries a vibe-matched stock image (swap for real photos later).
const cards = [
  {
    icon: "briefcase",
    title: "Professional",
    copy: "From SAP-adjacent cloud to full-stack mobile, a decade of building software that businesses actually use.",
    href: "/professional",
    image: "/images/pro-workspace.jpg",
    alt: "Developer workspace with code on screen",
  },
  {
    icon: "dice-multiple",
    title: "Tabletop",
    copy: "Currently obsessed with Spirit Island, Magic: The Gathering, and running campaigns in Foundry VTT. Always planning more; always rolling dice.",
    href: "/interests/ttrpgs",
    image: "/images/ttrpg-dice.jpg",
    alt: "Polyhedral dice on a dark surface",
  },
  {
    icon: "palette",
    title: "Making",
    copy: "Resin dice, 3D prints, TCG proxies, and whatever else catches my eye. If it involves really nice cardboard or mastering a new craft, I am in.",
    href: "/interests/making",
    image: "/images/making-resin.jpg",
    alt: "Resin crafting in progress",
  },
];
---

<BaseLayout>
  <!-- ===================== HERO ===================== -->
  <section
    class="vt-hero-sky relative flex min-h-[88vh] items-center overflow-hidden pt-16"
  >
    <AnimatedBackground client:idle className="vt-sky" />

    <div
      class="container-prose relative z-10 flex flex-col items-start gap-8 py-20"
    >
      <div class="flex w-full flex-col gap-10 lg:flex-row lg:items-center">
        <Reveal as="div" class="max-w-2xl grow">
          <span
            class="mb-5 inline-flex items-center gap-2 rounded-full border px-3 py-1 font-mono text-xs uppercase tracking-[0.18em]"
            style="border-color: var(--color-border); color: var(--accent-contrast); background: color-mix(in srgb, var(--color-surface-raised) 75%, transparent);"
          >
            <span
              class="h-2 w-2 rounded-full animate-pulse-glow"
              style="background: var(--color-accent);"></span>
            Developer. Maker. Storyteller.
          </span>

          <h1 class="text-balance" style="color: var(--text);">Greg Kilmer</h1>

          <p
            class="mt-3 font-sans text-xl font-medium sm:text-2xl"
            style="color: var(--accent);"
          >
            Software Developer &middot; Maker &middot; Tabletop Gamemaster
          </p>

          <blockquote
            class="mt-7 max-w-2xl border-l-2 pl-5 text-lg leading-relaxed"
            style="border-color: var(--color-accent); color: var(--text-muted);"
          >
            I build things with code during the day and with resin, plastic, and
            imagination at night. I lead cloud and mobile development at
            Implico, run D&D campaigns that span years, and fill my shelves with
            Brandon Sanderson novels, custom dice, and board games. This is the
            place where all of those worlds meet.
          </blockquote>

          <div class="mt-9 flex flex-wrap gap-4">
            <a href="/professional" class="btn btn-primary">
              See My Work
              <Icon name="arrow-right" class="h-5 w-5" />
            </a>
            <a href="/interests" class="btn btn-secondary">
              Explore My Interests
              <Icon name="compass-outline" class="h-5 w-5" />
            </a>
          </div>
        </Reveal>

        {/* Hero portrait — framed in celestial ornament. */}
        <Reveal as="div" delay={120} class="w-full max-w-sm shrink-0 lg:w-80">
          <CelestialImage
            src="/images/hero-portrait.jpg"
            alt="Greg at his desk"
            aspect="4/5"
          />
        </Reveal>
      </div>
    </div>

    <!-- Scroll cue -->
    <div
      class="pointer-events-none absolute bottom-6 left-1/2 -translate-x-1/2 animate-float"
      style="color: var(--color-text-subtle);"
      aria-hidden="true"
    >
      <Icon name="chevron-down" class="h-7 w-7" />
    </div>
  </section>

  <!-- ===================== SNAPSHOT GRID ===================== -->
  <section class="relative overflow-hidden py-20 sm:py-28">
    {
      /* Slow-rotating constellation field behind the section — a slice of sky. */
    }
    <ConstellationField client:idle className="opacity-60" />
    {/* Faint sacred-geometry ornament behind the section. */}
    <SacredGeometry
      figure="flower"
      class="pointer-events-none absolute -right-40 top-10 z-0 h-[40rem] w-[40rem]"
      style="color: var(--color-violet); opacity:.08;"
    />
    <div class="container-prose relative z-10 flex flex-col gap-12">
      <Reveal>
        <SectionHeader
          kicker="The two wings"
          icon="home-heart"
          title="A snapshot"
          subtitle="One house, two wings. Polished and precise on the professional side; warm and inviting on the personal side."
        />
      </Reveal>

      <div class="grid gap-5 md:grid-cols-3">
        {
          cards.map((card, i) => (
            <Reveal delay={i * 90}>
              <a
                href={card.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={card.image}
                    alt={card.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-4 px-5 pb-5">
                  <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={card.icon} class="h-6 w-6" />
                  </span>
                  <h3 class="font-sans" style="color: var(--color-text);">
                    {card.title}
                  </h3>
                  <p
                    class="grow text-sm leading-relaxed"
                    style="color: var(--color-text-muted);"
                  >
                    {card.copy}
                  </p>
                  <span
                    class="mt-1 inline-flex items-center gap-1 font-sans text-sm font-semibold transition-transform group-hover:translate-x-1"
                    style="color: var(--color-accent);"
                  >
                    Learn more
                    <Icon name="arrow-right" class="h-4 w-4" />
                  </span>
                </div>
              </a>
            </Reveal>
          ))
        }
      </div>

      <Reveal>
        <AlchemicalDivider
          class="mx-auto h-6 w-full max-w-sm"
          style="color: var(--color-accent);"
        />
      </Reveal>

      {/* Wider strip: Reading & Media */}
      <Reveal delay={120}>
        <a
          href="/interests/reading"
          class="card card-interactive group flex flex-col gap-4 overflow-hidden p-0 sm:flex-row sm:items-center sm:justify-between"
        >
          <span class="flex items-center gap-4">
            <span
              class="hidden aspect-square w-32 shrink-0 overflow-hidden sm:block"
            >
              <img
                src="/images/fantasy-books.jpg"
                alt="Fantasy bookshelf"
                loading="lazy"
                decoding="async"
                class="h-full w-full object-cover"
              />
            </span>
            <span class="flex flex-col gap-1 px-5 py-4 sm:px-0 sm:py-0">
              <span
                class="font-mono text-xs uppercase tracking-[0.18em]"
                style="color: var(--color-text-subtle);"
              >
                Reading &amp; Media
              </span>
              <span
                class="font-sans text-lg font-semibold"
                style="color: var(--color-text);"
              >
                Deep in the Cosmere, catching up on anime, and always three
                books ahead on my to-read list.
              </span>
            </span>
          </span>
          <Icon
            name="arrow-right"
            class="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1 sm:ml-4"
            style="color: var(--color-accent);"
          />
        </a>
      </Reveal>
    </div>
  </section>
</BaseLayout>