/* ============================================================
   /coursework - dedicated 6-week curriculum page
   ============================================================ */

const CourseworkPage = () => {
  const weeks = [
    { n: '01', t: 'See it', sub: 'Pattern recognition', body: 'You name what you have been carrying. Before this week, the pattern was the air you breathed. After it, you can see it from across the room.' },
    { n: '02', t: 'Trace it', sub: 'The genealogy', body: 'Every pattern has a sender. We map yours - not to assign blame, but to set down a weight that was never yours to carry alone.' },
    { n: '03', t: 'Feel it', sub: 'The body remembers', body: 'The pattern lives in your nervous system. This week is about meeting the feeling underneath the strategy. Most people find anger. Some find grief. All find heat.' },
    { n: '04', t: 'Interrupt it', sub: 'The pause', body: 'You build a four-second pause between the trigger and the strategy. Four seconds is enough to choose. Four seconds is the whole work.' },
    { n: '05', t: 'Repair', sub: 'The hardest week', body: 'You have hurt someone with this pattern. You make one repair this week. Not to relitigate - to acknowledge. The script is given. The conversation is yours.' },
    { n: '06', t: 'Build it', sub: 'The completion', body: 'You write the line that replaces the pattern. You do not graduate from this. You become it.' },
  ];

  return (
    <div className="etp etp-bg-ivory" style={{ width: '100%', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      <SiteHeader active="coursework" />

      {/* Hero */}
      <section style={{ padding: '88px 56px 56px', borderBottom: '1px solid #1c1c1c' }}>
        <div className="label" style={{ color: '#666', marginBottom: 24 }}>The coursework</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'flex-end' }}>
          <h1 style={{ fontSize: 'clamp(64px, 9vw, 128px)', lineHeight: 0.88, letterSpacing: '-0.025em' }}>
            Six chapters.<br/><span style={{ color: '#1a6b5a' }}>One pattern.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55 }}>
            Not therapy. Not coaching. Six chapters of individual work you move through at your own pace - short course videos, workbooks, and written practices - alongside an always-on community that every pattern shares.
          </p>
        </div>
      </section>

      {/* Photo band */}
      <section style={{ padding: '0 56px 56px', background: '#f4f1eb' }}>
        <StoryPhoto
          src="https://images.pexels.com/photos/3278767/pexels-photo-3278767.jpeg?auto=compress&cs=tinysrgb&w=1800"
          alt="A person writing in a notebook beside a cup of coffee"
          caption="Twelve minutes a day. In your own handwriting."
          ratio="21 / 9"
        />
      </section>

      {/* Spec strip */}
      <section style={{ padding: '32px 56px', background: '#1c1c1c', color: '#f4f1eb', borderBottom: '1px solid #1c1c1c' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32 }}>
          {[['Format', 'Individual, self-paced'], ['Materials', 'Videos + workbooks'], ['Daily practice', '~12 min'], ['Community', 'Always-on · all patterns'], ['Library', 'Yours throughout']].map(([k, v]) => (
            <div key={k}>
              <div className="label" style={{ color: '#d4883a', marginBottom: 8 }}>{k}</div>
              <div style={{ fontSize: 24, fontWeight: 600 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* The six weeks */}
      <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48, marginBottom: 32, flexWrap: 'wrap' }}>
          <div className="label" style={{ color: '#1a6b5a' }}>● The arc</div>
          <PathSteps color="#1c1c1c" dot="#d4883a" style={{ maxWidth: 280, opacity: 0.8 }} />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {weeks.map((w, i) => (
            <article key={w.n} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 32, padding: '40px 32px', border: '1px solid #1c1c1c', background: i % 2 === 0 ? '#ebe6db' : '#f4f1eb' }}>
              <div>
                <div style={{ fontWeight: 700, fontSize: 72, lineHeight: 0.9, color: '#1a6b5a', letterSpacing: '-0.03em' }}>{w.n}</div>
                <div className="label" style={{ marginTop: 12, color: '#666' }}>{w.sub}</div>
              </div>
              <div>
                <h2 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 16 }}>{w.t}.</h2>
                <p style={{ fontSize: 18, lineHeight: 1.55, color: '#222', maxWidth: 720 }}>{w.body}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* What you get */}
      <section style={{ padding: '80px 56px', background: '#ebe6db', borderBottom: '1px solid #1c1c1c', borderTop: '1px solid #1c1c1c' }}>
        <h3 style={{ fontSize: 56, lineHeight: 0.95, marginBottom: 40, letterSpacing: '-0.02em' }}>What's in the box.</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {[
            ['The chapters', 'Six chapters of short course videos, workbooks, and written practices - individual work, at your pace.'],
            ['The room', 'An always-on community - every pattern, everyone welcome. Post your work, get witnessed, or read quietly. All counted.'],
            ['The dossier', 'A printable dossier of your pattern - your map, your genealogy, your new line - one click away, from day one.'],
            ['The library', 'Pattern-specific scripts, somatic prompts, repair templates. Yours forever.'],
            ['The threads', 'Pattern-specific threads in the community, open from day one. Not dissolving - ever.'],
            ['The completion', 'You write the line that replaces the pattern - and share it with your pattern\'s thread if you choose to.'],
          ].map(([t, b]) => (
            <div key={t} style={{ border: '1px solid #1c1c1c', padding: '28px 28px', background: '#f4f1eb' }}>
              <h4 style={{ fontSize: 28, lineHeight: 1, marginBottom: 14 }}>{t}.</h4>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: '#333' }}>{b}</p>
            </div>
          ))}
        </div>
      </section>

      {/* The community - one room, everyone welcome */}
      <section style={{ padding: '80px 56px', background: '#1a6b5a', color: '#f4f1eb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● The community</div>
            <h3 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.02em', marginBottom: 24 }}>One room.<br/>Every pattern welcome.</h3>
            <p style={{ fontSize: 18, lineHeight: 1.55, opacity: 0.9, maxWidth: 600 }}>The coursework is yours alone - the community is where it gets company. One always-on room, open to every member, all five patterns together. Post when something lands. Read when you need company. Nothing to fall behind on.</p>
          </div>
          <div style={{ background: '#1c1c1c', padding: 32, border: '1px solid #2a9e85' }}>
            <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● How it works</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                ['One room', 'Always on, open to all members'],
                ['All five patterns', 'No cohorts, no tracks'],
                ['Drop in', 'Anytime - no attendance kept'],
                ['Witnessed', 'Post your work - people who carry it read it'],
              ].map(([t, b]) => (
                <div key={t} style={{ display: 'grid', gridTemplateColumns: '130px 1fr', gap: 16, padding: '10px 0', borderBottom: '1px solid #444' }}>
                  <div style={{ fontWeight: 600, fontSize: 15 }}>{t}</div>
                  <div style={{ fontSize: 14, lineHeight: 1.45, opacity: 0.8 }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <SiteFooter />
    </div>
  );
};

window.CourseworkPage = CourseworkPage;