/* ============================================================
   Digital Odyssey, Growth Playbook (gated lead magnet)
   Hero + book-cover mockup, "what's inside" chapters, proof,
   email-gate form with success/download state, CTA.
   ============================================================ */

const CHAPTERS = [
{ icon: 'compass', n: '01', title: 'The 20-minute growth audit', body: 'The exact funnel, economics and competitor checklist we run before any engagement, so you can run it yourself.' },
{ icon: 'target', n: '02', title: 'Meta & Google Ads teardowns', body: 'Real (anonymised) account breakdowns, including how we hit a CA$16.82 cost per lead in a competitive healthcare market.' },
{ icon: 'map-pin', n: '03', title: 'The local domination play', body: 'The multi-location playbook for clinics, retailers and service brands that live or die by local demand.' },
{ icon: 'pen-tool', n: '04', title: 'Creative that converts', body: 'The hooks, formats and weekly testing cadence behind content that actually stops the scroll.' },
{ icon: 'bar-chart', n: '05', title: 'The metrics that matter', body: 'CAC, ROAS, CPL, blended vs. platform, defined in plain English, with the benchmarks we hold accounts to.' },
{ icon: 'sparkles', n: '06', title: 'AI, used well', body: 'Where AI video and self-updating dashboards genuinely save time and money, and where they quietly waste it.' }];


const PLAYBOOK_STATS = [
['10', 'pages, zero fluff'],
['6', 'actionable chapters'],
['100%', 'from real client work']];


/* The designed "book cover" mockup, no stock image */
function PlaybookCover() {
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 380, margin: '0 auto', aspectRatio: '3 / 4',
      borderRadius: 18, overflow: 'hidden', background: 'linear-gradient(160deg, var(--navy-elevated), var(--navy-deep))',
      border: '1px solid rgba(255,255,255,.1)', boxShadow: '0 40px 90px rgba(0,0,0,.5)', transform: 'rotate(-3deg)' }}>
      <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: .5 }}></div>
      <div style={{ position: 'absolute', width: 300, height: 300, borderRadius: '50%', top: -120, right: -120, background: 'radial-gradient(circle, rgba(26,224,230,.22), transparent 65%)' }}></div>
      {/* spine accent */}
      <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 8, background: 'var(--grad-energy)' }}></div>
      <div style={{ position: 'relative', height: '100%', padding: '32px 30px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#fff', borderRadius: '9999px', padding: 4, lineHeight: 0, boxShadow: '0 2px 8px rgba(0,0,0,.25)', flexShrink: 0 }}>
            <img src="assets/logo.png" alt="Digital Odyssey" width={24} height={24} style={{ display: 'block' }} />
          </span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, letterSpacing: '-0.4px', color: '#fff' }}>Digital<span style={{ fontWeight: 300 }}> Odyssey</span></span>
        </div>
        <div style={{ marginTop: 'auto' }}>
          <div className="eyebrow" style={{ color: 'var(--cyan)', marginBottom: 14 }}>The Growth Playbook</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(28px,4vw,38px)', lineHeight: 1.05, letterSpacing: '-1.2px', color: '#fff' }}>
            How we turn ad spend into <span className="grad-text">predictable growth.</span>
          </div>
          <div style={{ marginTop: 20, display: 'flex', alignItems: 'flex-end', gap: 10, height: 54 }}>
            {[30, 48, 38, 64, 56, 80, 96].map((h, i) =>
            <div key={i} style={{ flex: 1, height: `${h}%`, borderRadius: 4, background: i === 6 ? 'var(--grad-energy)' : 'rgba(125,140,180,.3)' }}></div>
            )}
          </div>
          <div style={{ marginTop: 18, fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(255,255,255,.5)' }}>2026 Edition · 10 pages</div>
        </div>
      </div>
    </div>);

}

const pbInput = {
  width: '100%', height: 52, borderRadius: 'var(--radius-md)', border: '1.5px solid var(--border)',
  background: 'var(--surface-inset)', color: 'var(--text)', padding: '0 16px',
  fontFamily: 'var(--font-sans)', fontSize: 15, outline: 'none', transition: 'border-color .15s ease'
};

