/* ============================================================
   /manifesto - the manifesto + the story, one page
   (/about routes here too - the two pages were merged)
   ============================================================ */

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

    {/* HERO */}
    <section style={{ position: 'relative', overflow: 'hidden', padding: '120px 56px 88px', borderBottom: '1px solid #1c1c1c' }}>
      <BrokenRing size={560} color="#1a6b5a" sw={2} style={{ position: 'absolute', top: -160, right: -170, pointerEvents: 'none', opacity: 0.85 }} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div className="label" style={{ color: '#666', marginBottom: 28 }}>Our story</div>
        <h1 style={{ fontSize: 'clamp(72px, 11vw, 168px)', lineHeight: 0.86, letterSpacing: '-0.03em', maxWidth: 1100 }}>
          The pain stops <span style={{ color: '#1a6b5a' }}>traveling</span><br/>when someone <span style={{ color: '#d4883a', fontStyle: 'italic', fontWeight: 600 }}>stands still.</span>
        </h1>
        <div style={{ marginTop: 44, maxWidth: 720, display: 'flex', alignItems: 'center', gap: 20 }}>
          <span style={{ height: 2, flex: 'none', width: 56, background: '#1c1c1c' }} />
          <p style={{ fontSize: 15, lineHeight: 1.5, color: '#666', fontFamily: 'var(--etp-mono)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>A working document. Read it once. Decide.</p>
        </div>
      </div>
    </section>

    {/* OPENING — lead with drop cap */}
    <section style={{ padding: '88px 56px 64px', background: '#f4f1eb' }}>
      <Reveal>
        <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 28 }}>
          <p className="etp-dropcap" style={{ fontSize: 24, lineHeight: 1.55 }}>You did not choose what was handed to you. You inherited it the same way you inherited your eye color and your last name - without consent, without warning, without a manual.</p>
          <p style={{ fontSize: 20, lineHeight: 1.65 }}>It came as a tone of voice that lived in your house. As a way of leaving the room. As an absence at dinner. As a closeness that felt like surveillance, or a distance that felt like a verdict. You did not call it trauma. You called it <em>my mother</em>. You called it <em>the way we do things</em>. You called it <em>fine</em>.</p>
          <p style={{ fontSize: 20, lineHeight: 1.65 }}>Then one day you woke up and you were doing it. Not the big thing. The small thing. The shoulder hitch when someone closed a door too hard. The apology you said for needing water. The meeting you couldn't leave because no one had given you permission to be tired. You watched yourself become the carrier of something you swore would stop with you, and the realization was not loud. It was the size of one held breath.</p>
          <div style={{ padding: '24px 0 4px' }}>
            <Generations style={{ margin: '0 auto' }} />
            <p className="label" style={{ color: '#666', textAlign: 'center', marginTop: 16 }}>The line travels until someone stands still.</p>
          </div>
        </div>
      </Reveal>
    </section>

    {/* PULL QUOTE — full bleed teal */}
    <section style={{ background: '#1a6b5a', color: '#f4f1eb', padding: '96px 56px' }}>
      <Reveal>
        <blockquote style={{ maxWidth: 1100, margin: '0 auto', fontSize: 'clamp(36px, 5.5vw, 76px)', lineHeight: 1.02, letterSpacing: '-0.02em', fontWeight: 600 }}>
          “This is the part<br/>the books get <span style={{ color: '#d4883a', fontStyle: 'italic' }}>wrong.</span>”
        </blockquote>
      </Reveal>
    </section>

    {/* MIDDLE */}
    <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
      <Reveal>
        <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 28 }}>
          <p style={{ fontSize: 20, lineHeight: 1.65 }}>The books say: heal. The books say: feel your feelings. The books say: forgive. We are not going to argue with the books. We are going to say something the books do not say, which is that the work is not done alone, and the work is not done in your head, and the work is not done by reading another book.</p>
          <p style={{ fontSize: 24, lineHeight: 1.5, fontWeight: 500, color: '#1a6b5a' }}>The work is done by a room of people who watched a child become an adult and refused to let the line continue past them.</p>
        </div>
      </Reveal>
    </section>

    <div style={{ padding: '0 56px', background: '#f4f1eb' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}><BrokenLine color="#1c1c1c" dot="#d4883a" /></div>
    </div>

    {/* SO WE BUILT THIS */}
    <section style={{ padding: '72px 56px', background: '#f4f1eb' }}>
      <Reveal>
        <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56, alignItems: 'start' }}>
          <h2 style={{ fontSize: 'clamp(44px, 5vw, 72px)', lineHeight: 0.92, letterSpacing: '-0.025em' }}>So we<br/>built this.</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <p style={{ fontSize: 20, lineHeight: 1.65 }}>Not a course. Not a subscription. Not another thing for your nightstand. A community for the specific kind of person who looked at what was handed to them and said: <strong>this stops with me.</strong> Pattern Breakers. People who are already past awareness and into action and tired of doing it alone.</p>
            <p style={{ fontSize: 20, lineHeight: 1.65 }}>You have already done the reading. You have already done some therapy. You have already named the thing in private. What is left is the part nobody can do for you and you cannot do by yourself: <strong>standing still long enough to let it stop traveling.</strong></p>
          </div>
        </div>
      </Reveal>
    </section>

    {/* PHOTO BAND — the work is written by hand */}
    <section style={{ padding: '0 56px 72px', background: '#f4f1eb' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <StoryPhoto
          src="https://images.pexels.com/photos/6980533/pexels-photo-6980533.jpeg?auto=compress&cs=tinysrgb&w=1800"
          alt="A hand writing on paper under warm light"
          caption="The work is done by hand, in your own words."
          ratio="21 / 9"
        />
      </div>
    </section>

    {/* THE STORY — merged from the old About page */}
    <section style={{ padding: '80px 56px', background: '#ebe6db', borderTop: '1px solid #1c1c1c' }}>
      <Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 64 }}>
          <div>
            <div className="label" style={{ color: '#1a6b5a', marginBottom: 16 }}>● The story</div>
            <h2 style={{ fontSize: 48, lineHeight: 0.95, letterSpacing: '-0.02em', marginBottom: 32 }}>We built it because we needed it.</h2>
            <StoryPhoto
              src="https://images.pexels.com/photos/16092824/pexels-photo-16092824.jpeg?auto=compress&cs=tinysrgb&w=1000"
              alt="A woman sitting alone in a quiet kitchen, deep in thought"
              caption="It started in a kitchen."
              ratio="3 / 4"
            />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <p className="etp-dropcap" style={{ fontSize: 21, lineHeight: 1.6 }}>The founder had done the therapy. She had read the books. She had named, in private, what she was carrying. And one ordinary Tuesday she heard her own voice say something her mother used to say - to a child who was not her mother - and she sat down on the kitchen floor and stayed there for a long time.</p>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: '#333' }}>What scared her was not the sentence. It was how natural it felt leaving her mouth. Years of work, and the pattern had been sitting in her jaw the whole time, waiting for a tired enough day.</p>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: '#333' }}>The thing that was missing was not more reading. The thing that was missing was a room of other people who would not flinch when she described it. Who knew the room from the inside. Who would sit with her while she built the line that replaced the pattern - and stay long after the building was done.</p>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: '#333' }}>So she started building it: six chapters written at the kitchen table, every prompt tested on herself first, the ones that flattered more than they helped thrown out. End the Pattern is that work made shareable - self-paced coursework and an always-on community that keeps going for as long as you do.</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12, paddingTop: 20, borderTop: '1px solid #d8c9a8' }}>
              <Mark size={30} color="#1a6b5a" />
              <div>
                <div className="label" style={{ color: '#1a6b5a' }}>- The founder</div>
                <div className="label" style={{ color: '#999', marginTop: 2 }}>From the kitchen floor</div>
              </div>
            </div>
          </div>
        </div>
      </Reveal>
    </section>

    {/* WHERE IT STANDS */}
    <section style={{ padding: '72px 56px', background: '#ebe6db', borderTop: '1px solid #1c1c1c', borderBottom: '1px solid #1c1c1c' }}>
      <Reveal>
        <div className="label" style={{ color: '#1a6b5a', marginBottom: 40 }}>● Where it stands</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {[
            ['The moment', 'The kitchen floor', 'The sentence that started it. The founder begins writing.'],
            ['The writing', 'Six chapters', 'Written at the kitchen table, tested on their author first, cut hard.'],
            ['Now', 'The founding list', 'The quiz is live and the founding list is open as you read this.'],
            ['Next', 'Doors open', 'Coursework, community, library - announced to the list first.'],
          ].map(([d, t, b]) => (
            <div key={t} style={{ borderTop: '2px solid #1c1c1c', paddingTop: 20 }}>
              <div className="label" style={{ color: '#d4883a', marginBottom: 10 }}>{d}</div>
              <h4 style={{ fontSize: 22, lineHeight: 1, marginBottom: 12 }}>{t}</h4>
              <p style={{ fontSize: 14, lineHeight: 1.5, color: '#444' }}>{b}</p>
            </div>
          ))}
        </div>
      </Reveal>
    </section>

    {/* THE CREED — two-column will/won't */}
    <section style={{ padding: '88px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <Reveal>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 48 }}>● The creed</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: '#444', border: '1px solid #444' }}>
            <div style={{ background: '#1c1c1c', padding: '40px 36px' }}>
              <h3 style={{ fontSize: 32, lineHeight: 0.95, marginBottom: 28, color: '#d4883a' }}>What we won't do.</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
                {['Tell you your trauma is your superpower.', 'Tell you everything happens for a reason.', 'Ask you to be grateful for your childhood.', 'Perform softness with you.', 'Pretend the work is gentle.', 'Coddle you - or abandon you.'].map((t) => (
                  <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12, fontSize: 17, lineHeight: 1.45 }}>
                    <span style={{ color: '#d4883a', fontWeight: 700 }}>×</span><span style={{ opacity: 0.9 }}>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ background: '#1a6b5a', padding: '40px 36px' }}>
              <h3 style={{ fontSize: 32, lineHeight: 0.95, marginBottom: 28 }}>What we will do.</h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 16 }}>
                {['Give you the language.', 'Give you the tools.', 'Give you a room of others who know it from the inside.', 'Sit with you for six chapters while you build the new line.', 'Witness the new line when you share it.', 'Hand you a printable dossier of your work.'].map((t) => (
                  <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12, fontSize: 17, lineHeight: 1.45 }}>
                    <span style={{ color: '#d4883a', fontWeight: 700 }}>✓</span><span>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </Reveal>
    </section>

    {/* WHAT WE BELIEVE */}
    <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
      <Reveal>
        <h2 style={{ fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 48, maxWidth: 800 }}>What we believe, in four lines.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {[
            ['Awareness is not the finish line.', 'You already know what you carry. Knowing did not stop it. Doing does.'],
            ['Patterns break in rooms.', 'They formed in a room. They do not break in a journal. They break in front of people.'],
            ['The work is finite. The community is not.', 'Six chapters end. The people who watched you do them do not.'],
            ['This is not therapy.', 'It runs alongside therapy and never replaces it. We will tell you so, out loud, more than once.'],
          ].map(([t, b]) => (
            <div key={t} className="etp-lift" style={{ background: '#ebe6db', border: '1px solid #1c1c1c', padding: '32px 28px' }}>
              <h4 style={{ fontSize: 24, lineHeight: 1.05, marginBottom: 12, color: '#1a6b5a' }}>{t}</h4>
              <p style={{ fontSize: 16, lineHeight: 1.55, color: '#333' }}>{b}</p>
            </div>
          ))}
        </div>
      </Reveal>
    </section>

    {/* NUMBERS — counted honestly */}
    <section style={{ padding: '80px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● Counted honestly</div>
      <h3 style={{ fontSize: 48, lineHeight: 0.95, letterSpacing: '-0.02em', marginBottom: 16 }}>Where we are.</h3>
      <p style={{ fontSize: 15, lineHeight: 1.55, opacity: 0.7, marginBottom: 48, maxWidth: 560 }}>Updated by hand. No live counters, no theater - if a number is on this page, someone here can vouch for it.</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
        {[['5', 'Patterns mapped'], ['6', 'Chapters written'], ['12', 'Quiz questions'], ['500', 'Founding seats, ever']].map(([n, l]) => (
          <div key={l} style={{ borderTop: '1px solid #444', paddingTop: 24 }}>
            <div style={{ fontSize: 64, fontWeight: 700, lineHeight: 0.9, letterSpacing: '-0.025em', color: '#d4883a' }}>{n}</div>
            <div className="label" style={{ marginTop: 12, opacity: 0.8 }}>{l}</div>
          </div>
        ))}
      </div>
    </section>

    {/* CLOSING STATEMENT */}
    <section style={{ padding: '96px 56px', background: '#f4f1eb' }}>
      <Reveal>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 0.92, letterSpacing: '-0.025em', color: '#1a6b5a', marginBottom: 32 }}>And the pattern stops.</h2>
          <p style={{ fontSize: 24, lineHeight: 1.5, fontWeight: 500, marginBottom: 20 }}>Not in your head. Not on your wall. In your body. In your kitchen. In the way you talk to the next person who depends on you for their weather.</p>
          <p style={{ fontSize: 24, lineHeight: 1.5, fontWeight: 600 }}>Your children will never know what you survived. That is the whole work. That is the only goal.</p>
          <StoryPhoto
            src="https://images.pexels.com/photos/8765841/pexels-photo-8765841.jpeg?auto=compress&cs=tinysrgb&w=1600"
            alt="A mother and child holding hands, walking a path together"
            caption="It stops with you."
            ratio="16 / 9"
            style={{ marginTop: 48, textAlign: 'left' }}
          />
        </div>
      </Reveal>
    </section>

    {/* SIGNED */}
    <section style={{ position: 'relative', overflow: 'hidden', padding: '88px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
        <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● Signed</div>
        <p style={{ fontSize: 32, lineHeight: 1.3, fontWeight: 500, marginBottom: 32 }}>"See it. Name it. Stop it."</p>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 16, marginBottom: 40 }}>
          <Mark size={48} color="#2a9e85" />
          <Wordmark size={28} dark />
        </div>
        <SiteLink to="/reserve" className="etp-btn etp-btn-orange" style={{ padding: '20px 32px', textDecoration: 'none' }}>I'm in. Join the founding 500 →</SiteLink>
      </div>
    </section>

    <SiteFooter />
  </div>
);

window.ManifestoPage = ManifestoPage;
