// home.jsx — three hero treatments + the shared body:
//   - HeroMasthead   (A · editorial masthead — period detail, rule, dept badges)
//   - HeroCover      (B · full-bleed cover — large italic, photo, single CTA)
//   - HeroMinimal    (C · one line + email — Instrument Serif + form, nothing else)
// Body underneath is shared: five pillars · prompt teaser · recent archive.
// All editorial copy comes from data.jsx. Mobile-first: <768px stacks all grids.

const { LAC, F, HorizonGlyph, Mono, Dept, Asterism, LACButton, Rule, PhotoSlot, EmailField, accentFor, useIsMobile } = window;
const { SITE, CURRENT_ISSUE, ALSO_IN_ISSUE, ARCHIVE, PILLARS } = 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>
  );
}

// Padding shorthand
const pad = (m, d) => (m && d ? (mobile) => mobile ? m : d : null);

// ── Variant A — Editorial Masthead ──────────────────────────────
function HeroMasthead({ onNav }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ maxWidth: 1320, margin: '0 auto',
      padding: isMobile ? '32px 20px 20px' : '56px 32px 32px' }}>
      {/* Period strip */}
      <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row',
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between', gap: isMobile ? 6 : 0,
        borderTop: `1px solid ${LAC.lineHard}`, borderBottom: `1px solid ${LAC.line}`,
        padding: '10px 0', marginBottom: isMobile ? 22 : 28 }}>
        <Mono color={LAC.midnight}>Vol. {SITE.volume} · No. {CURRENT_ISSUE.no}</Mono>
        <Mono color={LAC.dim}>{CURRENT_ISSUE.day}, {CURRENT_ISSUE.date} · {SITE.shipTime}</Mono>
        {!isMobile && <Mono color={LAC.midnight}>The Horizon Brief</Mono>}
      </div>

      <div style={{ display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.55fr 1fr',
        gap: isMobile ? 36 : 56, alignItems: 'start' }}>
        <div>
          <Mono color={LAC.amberDeep} style={{ marginBottom: 18, display: 'inline-block' }}>
            ↳ a field guide for the post-call life
          </Mono>
          <h1 style={{ fontFamily: F.serif, fontWeight: 400,
            fontSize: isMobile ? 76 : 192,
            lineHeight: 0.86, letterSpacing: '-0.028em', margin: 0 }}>
            Life,<br />
            <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>after</span><br />
            Call.
          </h1>
          <div style={{ marginTop: isMobile ? 24 : 36, paddingTop: 16,
            borderTop: `1px solid ${LAC.line}`,
            display: 'flex', flexDirection: isMobile ? 'column' : 'row',
            alignItems: isMobile ? 'flex-start' : 'baseline',
            gap: isMobile ? 10 : 16,
            justifyContent: 'space-between' }}>
            <span style={{ fontFamily: F.serif, fontStyle: 'italic',
              fontSize: isMobile ? 18 : 22,
              color: LAC.inkSoft, lineHeight: 1.3, maxWidth: 460 }}>
              “You work hard, so why shouldn't your AI.”
            </span>
            <Mono color={LAC.dim}>est. {SITE.estYear} · Vol. {SITE.volume}</Mono>
          </div>
        </div>

        {/* Right column — this week's lede */}
        <div style={{ paddingTop: 8, display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Mono color={LAC.midnight}>This week · §{CURRENT_ISSUE.pillar.no} · The lede</Mono>
          <div onClick={() => onNav('latest')} style={{ cursor: 'pointer' }}>
            <Dept no={CURRENT_ISSUE.pillar.no} name={CURRENT_ISSUE.pillar.name.toUpperCase()} when={CURRENT_ISSUE.pillar.when} />
            <h2 style={{ fontFamily: F.serif, fontWeight: 400,
              fontSize: isMobile ? 40 : 60,
              lineHeight: 0.92, letterSpacing: '-0.025em', margin: '14px 0 0' }}>
              {renderTitle(CURRENT_ISSUE.title, LAC.amberDeep)}
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: LAC.inkSoft, marginTop: 14, maxWidth: 420 }}>
              {CURRENT_ISSUE.deck}
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginTop: 18, flexWrap: 'wrap' }}>
              <LACButton>Read{CURRENT_ISSUE.readMin ? ` · ${CURRENT_ISSUE.readMin} min` : ''}</LACButton>
              <Mono>By {CURRENT_ISSUE.byline}</Mono>
            </div>
          </div>

          {ALSO_IN_ISSUE.length > 0 && (
            <React.Fragment>
              <Rule color={LAC.line} style={{ marginTop: 14 }} />
              <Mono color={LAC.midnight}>Also in this issue</Mono>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {ALSO_IN_ISSUE.map((x) => (
                  <div key={x.no} onClick={() => onNav('latest')}
                    style={{ display: 'grid', gridTemplateColumns: '22px 32px 1fr auto',
                      alignItems: 'baseline', columnGap: 10, cursor: 'pointer' }}>
                    <HorizonGlyph size={14} time={x.when} />
                    <Mono color={accentFor(x.when)}>{x.no}</Mono>
                    <span style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 16, color: LAC.midnight }}>{x.title}</span>
                    <Mono color={LAC.dim} size={10}>{x.min} min</Mono>
                  </div>
                ))}
              </div>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

