---
/**
 * /store — Storefront
 * ---------------------------------------------------------------------------
 * The store home: hero on the animated field, intro, the two product lines,
 * live availability (slots) from store-availability.json, the disclaimer /
 * requirements block, and a CTA to the order page.
 *
 * Reuses the main site's aesthetic (InterestHero-style hero, Reveal, cards)
 * but is rendered through StoreLayout so it gets the store-only nav and
 * noindex by default. No links back to the main site.
 */
import StoreLayout from '@layouts/StoreLayout.astro';
import Reveal from '@components/motion/Reveal.astro';
import SectionHeader from '@components/layout/SectionHeader.astro';
import AnimatedBackground from '@components/hero/AnimatedBackground.tsx';
import StarBurst from '@components/mystic/StarBurst.astro';
import Icon from '@components/Icon.astro';
import ProductTile from '@components/store/ProductTile.astro';
import SlotMeter from '@components/store/SlotMeter.astro';
import RequirementList from '@components/store/RequirementList.astro';
import { cardProduct, deckBoxProduct, requirements } from '@data/store-products';
import { storeAvailability } from '@data/store-availability';

const av = storeAvailability;
const orderHref = '/store/order';
---

<StoreLayout
  title="Store — Proxy MTG Cards & 3D-Printed Deck Boxes"
>
  {/* --- Hero --- */}
  <section class="relative overflow-hidden pb-8 pt-28 sm:pt-32">
    <AnimatedBackground client:idle className="vt-sky" />

    <div class="container-prose relative z-10 grid items-center gap-6 py-6 sm:grid-cols-[1.4fr_1fr]">
      <div class="flex flex-col items-start gap-4">
        <Reveal>
          <span
            class="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.18em]"
            style="color: var(--color-accent);"
          >
            <Icon name="store" class="h-4 w-4" />
            store.gregkilmer.com
          </span>
        </Reveal>

        <Reveal delay={60}>
          <span
            class="inline-flex h-12 w-12 items-center justify-center rounded-xl"
            style="background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent);"
            aria-hidden="true"
          >
            <Icon name="cards" class="h-6 w-6" />
          </span>
        </Reveal>

        <Reveal delay={100}>
          <h2
            class="font-sans font-bold tracking-tight"
            style="color: var(--color-cream); font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem); line-height: 1.15;"
          >
            Proxy MTG cards &amp; 3D-printed deck boxes
          </h2>
        </Reveal>

        <Reveal delay={140}>
          <p
            class="max-w-xl border-l-2 pl-4 font-sans text-base italic sm:text-lg"
            style="border-color: var(--color-accent); color: var(--color-cream); opacity: 0.92;"
          >
            Clearly-marked proxies for casual play, and matching 3D-printed storage &amp;
            counters. Hand-made in small batches.
          </p>
        </Reveal>

        <Reveal delay={180}>
          <a href={orderHref} class="btn btn-primary mt-2">
            <Icon name="clipboard-list" class="h-5 w-5" />
            Start an order request
          </a>
        </Reveal>
      </div>

      <Reveal delay={80} class="w-full">
        <figure
          class="relative w-full overflow-hidden rounded-2xl border"
          style="border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);"
        >
          <img
            src="/images/proxies.jpg"
            alt="Example printed proxy MTG cards"
            loading="lazy"
            decoding="async"
            class="aspect-[4/3] w-full object-cover"
          />
          <StarBurst
            class="pointer-events-none absolute left-3 top-3 h-5 w-5 drop-shadow-[0_0_6px_color-mix(in_srgb,var(--color-accent)_60%,transparent)]"
            style="color: var(--color-accent);"
          />
        </figure>
      </Reveal>
    </div>
  </section>

  <div class="container-prose flex flex-col gap-20 py-12 sm:py-16">
    {/* --- Intro + limited capacity banner --- */}
    <section class="flex flex-col gap-6">
      <Reveal>
        <SectionHeader kicker="Welcome" icon="store" title="A small workshop, not a factory" />
      </Reveal>
      <Reveal delay={60}>
        <p class="max-w-2xl text-lg leading-relaxed" style="color: var(--color-text-muted);">
          {av.maxNote}
        </p>
      </Reveal>
      <Reveal delay={100}>
        <div
          class="flex flex-col gap-3 rounded-xl border p-5 sm:flex-row sm:items-center sm:justify-between"
          style="border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent);"
        >
          <div class="flex items-center gap-3">
            <Icon name="clock-outline" class="h-6 w-6 shrink-0" style="color: var(--color-accent);" />
            <span class="text-sm sm:text-base" style="color: var(--color-text);">{av.turnaround}</span>
          </div>
          <span class="pill" style={av.ordersOpen ? undefined : 'background: color-mix(in srgb, #e55 15%, transparent); border-color: color-mix(in srgb, #e55 40%, transparent);'}>
            {av.ordersOpen ? 'Orders open' : 'Orders currently closed'}
          </span>
        </div>
      </Reveal>
    </section>

    {/* --- Product lines --- */}
    <section class="flex flex-col gap-6">
      <Reveal>
        <SectionHeader kicker="Products" icon="cards-outline" title="What I make" />
      </Reveal>
      <div class="grid gap-5 sm:grid-cols-2">
        <Reveal delay={60}>
          <ProductTile product={cardProduct} href="/store/cards" />
        </Reveal>
        <Reveal delay={120}>
          <ProductTile product={deckBoxProduct} href="/store/deck-boxes" />
        </Reveal>
      </div>
    </section>

    {/* --- Live availability --- */}
    <section class="flex flex-col gap-6">
      <Reveal>
        <SectionHeader kicker="Availability" icon="gauge" title="Current order slots" />
      </Reveal>
      <Reveal delay={60}>
        <p class="max-w-2xl text-base" style="color: var(--color-text-muted);">
          I can only take so many requests at a time. These update as I open and finish orders.
          Last updated {av.lastUpdated}.
        </p>
      </Reveal>
      <Reveal delay={100}>
        <div class="grid gap-4 sm:grid-cols-2">
          <SlotMeter
            label="Card orders"
            icon="cards-playing"
            open={av.slots.cards.open}
            total={av.slots.cards.total}
          />
          <SlotMeter
            label="3D-print slots"
            icon="printer-3d-nozzle"
            open={av.slots.deckBoxes.open}
            total={av.slots.deckBoxes.total}
          />
        </div>
      </Reveal>
    </section>

    {/* --- Requirements / disclaimer --- */}
    <section class="flex flex-col gap-6">
      <Reveal>
        <SectionHeader kicker="Before you order" icon="clipboard-check" title="Requirements &amp; policies" />
      </Reveal>
      <Reveal delay={60}>
        <RequirementList items={requirements} />
      </Reveal>
    </section>

    {/* --- CTA --- */}
    <section class="flex flex-col items-center gap-4 rounded-2xl border p-8 text-center" style="border-color: var(--color-border); background: var(--color-surface-raised);">
      <Reveal>
        <h3 class="font-sans text-2xl font-bold" style="color: var(--color-text);">Ready to put in a request?</h3>
      </Reveal>
      <Reveal delay={60}>
        <p class="max-w-lg text-sm" style="color: var(--color-text-muted);">
          The order form collects your request and emails it to me. No payment is taken through
          the site. {av.ordersOpen ? '' : 'Orders are currently closed — check back soon.'}
        </p>
      </Reveal>
      <Reveal delay={100}>
        <a href={orderHref} class="btn btn-primary">
          <Icon name="clipboard-list" class="h-5 w-5" />
          Go to the order page
        </a>
      </Reveal>
    </section>
  </div>
</StoreLayout>