// site/pages.jsx — all pages, each one a function. The router in App.jsx
// selects which one to render based on route.

// ── TAROT CREDIT TOOLTIP ─────────────────────────────────────────
// Wraps a tarot card image and shows a styled attribution caption
// on hover. Fades in from below; dismisses on mouse-leave.
const TAROT_CREDIT_TEXT = 'From the Aquarian Tarot by David Palladini © 1970 US Games Systems Inc';

function TarotCredit({ children }) {
  const [show, setShow] = React.useState(false);
  return (
    <div
      style={{ position: 'relative', display: 'inline-block', width: '100%' }}
      onMouseEnter={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      {children}
      <div aria-hidden="true" style={{
        position: 'absolute',
        bottom: 16, left: 16, right: 16,
        background: 'var(--bg-elevated)',
        border: '1px solid var(--line-medium)',
        borderRadius: 'var(--r-xs)',
        padding: '7px 12px',
        fontFamily: 'var(--font-mono)',
        fontSize: 10,
        letterSpacing: '0.08em',
        textTransform: 'uppercase',
        color: 'var(--fg-2)',
        textAlign: 'center',
        pointerEvents: 'none',
        boxShadow: 'var(--shadow-2)',
        opacity: show ? 1 : 0,
        transform: show ? 'translateY(0)' : 'translateY(5px)',
        transition: 'opacity 180ms ease, transform 180ms ease',
      }}>
        {TAROT_CREDIT_TEXT}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// ALTAR — The home. Three hero variants the Tweaks panel can swap.
// ═══════════════════════════════════════════════════════════════
function AltarPage({ tweaks, route }) {
  const featured = KT.workings.slice(0, 3);

  // mobile scroll-down arrow — fades out once user starts scrolling
  const [arrowVisible, setArrowVisible] = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => setArrowVisible(window.scrollY < 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <PageFade routeKey="altar">
      {/* HERO — chosen by tweaks.hero */}
      {tweaks.hero === 'statement' && <HeroStatement />}
      {tweaks.hero === 'tarot' && <HeroTarot featured={featured[0]} />}
      {tweaks.hero === 'index' && <HeroIndex />}
      {tweaks.hero === 'vellum' && <HeroVellum />}

      {/* FEATURED WORKINGS — three tarot cards */}
      <div id="kt-work-section" className="kt-galaxy-bg"><section style={pageSection}>
        <SectionHead
            eyebrow="A collection of recent projects"
            title="The Work"
            action={<Btn variant="secondary" size="sm" href="#/work">See All →</Btn>} />
        
        <div style={{
            display: 'grid', gap: 24,
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))'
          }}>
          {featured.map((w) =>
            tweaks.cardStyle === 'editorial' ? <EditorialCard key={w.id} working={w} /> :
            tweaks.cardStyle === 'list' ? <ListRow key={w.id} working={w} /> :
            <TarotCard key={w.id} working={w} flippable />
            )}
        </div>
      </section></div>

      {/* PRACTITIONER STRIP — sparse about teaser */}
      <section style={{ ...pageSection, paddingTop: 32 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)',
          gap: 48, alignItems: 'flex-start'
        }} className="kt-grid-stack">
          <Eyebrow>About the Designer</Eyebrow>
          <div>
            <p className="oma-p" style={{
              fontSize: 'clamp(20px, 2.4vw, 26px)', lineHeight: 1.45,
              color: 'var(--fg-1)', maxWidth: 680, margin: 0
            }}>UX designer and product expert based in the Philadelphia area. I love my cat, my dog, old movies, and spooky stuff like tarot.


            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn variant="secondary" href="#/designer">Read More</Btn>
              <Btn variant="secondary" href="#/contact">Contact Me</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY PREVIEW — three tenets */}
      <div className="kt-galaxy-bg"><section style={pageSection}>
        <SectionHead
            eyebrow="On the approach"
            title="The Philosophy"
            action={<Btn variant="secondary" size="sm" href="#/philosophy">Read All →</Btn>} />
        
        <div style={{
            display: 'grid', gap: 32,
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            borderTop: '1px solid var(--line-medium)',
            paddingTop: 32
          }}>
          {KT.tenets.slice(0, 3).map((t) => <TenetCardCompact key={t.id} tenet={t} />)}
        </div>
      </section></div>

      {/* ── mobile scroll-down arrow — fixed to viewport bottom ── */}
      <button
        className="kt-mobile-only"
        onClick={() => document.getElementById('kt-work-section')?.scrollIntoView({ behavior: 'smooth' })}
        aria-label="Scroll to work"
        style={{
          position: 'fixed', bottom: 28, right: 20,
          zIndex: 40,
          width: 44, height: 44, borderRadius: '50%',
          background: 'var(--indigo-300)',
          border: 'none',
          color: 'var(--bone)',
          cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 4px 16px rgba(0,0,0,0.35)',
          animation: 'kt-bounce 2s ease-in-out infinite',
          opacity: arrowVisible ? 1 : 0,
          pointerEvents: arrowVisible ? 'auto' : 'none',
          transition: 'opacity 300ms ease',
        }}>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <line x1="8" y1="2" x2="8" y2="13" />
          <polyline points="4,9 8,13 12,9" />
        </svg>
      </button>
    </PageFade>);

}