// ── Variant B — Full-bleed Cover ────────────────────────────────
function HeroCover({ onNav }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: LAC.midnight, color: LAC.paper }}>
      <div style={{ maxWidth: 1320, margin: '0 auto',
        padding: isMobile ? '64px 20px 40px' : '32px 32px 56px',
        position: 'relative',
        minHeight: isMobile ? 'auto' : 720,
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
        gap: isMobile ? 32 : 56,
        alignItems: isMobile ? 'start' : 'end' }}>

        {/* Periodical strip — collapsed on mobile */}
        {!isMobile && (
          <div style={{ position: 'absolute', top: 24, left: 32, right: 32,
            display: 'flex', justifyContent: 'space-between',
            paddingBottom: 12, borderBottom: `1px solid rgba(255,255,255,0.22)` }}>
            <Mono color={LAC.amber}>Iss. {CURRENT_ISSUE.no} · Vol. {CURRENT_ISSUE.vol} · {CURRENT_ISSUE.pillar.when.toUpperCase()}</Mono>
            <Mono color={LAC.dim2}>{CURRENT_ISSUE.day.slice(0,3)} · {CURRENT_ISSUE.date} · {SITE.shipTime} · local</Mono>
            <Mono color={LAC.amber}>The Horizon Brief</Mono>
          </div>
        )}

        {/* Left — cover headline */}
        <div style={{ paddingTop: isMobile ? 0 : 64 }}>
          {isMobile && (
            <div style={{ marginBottom: 18, display: 'flex', justifyContent: 'space-between' }}>
              <Mono color={LAC.amber}>Iss. {CURRENT_ISSUE.no} · {CURRENT_ISSUE.pillar.when.toUpperCase()}</Mono>
              <Mono color={LAC.dim2}>{CURRENT_ISSUE.dateShort}</Mono>
            </div>
          )}
          <Mono color={LAC.amber} style={{ display: 'inline-block', marginBottom: 18 }}>
            ↳ this week · §{CURRENT_ISSUE.pillar.no} · {CURRENT_ISSUE.pillar.name}
          </Mono>
          <h1 style={{ fontFamily: F.serif, fontWeight: 400,
            fontSize: isMobile ? 60 : 168,
            lineHeight: 0.86, letterSpacing: '-0.028em', margin: 0 }}>
            {renderTitle(CURRENT_ISSUE.title, LAC.amber)}
          </h1>
          <p style={{ fontFamily: F.serif, fontStyle: 'italic',
            fontSize: isMobile ? 18 : 24,
            lineHeight: 1.32, color: '#D6D0BC', margin: '24px 0 0', maxWidth: 520 }}>
            {CURRENT_ISSUE.deck}
          </p>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 28, flexWrap: 'wrap' }}>
            <button onClick={() => onNav('latest')} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '13px 18px', border: 0, background: LAC.amber, color: LAC.midnight,
              fontFamily: F.mono, fontWeight: 500, fontSize: 11, letterSpacing: '0.14em',
              textTransform: 'uppercase', cursor: 'pointer',
            }}>
              Open Iss. {CURRENT_ISSUE.no}
              <HorizonGlyph size={14} time="am" stroke={LAC.midnight} sun={LAC.midnight} />
            </button>
            <Mono color={LAC.dim2}>By {CURRENT_ISSUE.byline}{CURRENT_ISSUE.readMin ? ` · ${CURRENT_ISSUE.readMin} min` : ''}</Mono>
          </div>
        </div>

        {/* Right — cover artwork */}
        <div style={{ paddingTop: isMobile ? 0 : 64 }}>
          <div style={{ aspectRatio: '3 / 4', position: 'relative', overflow: 'hidden',
            background: 'linear-gradient(180deg, #2A3243 0%, #181F2B 60%, #0F141C 100%)',
            border: `1px solid rgba(255,255,255,0.12)` }}>
            <FauxCoverArt />
            <div style={{ position: 'absolute', top: 16, left: 16, right: 16, display: 'flex', justifyContent: 'space-between' }}>
              <Mono color={LAC.amber}>{CURRENT_ISSUE.no}</Mono>
              <Mono color={LAC.amber}>{SITE.shipTime}</Mono>
            </div>
            <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18, display: 'flex', flexDirection: 'column', gap: 6 }}>
              <Mono color="#D6D0BC" size={10}>The Horizon Brief · No. {CURRENT_ISSUE.no}</Mono>
              <div style={{ fontFamily: F.serif, fontStyle: 'italic',
                fontSize: isMobile ? 18 : 22, color: LAC.paper, lineHeight: 1.1 }}>
                {renderTitle(CURRENT_ISSUE.title, LAC.paper)}
              </div>
            </div>
          </div>
          <Mono color={LAC.dim2} style={{ display: 'block', marginTop: 12, textAlign: 'right' }}>
            cover · {CURRENT_ISSUE.byline} · {SITE.editorShort}
          </Mono>
        </div>
      </div>
    </section>
  );
}

