// Success / Thank-you, Resource sample, and Pellex Business archive pages.

// ─── Success ───────────────────────────────────────────────────────────
function SuccessPage({ p }) {
  const [email, setEmail] = React.useState('your@email');
  React.useEffect(() => {
    try { const s = localStorage.getItem('pellex.email'); if (s) setEmail(s); } catch (e) {}
  }, []);

  return (
    <>
      
      <SubHeader p={p} kicker="Step 2 of 2" title="Payment received"/>

      <section style={{ padding: '32px 22px 12px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: '-30% -10% auto -10%', height: 320,
          background: `radial-gradient(60% 60% at 50% 30%, ${p.accent}26 0%, transparent 70%)`,
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative', textAlign: 'center' }}>
          <Reveal>
            <div style={{
              width: 64, height: 64, borderRadius: 99,
              background: p.accent, color: p.accentInk,
              display: 'grid', placeItems: 'center',
              margin: '0 auto 18px',
              boxShadow: `0 20px 50px -10px ${p.accent}66`,
            }}>
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                <path d="M6 14.5l5 5 11-11.5" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <h1 style={{
              margin: '0 auto 10px',
              fontFamily: PELLEX_FONTS.display, fontSize: 38, lineHeight: 1.05, letterSpacing: -0.7,
              color: p.text, fontWeight: 700, textWrap: 'balance', maxWidth: 320,
            }}>
              You're in. <span style={{ color: p.accent }}>Welcome to Pellex.</span>
            </h1>
            <p style={{
              margin: '0 auto 8px', color: p.textMute, fontSize: 15, lineHeight: 1.5,
              maxWidth: 320,
            }}>
              Your Starter Kit is now a readable online guide. Use the documentation first, or save the single PDF for offline reading.
            </p>
          </Reveal>
        </div>
      </section>

      <section style={{ padding: '20px 22px 8px' }}>
        <Reveal>
          <div style={{
            padding: 18, borderRadius: 16,
            background: p.bgElev, border: `1px solid ${p.border}`,
          }}>
            <div style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 12 }}>
              Get started right now
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Read the kit online', s: 'Step-by-step documentation', href: '/downloads/pellex-ai-side-business-starter-kit/', primary: true },
                { t: 'Download single PDF', s: 'Offline printable version', href: '/downloads/pellex-ai-side-business-starter-kit.pdf' },
                { t: 'Open the free 0→1 map', s: 'Printable PDF + web version', href: '/downloads/pellex-0-to-1-map/' },
              ].map((it, i) => (
                <a key={i} href={it.href} target="_blank" rel="noopener" style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: 14, borderRadius: 12,
                  background: it.primary ? p.accent : p.bgCard,
                  color: it.primary ? p.accentInk : p.text,
                  textDecoration: 'none',
                  border: `1px solid ${it.primary ? p.accent : p.border}`,
                }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>{it.t}</div>
                    <div style={{ fontSize: 11.5, opacity: 0.7, fontFamily: PELLEX_FONTS.mono, marginTop: 2 }}>{it.s}</div>
                  </div>
                  <Icon.arrowUpRight/>
                </a>
              ))}
            </div>
          </div>
        </Reveal>
      </section>

      <section style={{ padding: '22px 22px 0' }}>
        <Reveal>
          <Chip p={p}>Next step</Chip>
          <h2 style={{
            margin: '12px 0 8px',
            fontFamily: PELLEX_FONTS.display, fontSize: 26, lineHeight: 1.1,
            color: p.text, letterSpacing: -0.4, fontWeight: 700, textWrap: 'balance',
          }}>
            Block 90 minutes this weekend.
          </h2>
          <p style={{ margin: '0 0 14px', color: p.textMute, fontSize: 14, lineHeight: 1.5 }}>
            Pick a niche from the picker. Open one template. Customise three lines. Ship it tonight. If you get stuck, reply to the receipt/support email with your niche.
          </p>
          <GhostCTA p={p} full onClick={() => window.pellexNav('landing')}>Back to the playbook</GhostCTA>
        </Reveal>
      </section>

      <PageFooter p={p}/>
    </>
  );
}