// ── HERO: THE STATEMENT — big wordmark + manifesto ─────────────
function HeroStatement() {
  return (
    <section style={{
      ...pageSection,
      paddingTop: 'clamp(56px, 9vw, 120px)',
      paddingBottom: 'clamp(56px, 9vw, 96px)'
    }}>
      <Eyebrow style={{ marginBottom: 24 }}>I · The Altar</Eyebrow>
      <h1 style={{
        margin: 0,
        fontFamily: '"Ohno Blazeface 72", var(--font-display)',
        fontSize: 'clamp(64px, 13vw, 180px)',
        lineHeight: 0.88, letterSpacing: '0.01em',
        textTransform: 'uppercase', color: 'var(--fg-1)',
        textWrap: 'balance'
      }}>
        Katy<br />Towell
      </h1>
      <div style={{
        marginTop: 32, display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)',
        gap: 48
      }} className="kt-grid-stack">
        <div>
          <Eyebrow style={{ marginBottom: 10 }}>The Practitioner</Eyebrow>
          <div style={{
            fontFamily: '"Ohno Blazeface 18", var(--font-display)',
            fontSize: 22, lineHeight: 1.15, letterSpacing: '0.02em',
            textTransform: 'uppercase', color: 'var(--fg-2)'
          }}>
            Designer of Interfaces<br />
            Product · UX · Design Systems
          </div>
        </div>
        <div>
          <p className="oma-p" style={{
            fontSize: 'clamp(16px, 1.5vw, 19px)', lineHeight: 1.6,
            color: 'var(--fg-2)', margin: 0, maxWidth: 520
          }}>
            {KT.profile.manifesto}
          </p>
          <div style={{ marginTop: 24, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn href="#/work">Begin a Working <span style={{ fontFamily: 'var(--font-mono)' }}>→</span></Btn>
            <Btn variant="secondary" href="#/designer">On the Craft</Btn>
          </div>
        </div>
      </div>
    </section>);

}

// ── HERO: THE TAROT — featured working as a card, name beside ──
function HeroTarot({ featured }) {
  return (
    <section style={{
      ...pageSection,
      paddingTop: 'clamp(40px, 6vw, 80px)',
      paddingBottom: 'clamp(56px, 7vw, 80px)'
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)',
        gap: 64, alignItems: 'center'
      }} className="kt-grid-stack">
        <div>
          <Eyebrow style={{ marginBottom: 18 }}>I · The Altar</Eyebrow>
          <h1 style={{
            margin: 0,
            fontFamily: '"Ohno Blazeface 60", var(--font-display)',
            fontSize: 'clamp(48px, 8vw, 96px)',
            lineHeight: 0.92, letterSpacing: '0.01em',
            textTransform: 'uppercase', color: 'var(--fg-1)',
            textWrap: 'balance'
          }}>
            Katy Towell
          </h1>
          <div style={{
            marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 13,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: 'var(--moss)'
          }}>
            Designer of Interfaces · MMXI–MMXXV
          </div>
          <p className="oma-p" style={{
            marginTop: 28, fontSize: 'clamp(17px, 1.4vw, 20px)',
            lineHeight: 1.55, color: 'var(--fg-2)', maxWidth: 480
          }}>
            {KT.profile.manifesto}
          </p>
          <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn href="#/work">See the Workings <span style={{ fontFamily: 'var(--font-mono)' }}>→</span></Btn>
            <Btn variant="secondary" href="#/contact">Send Word</Btn>
          </div>
        </div>
        <div style={{ maxWidth: 380, justifySelf: 'end' }} className="kt-hide-on-stack-half">
          <TarotCard working={featured} />
        </div>
      </div>
    </section>);

}

// ── HERO: THE INDEX — no chrome, all workings as a list ────────
function HeroIndex() {
  return (
    <section style={{
      ...pageSection,
      paddingTop: 'clamp(40px, 6vw, 80px)',
      paddingBottom: 'clamp(40px, 6vw, 60px)'
    }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 32, paddingBottom: 16,
        borderBottom: '1px solid var(--line-strong)'
      }}>
        <Eyebrow>I · The Altar — An Index of Workings</Eyebrow>
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.10em', color: 'var(--fg-3)'
        }}>MMXI — MMXXV</span>
      </div>
      <div>
        {KT.workings.map((w) => <ListRow key={w.id} working={w} />)}
      </div>
      <div style={{
        marginTop: 40, display: 'flex',
        justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 16
      }}>
        <div style={{
          fontFamily: '"Ohno Blazeface 24", var(--font-display)',
          fontSize: 'clamp(24px, 3vw, 36px)', textTransform: 'uppercase',
          letterSpacing: '0.02em', color: 'var(--fg-1)'
        }}>
          Katy Towell — Designer of Interfaces
        </div>
        <Btn href="#/contact">Send Word</Btn>
      </div>
    </section>);

}

