/* ============================================================
   /community - how the always-on community works (no live calls)
   ============================================================ */

const CommunityPage = () => (
  <div className="etp etp-bg-ivory" style={{ minHeight: '100%' }}>
    <SiteHeader active="community" />

    <section style={{ position: 'relative', overflow: 'hidden', padding: '88px 56px 56px', borderBottom: '1px solid #1c1c1c' }}>
      <CircleRoom size={420} color="#1c1c1c" dot="#d4883a" style={{ position: 'absolute', top: -60, right: -80, pointerEvents: 'none', opacity: 0.5 }} />
      <div className="label" style={{ color: '#666', marginBottom: 24, position: 'relative', zIndex: 1 }}>The community</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' }}>
          You don't break a pattern<br/><span style={{ color: '#1a6b5a' }}>by yourself.</span>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.55 }}>
          The community is the part that doesn't end. Always-on, while you're in coursework and long after. Threads that stay up forever. People who carry what you carry, who watched you do the work, who will say your name back to you when you forget who you became.
        </p>
      </div>
    </section>

    {/* THREE PARTS */}
    <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
      <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● How it actually works</div>
      <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 56, maxWidth: 900 }}>Three parts. All of them always on.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        <article style={{ background: '#1a6b5a', color: '#f4f1eb', padding: '40px 32px', minHeight: 440, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● 01 - Pattern threads</div>
          <div className="label" style={{ color: '#d4883a', marginBottom: 24, opacity: 0.7 }}>Daily · async · ongoing</div>
          <h3 style={{ fontSize: 36, lineHeight: 0.95, marginBottom: 20 }}>Your pattern.<br/>Your room.</h3>
          <p style={{ fontSize: 15, lineHeight: 1.55, marginBottom: 24, opacity: 0.95 }}>One thread per pattern. Slow forum, not chat. You post the work when it lands - the practice that worked, the moment it fell apart - and people who carry the same thing read it and write back.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, marginTop: 'auto' }}>
            {['One thread per pattern', 'Post or read - both count', 'Team-moderated', 'No DMs, no streaks'].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10 }}>
                <span style={{ color: '#d4883a' }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>
        </article>

        <article style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '40px 32px', minHeight: 440, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● 02 - The commons</div>
          <div className="label" style={{ color: '#d4883a', marginBottom: 24, opacity: 0.7 }}>Everyone · async · ongoing</div>
          <h3 style={{ fontSize: 36, lineHeight: 0.95, marginBottom: 20 }}>All five patterns.<br/>One room.</h3>
          <p style={{ fontSize: 15, lineHeight: 1.55, marginBottom: 24, opacity: 0.95 }}>One shared space for the whole community. The Peacekeeper learns what the Vault is carrying. The vocabulary gets shared, and the loneliness of "only me" ends here.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, marginTop: 'auto' }}>
            {['Open to every member', 'Cross-pattern, one vocabulary', 'Searchable archive', 'We close with the same line every time'].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10 }}>
                <span style={{ color: '#d4883a' }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>
        </article>

        <article style={{ background: '#ebe6db', color: '#1c1c1c', border: '1px solid #1c1c1c', padding: '40px 32px', minHeight: 440, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#1a6b5a', marginBottom: 16 }}>● 03 - The library</div>
          <div className="label" style={{ color: '#1a6b5a', marginBottom: 24, opacity: 0.7 }}>Always · yours · growing</div>
          <h3 style={{ fontSize: 36, lineHeight: 0.95, marginBottom: 20 }}>Every tool.<br/>Kept for you.</h3>
          <p style={{ fontSize: 15, lineHeight: 1.55, marginBottom: 24 }}>Every script, somatic prompt, and repair template from the coursework, in one searchable place. Pattern-tagged. It grows as the work grows, and it's yours for as long as you're here.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13, marginTop: 'auto' }}>
            {['Scripts for the hard conversations', 'Somatic prompts', 'Repair templates', 'Searchable, pattern-tagged'].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10 }}>
                <span style={{ color: '#1a6b5a' }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>
        </article>
      </div>
    </section>

    {/* PHOTO BAND — the people */}
    <section style={{ padding: '0 56px 72px', background: '#f4f1eb' }}>
      <StoryPhoto
        src="https://images.pexels.com/photos/9353491/pexels-photo-9353491.jpeg?auto=compress&cs=tinysrgb&w=1800"
        alt="A group of friends holding each other in a warm embrace"
        caption="People who carry what you carry."
        ratio="21 / 9"
      />
    </section>

    {/* A WEEK INSIDE */}
    <section style={{ padding: '80px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● Inside the community - the shape we're building</div>
      <h2 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 48 }}>A week inside.<br/>What actually happens.</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {[
          ['Daily', 'The practice', '~12 minutes: a short video or written practice from your chapter. Done before the coffee is cold.'],
          ['When it lands', 'The post', 'Something happened - the pattern ran, or for the first time it didn\'t. You write it down in your thread, in your own words.'],
          ['Soon after', 'The witness', 'People who carry the same pattern read it and write back. Questions, not advice. Recognition, not fixing.'],
          ['End of week', 'The reflection', 'One prompt closes the chapter\'s week: what did you see, what did you interrupt, what are you building.'],
          ['Whenever', 'The library', 'You pull the script before the hard conversation, the repair template after it. It\'s there at 2am too.'],
        ].map(([t, k, b]) => (
          <div key={t} style={{ display: 'grid', gridTemplateColumns: '160px 220px 1fr', gap: 32, padding: '24px 0', borderBottom: '1px solid #444' }}>
            <div className="label" style={{ color: '#d4883a' }}>{t}</div>
            <div style={{ fontSize: 22, fontWeight: 600 }}>{k}</div>
            <div style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>

    {/* WHO HOLDS IT */}
    <section style={{ padding: '80px 56px', background: '#ebe6db' }}>
      <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● Who holds it</div>
      <h2 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 48, maxWidth: 1000 }}>Held by the people building it.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 48, alignItems: 'center', background: '#f4f1eb', border: '1px solid #1c1c1c', padding: '40px 40px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
          <div style={{ width: 88, height: 88, borderRadius: '50%', background: '#1a6b5a', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24 }}>
            <Mark size={48} color="#f4f1eb" />
          </div>
          <h4 style={{ fontSize: 32, lineHeight: 1, marginBottom: 8 }}>The End the Pattern team</h4>
          <div className="label" style={{ marginBottom: 8, color: '#1a6b5a' }}>Your moderators</div>
          <div className="label" style={{ color: '#666' }}>The people writing the chapters</div>
        </div>
        <div>
          <p style={{ fontSize: 18, lineHeight: 1.6, marginBottom: 16 }}>The threads are read and held by the people building End the Pattern - the same hands that write the chapters. No guest gurus, no rotating strangers. The room is held by people whose names are on the work.</p>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: '#444' }}>As the founding 500 grows, we'll add trauma-informed moderators carefully - and we'll introduce every one of them to you by name before they ever hold a thread.</p>
        </div>
      </div>
    </section>

    {/* SAFETY */}
    <section style={{ padding: '64px 56px', background: '#f4f1eb' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
        <div>
          <div className="label" style={{ color: '#1a6b5a', marginBottom: 16 }}>● Held, not unheld</div>
          <h2 style={{ fontSize: 48, lineHeight: 0.95, letterSpacing: '-0.02em', marginBottom: 24 }}>This is not therapy. We will tell you so.</h2>
          <p style={{ fontSize: 17, lineHeight: 1.6, marginBottom: 16 }}>End the Pattern is community work alongside therapy - it does not replace it. If something opens in the work that needs clinical support, we will help you name what you need and point you toward real clinical care. We will not let you walk out unsupported.</p>
          <p style={{ fontSize: 15, lineHeight: 1.55, color: '#444' }}>If you're in active crisis, the work is to be with a therapist first. We will say this to you, gently, and we will say it again.</p>
        </div>
        <div style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '40px 32px' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● The room - ground rules</div>
          <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16, counterReset: 'rule' }}>
            {[
              'You can pass any prompt. No questions asked.',
              'No advice unless asked. Questions are welcome. "Have you tried" is not.',
              'What is shared in the room stays in the room. Members only, always.',
              'No streaks, no lurker-shaming. Reading quietly is a real way to be here.',
              'If something activates you, flag it - a moderator helps you find next steps.',
            ].map((r, i) => (
              <li key={i} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16, alignItems: 'baseline' }}>
                <div className="label" style={{ color: '#d4883a' }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ fontSize: 15, lineHeight: 1.55 }}>{r}</div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>

    {/* AFTER */}
    <section style={{ padding: '80px 56px', background: '#ebe6db' }}>
      <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● The part that doesn't end</div>
      <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 24, maxWidth: 900 }}>The community is the part that doesn't dissolve.</h2>
      <p style={{ fontSize: 18, lineHeight: 1.55, marginBottom: 48, maxWidth: 720 }}>The coursework is six chapters - you finish when you finish. The community keeps going for as long as you do. Pattern threads, the commons, the library.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {[
          ['Week 7+', 'Pattern thread', 'You\'re still in your pattern\'s thread. Post weekly, post monthly, or lurk. All counted.'],
          ['Always', 'The commons', 'The all-pattern room stays open. One shared vocabulary, five inheritances.'],
          ['Always', 'Library', 'Every script, somatic prompt, and repair template. Searchable. Pattern-tagged.'],
          ['Later', '1:1 partners', 'Optional weekly 1:1 with a member one chapter ahead. On the roadmap once the founding community is settled in.'],
        ].map(([when, t, b]) => (
          <article key={t} style={{ background: '#f4f1eb', border: '1px solid #1c1c1c', padding: '24px 24px', minHeight: 200 }}>
            <div className="label" style={{ color: '#d4883a', marginBottom: 12 }}>{when}</div>
            <h4 style={{ fontSize: 22, lineHeight: 1, marginBottom: 12 }}>{t}</h4>
            <p style={{ fontSize: 13, lineHeight: 1.55 }}>{b}</p>
          </article>
        ))}
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '88px 56px', background: '#1a6b5a', color: '#f4f1eb' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
        <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em' }}>You don't break a pattern alone.<br/>You break it with people.</h2>
        <SiteLink to="/reserve" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', textDecoration: 'none', fontSize: 16 }}>Join the founding 500 →</SiteLink>
      </div>
    </section>

    <SiteFooter />
  </div>
);

window.CommunityPage = CommunityPage;
