/* ============================================================
   /reserve, /faq, /privacy
   ============================================================ */

const ReservePage = () => {
  const stored = (typeof localStorage !== 'undefined' && localStorage.getItem('etp_pattern')) || '';
  const storedEmail = (typeof localStorage !== 'undefined' && localStorage.getItem('etp_email')) || '';
  const storedSecondary = (typeof localStorage !== 'undefined' && localStorage.getItem('etp_secondary')) || '';
  const [step, setStep] = React.useState(stored ? 2 : 1);
  const [form, setForm] = React.useState({ pattern: stored, email: storedEmail, name: '', tz: 'PT' });
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(false);
  const updateField = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submitReserve = async () => {
    setSending(true);
    setSendError(false);
    const r = await window.etpSubscribe(form.email, { pattern: form.pattern, secondary: storedSecondary, name: form.name, source: 'reserve' });
    setSending(false);
    if (r.ok) setStep(3);
    else setSendError(true);
  };

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

      <section style={{ position: 'relative', overflow: 'hidden', padding: '88px 56px 56px', borderBottom: '1px solid #1c1c1c' }}>
        <BrokenRing size={540} color="#1a6b5a" sw={2} style={{ position: 'absolute', top: -130, right: -150, pointerEvents: 'none' }} />
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div className="label" style={{ color: '#666', marginBottom: 24 }}>Founding 500 — doors opening soon</div>
          <h1 style={{ fontSize: 'clamp(64px, 9vw, 128px)', lineHeight: 0.88, letterSpacing: '-0.025em' }}>
            Reserve your<br/><span style={{ color: '#1a6b5a' }}>founding seat.</span>
          </h1>
        </div>
      </section>

      <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 64 }}>
          <div style={{ background: '#1c1c1c', color: '#f4f1eb', padding: '48px 40px' }}>
            <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● {step < 3 ? `Step ${step} of 2` : 'Seat reserved'}</div>

            {step === 1 && (
              <>
                <h2 style={{ fontSize: 40, lineHeight: 0.95, marginBottom: 16 }}>Which pattern is yours?</h2>
                <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85, marginBottom: 32 }}>If you don't know yet, take the quiz first - it's 90 seconds.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 32 }}>
                  {PB_PATTERNS.map((p) => (
                    <button key={p.slug} onClick={() => { setForm({ ...form, pattern: p.slug }); setStep(2); }} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 100px', gap: 16, padding: '16px 20px', background: form.pattern === p.slug ? '#1a6b5a' : 'transparent', border: '1px solid #444', color: '#f4f1eb', cursor: 'pointer', textAlign: 'left' }}>
                      <div className="label" style={{ color: '#d4883a' }}>{p.num}</div>
                      <div style={{ fontSize: 18, fontWeight: 500 }}>{p.name}</div>
                      <div className="label" style={{ color: '#999', textAlign: 'right' }}>→</div>
                    </button>
                  ))}
                </div>
                <SiteLink to="/quiz" className="label" style={{ color: '#d4883a', borderBottom: '1px solid #d4883a', paddingBottom: 2, textDecoration: 'none' }}>I don't know yet - take the quiz →</SiteLink>
              </>
            )}

            {step === 2 && (
              <>
                <h2 style={{ fontSize: 40, lineHeight: 0.95, marginBottom: 16 }}>Claim your seat.</h2>
                <p style={{ fontSize: 16, lineHeight: 1.55, opacity: 0.85, marginBottom: 32 }}>No payment now. We hold your founding rate and email you the moment doors open.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 20, marginBottom: 32 }}>
                  <label className="label" style={{ display: 'flex', flexDirection: 'column', gap: 8, color: '#d4883a' }}>
                    Name
                    <input value={form.name} onChange={updateField('name')} placeholder="What should we call you?" style={{ padding: 16, background: '#222', border: '1px solid #444', color: '#f4f1eb', fontSize: 16, fontFamily: 'inherit' }} />
                  </label>
                  <label className="label" style={{ display: 'flex', flexDirection: 'column', gap: 8, color: '#d4883a' }}>
                    Email
                    <input type="email" value={form.email} onChange={updateField('email')} placeholder="you@example.com" style={{ padding: 16, background: '#222', border: '1px solid #444', color: '#f4f1eb', fontSize: 16, fontFamily: 'inherit' }} />
                  </label>
                </div>
                <div style={{ display: 'flex', gap: 12 }}>
                  <button onClick={() => setStep(1)} className="etp-btn etp-btn-ghost" style={{ padding: '14px 24px', color: '#f4f1eb', borderColor: '#f4f1eb' }}>← Back</button>
                  <button disabled={!/.+@.+\..+/.test(form.email) || sending} onClick={submitReserve} className="etp-btn etp-btn-orange" style={{ padding: '14px 24px', opacity: /.+@.+\..+/.test(form.email) && !sending ? 1 : 0.4 }}>{sending ? 'Reserving…' : 'Reserve my founding seat →'}</button>
                </div>
                {sendError && (
                  <p style={{ fontSize: 14, lineHeight: 1.5, color: '#d4883a', marginTop: 16 }}>We couldn't confirm that went through. Try once more, or email endthepattern@outlook.com and we'll hold your seat by hand either way.</p>
                )}
                <p style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.7, marginTop: 24 }}>No card, no charge today. You lock in $24/mo for life. What arrives by email: one message when founding doors open. That's the list. Unsubscribe anytime, one click.</p>
              </>
            )}

            {step === 3 && (
              <>
                <h2 style={{ fontSize: 40, lineHeight: 0.95, marginBottom: 20 }}>Your seat is held.</h2>
                <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.9, marginBottom: 16 }}>We've got you{form.name ? `, ${form.name}` : ''}. Your founding seat is held for <strong style={{ color: '#d4883a' }}>{form.email}</strong>, and we'll email you the moment doors open - with your $24/mo rate locked in.</p>
                <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.75, marginBottom: 32 }}>Nothing has been charged. Nothing else arrives until doors open.</p>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  {form.pattern && (
                    <a href={`Dossier.html?pattern=${form.pattern}${storedSecondary ? `&secondary=${storedSecondary}` : ''}${form.name ? `&name=${encodeURIComponent(form.name)}` : ''}`} target="_blank" rel="noopener" className="etp-btn etp-btn-orange" style={{ padding: '14px 24px', textDecoration: 'none' }}>Download your dossier ↓</a>
                  )}
                  <SiteLink to="/manifesto" className="etp-btn etp-btn-ghost" style={{ padding: '14px 24px', textDecoration: 'none', color: '#f4f1eb', borderColor: '#f4f1eb' }}>Read our story while you wait →</SiteLink>
                </div>
              </>
            )}
          </div>

          <aside style={{ padding: '0 8px' }}>
            <div className="label" style={{ color: '#1a6b5a', marginBottom: 16 }}>● What you're joining</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {[
                ['Self-paced coursework', 'Six chapters. ~12 min/day, from the day doors open.'],
                ['Always-on community', 'Pattern threads - every pattern, one room'],
                ['The library', 'Scripts, somatic prompts, repair templates'],
                ['Founding badge', 'Only 500 ever - yours forever'],
                ['Founding price', '$24/mo, locked for life'],
              ].map(([k, v]) => (
                <div key={k} style={{ paddingBottom: 16, borderBottom: '1px solid #d8c9a8' }}>
                  <div style={{ fontSize: 17, fontWeight: 600, marginBottom: 4 }}>{k}</div>
                  <div className="label" style={{ color: '#666' }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32, padding: 20, background: '#1c1c1c', color: '#f4f1eb' }}>
              <div className="label" style={{ color: '#d4883a', marginBottom: 8 }}>● On the roadmap</div>
              <div style={{ fontSize: 14, lineHeight: 1.55 }}>1:1 partner sessions come later, once the founding community is settled in. Founding members get first access.</div>
            </div>
          </aside>
        </div>
      </section>

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

const FAQItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div onClick={() => setOpen((o) => !o)} className="etp-lift" style={{ background: '#ebe6db', border: '1px solid #1c1c1c', padding: '24px 28px', cursor: 'pointer' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
        <h4 style={{ fontSize: 22, lineHeight: 1.15 }}>{q}</h4>
        <span className="label" style={{ color: '#1a6b5a', flex: 'none', fontSize: 22, lineHeight: 1 }}>{open ? '\u2212' : '+'}</span>
      </div>
      {open && <p style={{ fontSize: 15, lineHeight: 1.55, color: '#333', marginTop: 14 }}>{a}</p>}
    </div>
  );
};

const FAQPage = () => {
  const QS = [
    ['Coursework', [
      ['How many hours a week?', 'Plan for 12-15 minutes a day. That is the whole commitment - the community is there when you want more, never a requirement.'],
      ['Is anything live?', 'Not at launch. The coursework is self-paced and the community is always-on, so there is nothing to schedule and nothing to miss. If we ever add live sessions, the founding list hears first.'],
      ['Is the curriculum the same for everyone?', 'The arc is the same. The scripts, prompts, and somatic practices are pattern-specific. A Peacekeeper week 4 looks different than a Vault week 4.'],
      ['Can I do it at my own pace?', 'Yes. The coursework is self-paced - move at your speed from the day doors open, and the community moves with you.'],
    ]],
    ['The community', [
      ['Who runs the community?', 'The people building End the Pattern read and moderate the threads - the same people writing the chapters. As the community grows, we will add trauma-informed moderators carefully, and introduce each one to you by name first.'],
      ['How big is it?', 'It starts with the founding 500. Small enough that when you post your work, it gets read - this is a slow forum, not a feed.'],
      ['What if I go quiet for a while?', 'Nothing happens. No streaks, no guilt mechanics. Your thread and your place in the room are still there when you come back.'],
      ['What about 1:1 sessions?', '1:1 partners are on the roadmap for after the founding 500 are settled in - founding members get first access. The threads are the v1.'],
      ['What if I need clinical support?', 'This is not therapy, and we will say so out loud, more than once. If something opens in the work that needs clinical care, we will help you name what you need and point you toward real support. In crisis, call or text 988 - the work here can wait.'],
    ]],
    ['Money', [
      ['How much is it?', '$24/mo for the founding 500, locked for life. $48/mo for everyone after. One subscription covers coursework + community + library.'],
      ['Why a subscription if the coursework is six chapters?', 'The coursework is finite - the community isn\'t. The pattern threads, the shared room, and the library run as long as your membership does.'],
      ['Can I cancel?', 'Anytime, one click, no exit interview. You keep access through the end of the billing month.'],
      ['Scholarships?', 'If the price is the barrier, email endthepattern@outlook.com - a short note, no documentation required.'],
    ]],
    ['Logistics', [
      ['When do the founding 500 start?', 'When doors open - the date goes to the email list first, before it appears anywhere else. Coursework, community, and library unlock that day. Reserving now costs nothing - it just holds your founding rate.'],
      ['Time zones?', 'None to plan around. Everything is self-paced and always-on - the room is awake whenever you are.'],
      ['International?', 'Yes. Everything is online, and your dossier is a printable file - it works anywhere.'],
      ['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. And we will keep saying, plainly, that this is not therapy.'],
    ]],
  ];

  return (
    <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 }}>The questions we get</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' }}>
            The questions<br/><span style={{ color: '#1a6b5a' }}>we get most.</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: 1.55 }}>
            Answered plainly, in the same voice we use everywhere else. If an answer here ever contradicts something on another page, email us - that's a bug in our honesty, and we fix those first.
          </p>
        </div>
      </section>
      <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
        {QS.map(([sect, qs]) => (
          <div key={sect} style={{ marginBottom: 64 }}>
            <div className="label" style={{ color: '#1a6b5a', marginBottom: 24 }}>● {sect}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 860 }}>
              {qs.map(([q, a]) => <FAQItem key={q} q={q} a={a} />)}
            </div>
          </div>
        ))}
      </section>
      <section style={{ padding: '80px 56px', background: '#1a6b5a', color: '#f4f1eb', textAlign: 'center' }}>
        <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● Still have questions?</div>
        <p style={{ fontSize: 32, lineHeight: 1.3, fontWeight: 500, marginBottom: 28, maxWidth: 640, marginLeft: 'auto', marginRight: 'auto' }}>Ask a person, not a bot. A real human reads every message within 48 hours.</p>
        <a href="mailto:endthepattern@outlook.com" className="etp-btn etp-btn-orange" style={{ padding: '18px 32px', textDecoration: 'none', display: 'inline-block' }}>endthepattern@outlook.com</a>
      </section>
      <SiteFooter />
    </div>
  );
};

