// ============================================================
// WRITING — simple intro + link to Quiet Signals on Substack
// ============================================================

function WritingScreen({ go }) {
  return (
    <div className="screen-enter" data-screen-label="Writing">
      <section className="section writing-hero">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Quiet Signals</span>
            <h1 className="page-title" style={{ maxWidth: '18ch' }}>Observations on systems, leadership, and what lasts.</h1>
            <Lottie src="assets/lottie/quirky-underline.json" className="accent-line" height={22} style={{ marginTop: 'var(--space-4)', maxWidth: '260px' }} />
          </Reveal>
          <Reveal delay={80}>
            <div className="writing-body">
              <p>I write about the things I think about most: how complex systems actually work, where human judgement should stay in the loop, and what it means to lead while still being in the work.</p>
              <p>These are not content pieces. They are observations, written slowly, about leadership, design, AI, and modern product work. The kind of thinking that only sharpens when you write it down.</p>
              <p>All writing lives on Substack under the name <strong>Quiet Signals</strong>.</p>
            </div>
          </Reveal>
          <Reveal delay={140}>
            <div className="writing-cta">
              <a className="btn btn-primary" href={PROFILE.substack} target="_blank" rel="noopener">
                Read on Substack <Icon name="arrow-up-right" size={16} />
              </a>
              <a className="btn btn-secondary" href={PROFILE.substack} target="_blank" rel="noopener">
                Subscribe <Icon name="arrow-up-right" size={16} />
              </a>
            </div>
          </Reveal>
          <Reveal delay={200} className="writing-topics">
            <span className="eyebrow" style={{ marginBottom: 'var(--space-4)', display: 'block' }}>Topics</span>
            <div className="topic-chips">
              {['Systems thinking', 'AI supervision', 'Leadership', 'Decision making', 'Enterprise design', 'Product strategy', 'The player-coach model'].map((t, i) => (
                <span className="chip" key={i}>{t}</span>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { WritingScreen });