/* ============================================================
   /quiz - landing page (separate from the interactive quiz)
   ============================================================ */

const QuizLandingPage = () => (
  <div className="etp etp-bg-ivory" style={{ width: '100%', minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
    <SiteHeader active="quiz" />

    <section style={{ padding: '88px 56px 56px', borderBottom: '1px solid #1c1c1c' }}>
      <div className="label" style={{ color: '#666', marginBottom: 24 }}>The diagnostic</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' }}>
          Which pattern<br/><span style={{ color: '#1a6b5a' }}>did you inherit?</span>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.55 }}>
          Twelve questions. Ninety seconds. One specific pattern named by name, with the cost it has been quietly extracting from your life. Your pattern, the full breakdown, and your printable 3-page dossier - on screen the moment you finish.
        </p>
      </div>
      <div style={{ marginTop: 44, display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
        <SiteLink to="/quiz/start" className="etp-btn etp-btn-orange" style={{ padding: '20px 32px', fontSize: 16, textDecoration: 'none' }}>Take the 90-second quiz →</SiteLink>
        <span className="label" style={{ color: '#666' }}>Free · 90 seconds · result on screen</span>
      </div>
    </section>

    {/* Specs */}
    <section style={{ padding: '32px 56px', background: '#1c1c1c', color: '#f4f1eb' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
        {[['Length', '12 questions'], ['Time', '~90 seconds'], ['Result', 'On screen, instantly'], ['Dossier', '3 pages, printable']].map(([k, v]) => (
          <div key={k}><div className="label" style={{ color: '#d4883a', marginBottom: 8 }}>{k}</div><div style={{ fontSize: 24, fontWeight: 600 }}>{v}</div></div>
        ))}
      </div>
    </section>

    {/* The five outcomes */}
    <section style={{ padding: '80px 56px', background: '#f4f1eb' }}>
      <div className="label" style={{ color: '#1a6b5a', marginBottom: 16 }}>● The five possible results</div>
      <h3 style={{ fontSize: 56, lineHeight: 0.92, letterSpacing: '-0.02em', marginBottom: 40 }}>One of these is probably yours.<br/>If none of them land, we'll say so.</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
        {PB_PATTERNS.map((p, i) => {
          const colors = ['#1a6b5a', '#d4883a', '#1c1c1c', '#2a9e85', '#d8c9a8'];
          const fg = i === 4 ? '#1c1c1c' : '#f4f1eb';
          return (
            <div key={p.slug} style={{ background: colors[i], color: fg, padding: '32px 24px', minHeight: 320, display: 'flex', flexDirection: 'column' }}>
              <div className="label" style={{ opacity: 0.85, marginBottom: 16 }}>{p.num}</div>
              <h4 style={{ fontSize: 28, lineHeight: 0.95, marginBottom: 16 }}>{p.name}</h4>
              <p style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.9, flex: 1 }}>{p.one}</p>
              <div className="label" style={{ marginTop: 20, opacity: 0.85 }}>Pattern {p.num} of 05</div>
            </div>
          );
        })}
      </div>
    </section>

    {/* What you get */}
    <section style={{ padding: '80px 56px', background: '#ebe6db', borderTop: '1px solid #1c1c1c', borderBottom: '1px solid #1c1c1c' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
        <div>
          <div className="label" style={{ color: '#1a6b5a', marginBottom: 16 }}>● What you get</div>
          <h3 style={{ fontSize: 48, lineHeight: 0.95, letterSpacing: '-0.02em', marginBottom: 32 }}>Your result, plus<br/>a 3-page dossier.</h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              'Your dominant pattern, named',
              'Your secondary (the one that looks like the dominant)',
              'The cost it is quietly extracting from your life right now',
              'Where it lives in your body - and what to notice',
              'The single line that begins to replace it',
            ].map((t, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '40px 1fr', gap: 16, paddingBottom: 16, borderBottom: '1px solid #d8c9a8' }}>
                <div className="label" style={{ color: '#d4883a' }}>0{i+1}</div>
                <div style={{ fontSize: 18, lineHeight: 1.45 }}>{t}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ background: '#1c1c1c', color: '#f4f1eb', padding: 32, alignSelf: 'start' }}>
          <div className="label" style={{ color: '#d4883a', marginBottom: 16 }}>● Real question - 04 of 12</div>
          <p style={{ fontSize: 28, lineHeight: 1.2, fontWeight: 500, marginBottom: 24, letterSpacing: '-0.005em' }}>"When you rest, you feel…"</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {['Anxious about who needs me.', 'Like I\'m falling behind.', 'Numb, mostly.', 'Suspicious of the quiet.', 'Fine, until I\'m supposed to come back.'].map((o, i) => (
              <div key={o} style={{ padding: '12px 16px', border: '1px solid #444', display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 14 }}>{o}</span>
                <span className="label" style={{ color: '#d4883a' }}>0{i+1}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>

    {/* Privacy */}
    <section style={{ padding: '64px 56px', background: '#f4f1eb' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64, alignItems: 'center' }}>
        <h3 style={{ fontSize: 40, lineHeight: 0.95, letterSpacing: '-0.02em' }}>What we don't do.</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {[
            'No spam - your result and nothing else.',
            'No paywall on your result - it\'s yours free, in full, on screen.',
            'No "share to unlock" gate.',
            'No retargeting pixels on the result page.',
            'No selling your data. Ever.',
          ].map((t, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '24px 1fr', gap: 16, fontSize: 18, lineHeight: 1.45, paddingBottom: 12, borderBottom: '1px solid #d8c9a8' }}>
              <div style={{ color: '#1a6b5a', fontWeight: 700 }}>×</div><div>{t}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* CTA */}
    <section style={{ padding: '88px 56px', background: '#1a6b5a', color: '#f4f1eb', textAlign: 'center' }}>
      <div className="label" style={{ color: '#d4883a', marginBottom: 24 }}>● 90 seconds</div>
      <h2 style={{ fontSize: 96, lineHeight: 0.9, letterSpacing: '-0.03em', marginBottom: 32 }}>Take the quiz.</h2>
      <SiteLink to="/quiz/start" className="etp-btn etp-btn-orange" style={{ padding: '24px 40px', fontSize: 16, textDecoration: 'none' }}>Start question 01 →</SiteLink>
    </section>

    <SiteFooter />
  </div>
);

window.QuizLandingPage = QuizLandingPage;