function FauxCoverArt() {
  return (
    <svg viewBox="0 0 100 130" preserveAspectRatio="none"
         style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <defs>
        <linearGradient id="cv_sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3A4358" />
          <stop offset="100%" stopColor="#181F2B" />
        </linearGradient>
        <radialGradient id="cv_sun" cx="0.7" cy="0.62" r="0.4">
          <stop offset="0%" stopColor="#F6AD55" stopOpacity="0.9" />
          <stop offset="60%" stopColor="#C77A1F" stopOpacity="0.4" />
          <stop offset="100%" stopColor="#C77A1F" stopOpacity="0" />
        </radialGradient>
      </defs>
      <rect width="100" height="130" fill="url(#cv_sky)" />
      <rect width="100" height="130" fill="url(#cv_sun)" />
      {[78, 84, 90, 96, 104, 112, 122].map((y, i) => (
        <line key={i} x1="0" x2="100" y1={y} y2={y}
              stroke="#F6AD55" strokeOpacity={0.18 + i * 0.06} strokeWidth="0.25" />
      ))}
      <circle cx="70" cy="80" r="9.5" fill="#F6AD55" />
      <line x1="0" x2="100" y1="80" y2="80" stroke="#F4EFE2" strokeOpacity="0.7" strokeWidth="0.25" />
      <line x1="6" x2="94" y1="14" y2="14" stroke="#F4EFE2" strokeOpacity="0.2" strokeWidth="0.2" />
    </svg>
  );
}

