// Free 0→1 Map page — the lead magnet. Email gate, then unlocks the map.

function MapPage({ p }) {
  const [email, setEmail] = React.useState('');
  const [unlocked, setUnlocked] = React.useState(false);
  const [err, setErr] = React.useState('');

  const submit = (e) => {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      setErr("That email doesn't look right.");
      return;
    }
    setErr('');
    setUnlocked(true);
    try { localStorage.setItem('pellex.email', email); } catch (e) {}
  };

  return (
    <>
      
      <SubHeader p={p} kicker="Free · 5 min read" title="The 0→1 AI side-business map"/>

      <section style={{ padding: '28px 22px 18px' }}>
        <Reveal>
          <h1 style={{
            margin: 0, fontFamily: PELLEX_FONTS.display,
            color: p.text, fontSize: 36, lineHeight: 1.05, letterSpacing: -0.6,
            fontWeight: 700, textWrap: 'balance',
          }}>
            One page. Four steps.<br/>
            <span style={{ color: p.accent }}>Your weekend, sorted.</span>
          </h1>
          <p style={{
            margin: '14px 0 0', color: p.textMute, fontSize: 15, lineHeight: 1.5,
          }}>
            Drop your email — we'll unlock the route below, send the printable PDF, and never spam you. Unsubscribe in one click.
          </p>
        </Reveal>
      </section>

      {!unlocked && (
        <section style={{ padding: '0 22px' }}>
          <form onSubmit={submit} style={{
            padding: 18, borderRadius: 16,
            background: p.bgElev, border: `1px solid ${p.border}`,
            display: 'flex', flexDirection: 'column', gap: 10,
          }}>
            <label style={{ color: p.textMute, fontSize: 11, fontFamily: PELLEX_FONTS.mono, letterSpacing: 0.4, textTransform: 'uppercase' }}>
              Your email
            </label>
            <input type="email" value={email} onChange={e => { setEmail(e.target.value); setErr(''); }}
              placeholder="you@example.com"
              style={{
                appearance: 'none', border: `1px solid ${err ? p.danger : p.border}`,
                background: p.bgCard, color: p.text,
                padding: '14px 14px', borderRadius: 12,
                fontSize: 16, fontFamily: PELLEX_FONTS.body, outline: 'none',
              }}
            />
            {err && <div style={{ color: p.danger, fontSize: 12 }}>{err}</div>}
            <PrimaryCTA p={p} full sub="Free · Unsub anytime">Unlock the map</PrimaryCTA>
            <div style={{ color: p.textDim, fontSize: 11, fontFamily: PELLEX_FONTS.mono, textAlign: 'center', letterSpacing: 0.3 }}>
              No spam. One email per week, max.
            </div>
          </form>
        </section>
      )}

      {unlocked && <MapContent p={p} />}

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

function MapContent({ p }) {
  const steps = [
    { tag: 'PICK', t: '20 min', title: 'Pick a tiny painful niche', body: 'Brainstorm 5 niches with urgent, boring pain. Pick the one you already understand.' },
    { tag: 'PUBLISH', t: '2 hrs', title: 'Publish a free useful page', body: 'One template, checklist, calculator or teardown. Help first.' },
    { tag: 'SELL', t: '1 day', title: 'Package the shovel', body: 'Prompt pack, spreadsheet, mini-guide. Price small ($9–$49).' },
    { tag: 'AUTOMATE', t: '3 hrs', title: 'Wire fulfilment', body: 'Stripe link → auto-email → done.' },
  ];

  return (
    <>
      <section style={{ padding: '24px 22px 8px' }}>
        <Reveal>
          <div style={{
            padding: '10px 14px', borderRadius: 99,
            background: `${p.accent}15`, border: `1px solid ${p.accent}40`,
            color: p.accent, fontFamily: PELLEX_FONTS.mono, fontSize: 11, letterSpacing: 0.4,
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <Icon.check/> Unlocked · PDF sent to your inbox
          </div>
        </Reveal>
      </section>

      <section style={{ padding: '12px 22px 0' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 12 }}>
          <a href="/downloads/pellex-0-to-1-map.pdf" target="_blank" rel="noopener" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
            padding: 14, borderRadius: 14, background: p.accent, color: p.accentInk,
            textDecoration: 'none', fontWeight: 800, fontSize: 14,
            border: `1px solid ${p.accent}`,
          }}>
            <span>Download the printable PDF</span>
            <Icon.arrowUpRight/>
          </a>
          <a href="/downloads/pellex-0-to-1-map/" target="_blank" rel="noopener" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
            padding: 13, borderRadius: 14, background: p.bgElev, color: p.text,
            textDecoration: 'none', fontWeight: 700, fontSize: 13,
            border: `1px solid ${p.border}`,
          }}>
            <span>Open web version</span>
            <Icon.arrowUpRight/>
          </a>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                padding: 18, borderRadius: 16,
                background: p.bgElev, border: `1px solid ${p.border}`,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
                  <span style={{ color: p.accent, fontFamily: PELLEX_FONTS.mono, fontSize: 11, letterSpacing: 0.5 }}>
                    {String(i+1).padStart(2,'0')} · {s.tag}
                  </span>
                  <span style={{ color: p.textDim, fontFamily: PELLEX_FONTS.mono, fontSize: 11 }}>{s.t}</span>
                </div>
                <h3 style={{
                  margin: '0 0 6px',
                  fontFamily: PELLEX_FONTS.display, fontSize: 22, lineHeight: 1.1,
                  color: p.text, letterSpacing: -0.3, fontWeight: 600,
                }}>{s.title}</h3>
                <p style={{ margin: 0, color: p.textMute, fontSize: 14, lineHeight: 1.5 }}>{s.body}</p>
              </div>
            </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>Skip ahead</Chip>
            <h3 style={{
              margin: '12px 0 8px',
              fontFamily: PELLEX_FONTS.display, fontSize: 24, lineHeight: 1.1,
              color: p.text, letterSpacing: -0.3, fontWeight: 700,
            }}>
              Want the templates ready-made?
            </h3>
            <p style={{ margin: '0 0 14px', color: p.textMute, fontSize: 14, lineHeight: 1.5 }}>
              The Starter Kit gives you 8 ready-to-publish traffic asset templates plus a copy-paste fulfilment setup. $9, one-time.
            </p>
            <PrimaryCTA p={p} full sub="$9 one-time · 14-day refund"
              onClick={() => window.pellexNav('checkout')}>
              Get the Starter Kit
            </PrimaryCTA>
          </div>
        </Reveal>
      </section>
    </>
  );
}

window.MapPage = MapPage;