// ── HERO: THE VELLUM — parchment plate, intimate hand-written ──
function HeroVellum() {
  return (
    <section style={{
      ...pageSection,
      paddingTop: 'clamp(40px, 6vw, 64px)',
      paddingBottom: 'clamp(40px, 6vw, 64px)'
    }}>
      <div data-theme="light" style={{
        background: 'var(--bone)', color: 'var(--ink-100)',
        borderRadius: 'var(--r-md)',
        padding: 'clamp(40px, 5vw, 72px)',
        boxShadow: 'var(--shadow-2)',
        border: '1px solid var(--line-medium)',
        position: 'relative', overflow: 'hidden'
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.25fr) minmax(0, 1fr)',
          gap: 'clamp(32px, 5vw, 72px)',
          alignItems: 'center'
        }} className="kt-grid-stack">
          {/* ── LEFT: copy ─────────────────────────────────────── */}
          <div>
            <Eyebrow style={{ color: '#7D6E55', marginBottom: 24 }}>
              A note from the practitioner
            </Eyebrow>
            <h1 style={{
              margin: 0, color: 'var(--ink-100)',
              fontFamily: '"Ohno Blazeface 60", var(--font-display)',
              fontSize: 'clamp(48px, 6.6vw, 80px)',
              lineHeight: 0.95, letterSpacing: '0.01em',
              textTransform: 'uppercase', textWrap: 'balance'
            }}>
              Katy Towell
            </h1>
            <div style={{
              marginTop: 12, color: '#7D6E55',
              fontFamily: 'var(--font-mono)', fontSize: 13,
              letterSpacing: '0.14em', textTransform: 'uppercase'
            }}>
              Designer of Interfaces
            </div>
            <p style={{
              marginTop: 32,
              fontFamily: 'var(--font-body)', fontWeight: 400,
              fontSize: 'clamp(17px, 1.5vw, 20px)', lineHeight: 1.65,
              color: 'var(--ink-100)', maxWidth: 520,
              textWrap: 'pretty'
            }}>I help brands great and small find their path to products customers love through expert design and a touch of UX magic. If you need a seasoned designer who collaborates seamlessly with engineering, iterates quickly, and defines and refines bright ideas, working with me might be written in the stars.


            </p>
            <div style={{ marginTop: 28, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn href="#/work">Experience the Work &rarr;</Btn>
              <Btn variant="secondary" href="#/contact">Contact Me</Btn>
            </div>

            {/* ── mobile-only hero image — full card ───────────── */}
            <div className="kt-mobile-only" style={{ marginTop: 28 }}>
              <TarotCredit>
                <div style={{
                  border: '1px solid rgba(20,17,13,0.75)',
                  borderRadius: 3, padding: 8,
                  background: 'var(--bone)',
                  boxShadow: '0 8px 36px rgba(20,17,13,0.16)',
                }}>
                  <div style={{ border: '1px solid rgba(20,17,13,0.28)', borderRadius: 2, overflow: 'hidden' }}>
                    <img
                      src="assets/illustrations/tarot/david-palladini-the-star.jpg"
                      alt="The Star — Aquarian Tarot"
                      style={{ width: '100%', height: 'auto', display: 'block' }}
                    />
                  </div>
                </div>
              </TarotCredit>
            </div>
          </div>

          {/* ── RIGHT: graphic ─────────────────────────────────── */}
          <div className="kt-hide-on-stack-half" style={{
            justifySelf: 'end', width: '100%', maxWidth: 420
          }}>
            <VellumSigil />
          </div>
        </div>
      </div>
    </section>);

}

// ── STAR CARD — XVII The Star, Aquarian Tarot by David Palladini ─
// Replaces the hand-drawn sigil. Double-border frame mirrors the
// original SVG outer + inner rect treatment.
function VellumSigil() {
  return (
    <TarotCredit>
    <div style={{
      display: 'inline-block', width: '100%',
      // outer rule — matches SVG's strokeOpacity 0.78, strokeWidth 1.1
      border: '1px solid rgba(20,17,13,0.75)',
      borderRadius: 3,
      padding: 8,
      background: 'var(--bone)',
      boxShadow: '0 8px 36px rgba(20,17,13,0.16)',
    }}>
      {/* inner rule — matches SVG's strokeOpacity 0.30, strokeWidth 0.6 */}
      <div style={{
        border: '1px solid rgba(20,17,13,0.28)',
        borderRadius: 2,
        overflow: 'hidden',
        lineHeight: 0,
      }}>
        <img
          src="assets/illustrations/tarot/david-palladini-the-star.jpg"
          alt="XVII — The Star, Aquarian Tarot by David Palladini"
          style={{ display: 'block', width: '100%', height: 'auto' }}
        />
      </div>
    </div>
    </TarotCredit>
  );
}

// ═══════════════════════════════════════════════════════════════
// WORKINGS — the work index
// ═══════════════════════════════════════════════════════════════
function WorkingsPage({ tweaks, route }) {
  const [filter, setFilter] = React.useState('all');
  const tags = ['all', ...new Set(KT.workings.flatMap((w) => w.tags))];
  const filtered = filter === 'all' ?
  KT.workings :
  KT.workings.filter((w) => w.tags.includes(filter));

  return (
    <PageFade routeKey="workings">
      <section style={pageSection}>
        <SectionHead
          eyebrow="A collection of recent projects"
          title="The Work"
          />
        

        {/* filter pills */}
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 8,
          marginBottom: 40, paddingBottom: 24,
          borderBottom: '1px solid var(--line-soft)'
        }}>
          {tags.map((t) =>
          <button key={t} onClick={() => setFilter(t)}
          style={{
            padding: '8px 14px', borderRadius: 999,
            border: '1px solid ' + (filter === t ? 'var(--moss)' : 'var(--line-soft)'),
            background: filter === t ? 'var(--chrome-active-bg)' : 'transparent',
            color: filter === t ? 'var(--moss)' : 'var(--fg-2)',
            fontFamily: 'var(--font-body)', fontWeight: 600,
            fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
            cursor: 'pointer', lineHeight: 1,
            transition: 'all var(--dur-fast) var(--ease-out)'
          }}>
              {t}
            </button>
          )}
        </div>

        {tweaks.cardStyle === 'list' ?
        <div>{filtered.map((w) => <ListRow key={w.id} working={w} />)}</div> :
        tweaks.cardStyle === 'editorial' ?
        <div style={{
          display: 'grid', gap: 40,
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))'
        }}>
            {filtered.map((w) => <EditorialCard key={w.id} working={w} />)}
          </div> :

        <div style={{
          display: 'grid', gap: 28,
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))'
        }}>
            {filtered.map((w) => <TarotCard key={w.id} working={w} flippable />)}
          </div>
        }
      </section>
    </PageFade>);

}