// ── Variant C — Minimal Instrument Serif + Email ────────────────
function HeroMinimal({ onNav }) {
  const isMobile = useIsMobile();
  const [sent, setSent] = React.useState(false);
  const subscriberCopy = SITE.subscribers && !SITE.subscribers.startsWith('{')
    ? `free · no medical content · ${SITE.subscribers} physicians read it · unsubscribe any time`
    : 'free · no medical content · unsubscribe any time';
  return (
    <section style={{ background: LAC.paper, color: LAC.midnight, minHeight: isMobile ? 'auto' : 720 }}>
      <div style={{ maxWidth: 980, margin: '0 auto',
        padding: isMobile ? '56px 20px 56px' : '120px 32px 80px',
        display: 'flex', flexDirection: 'column', alignItems: 'flex-start',
        gap: isMobile ? 24 : 32 }}>

        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <HorizonGlyph size={22} time="am" />
          <Mono color={LAC.midnight}>LifeAfterCall · The Horizon Brief</Mono>
          {!isMobile && <span style={{ width: 16, height: 1, background: LAC.midnight, opacity: 0.4 }} />}
          <Mono color={LAC.dim}>Sundays at {SITE.shipTime}</Mono>
        </div>

        <h1 style={{ fontFamily: F.serif, fontWeight: 400,
          fontSize: isMobile ? 52 : 132,
          lineHeight: 0.94, letterSpacing: '-0.025em', margin: 0, maxWidth: 920 }}>
          A field guide for the <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>post&#8209;call</span> life.
        </h1>

        <p style={{ fontFamily: F.serif, fontStyle: 'italic',
          fontSize: isMobile ? 19 : 26,
          lineHeight: 1.35, color: LAC.inkSoft, maxWidth: 720, margin: 0 }}>
          One essay. One prompt. Six minutes. Once a week. The meals, the trips, the schools, the inbox — handed to an agent that runs while you are at the hospital.
        </p>

        {!sent ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 4, width: '100%' }}>
            <EmailField onSubmit={() => setSent(true)} cta="Read Sundays" />
            <Mono color={LAC.dim} size={10}>{subscriberCopy}</Mono>
          </div>
        ) : (
          <div style={{ padding: '18px 22px', background: LAC.midnight, color: LAC.paper, maxWidth: 460, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <Mono color={LAC.amber}>✓ subscribed</Mono>
            <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 22 }}>See you Sunday at {SITE.shipTime.replace(' a.m.', '')}.</div>
          </div>
        )}

        <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap' }}>
          <Asterism width={isMobile ? 80 : 120} />
          <span onClick={() => onNav('latest')} style={{ cursor: 'pointer', fontFamily: F.serif, fontStyle: 'italic', fontSize: 18, color: LAC.midnight, borderBottom: `1px solid ${LAC.amberDeep}` }}>
            Read this week's issue →
          </span>
        </div>
      </div>
    </section>
  );
}

