// pages.jsx — Latest, Archive, About, Subscribe, Contact.
// All editorial copy comes from data.jsx. Mobile-first: <768px stacks grids.
const { LAC, F, HorizonGlyph, Mono, Dept, Asterism, LACButton, Rule, PhotoSlot, EmailField, accentFor, useIsMobile } = window;
const { SITE, CURRENT_ISSUE, NEXT_ISSUE, ALSO_IN_ISSUE, ARCHIVE, PILLARS, TIERS, ABOUT, EDITOR_NOTE, CONTACT_REASONS } = window;

function renderTitle(parts, accentColor) {
  return parts.map((p, i) =>
    typeof p === 'string'
      ? <React.Fragment key={i}>{p}{i < parts.length - 1 ? ' ' : ''}</React.Fragment>
      : <span key={i} style={{ fontStyle: 'italic', color: accentColor }}>{p.italic}</span>
  );
}

// ── Latest issue page ───────────────────────────────────────────
function LatestPage({ onNav }) {
  const isMobile = useIsMobile();
  const body = CURRENT_ISSUE.body || [];
  const mid = Math.ceil(body.length / 2);
  const left = body.slice(0, mid);
  const right = body.slice(mid);
  const firstChar = (left[0] || '')[0] || '';
  const firstRest = (left[0] || '').slice(1);

  return (
    <div style={{ background: LAC.paper, color: LAC.midnight, fontFamily: F.sans }}>
      <article style={{ maxWidth: 1080, margin: '0 auto',
        padding: isMobile ? '32px 20px 48px' : '48px 32px 64px' }}>
        {/* Masthead strip */}
        <div style={{ display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'center',
          justifyContent: 'space-between',
          gap: isMobile ? 6 : 0,
          borderBottom: `1px solid ${LAC.lineHard}`, paddingBottom: 12, marginBottom: 24 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <HorizonGlyph size={20} time={CURRENT_ISSUE.pillar.when} />
            <Mono color={LAC.midnight}>The Horizon Brief</Mono>
          </div>
          <Mono color={LAC.dim}>Iss. {CURRENT_ISSUE.no} · {CURRENT_ISSUE.day} · {CURRENT_ISSUE.date}</Mono>
        </div>

        {/* Department + title */}
        <Dept no={CURRENT_ISSUE.pillar.no} name={CURRENT_ISSUE.pillar.name.toUpperCase()} when={CURRENT_ISSUE.pillar.when} />
        <h1 style={{ fontFamily: F.serif, fontWeight: 400,
          fontSize: isMobile ? 60 : 138,
          lineHeight: 0.88, letterSpacing: '-0.028em', margin: '20px 0 0' }}>
          {renderTitle(CURRENT_ISSUE.title, LAC.amberDeep)}
        </h1>

        {/* Deck */}
        <p style={{ fontFamily: F.serif, fontStyle: 'italic',
          fontSize: isMobile ? 19 : 26,
          lineHeight: 1.34, color: LAC.inkSoft, margin: '20px 0 0', maxWidth: 780 }}>
          {CURRENT_ISSUE.deck}
        </p>

        {/* Byline strip */}
        <div style={{ display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'baseline',
          justifyContent: 'space-between',
          gap: isMobile ? 4 : 0,
          marginTop: 24, paddingBottom: 14, borderBottom: `1px solid ${LAC.line}` }}>
          <Mono color={LAC.dim}>By {CURRENT_ISSUE.byline} · {SITE.shipTime}</Mono>
          <Mono color={LAC.dim}>{CURRENT_ISSUE.readMin || '—'} min{CURRENT_ISSUE.hoursSaved ? ` · saves ${CURRENT_ISSUE.hoursSaved} hrs` : ''}</Mono>
        </div>

        {/* Photo */}
        <div style={{ marginTop: isMobile ? 24 : 32 }}>
          <PhotoSlot height={isMobile ? 240 : 440} when={CURRENT_ISSUE.pillar.when} caption="[ photo · article hero · 4:3 ]" />
        </div>

        {/* Body */}
        {body.length > 0 && (
          <div style={{ display: 'grid',
            gridTemplateColumns: isMobile || body.length <= 2 ? '1fr' : '1fr 1fr',
            columnGap: 36, fontSize: 16, lineHeight: 1.68, color: LAC.inkSoft,
            marginTop: isMobile ? 28 : 36 }}>
            <div>
              {left.map((p, i) => (
                <p key={i} style={{ margin: i === 0 ? 0 : '12px 0 0' }}>
                  {i === 0 && firstChar
                    ? <React.Fragment>
                        <span style={{ fontFamily: F.serif, float: 'left',
                          fontSize: isMobile ? 72 : 96,
                          lineHeight: 0.85, marginRight: 10, marginTop: 6,
                          color: LAC.midnight, fontStyle: 'italic' }}>{firstChar}</span>
                        {firstRest}
                      </React.Fragment>
                    : p}
                </p>
              ))}
            </div>
            {right.length > 0 && (
              <div style={{ marginTop: isMobile ? 12 : 0 }}>
                {right.map((p, i) => (
                  <p key={i} style={{ margin: i === 0 ? 0 : '12px 0 0' }}>{p}</p>
                ))}
              </div>
            )}
          </div>
        )}

        {/* Pull quote */}
        {CURRENT_ISSUE.pullQuote && (
          <div style={{ margin: isMobile ? '36px 0' : '48px auto',
            width: isMobile ? '100%' : '78%',
            padding: isMobile ? '18px 4px' : '22px 24px',
            borderTop: `1px solid ${LAC.midnight}`, borderBottom: `1px solid ${LAC.midnight}`, textAlign: 'center' }}>
            <div style={{ fontFamily: F.serif, fontStyle: 'italic',
              fontSize: isMobile ? 22 : 32, lineHeight: 1.2, color: LAC.midnight }}>
              {CURRENT_ISSUE.pullQuote}
            </div>
          </div>
        )}

        {/* Prompt + marginalia */}
        <div style={{ display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr 1fr',
          gap: isMobile ? 24 : 28, marginTop: 24 }}>
          <div style={{ background: LAC.midnight, color: LAC.paper, padding: isMobile ? 20 : 24 }}>
            <Mono color={LAC.amber} style={{ display: 'block', marginBottom: 14 }}>▤ The Prompt · copy & run</Mono>
            <div style={{ fontFamily: F.mono, fontSize: 13, lineHeight: 1.7, color: '#D8D1BB', wordBreak: 'break-word' }}>
              {(CURRENT_ISSUE.prompt || []).map((l, i) => <div key={i}>{l}</div>)}
            </div>
            <div style={{ marginTop: 18, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <button style={{
                background: LAC.amber, color: LAC.midnight, border: 0, padding: '10px 13px',
                fontFamily: F.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer',
              }}>⧉ copy prompt</button>
              <button style={{
                background: 'transparent', color: LAC.paper, border: `1px solid ${LAC.paper}`, padding: '10px 13px',
                fontFamily: F.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer',
              }}>↻ rerun sundays</button>
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <Mono>Marginalia</Mono>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: LAC.inkSoft, margin: 0 }}>{CURRENT_ISSUE.marginalia}</p>
            <div style={{ marginTop: 12 }}>
              <Asterism width={isMobile ? 120 : 160} />
            </div>
            <Mono color={LAC.dim} style={{ marginTop: 8 }}>End · §{CURRENT_ISSUE.pillar.no} · {CURRENT_ISSUE.pillar.name}</Mono>
          </div>
        </div>

        {/* Also in this issue */}
        {ALSO_IN_ISSUE.length > 0 && (
          <div style={{ marginTop: isMobile ? 40 : 64 }}>
            <div style={{ display: 'flex',
              flexDirection: isMobile ? 'column' : 'row',
              alignItems: isMobile ? 'flex-start' : 'baseline',
              justifyContent: 'space-between', gap: isMobile ? 4 : 0,
              borderBottom: `1px solid ${LAC.lineHard}`, paddingBottom: 12, marginBottom: 20 }}>
              <span style={{ fontFamily: F.serif, fontSize: isMobile ? 28 : 36, letterSpacing: '-0.025em' }}>
                Also in this issue<span style={{ color: LAC.amberDeep, fontStyle: 'italic' }}>.</span>
              </span>
              <Mono>{ALSO_IN_ISSUE.length} short read{ALSO_IN_ISSUE.length === 1 ? '' : 's'}</Mono>
            </div>
            <div style={{ display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 0 }}>
              {ALSO_IN_ISSUE.map((x, i) => (
                <div key={x.no} style={{
                  padding: '20px 0',
                  borderBottom: `1px solid ${LAC.lineSoft}`,
                  paddingRight: !isMobile && i % 2 === 0 ? 24 : 0,
                  paddingLeft: !isMobile && i % 2 === 1 ? 24 : 0,
                  borderRight: !isMobile && i % 2 === 0 ? `1px solid ${LAC.lineSoft}` : 0,
                }}>
                  <Dept no={x.no} name={x.name.toUpperCase()} when={x.when} />
                  <h3 style={{ fontFamily: F.serif, fontWeight: 400, fontSize: 26, lineHeight: 1.1, letterSpacing: '-0.015em', margin: '10px 0 0' }}>
                    <span style={{ fontStyle: 'italic' }}>{x.title}</span>
                  </h3>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 12 }}>
                    <Mono color={LAC.dim} size={10}>{x.min} min · {CURRENT_ISSUE.byline}</Mono>
                    <Mono color={LAC.amberDeep} size={10} style={{ cursor: 'pointer' }}>read →</Mono>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Bottom subscribe nudge */}
        <div style={{ marginTop: isMobile ? 40 : 56, paddingTop: 28, borderTop: `1px solid ${LAC.line}`,
          display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          justifyContent: 'space-between',
          alignItems: isMobile ? 'stretch' : 'center',
          gap: 20, flexWrap: 'wrap' }}>
          <div>
            <Mono color={LAC.amberDeep}>↳ next issue · Iss. {NEXT_ISSUE.no} · {NEXT_ISSUE.date}</Mono>
            <div style={{ fontFamily: F.serif, fontSize: isMobile ? 26 : 32, marginTop: 8, lineHeight: 1.1 }}>
              Get it Sundays at <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>{SITE.shipTime}</span>
            </div>
          </div>
          <LACButton onClick={() => onNav('subscribe')}>Subscribe · free</LACButton>
        </div>
      </article>
    </div>
  );
}

// ── Archive page ────────────────────────────────────────────────
function ArchivePage({ onNav }) {
  const isMobile = useIsMobile();
  const [filter, setFilter] = React.useState('all');
  const [view, setView] = React.useState(isMobile ? 'list' : 'list');
  const filtered = ARCHIVE.filter((a) => filter === 'all' ? true : a.when === filter);
  const isEmpty = ARCHIVE.length === 0;

  return (
    <div style={{ background: LAC.paper, color: LAC.midnight, fontFamily: F.sans }}>
      <section style={{ maxWidth: 1320, margin: '0 auto',
        padding: isMobile ? '40px 20px 24px' : '72px 32px 32px' }}>
        <Mono color={LAC.amberDeep}>↳ the archive · {ARCHIVE.length} issue{ARCHIVE.length === 1 ? '' : 's'} · vol. {SITE.volume.toLowerCase()}</Mono>
        <h1 style={{ fontFamily: F.serif, fontWeight: 400,
          fontSize: isMobile ? 56 : 132,
          lineHeight: 0.92, letterSpacing: '-0.028em', margin: '14px 0 0' }}>
          Every issue,<br />
          <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>in order.</span>
        </h1>
        <p style={{ fontFamily: F.serif, fontStyle: 'italic',
          fontSize: isMobile ? 18 : 22,
          lineHeight: 1.4, color: LAC.inkSoft, marginTop: 20, maxWidth: 620 }}>
          {isEmpty
            ? 'No issues yet. The first one ships soon — subscribe to see it land on Sunday.'
            : `${ARCHIVE.length} Sunday${ARCHIVE.length === 1 ? '' : 's'}, sorted newest first. Filter by time of day.`}
        </p>
      </section>

      {isEmpty ? (
        <section style={{ maxWidth: 1080, margin: '0 auto',
          padding: isMobile ? '24px 20px 64px' : '48px 32px 96px' }}>
          <div style={{ padding: isMobile ? '36px 20px' : '48px 32px',
            background: LAC.paper2, border: `1px solid ${LAC.line}`,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, textAlign: 'center' }}>
            <Asterism width={isMobile ? 100 : 140} />
            <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: isMobile ? 22 : 28 }}>
              The first issue is in the oven.
            </div>
            <Mono color={LAC.dim}>Subscribe to read it Sunday at {SITE.shipTime}.</Mono>
            <LACButton onClick={() => onNav('subscribe')}>Subscribe · free</LACButton>
          </div>
        </section>
      ) : (
        <React.Fragment>
          {/* Filter strip */}
          <section style={{ maxWidth: 1320, margin: '0 auto',
            padding: isMobile ? '0 20px 16px' : '0 32px 24px',
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'center',
            justifyContent: 'space-between',
            gap: isMobile ? 12 : 0,
            borderBottom: `1px solid ${LAC.lineHard}`, paddingBottom: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
              <Mono color={LAC.midnight}>Filter</Mono>
              {[
                ['all', 'All', null],
                ['am', 'A.M.', 'am'],
                ['noon', 'Noon', 'noon'],
                ['pm', 'P.M.', 'pm'],
              ].map(([k, label, glyphTime]) => (
                <button key={k} onClick={() => setFilter(k)} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: filter === k ? LAC.midnight : 'transparent',
                  color: filter === k ? LAC.paper : LAC.midnight,
                  border: filter === k ? 0 : `1px solid ${LAC.line}`,
                  padding: '8px 12px', cursor: 'pointer',
                  fontFamily: F.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                }}>
                  {glyphTime && <HorizonGlyph size={12} time={glyphTime}
                    stroke={filter === k ? LAC.paper : LAC.midnight}
                    sun={filter === k ? LAC.amber : (glyphTime === 'pm' ? LAC.teal : glyphTime === 'noon' ? LAC.midnight : LAC.amber)} />}
                  {label}
                </button>
              ))}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <Mono>{filtered.length} issue{filtered.length === 1 ? '' : 's'}</Mono>
              {!isMobile && (
                <div style={{ display: 'inline-flex', border: `1px solid ${LAC.line}` }}>
                  {['list', 'grid'].map((v) => (
                    <button key={v} onClick={() => setView(v)} style={{
                      background: view === v ? LAC.midnight : 'transparent',
                      color: view === v ? LAC.paper : LAC.midnight, border: 0,
                      padding: '8px 12px', cursor: 'pointer',
                      fontFamily: F.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
                    }}>{v}</button>
                  ))}
                </div>
              )}
            </div>
          </section>

          <section style={{ maxWidth: 1320, margin: '0 auto',
            padding: isMobile ? '16px 20px 64px' : '24px 32px 80px' }}>
            {isMobile || view === 'list' ? (
              <div>
                {filtered.map((a) => (
                  <div key={a.no} onClick={() => a.latest && onNav('latest')} style={isMobile ? {
                    display: 'flex', flexDirection: 'column', gap: 6, padding: '16px 0',
                    borderBottom: `1px solid ${LAC.lineSoft}`, cursor: a.latest ? 'pointer' : 'default',
                    opacity: a.latest ? 1 : 0.86,
                  } : {
                    display: 'grid', gridTemplateColumns: '36px 80px 100px 1fr 240px 70px',
                    alignItems: 'baseline', columnGap: 20, padding: '20px 0',
                    borderBottom: `1px solid ${LAC.lineSoft}`, cursor: a.latest ? 'pointer' : 'default',
                    opacity: a.latest ? 1 : 0.86,
                  }}>
                    {isMobile ? (
                      <React.Fragment>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                          <HorizonGlyph size={14} time={a.when} />
                          <Mono color={accentFor(a.when)}>Iss. {a.no}</Mono>
                          <Mono color={LAC.dim}>{a.date}</Mono>
                        </div>
                        <span style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 22, color: LAC.midnight, lineHeight: 1.2 }}>{a.title}</span>
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                          <Mono color={LAC.dim} size={10}>{a.dept}</Mono>
                          <Mono color={LAC.dim} size={10}>{a.latest ? '↗ open' : `${a.min} min`}</Mono>
                        </div>
                      </React.Fragment>
                    ) : (
                      <React.Fragment>
                        <HorizonGlyph size={16} time={a.when} />
                        <Mono color={accentFor(a.when)}>Iss. {a.no}</Mono>
                        <Mono color={LAC.dim}>{a.date}</Mono>
                        <span style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 24, color: LAC.midnight }}>{a.title}</span>
                        <Mono color={LAC.dim}>{a.dept}</Mono>
                        <Mono color={LAC.dim} style={{ textAlign: 'right' }}>{a.latest ? '↗ open' : `${a.min} min`}</Mono>
                      </React.Fragment>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
                {filtered.map((a) => (
                  <div key={a.no} onClick={() => a.latest && onNav('latest')} style={{
                    cursor: a.latest ? 'pointer' : 'default', opacity: a.latest ? 1 : 0.88,
                    display: 'flex', flexDirection: 'column', gap: 12,
                  }}>
                    <div style={{ aspectRatio: '3 / 4', position: 'relative', overflow: 'hidden',
                      background: a.when === 'pm' ? '#13322F' : a.when === 'noon' ? '#23231f' : '#1B2230',
                      border: `1px solid ${LAC.line}` }}>
                      <MiniCover no={a.no} when={a.when} title={a.title} />
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <Mono color={accentFor(a.when)}>Iss. {a.no}</Mono>
                      <Mono color={LAC.dim}>{a.date}</Mono>
                    </div>
                    <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 19, lineHeight: 1.15, color: LAC.midnight }}>
                      {a.title}
                    </div>
                    <Mono color={LAC.dim} size={10}>{a.dept}</Mono>
                  </div>
                ))}
              </div>
            )}
          </section>
        </React.Fragment>
      )}
    </div>
  );
}

function MiniCover({ no, when, title }) {
  const sun = when === 'pm' ? LAC.teal : when === 'noon' ? LAC.dim2 : LAC.amber;
  const stripped = (SITE.shipTime.match(/\d{1,2}:\d{2}/) || ['06:14'])[0];
  return (
    <svg viewBox="0 0 100 130" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
      {[80, 86, 92, 100, 110, 122].map((y, i) => (
        <line key={i} x1="0" x2="100" y1={y} y2={y}
              stroke={sun} strokeOpacity={0.18 + i * 0.07} strokeWidth="0.3" />
      ))}
      <circle cx="68" cy={when === 'am' ? 76 : when === 'noon' ? 82 : 88} r="6.5" fill={sun} />
      <line x1="0" x2="100" y1="82" y2="82" stroke={LAC.paper} strokeOpacity="0.6" strokeWidth="0.18" />
      <text x="6" y="14" fontFamily={F.mono} fontSize="3.2" fill={sun} letterSpacing="0.5">No. {no}</text>
      <text x="94" y="14" textAnchor="end" fontFamily={F.mono} fontSize="3.2" fill={sun} letterSpacing="0.5">{stripped}</text>
    </svg>
  );
}

// ── About page ──────────────────────────────────────────────────
function AboutPage({ onNav }) {
  const isMobile = useIsMobile();
  return (
    <div style={{ background: LAC.paper, color: LAC.midnight, fontFamily: F.sans }}>
      <section style={{ maxWidth: 1080, margin: '0 auto',
        padding: isMobile ? '48px 20px 32px' : '88px 32px 56px' }}>
        <Mono color={LAC.amberDeep}>{ABOUT.kicker}</Mono>
        <h1 style={{ fontFamily: F.serif, fontWeight: 400,
          fontSize: isMobile ? 56 : 132,
          lineHeight: 0.92, letterSpacing: '-0.028em', margin: '14px 0 0' }}>
          {ABOUT.title[0]}<br />
          <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>{ABOUT.title[1].italic}</span>
        </h1>
        <p style={{ fontFamily: F.serif, fontStyle: 'italic',
          fontSize: isMobile ? 19 : 26,
          lineHeight: 1.34, color: LAC.inkSoft, marginTop: 20, maxWidth: 720 }}>
          {ABOUT.lead}
        </p>
      </section>

      <section style={{ maxWidth: 1080, margin: '0 auto',
        padding: isMobile ? '16px 20px 48px' : '24px 32px 64px' }}>
        <div style={{ display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr',
          gap: isMobile ? 32 : 56, alignItems: 'start' }}>
          <div style={{ fontSize: 16, lineHeight: 1.75, color: LAC.inkSoft, display: 'flex', flexDirection: 'column', gap: 18 }}>
            {ABOUT.paras.map((p, i) => <p key={i} style={{ margin: 0 }}>{p}</p>)}
          </div>
          <div style={{ background: LAC.paper2, padding: 22, border: `1px solid ${LAC.line}` }}>
            <Mono color={LAC.midnight} style={{ display: 'block', marginBottom: 14 }}>Facts of the masthead</Mono>
            <div>
              {ABOUT.facts.map((f, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                  padding: '10px 0', borderBottom: i === ABOUT.facts.length - 1 ? 0 : `1px solid ${LAC.lineSoft}`,
                }}>
                  <Mono color={LAC.dim}>{f.k}</Mono>
                  <span style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 18, color: LAC.midnight, textAlign: 'right' }}>{f.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: LAC.paper2, borderTop: `1px solid ${LAC.line}`, borderBottom: `1px solid ${LAC.line}` }}>
        <div style={{ maxWidth: 1320, margin: '0 auto',
          padding: isMobile ? '40px 20px' : '64px 32px' }}>
          <div style={{ display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'baseline',
            justifyContent: 'space-between',
            gap: isMobile ? 8 : 0,
            borderBottom: `1px solid ${LAC.lineHard}`, paddingBottom: 14, marginBottom: 24 }}>
            <span style={{ fontFamily: F.serif, fontSize: isMobile ? 36 : 56, letterSpacing: '-0.025em' }}>
              The five <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>principles.</span>
            </span>
            <Mono>Editorial · how we work</Mono>
          </div>
          <div style={{ display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(5, 1fr)',
            gap: 0,
            borderLeft: isMobile ? 0 : `1px solid ${LAC.line}`,
            borderTop: isMobile ? `1px solid ${LAC.line}` : 0 }}>
            {ABOUT.principles.map((p) => (
              <div key={p.no} style={{
                padding: isMobile ? '20px 0' : '20px 18px 26px',
                borderRight: isMobile ? 0 : `1px solid ${LAC.line}`,
                borderBottom: isMobile ? `1px solid ${LAC.line}` : 0,
                minHeight: isMobile ? 'auto' : 220 }}>
                <HorizonGlyph size={18} time={p.when} />
                <Mono color={accentFor(p.when)} style={{ display: 'block', marginTop: 12 }}>{p.no}</Mono>
                <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 22, lineHeight: 1.1, marginTop: 4, color: LAC.midnight }}>
                  {p.p}
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: LAC.inkSoft, marginTop: 12 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Editor's note */}
      <section style={{ maxWidth: 1080, margin: '0 auto',
        padding: isMobile ? '48px 20px' : '72px 32px' }}>
        <div style={{ display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr',
          gap: isMobile ? 28 : 56, alignItems: 'start' }}>
          <div>
            <PhotoSlot height={isMobile ? 220 : 320} when="am" caption={EDITOR_NOTE.portraitCaption} time={EDITOR_NOTE.portraitTime} />
            <Mono color={LAC.dim} style={{ display: 'block', marginTop: 12 }}>{SITE.editor} · Editor</Mono>
          </div>
          <div>
            <Mono color={LAC.amberDeep}>{EDITOR_NOTE.kicker}</Mono>
            <h2 style={{ fontFamily: F.serif, fontWeight: 400,
              fontSize: isMobile ? 36 : 56,
              lineHeight: 1, letterSpacing: '-0.025em', margin: '12px 0 0' }}>
              {renderTitle(EDITOR_NOTE.title, LAC.amberDeep)}
            </h2>
            {EDITOR_NOTE.paras.map((p, i) => (
              <p key={i} style={{ fontSize: 16, lineHeight: 1.7, color: LAC.inkSoft, marginTop: i === 0 ? 22 : 14 }}>{p}</p>
            ))}
            <div style={{ marginTop: 24 }}>
              <LACButton onClick={() => onNav('subscribe')}>Read Sundays</LACButton>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// ── Subscribe page ──────────────────────────────────────────────
function SubscribePage({ onNav }) {
  const isMobile = useIsMobile();
  const [picked, setPicked] = React.useState(null);
  return (
    <div style={{ background: LAC.paper, color: LAC.midnight, fontFamily: F.sans }}>
      <section style={{ maxWidth: 1320, margin: '0 auto',
        padding: isMobile ? '48px 20px 24px' : '88px 32px 48px' }}>
        <Mono color={LAC.amberDeep}>↳ subscribe · weekly · Sundays at {SITE.shipTime}</Mono>
        <div style={{ display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr',
          gap: isMobile ? 18 : 48,
          alignItems: 'end', marginTop: 14 }}>
          <h1 style={{ fontFamily: F.serif, fontWeight: 400,
            fontSize: isMobile ? 56 : 152,
            lineHeight: 0.92, letterSpacing: '-0.028em', margin: 0 }}>
            Three doors,<br />
            <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>one periodical.</span>
          </h1>
          <p style={{ fontFamily: F.serif, fontStyle: 'italic',
            fontSize: isMobile ? 18 : 22,
            lineHeight: 1.4, color: LAC.inkSoft, margin: 0 }}>
            Read it free for the rest of your life. Or unlock the prompt library. Or pull up a chair at the Founding table.
          </p>
        </div>
      </section>

      <section style={{ maxWidth: 1320, margin: '0 auto',
        padding: isMobile ? '16px 20px 32px' : '24px 32px 48px' }}>
        <div style={{ display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 0,
          borderTop: `1px solid ${LAC.lineHard}`,
          borderLeft: isMobile ? 0 : `1px solid ${LAC.line}` }}>
          {TIERS.map((t) => (
            <TierCard key={t.id} tier={t} picked={picked === t.id} onPick={() => setPicked(t.id)} isMobile={isMobile} />
          ))}
        </div>
      </section>

      <section style={{ background: LAC.paper2, borderTop: `1px solid ${LAC.line}`, borderBottom: `1px solid ${LAC.line}` }}>
        <div style={{ maxWidth: 1320, margin: '0 auto',
          padding: isMobile ? '36px 20px' : '56px 32px' }}>
          <div style={{ display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'baseline',
            justifyContent: 'space-between', gap: isMobile ? 6 : 0, marginBottom: 18 }}>
            <span style={{ fontFamily: F.serif, fontSize: isMobile ? 32 : 44, letterSpacing: '-0.025em' }}>
              What's the same<span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>.</span>
            </span>
            <Mono>Every tier · forever</Mono>
          </div>
          <div style={{ display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
            gap: 0,
            borderLeft: isMobile ? 0 : `1px solid ${LAC.line}`,
            borderTop: isMobile ? `1px solid ${LAC.line}` : 0 }}>
            {[
              ['One essay', "Short. 600–900 words. Saved for the train, the doctor's lounge.", 'am'],
              ['One prompt', 'Copy-and-run. Works the first time and every time.', 'noon'],
              ['Sundays', `${SITE.shipTime} local. Never any other day.`, 'am'],
              ['Peer to peer', 'Written by physicians. No outside voice. No ads.', 'pm'],
            ].map(([k, d, w]) => (
              <div key={k} style={{
                padding: isMobile ? '18px 0' : '18px 18px 22px',
                borderRight: isMobile ? 0 : `1px solid ${LAC.line}`,
                borderBottom: isMobile ? `1px solid ${LAC.line}` : 0 }}>
                <HorizonGlyph size={16} time={w} />
                <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 22, marginTop: 10 }}>{k}.</div>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: LAC.inkSoft, marginTop: 8 }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 980, margin: '0 auto',
        padding: isMobile ? '40px 20px 64px' : '64px 32px 80px' }}>
        <div style={{ display: 'flex',
          flexDirection: isMobile ? 'column' : 'row',
          alignItems: isMobile ? 'flex-start' : 'baseline',
          justifyContent: 'space-between', gap: isMobile ? 6 : 0,
          borderBottom: `1px solid ${LAC.lineHard}`, paddingBottom: 14, marginBottom: 18 }}>
          <span style={{ fontFamily: F.serif, fontSize: isMobile ? 32 : 44, letterSpacing: '-0.025em' }}>
            Quietly asked<span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>.</span>
          </span>
          <Mono>Honest answers</Mono>
        </div>
        <FAQ />
      </section>
    </div>
  );
}