// ═══════════════════════════════════════════════════════════════
// WORKING DETAIL — single project page
// ═══════════════════════════════════════════════════════════════
function WorkingDetailPage({ route }) {
  const working = KT.workings.find((w) => w.id === route.id);
  if (!working) {
    return (
      <PageFade routeKey="missing">
        <section style={{ ...pageSection, paddingTop: 80, textAlign: 'center' }}>
          <Rune numeral="0" size="h1" />
          <h1 className="oma-h1" style={{ marginTop: 24 }}>No Such Card In The Deck.</h1>
          <Btn variant="ghost" href="#/work" style={{ marginTop: 24 }}>&larr; Back to the Workings</Btn>
        </section>
      </PageFade>);
  }

  const hasProcessGallery = working.processGallery && working.processGallery.length > 0;
  const hasMockups        = working.mockups && working.mockups.length > 0;
  const hasLinks          = working.links && working.links.length > 0;
  const hasOutcome        = working.outcome && working.outcome.length > 0;

  return (
    <PageFade routeKey={`working-${working.id}`}>
      <section style={pageSection}>

        {/* breadcrumb */}
        <a href="#/work" style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--fg-3)', textDecoration: 'none'
        }}>← THE WORK</a>

        {/* ── hero: numeral + title + meta ─────────────────────── */}
        <div style={{
          marginTop: 24, paddingBottom: 40, marginBottom: 56,
          borderBottom: '1px solid var(--line-medium)',
          display: 'grid', gridTemplateColumns: 'auto minmax(0, 1fr)',
          gap: 32, alignItems: 'flex-start'
        }} className="kt-grid-stack">
          <Rune numeral={working.numeral} size="h1" color="var(--moss)" />
          <div>
            <h1 style={{
              margin: 0, fontFamily: '"Ohno Blazeface 72", var(--font-display)',
              fontSize: 'clamp(40px, 7vw, 84px)', lineHeight: 0.95,
              letterSpacing: '0.02em', textTransform: 'uppercase',
              color: 'var(--fg-1)', textWrap: 'balance'
            }}>{working.title}</h1>
            <div style={{ marginTop: 20, display: 'flex', flexWrap: 'wrap', gap: 18 }}>
              {working.client && <Meta label="Brand" value={working.client} />}
              {working.team   && <Meta label="Team"  value={working.team} />}
              {working.role   && <Meta label="Role"  value={working.role} />}
            </div>
            {working.tags && working.tags.length > 0 && (
              <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {working.tags.map((t) => <Tag key={t} tone={working.tone}>{t}</Tag>)}
              </div>
            )}
          </div>
        </div>

        {/* ── featured image OR tarot plate ────────────────────── */}
        <FeaturedHero working={working} />

        {/* ── summary ──────────────────────────────────────────── */}
        {working.summary && (
          <div style={{ marginBottom: 56, maxWidth: 920 }}>
            <Eyebrow style={{ marginBottom: 12 }}>The Summary</Eyebrow>
            <p style={{
              margin: 0, fontFamily: 'var(--font-body)',
              fontSize: 'clamp(18px, 1.8vw, 24px)', lineHeight: 1.6,
              letterSpacing: '0.01em',
              color: 'var(--fg-1)', textWrap: 'balance'
            }}>{working.summary}</p>
          </div>
        )}

        {/* ── the spread — past / present / future ─────────────── */}
        {working.showSpread !== false && <div style={{ marginBottom: 0 }}>
          <div style={{
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            flexWrap: 'wrap', gap: 12,
            marginBottom: 22, paddingBottom: 14,
            borderBottom: '1px solid var(--line-soft)'
          }}>
            <Eyebrow>The Spread</Eyebrow>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.14em', color: 'var(--fg-3)', textTransform: 'uppercase'
            }}>Past &middot; Present &middot; Future</span>
          </div>
          <div className="kt-grid-stack" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
            gap: 20, alignItems: 'stretch'
          }}>
            {[
              { pos: 'Past',    sub: 'The Problem',  numeral: 'I',   glyph: 'saturn', body: working.detail[0], bullets: (working.bullets || [])[0] || [] },
              { pos: 'Present', sub: 'The Process',  numeral: 'II',  glyph: 'eye',    body: working.detail[1], bullets: (working.bullets || [])[1] || [] },
              { pos: 'Future',  sub: 'The Solution', numeral: 'III', glyph: 'star',   body: working.detail[2], bullets: (working.bullets || [])[2] || [] },
            ].map((c) => (
              <SpreadCard key={c.pos} card={c} tone={working.tone} />
            ))}
          </div>
        </div>}

        {/* ── links ────────────────────────────────────────────── */}
        {hasLinks && (
          <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--line-soft)' }}>
            <Eyebrow style={{ marginBottom: 18 }}>Links</Eyebrow>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {working.links.map((link, i) => (
                <a
                  key={i}
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="kt-btn"
                  data-variant="primary"
                  data-size="lg"
                  style={{
                    display: 'inline-flex', alignItems: 'center', gap: 10,
                    padding: '16px 28px', fontSize: 16, borderRadius: 'var(--r-sm)',
                    fontFamily: 'var(--font-body)', fontWeight: 600, letterSpacing: '0.04em',
                    background: 'var(--action-primary-bg)', color: 'var(--action-primary-fg)',
                    border: 'none', textDecoration: 'none', lineHeight: 1,
                  }}
                >
                  {link.label} <span style={{ fontFamily: 'var(--font-mono)', fontSize: 14 }}>↗</span>
                </a>
              ))}
            </div>
          </div>
        )}

        {/* ── design process gallery ────────────────────────────── */}
        {hasProcessGallery && (
          <div style={{ marginTop: 72, paddingTop: 32, borderTop: '1px solid var(--line-soft)' }}>
            <div style={{ marginBottom: 28 }}>
              <Eyebrow style={{ marginBottom: 6 }}>Design Process</Eyebrow>
              <h3 style={{
                margin: 0, fontFamily: '"Ohno Blazeface 36", var(--font-display)',
                fontSize: 'clamp(22px, 2.8vw, 32px)', lineHeight: 1,
                letterSpacing: '0.02em', textTransform: 'uppercase',
                color: 'var(--fg-1)'
              }}>Wireframes &amp; Research</h3>
            </div>
            <ImageGallery images={working.processGallery} />
          </div>
        )}

        {/* ── mockups gallery ───────────────────────────────────── */}
        {hasMockups && (
          <div style={{ marginTop: 72, paddingTop: 32, borderTop: '1px solid var(--line-soft)' }}>
            <div style={{ marginBottom: 28 }}>
              <Eyebrow style={{ marginBottom: 6 }}>Final Designs</Eyebrow>
              <h3 style={{
                margin: 0, fontFamily: '"Ohno Blazeface 36", var(--font-display)',
                fontSize: 'clamp(22px, 2.8vw, 32px)', lineHeight: 1,
                letterSpacing: '0.02em', textTransform: 'uppercase',
                color: 'var(--fg-1)'
              }}>Mockups</h3>
            </div>
            <ImageGallery images={working.mockups} />
          </div>
        )}

        {/* ── outcome ──────────────────────────────────────────── */}
        {working.showOutcomes !== false && hasOutcome && (
          <div style={{ marginTop: 72, paddingTop: 32, borderTop: '1px solid var(--line-medium)' }}>
            <Eyebrow style={{ marginBottom: 24 }}>Outcome</Eyebrow>
            <div style={{
              display: 'grid', gap: 32,
              gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))'
            }}>
              {working.outcome.map(([label, value], i) => (
                <div key={i}>
                  <div className="oma-eyebrow" style={{ marginBottom: 10 }}>{label}</div>
                  <div style={{
                    fontFamily: 'var(--font-body)',
                    fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.1,
                    fontWeight: 400,
                    color: 'var(--moss)'
                  }}>{value}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* ── next/prev ─────────────────────────────────────────── */}
        <NextPrev current={working} />

      </section>
    </PageFade>
  );
}

