// About.jsx — Stratechery-style About page for Kelly Jia
function About({ onNavigate }) {
  const concepts = window.ARTICLE_TYPES.map(t => ({
    name: t.id,
    count: window.ISSUES.filter(i => i.section === t.id).length,
    desc: t.desc,
  }));

  const faqs = [
    { q: 'How often is it sent?', a: 'Every other Sunday. Roughly twenty-six issues a year.' },
    { q: 'What does a subscription get me?', a: 'The Sunday essay in your inbox every fortnight, plus the full open archive. No tiers, no paywall — everything is free.' },
    { q: 'Can I cancel any time?', a: 'Yes. One click. No retention email, no exit survey.' },
    { q: 'Do you take ads or sponsorships?', a: 'No. The newsletter is supported by readers, which is why it exists at all.' },
    { q: 'Where do I write to you?', a: 'kelly@konnectingdots.com — every email is read; most get a reply within a week.' },
  ];

  const eyebrowStyle = { fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--blue)' };
  const sectionStyle = { padding: '88px 0', borderTop: '1px solid var(--hairline)' };
  const h2Style = { fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 34, letterSpacing: '-0.01em', color: 'var(--ink)', margin: 0 };
  const pStyle = { fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.65, color: 'var(--ink)', margin: '0 0 1.1em 0', textWrap: 'pretty' };

  return (
    <main style={{ maxWidth: 'var(--measure-page)', margin: '0 auto', padding: '0 40px' }}>
      {/* ── Hero ───────────────────────────────────────────── */}
      <section style={{ padding: '88px 0 64px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 80, alignItems: 'start' }}>
        <div>
          <div style={eyebrowStyle}>About · Kelly Jia</div>
          <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 68, lineHeight: 1.05, letterSpacing: '-0.02em', color: 'var(--ink)', margin: '20px 0 24px', textWrap: 'balance' }}>
            A newsletter by Kelly Jia, about the connection between points.
          </h1>
          <p style={{ ...pStyle, fontSize: 20, color: 'var(--slate)' }}>
            konnecting dots is a fortnightly essay on craft, attention, and the quiet relationships between ideas that don't usually sit next to each other. Read by writers, designers, and a handful of patient strangers.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
            <button onClick={() => onNavigate('issue')} style={{
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              padding: '12px 22px', background: 'var(--ink)', color: 'var(--bone)', border: 'none', borderRadius: 2, cursor: 'pointer',
            }}>Read the latest</button>
            <button onClick={() => onNavigate('archive')} style={{
              fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              padding: '12px 22px', background: 'transparent', color: 'var(--ink)', border: '1px solid var(--ink)', borderRadius: 2, cursor: 'pointer',
            }}>Browse archive</button>
          </div>
        </div>
        <aside style={{
          background: 'var(--bone-card)', border: '1px solid var(--hairline)', borderRadius: 4,
          padding: 24, position: 'relative',
        }}>
          {/* Portrait placeholder — initials in serif */}
          <div style={{
            aspectRatio: '4/5',
            background: 'var(--sage)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative', overflow: 'hidden',
          }}>
            <span style={{ fontFamily: 'var(--serif)', fontWeight: 400, fontSize: 120, color: 'var(--slate)', letterSpacing: '-0.02em', lineHeight: 1 }}>
              KJ
            </span>
            <span style={{ position: 'absolute', bottom: 16, left: 18, fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--slate)' }}>
              Portrait · placeholder
            </span>
          </div>
          <div style={{ marginTop: 18, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--slate)' }}>
            Kelly Jia · Editor & writer
          </div>
        </aside>
      </section>

      {/* ── Who is Kelly ───────────────────────────────────── */}
      <section style={sectionStyle}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 80, alignItems: 'start' }}>
          <div style={eyebrowStyle}>01 · Who</div>
          <div style={{ maxWidth: 640 }}>
            <h2 style={h2Style}>About Kelly</h2>
            <div style={{ marginTop: 28 }}>
              <p style={pStyle}>
                Kelly Jia is a writer and designer based in Brooklyn. She has spent the last ten years thinking, in one form or another, about the spaces between things — first as a product designer, then as the editor of a small print quarterly, and now here.
              </p>
              <p style={pStyle}>
                Her work has appeared in <em>The Brick Magazine</em>, <em>Yield</em>, and the early issues of <em>Field Notes</em> (the bookbinder's almanac, not the stationery). She writes about craft, attention, and the books and rooms that have shaped her thinking.
              </p>
              <p style={pStyle}>
                konnecting dots began as a Tuesday-night habit and quietly turned into a publication. It is read in roughly forty countries, including her own.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── What the newsletter is ─────────────────────────── */}
      <section style={sectionStyle}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 80, alignItems: 'start' }}>
          <div style={eyebrowStyle}>02 · What</div>
          <div style={{ maxWidth: 640 }}>
            <h2 style={h2Style}>What you'll read</h2>
            <div style={{ marginTop: 28 }}>
              <p style={pStyle}>
                Each issue is a single essay, around fifteen hundred words, on something Kelly has been thinking about for at least a fortnight. The form has stayed the same since issue one: a kicker, a title, a dek, and one carefully argued through-line.
              </p>
              <p style={pStyle}>
                There are no listicles, no roundups, no "five things." The dot does the talking. Some issues are about craft directly; most are about something else, and arrive at craft from the side.
              </p>
            </div>
          </div>
        </div>

        {/* Concepts grid — stratechery-style topic taxonomy */}
        <div style={{ marginTop: 56, paddingTop: 32, borderTop: '1px solid var(--hairline)' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
            <div style={eyebrowStyle}>Concepts · Browse by topic</div>
            <a href="#" onClick={(e) => { e.preventDefault(); onNavigate && onNavigate('concepts'); }} style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--slate)', textDecoration: 'none', borderBottom: '1px dotted var(--slate)' }}>All topics →</a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'var(--hairline)' }}>
            {concepts.map(c => (
              <a key={c.name} href="#" onClick={(e) => { e.preventDefault(); onNavigate && onNavigate('concepts'); }} style={{
                background: 'var(--bone)', padding: '24px 24px 28px',
                display: 'flex', flexDirection: 'column', gap: 10,
                textDecoration: 'none', color: 'var(--ink)', border: 'none',
                transition: 'background 150ms ease-out',
              }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--bone-card)'}
              onMouseLeave={e => e.currentTarget.style.background = 'var(--bone)'}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 11, height: 11, borderRadius: 50, background: window.topicColor(c.name), flexShrink: 0 }} />
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 400, letterSpacing: '-0.01em' }}>{c.name}</span>
                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--slate)', letterSpacing: '0.16em' }}>{c.count}</span>
                </div>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.5, color: 'var(--slate)', margin: 0 }}>{c.desc}</p>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ── FAQ ────────────────────────────────────────────── */}
      <section style={sectionStyle}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 80, alignItems: 'start' }}>
          <div style={eyebrowStyle}>03 · Questions</div>
          <div style={{ maxWidth: 720 }}>
            <h2 style={h2Style}>Frequently asked</h2>
            <dl style={{ marginTop: 28, display: 'grid', gap: 0 }}>
              {faqs.map((f, i) => (
                <div key={i} style={{ padding: '24px 0', borderTop: i === 0 ? '1px solid var(--hairline)' : 'none', borderBottom: '1px solid var(--hairline)' }}>
                  <dt style={{ fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 400, letterSpacing: '-0.005em', color: 'var(--ink)' }}>{f.q}</dt>
                  <dd style={{ margin: '8px 0 0', fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.6, color: 'var(--slate)', maxWidth: 600 }}>{f.a}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </section>

      {/* ── Colophon ───────────────────────────────────────── */}
      <section style={{ ...sectionStyle, paddingBottom: 32 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', gap: 80, alignItems: 'start' }}>
          <div style={eyebrowStyle}>04 · Colophon</div>
          <div style={{ maxWidth: 720, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.65, color: 'var(--slate)' }}>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 8 }}>Typography</div>
              Georgia, throughout. Mono labels in the system monospace.
            </div>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 8 }}>Paper</div>
              Set on Bone White. Never pure white. The dot is always Daylight Blue.
            </div>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 8 }}>Tools</div>
              Drafted in iA Writer. Set on the open web. No tracking, no ads.
            </div>
            <div>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink)', marginBottom: 8 }}>Schedule</div>
              Sundays, every fortnight, since 2023. Free to read, always.
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}
window.About = About;