/* ============================================================
   /pricing - One door, one price (coursework + always-on community)
   ============================================================ */

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

    <section style={{ padding: '88px 56px 56px', borderBottom: '1px solid #1c1c1c' }}>
      <div className="label" style={{ color: '#666', marginBottom: 24 }}>One door. One price.</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' }}>
          One door.<br/><span style={{ color: '#1a6b5a' }}>One price.</span>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.55 }}>
          The first 500 members get founding pricing forever. When the 500 fill, the price goes up - for everyone after, never for you. We don't do tiers. We don't do upsells. One subscription. The work is the same for everyone.
        </p>
      </div>
    </section>

    {/* TWO TIER COMPARE */}
    <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <article style={{ background: '#1a6b5a', color: '#f4f1eb', padding: '48px 40px', minHeight: 640, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● Founding 500 - only 500, ever</div>
          <h2 style={{ fontSize: 96, lineHeight: 0.85, letterSpacing: '-0.03em' }}>$24<span style={{ fontSize: 32, fontWeight: 400 }}>/mo</span></h2>
          <p style={{ fontSize: 16, opacity: 0.85, marginBottom: 32 }}>Locked for life. Cancel anytime.</p>

          <div style={{ height: 1, background: '#d4883a', opacity: 0.3, marginBottom: 24 }}></div>

          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24, fontSize: 15 }}>
            {[
              'Pattern quiz + printable pattern dossier',
              'Six chapters of pattern-specific, self-paced coursework',
              'Always-on community - all five patterns, one room',
              'Course videos, workbooks, written practices',
              'Pattern-specific threads, open from day one',
              'Library: scripts, somatic prompts, repair templates',
              'Founding member badge - only 500 will ever have it',
              'Direct line to the founder (we read every message)',
            ].map((t) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12, alignItems: 'baseline' }}>
                <span style={{ color: '#d4883a', fontWeight: 700 }}>✓</span><span>{t}</span>
              </li>
            ))}
          </ul>

          <SiteLink to="/reserve" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', alignSelf: 'flex-start', textDecoration: 'none', fontSize: 16, marginTop: 'auto' }}>Reserve a founding seat →</SiteLink>
        </article>

        <article style={{ background: '#ebe6db', color: '#1c1c1c', border: '1px solid #1c1c1c', padding: '48px 40px', minHeight: 640, display: 'flex', flexDirection: 'column' }}>
          <div className="label" style={{ color: '#666', marginBottom: 16 }}>● After 500 - public pricing</div>
          <h2 style={{ fontSize: 96, lineHeight: 0.85, letterSpacing: '-0.03em' }}>$48<span style={{ fontSize: 32, fontWeight: 400 }}>/mo</span></h2>
          <p style={{ fontSize: 16, color: '#666', marginBottom: 32 }}>Or $480/yr.</p>

          <div style={{ height: 1, background: '#1c1c1c', opacity: 0.2, marginBottom: 24 }}></div>

          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24, fontSize: 15 }}>
            {[
              ['Pattern quiz + dossier', true],
              ['Six-week coursework', true],
              ['Always-on community', true],
              ['Printable pattern dossier', true],
              ['Community + library access', true],
              ['Founding member badge', false],
              ['Direct founder line', false],
              ['Lifetime price lock', false],
            ].map(([t, on]) => (
              <li key={t} style={{ display: 'grid', gridTemplateColumns: '20px 1fr', gap: 12, alignItems: 'baseline', opacity: on ? 1 : 0.45 }}>
                <span style={{ color: on ? '#1a6b5a' : '#999', fontWeight: 700 }}>{on ? '✓' : '-'}</span><span>{t}</span>
              </li>
            ))}
          </ul>

          <p style={{ fontSize: 13, color: '#666', marginTop: 'auto' }}>Available once the founding 500 closes. Same work, different price.</p>
        </article>
      </div>
    </section>

    {/* WHAT IT IS NOT */}
    <section style={{ padding: '80px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● What it is not</div>
      <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 48 }}>Four things this isn't.</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {[
          ['Therapy', 'It does not replace therapy. If you are in crisis, the work is to be with a therapist. End the Pattern is community work alongside therapy, not instead of it.'],
          ['A diagnosis', 'The pattern quiz is a mirror, not a medical instrument. We do not pathologize. We just name.'],
          ['A guarantee', 'You will not be a different person in six weeks. You will have a different relationship to the pattern. That is the work.'],
          ['Forever free', 'It costs $24/mo because the program costs money to run - the platform, the community, the people building it. If the price is the barrier, email us and we will find a way.'],
        ].map(([t, b]) => (
          <div key={t} style={{ display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32, padding: '24px 0', borderBottom: '1px solid #444' }}>
            <div style={{ fontSize: 28, fontWeight: 600 }}>{t}.</div>
            <div style={{ fontSize: 16, lineHeight: 1.6, opacity: 0.85 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>

    {/* QUICK FAQ */}
    <section style={{ padding: '80px 56px', background: '#ebe6db' }}>
      <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● The questions we get most</div>
      <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em', marginBottom: 48 }}>Money, briefly.</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
        {[
          ['Can I cancel?', 'Anytime, one click, no exit interview. We do not do friction. If you cancel and rejoin later, founding pricing is gone.'],
          ['What if all the founding seats fill while I\'m thinking?', 'You hold founding pricing on the waitlist. You do not lose the rate.'],
          ['Is this US-only?', 'No. Everything is online and self-paced - it works in any time zone.'],
          ['Can I gift it?', 'Gifting is planned. Until it is built, email us and we will set it up by hand.'],
          ['Is this trauma-informed?', 'The ground rules are built for nervous systems that scan for safety - pass any prompt, read quietly when you need to, no advice unless asked. They are published on the community page.'],
          ['What if I don\'t know my pattern yet?', 'You take the 12-question quiz before you reserve. Every member starts there.'],
          ['Scholarships?', 'If the price is the barrier, email endthepattern@outlook.com - a short note, no documentation required.'],
          ['When do 1:1 partners come?', 'After the founding community is settled in - it is on the roadmap, not on the calendar yet. The threads are the v1.'],
        ].map(([q, a]) => (
          <div key={q} style={{ background: '#f4f1eb', border: '1px solid #1c1c1c', padding: '24px 28px' }}>
            <h4 style={{ fontSize: 20, lineHeight: 1.15, marginBottom: 10 }}>{q}</h4>
            <p style={{ fontSize: 14, lineHeight: 1.55, color: '#333' }}>{a}</p>
          </div>
        ))}
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '88px 56px', background: '#1a6b5a', color: '#f4f1eb' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center' }}>
        <div>
          <div className="label" style={{ color: '#d4883a', marginBottom: 12 }}>● Founding 500 — opening soon</div>
          <h2 style={{ fontSize: 64, lineHeight: 0.92, letterSpacing: '-0.025em' }}>One door.<br/>It's still open.</h2>
        </div>
        <SiteLink to="/reserve" className="etp-btn etp-btn-orange" style={{ padding: '20px 28px', textDecoration: 'none', fontSize: 16 }}>Reserve a founding seat →</SiteLink>
      </div>
    </section>

    <SiteFooter />
  </div>
);

window.PricingPage = PricingPage;