// ─── Sample resource page ──────────────────────────────────────────────
function ResourcePage({ p }) {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  return (
    <>
      
      <SubHeader p={p} kicker="Free traffic asset · sample" title="Cleaning quote follow-up kit"/>

      <section style={{ padding: '28px 22px 8px' }}>
        <Reveal>
          <Chip p={p} accent>Free · 3 min copy + paste</Chip>
          <h1 style={{
            margin: '14px 0 8px',
            fontFamily: PELLEX_FONTS.display, fontSize: 36, lineHeight: 1.05, letterSpacing: -0.6,
            color: p.text, fontWeight: 700, textWrap: 'balance',
          }}>
            The 5-message follow-up that turns "thanks for the quote" into a booked job.
          </h1>
          <p style={{ margin: 0, color: p.textMute, fontSize: 15, lineHeight: 1.5 }}>
            Copy these into your phone notes. Send one per day for 5 days after sending a quote. Don't change a thing — they work because they're boring.
          </p>
        </Reveal>
      </section>

      <section style={{ padding: '22px 22px 0' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { day: 'DAY 1', t: 'The receipt', body: '"Hi [name], quote sent over. Anything unclear? Happy to walk you through it."' },
            { day: 'DAY 2', t: 'The reminder', body: '"Hey [name], just checking the quote landed in your inbox — sometimes they go to spam."' },
            { day: 'DAY 3', t: 'The reframe', body: '"If price is the sticking point, I can split the job into a half-day — let me know."' },
            { day: 'DAY 5', t: 'The deadline', body: '"Booking next week — wanted to give you first dibs before I open it up. Yes / no either way is fine."' },
            { day: 'DAY 7', t: 'The graceful close', body: '"All good, closing this one out. If timing changes, I\'m here. — [name]"' },
          ].map((m, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{
                padding: 18, borderRadius: 14,
                background: p.bgElev, border: `1px solid ${p.border}`,
              }}>
                <div style={{
                  color: p.accent, fontFamily: PELLEX_FONTS.mono, fontSize: 11, letterSpacing: 0.5, marginBottom: 6,
                }}>{m.day} · {m.t}</div>
                <p style={{ margin: 0, color: p.text, fontSize: 14.5, lineHeight: 1.55, fontStyle: 'normal' }}>
                  {m.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section style={{ padding: '26px 22px 0' }}>
        <Reveal>
          <div style={{
            padding: 22, borderRadius: 18,
            background: `linear-gradient(135deg, ${p.accent}18 0%, ${p.bgElev} 70%)`,
            border: `1px solid ${p.accent}40`,
          }}>
            <Chip p={p} accent>Want all 8 of these?</Chip>
            <h3 style={{
              margin: '12px 0 6px',
              fontFamily: PELLEX_FONTS.display, fontSize: 22, lineHeight: 1.15,
              color: p.text, letterSpacing: -0.3, fontWeight: 700,
            }}>
              The full Starter Kit has 8 templates like this — for tutoring, salons, clinics, freelancers and creators.
            </h3>
            <PrimaryCTA p={p} full sub="$9 · 14-day refund"
              onClick={() => window.pellexNav('kit')}>
              See the Starter Kit
            </PrimaryCTA>
          </div>
        </Reveal>
      </section>

      <section style={{ padding: '24px 22px 0' }}>
        <Reveal>
          <div style={{
            padding: 18, borderRadius: 16,
            background: p.bgElev, border: `1px solid ${p.border}`,
          }}>
            <div style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 10 }}>
              Save these to your inbox
            </div>
            {!sent ? (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="you@example.com"
                  style={{
                    appearance: 'none', border: `1px solid ${p.border}`,
                    background: p.bgCard, color: p.text,
                    padding: '14px 14px', borderRadius: 12,
                    fontSize: 16, fontFamily: PELLEX_FONTS.body, outline: 'none',
                  }}/>
                <PrimaryCTA p={p} full onClick={() => { if (/.+@.+\..+/.test(email)) { setSent(true); try { localStorage.setItem('pellex.email', email); } catch(e){} } }}>
                  Send them to me
                </PrimaryCTA>
              </div>
            ) : (
              <div style={{ color: p.accent, fontSize: 14, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.3 }}>
                ✓ Sent. Check your inbox in ~10 seconds.
              </div>
            )}
          </div>
        </Reveal>
      </section>

      <PageFooter p={p}/>
    </>
  );
}

// ─── Pellex Business archive ───────────────────────────────────────────
function BusinessPage({ p }) {
  const items = [
    { tag: 'TUTORING', t: 'Weekend reply template', s: 'Parents asking about lessons → booked in <5 min.' },
    { tag: 'CLEANING', t: 'Quote follow-up kit', s: 'Boring 5-day sequence that books late quotes.' },
    { tag: 'CLEANING', t: 'ROI calculator', s: 'Live calc + email capture for cleaning business owners.' },
    { tag: 'SALON',    t: 'Rebook prompt pack', s: 'Auto-text the right line at the right time.' },
    { tag: 'CLINIC',   t: 'Intake form scaffold', s: 'AI-summarised intakes for solo practitioners.' },
    { tag: 'FREELANCE', t: 'Async audit template', s: 'Turn one Loom video into a $99 product.' },
  ];

  return (
    <>
      
      <SubHeader p={p} kicker="Archive · service businesses" title="Pellex Business"/>

      <section style={{ padding: '28px 22px 8px' }}>
        <Reveal>
          <h1 style={{
            margin: 0, fontFamily: PELLEX_FONTS.display,
            color: p.text, fontSize: 34, lineHeight: 1.05, letterSpacing: -0.6,
            fontWeight: 700, textWrap: 'balance',
          }}>
            For tutors, cleaners, salons & clinics.
          </h1>
          <p style={{ margin: '14px 0 0', color: p.textMute, fontSize: 15, lineHeight: 1.5 }}>
            The original Pellex was a workflow toolkit for service businesses. All those resources still live here.
          </p>
        </Reveal>
      </section>

      <section style={{ padding: '20px 22px 0' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 50}>
              <a href="#resource" onClick={(e) => { e.preventDefault(); window.pellexNav('resource'); }} style={{
                display: 'flex', alignItems: 'center', gap: 14,
                padding: 16, borderRadius: 14,
                background: p.bgElev,
                border: `1px solid ${p.border}`,
                textDecoration: 'none',
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 10,
                  background: p.bgCard, border: `1px solid ${p.border}`,
                  display: 'grid', placeItems: 'center', flexShrink: 0,
                  color: p.accent, fontFamily: PELLEX_FONTS.mono, fontSize: 9, fontWeight: 700, letterSpacing: 0.4,
                  textAlign: 'center', lineHeight: 1.1, padding: 4,
                }}>{it.tag}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ color: p.text, fontSize: 14.5, fontWeight: 600, marginBottom: 2 }}>{it.t}</div>
                  <div style={{ color: p.textMute, fontSize: 12, lineHeight: 1.4 }}>{it.s}</div>
                </div>
                <div style={{ color: p.textMute }}><Icon.arrowUpRight/></div>
              </a>
            </Reveal>
          ))}
        </div>
      </section>

      <section style={{ padding: '28px 22px 0' }}>
        <Reveal>
          <div style={{
            padding: 22, borderRadius: 18,
            background: `linear-gradient(135deg, ${p.accent}18 0%, ${p.bgElev} 70%)`,
            border: `1px solid ${p.accent}40`,
          }}>
            <Chip p={p} accent>Building solo?</Chip>
            <h3 style={{
              margin: '12px 0 8px',
              fontFamily: PELLEX_FONTS.display, fontSize: 22, lineHeight: 1.1,
              color: p.text, letterSpacing: -0.3, fontWeight: 700,
            }}>
              The new Pellex helps you sell shovels to those exact people.
            </h3>
            <p style={{ margin: '0 0 14px', color: p.textMute, fontSize: 14, lineHeight: 1.5 }}>
              Use the playbook to turn any of the patterns above into a tiny $9 product.
            </p>
            <PrimaryCTA p={p} full onClick={() => window.pellexNav('landing')}>
              See the playbook
            </PrimaryCTA>
          </div>
        </Reveal>
      </section>

      <PageFooter p={p}/>
    </>
  );
}

window.SuccessPage = SuccessPage;
window.ResourcePage = ResourcePage;
window.BusinessPage = BusinessPage;