const PrivacyPage = () => (
  <div className="etp etp-bg-ivory" style={{ minHeight: '100%' }}>
    <SiteHeader active="" />
    <section style={{ padding: '88px 56px 40px', borderBottom: '1px solid #1c1c1c' }}>
      <div className="label" style={{ color: '#666', marginBottom: 24 }}>Privacy & data</div>
      <h1 style={{ fontSize: 'clamp(56px, 8vw, 112px)', lineHeight: 0.88, letterSpacing: '-0.025em' }}>What we keep.<br/>What we don't.</h1>
    </section>
    <section style={{ padding: '64px 56px', background: '#f4f1eb' }}>
      <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24 }}>
        <p style={{ fontSize: 20, lineHeight: 1.6 }}>This is the short version. The lawyered version is at the bottom. We tried to write the short version honestly enough that you would not need the lawyered one.</p>
        {[
          ['Quiz answers', 'Your individual answers stay in your browser. When you enter your email at the result step, we store only your email and which pattern you landed on - never the answers themselves.'],
          ['Email', 'Used to send you what you asked for. We do not sell it. We do not share it. One unsubscribe link kills everything.'],
          ['Threads & community posts', 'Visible to other members. Editable by you. Deletable by you. We never repost without consent.'],
          ['Cookies', 'One - to remember your quiz progress so you do not have to start over. No retargeting. No analytics that track you across the internet.'],
          ['What we will never do', 'Sell your data. Build advertising profiles. Email-blast you. Use your story without consent. Pretend the work is gentler than it is.'],
        ].map(([t, b]) => (
          <div key={t} style={{ paddingBottom: 24, borderBottom: '1px solid #d8c9a8' }}>
            <h3 style={{ fontSize: 26, lineHeight: 1.1, marginBottom: 8 }}>{t}.</h3>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: '#333' }}>{b}</p>
          </div>
        ))}
        <p style={{ fontSize: 14, lineHeight: 1.55, color: '#666', marginTop: 32 }}>The full legal text - data processor list, GDPR/CCPA disclosures, retention policies - is being finalized and will be published here before doors open. If anything on this page is unclear, email endthepattern@outlook.com and we will fix the writing.</p>
      </div>
    </section>
    <SiteFooter />
  </div>
);

window.ReservePage = ReservePage;
window.FAQPage = FAQPage;
window.PrivacyPage = PrivacyPage;