function PlaybookGate() {
  const [f, setF] = React.useState({ name: '', email: '', company: '' });
  const [err, setErr] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    const x = {};
    if (!f.name.trim()) x.name = 'Required';
    if (!f.email.includes('@') || !f.email.includes('.')) x.email = 'Enter a valid email';
    setErr(x);
    if (Object.keys(x).length === 0) setSent(true);
  };

  if (sent) {
    return (
      <div className="do-card" style={{ padding: 'clamp(28px,4vw,40px)', textAlign: 'center' }}>
        <div style={{ width: 68, height: 68, borderRadius: 9999, background: 'var(--grad-energy)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto 22px', boxShadow: '0 0 40px rgba(26,224,230,.4)' }}>
          <Icon name="check" size={32} color="#04122b" stroke={2.5} />
        </div>
        <h3 className="do-title-lg" style={{ margin: '0 0 10px' }}>It's on its way, {f.name.split(' ')[0] || 'there'}.</h3>
        <p className="do-body-md" style={{ margin: '0 auto 24px', maxWidth: 380 }}>Check your inbox for the Growth Playbook. Want a head start? Grab the PDF now.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="cyan" icon="arrow-right" onClick={() => window.open('growth-playbook.html', '_blank')}>Read the playbook</Button>
          <Button variant="outline" onClick={() => window.open('growth-playbook.html?print=1', '_blank')}>Save as PDF</Button>
        </div>
      </div>);

  }

  return (
    <form className="do-card" onSubmit={submit} noValidate style={{ padding: 'clamp(28px,4vw,36px)', display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <h3 className="do-title-lg" style={{ margin: '0 0 6px' }}>Get the Growth Playbook</h3>
        <p className="do-body-sm" style={{ margin: 0 }}>Free. Straight to your inbox. No sales call required.</p>
      </div>
      <label style={{ display: 'block' }}>
        <span style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--text)' }}>
          <span>Full name<span style={{ color: 'var(--cyan-deep)' }}> *</span></span>{err.name && <span style={{ color: 'var(--down)', fontWeight: 500, fontSize: 12.5 }}>{err.name}</span>}
        </span>
        <input value={f.name} onChange={set('name')} placeholder="Jane Doe" style={pbInput}
        onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
      </label>
      <label style={{ display: 'block' }}>
        <span style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 7, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--text)' }}>
          <span>Work email<span style={{ color: 'var(--cyan-deep)' }}> *</span></span>{err.email && <span style={{ color: 'var(--down)', fontWeight: 500, fontSize: 12.5 }}>{err.email}</span>}
        </span>
        <input value={f.email} onChange={set('email')} type="email" placeholder="jane@company.com" style={pbInput}
        onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
      </label>
      <label style={{ display: 'block' }}>
        <span style={{ display: 'block', marginBottom: 7, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13.5, color: 'var(--text)' }}>Company</span>
        <input value={f.company} onChange={set('company')} placeholder="Company Inc." style={pbInput}
        onFocus={(e) => e.target.style.borderColor = 'var(--primary)'} onBlur={(e) => e.target.style.borderColor = 'var(--border)'} />
      </label>
      <Button size="lg" variant="cyan" icon="arrow-right" full>Send me the playbook</Button>
      <p className="do-caption" style={{ textAlign: 'center', margin: 0 }}>We'll also send the occasional growth tip. Unsubscribe anytime.</p>
    </form>);

}