function FeaturedHero({ working }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ marginBottom: 56, maxWidth: 920 }}>
      {working.featuredImage ? (
        <>
          <TarotFrame tone={working.tone}>
            <img
              src={working.featuredImage}
              alt={working.featuredImageAlt || working.title}
              className="kt-featured-img"
              onClick={() => setOpen(true)}
              style={{ aspectRatio: '16 / 10', objectFit: 'cover', cursor: 'zoom-in' }}
            />
          </TarotFrame>
          {open && (
            <Lightbox
              images={[{ url: working.featuredImage, alt: working.featuredImageAlt || working.title }]}
              startIndex={0}
              onClose={() => setOpen(false)}
            />
          )}
        </>
      ) : (
        <TarotFrame tone={working.tone}>
          <TarotPlate numeral={working.numeral} tone={working.tone} ratio="16 / 10" />
        </TarotFrame>
      )}
    </div>
  );
}

function Meta({ label, value }) {
  return (
    <div>
      <div className="oma-eyebrow" style={{ marginBottom: 4 }}>{label}</div>
      <div style={{
        fontFamily: 'var(--font-body)', fontSize: 14,
        color: 'var(--fg-1)'
      }}>{value}</div>
    </div>);

}

// ─── SPREAD CARD — one position in the past/present/future reading ───
function SpreadCard({ card, tone }) {
  const GlyphMap = { saturn: SaturnGlyph, hand: HandGlyph, eye: EyeGlyph, star: StarGlyph };
  const Glyph = GlyphMap[card.glyph] || StarGlyph;
  return (
    <TarotFrame tone={tone}>
      <div style={{
        textAlign: 'center', paddingTop: 4,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', gap: 10
      }}>
        <Glyph size={28} color="var(--card-accent)" />
        <div style={{
          fontFamily: 'var(--font-body)', fontWeight: 600,
          fontSize: 10, letterSpacing: '0.20em', textTransform: 'uppercase',
          color: 'var(--card-accent)'
        }}>{card.pos}</div>
        <div style={{
          fontFamily: '"Ohno Blazeface 36", var(--font-display)',
          fontSize: 28, lineHeight: 0.95, letterSpacing: '0.04em',
          textTransform: 'uppercase', color: 'var(--fg-1)'
        }}>{card.numeral}</div>
        <div style={{
          fontFamily: 'var(--font-body)', fontStyle: 'italic',
          fontSize: 12, letterSpacing: '0.02em',
          color: 'var(--fg-3)', marginBottom: 6
        }}>{card.sub}</div>
      </div>
      <div aria-hidden="true" style={{
        height: 1, background: 'var(--card-accent)',
        opacity: 0.22, margin: '6px 4px 18px'
      }} />
      <div style={{ flex: 1 }}>
        {card.body ? (
          <p style={{
            margin: 0, fontFamily: 'var(--font-body)', fontWeight: 400,
            fontSize: 14.5, lineHeight: 1.65,
            color: 'var(--fg-1)', textWrap: 'pretty',
          }}>{card.body}</p>
        ) : null}
        {card.bullets && card.bullets.length > 0 && (
          <ul style={{
            margin: card.body ? '12px 0 0' : 0,
            padding: 0, listStyle: 'none',
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            {card.bullets.map((b, i) => (
              <li key={i} style={{
                display: 'grid',
                gridTemplateColumns: '14px 1fr',
                columnGap: 8, alignItems: 'baseline',
                fontFamily: 'var(--font-body)', fontWeight: 400,
                fontSize: 14.5, lineHeight: 1.65,
                color: 'var(--fg-1)',
              }}>
                <span aria-hidden="true" style={{
                  color: 'var(--card-accent)', fontSize: 8,
                  lineHeight: 1, transform: 'translateY(0.1em)',
                }}>✦</span>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </TarotFrame>);

}

function NextPrev({ current }) {
  const i = KT.workings.findIndex((w) => w.id === current.id);
  const prev = KT.workings[i - 1];
  const next = KT.workings[i + 1];
  return (
    <div style={{
      marginTop: 80, paddingTop: 32,
      borderTop: '1px solid var(--line-soft)',
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24
    }}>
      {prev ?
      <a href={`#/work/${prev.id}`} style={{
        textDecoration: 'none', color: 'inherit'
      }}>
          <Eyebrow style={{ marginBottom: 6 }}>← Previous</Eyebrow>
          <div style={{
          fontFamily: '"Ohno Blazeface 24", var(--font-display)',
          fontSize: 22, textTransform: 'uppercase', letterSpacing: '0.02em',
          color: 'var(--fg-1)'
        }}>{prev.numeral} · {prev.title}</div>
        </a> :
      <span />}
      {next ?
      <a href={`#/work/${next.id}`} style={{
        textDecoration: 'none', color: 'inherit', textAlign: 'right'
      }}>
          <Eyebrow style={{ marginBottom: 6 }}>Next →</Eyebrow>
          <div style={{
          fontFamily: '"Ohno Blazeface 24", var(--font-display)',
          fontSize: 22, textTransform: 'uppercase', letterSpacing: '0.02em',
          color: 'var(--fg-1)'
        }}>{next.numeral} · {next.title}</div>
        </a> :
      <span />}
    </div>);

}

// ═══════════════════════════════════════════════════════════════
// PRACTITIONER — about
// ═══════════════════════════════════════════════════════════════
function PractitionerPage() {
  return (
    <PageFade routeKey="designer">
      <section style={pageSection}>
        <SectionHead
          eyebrow="About Katy Towell"
          title="The Designer" />
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)',
          gap: 64, alignItems: 'flex-start'
        }} className="kt-grid-stack">
          <div>
            {/* Queen of Pentacles — Aquarian Tarot by David Palladini */}
            <TarotCredit>
            <div style={{
              border: '1px solid rgba(20,17,13,0.75)',
              borderRadius: 3,
              padding: 8,
              background: 'var(--bone)',
              boxShadow: '0 8px 36px rgba(20,17,13,0.16)',
              display: 'inline-block',
              width: '100%',
            }}>
              <div style={{
                border: '1px solid rgba(20,17,13,0.28)',
                borderRadius: 2,
                overflow: 'hidden',
                lineHeight: 0,
              }}>
                <img
                  src="assets/illustrations/tarot/david-palladini-queen-of-pentacles.jpg"
                  alt="Queen of Pentacles — Aquarian Tarot by David Palladini"
                  style={{ display: 'block', width: '100%', height: 'auto' }}
                />
              </div>
            </div>
            </TarotCredit>
            <div style={{ marginTop: 24 }}>
              <Eyebrow style={{ marginBottom: 8 }}>Located</Eyebrow>
              <div className="oma-p" style={{ color: 'var(--fg-1)' }}>In an office no one on Teams ever believes is real (you'll see what I mean)</div>
              <Eyebrow style={{ marginBottom: 8, marginTop: 20 }}>My Mantra</Eyebrow>
              <div className="oma-p" style={{ color: 'var(--fg-1)' }}>
                You have to think about new customers, not just the ones you already have.
              </div>
            </div>
          </div>
          <div>
            {KT.profile.about.map((p, i) =>
            <p key={i} className="oma-p" style={{
              fontSize: 'clamp(17px, 1.4vw, 19px)', lineHeight: 1.65,
              color: 'var(--fg-1)', maxWidth: 640,
              marginTop: i === 0 ? 0 : 24, marginBottom: 0
            }}>{p}</p>
            )}

            <div style={{ marginTop: 40 }}>
              <Eyebrow style={{ marginBottom: 16 }}>Expertise &amp; Preferred Tools</Eyebrow>
              <Lexicon />
            </div>

            <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn href="#/contact">Contact Me</Btn>
              <Btn variant="secondary" href="#/work">See the Work</Btn>
            </div>
          </div>
        </div>
      </section>
    </PageFade>);

}

function Lexicon() {
  const entries = [
  ['User Research & Testing', 'Maze.co, Survey Monkey, Google Analytics, Datadog, old fashioned interviews'],
  ['Information Architecture', 'Miro, Balsamiq, Figjam'],
  ['Wireframing & Prototyping', 'Figma & Figjam, Claude Code, pen and paper'],
  ['Visual Design & Design Systems', 'Figma, Claude Design']];

  return (
    <dl style={{ margin: 0, display: 'grid', gap: 12 }}>
      {entries.map(([k, v]) =>
      <div key={k} style={{
        display: 'grid', gridTemplateColumns: '150px 1fr', gap: 16,
        alignItems: 'baseline',
        paddingBottom: 12, borderBottom: '1px solid var(--line-soft)'
      }}>
          <dt style={{
          fontFamily: '"Ohno Blazeface 18", var(--font-display)',
          fontSize: 16, textTransform: 'uppercase', letterSpacing: '0.04em',
          color: 'var(--moss)'
        }}>{k}</dt>
          <dd style={{ margin: 0, color: 'var(--fg-2)', fontSize: 14 }}>{v}</dd>
        </div>
      )}
    </dl>);

}

// ═══════════════════════════════════════════════════════════════
// THE BOOK — journal
// ═══════════════════════════════════════════════════════════════
// PHILOSOPHY — single page, a few blurbs on approach to design
// (still exported as BookPage so the App router doesn't change)
// ═══════════════════════════════════════════════════════════════
function BookPage() {
  return (
    <PageFade routeKey="philosophy">
      <section style={pageSection}>
        <SectionHead
          eyebrow="On the approach"
          title="The Philosophy"
          />

        <div style={{
          marginTop: 24,
          borderTop: '1px solid var(--line-medium)'
        }}>
          {KT.tenets.map((t, i) => <TenetRow key={t.id} tenet={t} index={i} />)}
        </div>

        <div style={{
          marginTop: 64, paddingTop: 32,
          borderTop: '1px solid var(--line-soft)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16
        }}>
          <p className="oma-p" style={{
            margin: 0, color: 'var(--fg-2)', maxWidth: 520,
            fontSize: 'clamp(15px, 1.3vw, 17px)'
          }}>
            These are the principles. The proof is in the work.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn href="#/work">See the Work</Btn>
            <Btn variant="secondary" href="#/contact">Contact Me</Btn>
          </div>
        </div>
      </section>
    </PageFade>);

}

// ── TENET ROW — a numbered principle with a one-paragraph blurb ──
function TenetRow({ tenet, index }) {
  return (
    <article style={{
      display: 'grid',
      gridTemplateColumns: 'minmax(120px, 160px) minmax(0, 1fr)',
      gap: 'clamp(24px, 4vw, 56px)',
      padding: 'clamp(32px, 4vw, 48px) 0',
      borderBottom: '1px solid var(--line-soft)',
      alignItems: 'flex-start'
    }} className="kt-grid-stack">
      <div>
        <div style={{
          fontFamily: '"Ohno Blazeface 72", var(--font-display)',
          fontSize: 'clamp(56px, 7vw, 88px)', lineHeight: 0.9,
          letterSpacing: '0.02em', color: 'var(--moss)'
        }}>{tenet.numeral}</div>
        <div className="oma-eyebrow" style={{ marginTop: 12 }}>
          Tenet · {String(index + 1).padStart(2, '0')}
        </div>
      </div>
      <div>
        <h3 style={{
          margin: 0,
          fontFamily: '"Ohno Blazeface 36", var(--font-display)',
          fontSize: 'clamp(26px, 3vw, 40px)', lineHeight: 1.1,
          letterSpacing: '0.01em', textTransform: 'uppercase',
          color: 'var(--fg-1)', textWrap: 'balance'
        }}>{tenet.title}</h3>
        <p className="oma-p" style={{
          marginTop: 20, marginBottom: 0,
          fontSize: 'clamp(16px, 1.4vw, 19px)', lineHeight: 1.65,
          color: 'var(--fg-2)', maxWidth: 680, textWrap: 'pretty'
        }}>{tenet.body}</p>

        {(tenet.upright || tenet.reversed) &&
        <div className="kt-tenet-readings" style={{
          marginTop: 28, maxWidth: 680,
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 24, paddingTop: 20,
          borderTop: '1px solid var(--line-soft)'
        }}>
            <div>
              <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              marginBottom: 8
            }}>
                <SparkGlyph size={11} color="var(--moss)" />
                <span style={{
                fontFamily: 'var(--font-body)', fontWeight: 600,
                fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                color: 'var(--moss)'
              }}>Upright</span>
              </div>
              <p style={{
              margin: 0, fontFamily: 'var(--font-body)',
              fontSize: 14, lineHeight: 1.55, color: 'var(--fg-1)',
              fontStyle: 'italic', textWrap: 'pretty'
            }}>{tenet.upright}</p>
            </div>
            <div>
              <div style={{
              display: 'flex', alignItems: 'center', gap: 8,
              marginBottom: 8
            }}>
                <SparkGlyph size={11} color="#C49ACF"
              style={{ transform: 'rotate(180deg)' }} />
                <span style={{
                fontFamily: 'var(--font-body)', fontWeight: 600,
                fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                color: '#C49ACF'
              }}>Reversed</span>
              </div>
              <p style={{
              margin: 0, fontFamily: 'var(--font-body)',
              fontSize: 14, lineHeight: 1.55, color: 'var(--fg-2)',
              fontStyle: 'italic', textWrap: 'pretty'
            }}>{tenet.reversed}</p>
            </div>
          </div>
        }
      </div>
    </article>);

}

function TenetCardCompact({ tenet }) {
  return (
    <article style={{
      display: 'flex', flexDirection: 'column', gap: 14,
      paddingRight: 24
    }}>
      <div style={{
        fontFamily: '"Ohno Blazeface 48", var(--font-display)',
        fontSize: 42, lineHeight: 0.9, letterSpacing: '0.02em',
        color: 'var(--moss)'
      }}>{tenet.numeral}</div>
      <h3 style={{
        margin: 0,
        fontFamily: '"Ohno Blazeface 24", var(--font-display)',
        fontSize: 20, lineHeight: 1.15, letterSpacing: '0.02em',
        textTransform: 'uppercase', color: 'var(--fg-1)',
        textWrap: 'balance'
      }}>{tenet.title}</h3>
      <p style={{
        margin: 0, fontFamily: 'var(--font-body)', fontWeight: 400,
        fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)',
        textWrap: 'pretty'
      }}>{tenet.body}</p>
    </article>);

}

function BookCard({ entry, expanded = false }) {
  return (
    <article style={{
      padding: '32px 28px',
      borderBottom: '1px solid var(--line-soft)',
      borderRight: '1px solid var(--line-soft)',
      display: 'flex', flexDirection: 'column', gap: 16
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <PhaseGlyph phase={entry.moon} size={14} />
        <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 11,
          letterSpacing: '0.10em', color: 'var(--fg-3)'
        }}>{entry.date}</span>
        <span style={{ flex: 1 }} />
        <Tag tone="moss" style={{ padding: '3px 8px', fontSize: 9 }}>{entry.tag}</Tag>
      </div>
      <h3 style={{
        margin: 0,
        fontFamily: '"Ohno Blazeface 24", var(--font-display)',
        fontSize: 22, lineHeight: 1.1, letterSpacing: '0.02em',
        textTransform: 'uppercase', color: 'var(--fg-1)'
      }}>{entry.title}</h3>
      <p style={{
        margin: 0, fontFamily: 'var(--font-body)', fontWeight: 400,
        fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)',
        textWrap: 'pretty'
      }}>{entry.excerpt}</p>
    </article>);

}

// ═══════════════════════════════════════════════════════════════
// CORRESPONDENCE — contact
// ═══════════════════════════════════════════════════════════════
const EMAILJS_SERVICE  = 'service_0sn2rd9';
const EMAILJS_TEMPLATE = 'template_khrudcj';

function CorrespondencePage() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error
  const [errorMsg, setErrorMsg] = React.useState('');

  function handleSubmit(e) {
    e.preventDefault();
    const form = e.currentTarget;

    // Honeypot — use an obscure field name browsers won't autofill
    const trap = form.elements['_trap'];
    if (trap && trap.value) { setStatus('sent'); return; }

    // Collect values explicitly (more reliable than sendForm DOM parsing)
    const templateParams = {
      name:       form.elements['name'].value.trim(),
      email:      form.elements['email'].value.trim(),
      message:    form.elements['message'].value.trim(),
      from_email: form.elements['email'].value.trim(),
    };

    setStatus('sending'); setErrorMsg('');
    emailjs.send(EMAILJS_SERVICE, EMAILJS_TEMPLATE, templateParams)
      .then(() => { setStatus('sent'); form.reset(); })
      .catch((err) => {
        console.error('[EmailJS]', err);
        setStatus('error');
        setErrorMsg(err?.text || err?.message || 'Something went sideways. Please try again.');
      });
  }

  const sent = status === 'sent';
  return (
    <PageFade routeKey="contact">
      <section style={pageSection}>
        <SectionHead
          eyebrow="The Channels Are Open"
          title="Contact" />
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
          gap: 64, alignItems: 'flex-start'
        }} className="kt-grid-stack">
          <div>
            <Eyebrow style={{ marginBottom: 12 }}>Primary Address</Eyebrow>
            <a href={'mailto:' + KT.contact.primary} className="kt-contact-email" style={{
              fontFamily: '"Ohno Blazeface 48", var(--font-display)',
              lineHeight: 1.05,
              letterSpacing: '0.01em', textTransform: 'uppercase',
              textDecoration: 'none', textWrap: 'balance',
              display: 'inline-block', marginTop: 8,
              paddingBottom: 6, wordBreak: 'break-all', fontSize: 'clamp(22px, 3.2vw, 42px)'
            }}>katy@<br />katytowelldesign.com</a>

            <p className="oma-p" style={{
              marginTop: 32, fontSize: 'clamp(18px, 1.8vw, 22px)',
              lineHeight: 1.5, color: 'var(--fg-1)', maxWidth: 480
            }}>
              Call to me from the void if you&rsquo;d like to:
            </p>
            <ul style={{
              margin: '20px 0 0', padding: 0, listStyle: 'none', maxWidth: 480,
              display: 'flex', flexDirection: 'column', gap: 10
            }}>
              {['Cast a project brief my way',
              'Summon a collaboration',
              'Break a design curse',
              'Hire me'].map((x) =>
              <li key={x} style={{
                fontFamily: 'var(--font-body)',
                fontSize: 'clamp(16px, 1.4vw, 18px)',
                lineHeight: 1.5, color: 'var(--fg-1)',
                display: 'grid', gridTemplateColumns: '20px 1fr',
                alignItems: 'baseline', columnGap: 14
              }}>
                  <span aria-hidden="true" style={{
                  fontFamily: '"Ohno Blazeface 18", var(--font-display)',
                  color: 'var(--moss)', fontSize: '0.95em',
                  lineHeight: 1, transform: 'translateY(0.1em)'
                }}>✦</span>
                  <span>{x}</span>
                </li>
              )}
            </ul>

          </div>

          {/* form */}
          <div>
            <div style={{
              background: 'var(--bg-surface)',
              border: '1px solid var(--line-medium)',
              borderRadius: 'var(--r-md)',
              padding: 28,
              boxShadow: 'var(--shadow-2)',
            }}>
              {sent ?
              <div style={{ padding: '12px 0 8px' }}>
                <h3 style={{
                  margin: 0,
                  fontFamily: '"Ohno Blazeface 48", var(--font-display)',
                  fontSize: 'clamp(26px, 2.6vw, 34px)',
                  lineHeight: 1.1, letterSpacing: '0.01em',
                  color: 'var(--moss)', textWrap: 'balance'
                }}>
                  So let it be written.<br />So let it be done.
                </h3>
                <p style={{
                  marginTop: 18, marginBottom: 0,
                  fontFamily: 'var(--font-body)',
                  fontSize: 'clamp(15px, 1.2vw, 17px)',
                  lineHeight: 1.55, color: 'var(--fg-2)'
                }}>Your message has been cast. I’ll reply soon.

                </p>
              </div> :
              <form onSubmit={handleSubmit}>
                <Eyebrow style={{ marginBottom: 18 }}>Or, leave a note</Eyebrow>
                <FormField label="Your Name" name="name" required />
                <FormField label="Email Address" name="email" type="email" required />
                <FormField label="Your Message" name="message" textarea required />
                {/* Honeypot — obscure name so browsers won't autofill it */}
                <input type="text" name="_trap" tabIndex={-1} autoComplete="off"
                  style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }} />
                {status === 'error' && (
                  <p role="alert" style={{
                    marginTop: 12, padding: '10px 14px',
                    background: 'rgba(200,50,50,0.12)',
                    border: '1px solid rgba(200,50,50,0.35)',
                    borderRadius: 'var(--r-xs)',
                    fontFamily: 'var(--font-body)', fontSize: 14,
                    color: 'var(--crimson)',
                  }}>{errorMsg}</p>
                )}
                <Btn style={{ width: '100%', marginTop: 16 }}
                  disabled={status === 'sending'}>
                  {status === 'sending' ? 'Sending…' : 'Send It'}
                </Btn>
              </form>
              }
            </div>
            <div style={{ marginTop: 24 }}>
              <Eyebrow style={{ marginBottom: 12 }}>Elsewhere</Eyebrow>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {KT.contact.social.map((s) =>
                <a key={s.label} href={s.href} style={{
                  color: 'var(--fg-1)', textDecoration: 'none',
                  fontFamily: '"Ohno Blazeface 18", var(--font-display)',
                  fontSize: 18, letterSpacing: '0.02em', textTransform: 'uppercase',
                  display: 'flex', justifyContent: 'space-between',
                  padding: '8px 0', borderBottom: '1px solid var(--line-soft)'
                }}>
                    <span>{s.label}</span>
                    <span style={{ color: 'var(--moss)', fontSize: 14 }}>→</span>
                  </a>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
    </PageFade>);

}