// ── Five pillars ────────────────────────────────────────────────
function FivePillars({ onNav }) {
  const isMobile = useIsMobile();
  return (
    <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', alignItems: 'baseline',
          flexWrap: 'wrap', gap: isMobile ? 8 : 18, marginBottom: isMobile ? 24 : 36 }}>
          <span style={{ fontFamily: F.serif, fontSize: isMobile ? 44 : 76, lineHeight: 0.9, letterSpacing: '-0.025em' }}>The five</span>
          <span style={{ fontFamily: F.serif, fontSize: isMobile ? 44 : 76, lineHeight: 0.9, letterSpacing: '-0.025em', fontStyle: 'italic', color: LAC.amberDeep }}>pillars.</span>
          {!isMobile && <span style={{ flex: 1 }} />}
          {!isMobile && <Mono>Non-clinical, on purpose.</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 }}>
          {PILLARS.map((p) => (
            <div key={p.no} style={{
              padding: isMobile ? '20px 0' : '22px 20px 24px',
              borderRight: isMobile ? 0 : `1px solid ${LAC.line}`,
              borderBottom: isMobile ? `1px solid ${LAC.line}` : 0,
              minHeight: isMobile ? 'auto' : 200 }}>
              <HorizonGlyph size={20} time={p.when} />
              <Mono color={accentFor(p.when)} style={{ display: 'block', marginTop: 12 }}>{p.no}</Mono>
              <div style={{ fontFamily: F.serif, fontStyle: 'italic', fontSize: 26, lineHeight: 1.1, letterSpacing: '-0.015em', marginTop: 4, color: LAC.midnight }}>{p.name}.</div>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: LAC.inkSoft, marginTop: 12 }}>{p.blurb}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Prompt teaser ───────────────────────────────────────────────
function PromptTeaser({ onNav }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: LAC.paper, padding: isMobile ? '40px 20px' : '64px 32px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1.05fr',
        gap: isMobile ? 28 : 56, alignItems: 'center' }}>
        <div>
          <Mono color={LAC.amberDeep}>↳ every issue ships one prompt</Mono>
          <h2 style={{ fontFamily: F.serif, fontWeight: 400,
            fontSize: isMobile ? 40 : 76,
            lineHeight: 0.95, letterSpacing: '-0.025em', margin: '14px 0 0' }}>
            The essay is short.<br />
            <span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>The prompt</span> is the part you keep.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: LAC.inkSoft, marginTop: 22, maxWidth: 480 }}>
            Each issue includes one copy-and-run prompt — boring on purpose, designed to be reliable. Save it to your phone, run it Sunday, forget about it until next week.
          </p>
          <div style={{ marginTop: 22, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <LACButton onClick={() => onNav('latest')}>Open this week's prompt</LACButton>
            <LACButton onClick={() => onNav('subscribe')} ghost glyph={null}>The Prompt library</LACButton>
          </div>
        </div>
        <div style={{ background: LAC.midnight, color: LAC.paper, padding: isMobile ? 20 : 28, position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap', gap: 8 }}>
            <Mono color={LAC.amber}>▤ The Prompt · Iss. {CURRENT_ISSUE.no}</Mono>
            <Mono color={LAC.dim2}>copy & run</Mono>
          </div>
          <div style={{ fontFamily: F.mono, fontSize: 13, lineHeight: 1.65, color: '#D8D1BB', wordBreak: 'break-word' }}>
            {CURRENT_ISSUE.prompt.map((l, i) => <div key={i}>{l}</div>)}
          </div>
          <div style={{ marginTop: 20, 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',
            }}>↻ schedule sundays</button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Recent archive ──────────────────────────────────────────────
function ArchivePreview({ onNav }) {
  const isMobile = useIsMobile();
  if (!ARCHIVE.length) return null;
  return (
    <section style={{ background: LAC.paper2, borderTop: `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,
          marginBottom: 18, borderBottom: `1px solid ${LAC.lineHard}`, paddingBottom: 14 }}>
          <span style={{ fontFamily: F.serif, fontSize: isMobile ? 32 : 48, letterSpacing: '-0.025em' }}>
            Recent issues<span style={{ fontStyle: 'italic', color: LAC.amberDeep }}>.</span>
          </span>
          <Mono>{ARCHIVE.length} issue{ARCHIVE.length === 1 ? '' : 's'} · weekly · Sundays at {SITE.shipTime}</Mono>
        </div>
        <div>
          {ARCHIVE.slice(0, 6).map((a) => (
            <div key={a.no} onClick={() => a.latest && onNav('latest')} style={isMobile ? {
              display: 'flex', flexDirection: 'column', gap: 6, padding: '14px 0',
              borderBottom: `1px solid ${LAC.lineSoft}`, cursor: a.latest ? 'pointer' : 'default',
              opacity: a.latest ? 1 : 0.88,
            } : {
              display: 'grid', gridTemplateColumns: '36px 80px 92px 1fr 220px 70px',
              alignItems: 'baseline', columnGap: 20, padding: '18px 0',
              borderBottom: `1px solid ${LAC.lineSoft}`, cursor: a.latest ? 'pointer' : 'default',
              opacity: a.latest ? 1 : 0.88,
            }}>
              {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: 20, color: LAC.midnight }}>{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: 22, 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: 'flex', justifyContent: 'center', marginTop: 28 }}>
          <LACButton ghost onClick={() => onNav('archive')} glyph={null}>View the full archive →</LACButton>
        </div>
      </div>
    </section>
  );
}

function Homepage({ onNav, hero = 'masthead' }) {
  const Hero = hero === 'cover' ? HeroCover : hero === 'minimal' ? HeroMinimal : HeroMasthead;
  return (
    <div style={{ background: LAC.paper, color: LAC.midnight, fontFamily: F.sans }}>
      <Hero onNav={onNav} />
      <FivePillars onNav={onNav} />
      <PromptTeaser onNav={onNav} />
      <ArchivePreview onNav={onNav} />
    </div>
  );
}

Object.assign(window, {
  Homepage, HeroMasthead, HeroCover, HeroMinimal,
  FivePillars, PromptTeaser, ArchivePreview,
});