function PlaybookApp() {
  useReveal();
  return (
    <>
      <TopNav active="" />
      <main>
        {/* Hero */}
        <section style={{ background: 'var(--navy-deep)', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div className="grid-bg" style={{ position: 'absolute', inset: 0, opacity: .5 }}></div>
          <div style={{ position: 'absolute', width: 560, height: 560, borderRadius: '50%', top: '-240px', right: '-120px', background: 'radial-gradient(circle, rgba(26,224,230,.16), transparent 62%)' }}></div>
          <div style={{ position: 'absolute', width: 520, height: 520, borderRadius: '50%', bottom: '-300px', left: '-160px', background: 'radial-gradient(circle, rgba(0,82,255,.22), transparent 62%)' }}></div>
          <Container style={{ position: 'relative', padding: 'clamp(56px,7vw,92px) 24px' }}>
            <div className="split" style={{ gridTemplateColumns: '1.05fr .95fr' }}>
              <div>
                <div className="reveal is-in" style={{ marginBottom: 24 }}><Badge>Free resource</Badge></div>
                <h1 className="reveal is-in do-display-xl" style={{ color: '#fff', margin: 0 }}>The Growth Playbook.</h1>
                <p className="reveal is-in do-body-lg" style={{ color: 'rgba(255,255,255,.72)', margin: '22px 0 30px', maxWidth: 500, fontSize: 19, transitionDelay: '80ms' }}>
                  The same plays we run for clients, funnel audits, ad teardowns, local domination, and the metrics that actually matter. 10 pages, pulled straight from real accounts. No fluff, no gatekeeping the good stuff.
                </p>
                <div className="reveal is-in" style={{ display: 'flex', gap: '24px 40px', flexWrap: 'wrap', marginBottom: 8, transitionDelay: '140ms' }}>
                  {PLAYBOOK_STATS.map(([v, l]) =>
                  <div key={l}>
                      <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 32, color: 'var(--cyan)', letterSpacing: '-1px' }}>{v}</div>
                      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'rgba(255,255,255,.6)' }}>{l}</div>
                    </div>
                  )}
                </div>
              </div>
              <div className="reveal is-in" style={{ transitionDelay: '160ms', display: 'flex', alignItems: 'center' }}>
                <div style={{ animation: 'do-float 7s ease-in-out infinite', width: '100%' }}><PlaybookCover /></div>
              </div>
            </div>
          </Container>
        </section>

        {/* What's inside */}
        <section className="section">
          <Container>
            <SectionHead eyebrow="What's inside" title="Six chapters. Every one actionable." body="No theory for theory's sake. Each chapter is a play you can run this quarter, the same ones behind the results on our work page." align="center" maxBody={620} />
            <div className="grid-3">
              {CHAPTERS.map((c, i) =>
              <div key={c.n} className="do-card reveal" style={{ padding: 30, transitionDelay: `${i % 3 * 70}ms` }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 22 }}>
                    <div style={{ width: 50, height: 50, borderRadius: 14, background: 'var(--chip-bg)', border: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <Icon name={c.icon} size={22} color="var(--cyan-deep)" />
                    </div>
                    <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 14, color: 'var(--text-3)' }}>{c.n}</span>
                  </div>
                  <h3 className="do-title-md" style={{ margin: '0 0 10px' }}>{c.title}</h3>
                  <p className="do-body-sm" style={{ margin: 0 }}>{c.body}</p>
                </div>
              )}
            </div>
          </Container>
        </section>

        {/* Gate */}
        <section className="section" style={{ background: 'var(--page-soft)' }}>
          <Container>
            <div className="split" style={{ gridTemplateColumns: '1fr .9fr', alignItems: 'center' }}>
              <div className="reveal">
                <div className="eyebrow" style={{ marginBottom: 18 }}>Get your copy</div>
                <h2 className="do-display-md" style={{ margin: '0 0 18px' }}>Where should we send it?</h2>
                <p className="do-body-lg" style={{ margin: '0 0 28px' }}>Drop your details and the Growth Playbook lands in your inbox in seconds. We'll send the occasional play worth reading, and nothing else.</p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                  {['Built from real, profitable client accounts', 'Plain-English, no jargon, no filler', 'Plays you can run with or without us'].map((t) =>
                  <div key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: 'var(--font-sans)', fontSize: 15.5, color: 'var(--text)' }}>
                      <Icon name="check-circle" size={20} color="var(--cyan-deep)" />{t}
                    </div>
                  )}
                </div>
              </div>
              <div className="reveal" style={{ transitionDelay: '100ms' }}><PlaybookGate /></div>
            </div>
          </Container>
        </section>

        <CtaBand title="Rather skip ahead?" body="The playbook is great. A 30-minute call mapped to your numbers is faster. Let's talk growth." primary="Book a discovery call" secondary="See the results" />
      </main>
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<PlaybookApp />);