function FormField({ label, name, type = 'text', textarea, required }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <label htmlFor={name} style={{
        display: 'block', marginBottom: 6,
        fontFamily: 'var(--font-body)', fontWeight: 600,
        fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: 'var(--fg-3)'
      }}>{label}</label>
      {textarea ?
      <textarea id={name} name={name} rows={4} required={required} style={inputStyles} /> :
      <input id={name} name={name} type={type} required={required} style={inputStyles} />
      }
    </div>);
}

const inputStyles = {
  width: '100%', boxSizing: 'border-box',
  background: 'var(--bg-page)', color: 'var(--fg-1)',
  border: '1px solid var(--line-medium)', borderRadius: 'var(--r-xs)',
  padding: '12px 14px', fontFamily: 'var(--font-body)', fontSize: 15,
  outline: 'none',
  transition: 'border-color var(--dur-fast) var(--ease-out)'
};

// ═══════════════════════════════════════════════════════════════
// SHARED
// ═══════════════════════════════════════════════════════════════
const pageSection = {
  maxWidth: 1240, margin: '0 auto',
  padding: 'clamp(40px, 6vw, 72px) clamp(20px, 4vw, 28px)',
  position: 'relative', zIndex: 1
};

Object.assign(window, {
  AltarPage, WorkingsPage, WorkingDetailPage, PractitionerPage, BookPage, CorrespondencePage,
  BookCard, pageSection
});