function TierCard({ tier, picked, onPick, isMobile }) {
  const accent = accentFor(tier.when);
  const sub = tier.featured;
  return (
    <div style={{
      padding: isMobile ? 24 : 28,
      borderRight: isMobile ? 0 : `1px solid ${LAC.line}`,
      borderBottom: `1px solid ${LAC.line}`,
      background: sub ? LAC.midnight : 'transparent',
      color: sub ? LAC.paper : LAC.midnight, position: 'relative',
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: isMobile ? 'auto' : 580,
    }}>
      {sub && (
        <div style={{ position: 'absolute', top: -1, right: -1, background: LAC.amber, color: LAC.midnight,
          padding: '4px 12px', fontFamily: F.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase' }}>
          Most chosen
        </div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <HorizonGlyph size={18} time={tier.when} />
        <Mono color={sub ? LAC.amber : accent}>{tier.id.toUpperCase()}</Mono>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
        <span style={{ fontFamily: F.serif, fontWeight: 400,
          fontSize: isMobile ? 64 : 88,
          lineHeight: 0.9, letterSpacing: '-0.025em' }}>
          {tier.price}
        </span>
        <Mono color={sub ? '#A8A18B' : LAC.dim}>{tier.cadence}</Mono>
      </div>
      <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 28, lineHeight: 1.1, color: sub ? LAC.paper : LAC.midnight }}>
        {tier.name}.
      </div>
      <p style={{ fontSize: 14.5, lineHeight: 1.6, color: sub ? '#D6D0BC' : LAC.inkSoft, margin: 0 }}>{tier.pitch}</p>

      <ul style={{ listStyle: 'none', padding: 0, margin: '8px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {tier.perks.map((p, i) => (
          <li key={i} style={{ display: 'grid', gridTemplateColumns: '18px 1fr', columnGap: 10, alignItems: 'baseline',
            fontSize: 14, lineHeight: 1.45, color: sub ? '#E2DCC8' : LAC.inkSoft }}>
            <span style={{ color: sub ? LAC.amber : accent, fontFamily: F.mono, fontSize: 13 }}>+</span>
            <span>{p}</span>
          </li>
        ))}
      </ul>

      <div style={{ flex: 1 }} />

      {!picked ? (
        <button onClick={onPick} style={{
          marginTop: 18, padding: '13px 16px', cursor: 'pointer',
          background: sub ? LAC.amber : LAC.midnight, color: sub ? LAC.midnight : LAC.paper, border: 0,
          fontFamily: F.mono, fontWeight: 500, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          {tier.cta}
          <HorizonGlyph size={14} time={tier.when} stroke={sub ? LAC.midnight : LAC.paper} sun={sub ? LAC.midnight : LAC.amber} />
        </button>
      ) : (
        <div style={{ marginTop: 18, padding: 14, background: sub ? LAC.midnight2 : LAC.paper2,
          border: `1px solid ${sub ? '#2F3648' : LAC.line}` }}>
          <Mono color={sub ? LAC.amber : LAC.amberDeep}>✓ selected</Mono>
          <div style={{ marginTop: 6, fontFamily: F.serif, fontStyle: 'italic', fontSize: 18, color: sub ? LAC.paper : LAC.midnight }}>
            See you Sunday at {SITE.shipTime}.
          </div>
        </div>
      )}

      {tier.note && <Mono color={sub ? '#8B826E' : LAC.dim} size={10}>{tier.note}</Mono>}
    </div>
  );
}

const FAQS = [
  { q: 'How do I pay?',              a: 'Stripe. Cancel any time. We never charge you a surprise.' },
  { q: 'Will it spam me?',           a: `One email a week. Sunday at ${SITE.shipTime} local. That is the only message you will receive from us.` },
  { q: 'Is this medical advice?',    a: "No. Nothing in the periodical is medical content. It's the part of life that isn't medicine." },
  { q: 'Can I gift a subscription?', a: `Yes — write us at ${SITE.contactEmail} and we will set it up. Gifts include a printed card.` },
  { q: 'What about non-physicians?', a: 'You are welcome to read. The voice is peer-to-peer for physicians but the systems generalize.' },
];

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <div>
      {FAQS.map((f, i) => {
        const isOpen = open === i;
        return (
          <div key={i} onClick={() => setOpen(isOpen ? -1 : i)} style={{
            borderBottom: `1px solid ${LAC.lineSoft}`, padding: '18px 0', cursor: 'pointer',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
              <span style={{ fontFamily: F.serif, fontStyle: isOpen ? 'italic' : 'normal', fontSize: 22, lineHeight: 1.2, color: LAC.midnight }}>
                {f.q}
              </span>
              <Mono color={LAC.amberDeep}>{isOpen ? '–' : '+'}</Mono>
            </div>
            {isOpen && (
              <p style={{ fontSize: 15, lineHeight: 1.7, color: LAC.inkSoft, margin: '10px 0 0', maxWidth: 720 }}>
                {f.a}
              </p>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ── Contact page ────────────────────────────────────────────────
function ContactPage({ onNav }) {
  const isMobile = useIsMobile();
  const [reason, setReason] = React.useState(CONTACT_REASONS[0].id);
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [body, setBody] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const reasonObj = CONTACT_REASONS.find((r) => r.id === reason);

  return (
    <div style={{ background: LAC.paper, color: LAC.midnight, fontFamily: F.sans }}>
      <section style={{ maxWidth: 1080, margin: '0 auto',
        padding: isMobile ? '48px 20px 24px' : '88px 32px 32px' }}>
        <Mono color={LAC.amberDeep}>↳ the desk · we read everything</Mono>
        <h1 style={{ fontFamily: F.serif, fontWeight: 400,
          fontSize: isMobile ? 56 : 132,
          lineHeight: 0.92, letterSpacing: '-0.028em', margin: '14px 0 0' }}>
          Write the<br />
          <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>desk.</span>
        </h1>
        <p style={{ fontFamily: F.serif, fontStyle: 'italic',
          fontSize: isMobile ? 18 : 22,
          lineHeight: 1.4, color: LAC.inkSoft, marginTop: 20, maxWidth: 620 }}>
          A prompt that saved your weekend. A correction. A guest pitch. We reply by Sunday — usually before the next issue is in your inbox.
        </p>
      </section>

      <section style={{ maxWidth: 1080, margin: '0 auto',
        padding: isMobile ? '24px 20px 64px' : '40px 32px 88px' }}>
        <div style={{ display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr',
          gap: isMobile ? 32 : 56, alignItems: 'start' }}>
          <div>
            <Mono color={LAC.midnight} style={{ display: 'block', marginBottom: 18 }}>What's this about?</Mono>
            <div style={{ display: 'flex', flexDirection: 'column', borderTop: `1px solid ${LAC.lineHard}` }}>
              {CONTACT_REASONS.map((r) => {
                const on = r.id === reason;
                return (
                  <div key={r.id} onClick={() => setReason(r.id)} style={{
                    padding: '16px 0', borderBottom: `1px solid ${LAC.lineSoft}`, cursor: 'pointer',
                    display: 'flex', flexDirection: 'column', gap: 6,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
                      <span style={{ fontFamily: F.serif, fontStyle: on ? 'italic' : 'normal', fontSize: 22,
                        color: on ? LAC.amberDeep : LAC.midnight }}>{r.label}</span>
                      <Mono color={on ? LAC.amberDeep : LAC.dim}>{on ? '●' : '○'}</Mono>
                    </div>
                    {on && <p style={{ fontSize: 14, lineHeight: 1.55, color: LAC.inkSoft, margin: 0 }}>{r.hint}</p>}
                  </div>
                );
              })}
            </div>

            <div style={{ marginTop: 24, padding: 18, background: LAC.paper2, border: `1px solid ${LAC.line}` }}>
              <Mono color={LAC.midnight}>Or by mail</Mono>
              <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 20, marginTop: 8, wordBreak: 'break-all' }}>
                {SITE.contactEmail}
              </div>
              <Mono color={LAC.dim} size={10} style={{ display: 'block', marginTop: 10 }}>
                replies · Sundays before {SITE.shipTime}
              </Mono>
            </div>
          </div>

          <div>
            {!sent ? (
              <form onSubmit={(e) => { e.preventDefault(); if (email.includes('@') && body.length > 8) setSent(true); }}
                style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ display: 'grid',
                  gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
                  gap: 18 }}>
                  <Field label="Your name">
                    <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name"
                      style={inputStyle} />
                  </Field>
                  <Field label="Email">
                    <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@hospital.org" type="email"
                      style={inputStyle} />
                  </Field>
                </div>
                <Field label={`The note · ${reasonObj.label.toLowerCase()}`}>
                  <textarea value={body} onChange={(e) => setBody(e.target.value)}
                    placeholder={reasonObj.hint} rows={isMobile ? 7 : 9}
                    style={{ ...inputStyle, resize: 'vertical', fontFamily: F.sans, padding: '14px 16px' }} />
                </Field>
                <div style={{ display: 'flex',
                  flexDirection: isMobile ? 'column' : 'row',
                  justifyContent: 'space-between',
                  alignItems: isMobile ? 'stretch' : 'center', gap: 12 }}>
                  <Mono color={LAC.dim} size={10}>we read every note · reply by Sunday</Mono>
                  <LACButton type="submit" onClick={(e) => { /* form submit handles */ }}>Send to the desk</LACButton>
                </div>
              </form>
            ) : (
              <div style={{ background: LAC.midnight, color: LAC.paper, padding: 24 }}>
                <Mono color={LAC.amber}>✓ sent</Mono>
                <div style={{ fontFamily: F.serif, fontStyle: 'italic',
                  fontSize: isMobile ? 26 : 32, lineHeight: 1.15, marginTop: 12 }}>
                  Thank you. We'll write back by Sunday.
                </div>
                <p style={{ fontSize: 14.5, lineHeight: 1.6, color: '#D6D0BC', marginTop: 14, maxWidth: 460 }}>
                  Most replies arrive before {SITE.shipTime} local. If you submitted a tip and we run it, you'll get a heads-up the day before the issue ships.
                </p>
                <div style={{ marginTop: 22 }}>
                  <LACButton onClick={() => onNav('latest')} style={{ background: LAC.paper, color: LAC.midnight }}>
                    Read this week's issue
                  </LACButton>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

const inputStyle = {
  padding: '12px 14px', background: LAC.paper, border: `1px solid ${LAC.midnight}`,
  fontFamily: F.sans, fontSize: 16, color: LAC.midnight, outline: 'none', width: '100%',
  boxSizing: 'border-box',
};
function Field({ label, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Mono color={LAC.midnight}>{label}</Mono>
      {children}
    </label>
  );
}

Object.assign(window, {
  LatestPage, ArchivePage, AboutPage, SubscribePage, ContactPage,
});