// 02 · Quiz landing page — 4 steps in iPhone frames.
// "Find your protocol" — micro-commit → segment → email gate.

const QUIZ = {
  intro: {
    eyebrow: 'Take the protocol quiz · 60 seconds',
    title: 'Find your peptide protocol.',
    sub: 'Answer 5 questions. We match you to a research-backed stack. Built by sports-med PAs, not influencers.',
  },
  steps: [
    {
      q: 'What\'s slowing you down most?',
      n: 1,
      opts: [
        { e: '🦵', t: 'Joint or tendon pain', s: 'knee, shoulder, elbow' },
        { e: '💤', t: 'Recovery feels slower than it used to', s: 'sore for 3+ days' },
        { e: '⚡', t: 'Energy + drive crashed', s: 'flat workouts, low motivation' },
        { e: '🎯', t: 'All of the above', s: 'most common answer' },
      ],
    },
    {
      q: 'How old are you?',
      n: 2,
      opts: [
        { e: '', t: '25 – 34', s: 'early prevention' },
        { e: '', t: '35 – 44', s: 'most common' , hot: true },
        { e: '', t: '45 – 54', s: 'recovery focus' },
        { e: '', t: '55+', s: 'longevity stack' },
      ],
    },
    {
      q: 'Have you used peptides before?',
      n: 3,
      opts: [
        { e: '🆕', t: 'No — total beginner', s: 'we\'ll start gentle' },
        { e: '📖', t: 'Done my research, never bought', s: 'most common' },
        { e: '🧪', t: 'Tried 1 or 2 brands', s: 'we\'ll lab-compare' },
        { e: '🏆', t: 'Experienced — looking to stack', s: 'advanced protocols' },
      ],
    },
  ],
  result: {
    headline: 'Your match: 30-Day Recovery Protocol',
    matchPct: 94,
    why: [
      'Joint + tendon focus (Q1)',
      'Age bracket 35–44 — peak demand for tissue repair',
      'New to peptides — beginner-safe dosing',
    ],
    starter: { name: 'BPC-157 5mg', sub: '30-day vial · pharma-grade · lot-tested' },
  },
};

// Mini phone frame for the quiz screens
function PhoneShell({ children, dark = false }) {
  return (
    <div style={{
      width: 396, height: 858, borderRadius: 46,
      background: '#000', padding: 8,
      boxShadow: '0 30px 60px -30px rgba(0,0,0,0.4), 0 6px 0 #d4d0c8',
      position: 'relative',
      margin: '0 auto',
    }}>
      <div style={{
        width: '100%', height: '100%', borderRadius: 38,
        background: dark ? '#0a0a0a' : '#fff',
        overflow: 'hidden', position: 'relative',
        color: dark ? '#fff' : '#0a0a0a',
        fontFamily: 'var(--font-body)',
      }}>
        {/* Dynamic island */}
        <div style={{
          position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 110, height: 32, borderRadius: 16, background: '#000', zIndex: 50,
        }} />
        {/* Status bar */}
        <div style={{
          height: 52, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '14px 28px 0', fontSize: 13, fontWeight: 700,
          color: dark ? '#fff' : '#0a0a0a',
        }}>
          <span>9:41</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11 }}>●●●● 5G ▮</span>
        </div>
        {/* Content area */}
        <div style={{ position: 'absolute', top: 52, left: 0, right: 0, bottom: 0, overflow: 'hidden' }}>
          {children}
        </div>
        {/* Home indicator */}
        <div style={{
          position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
          width: 130, height: 4, borderRadius: 2, background: dark ? '#fff' : '#0a0a0a', opacity: 0.6, zIndex: 50,
        }} />
      </div>
    </div>
  );
}

window.PhoneShell = PhoneShell;

function QuizHeader({ step, total = 5 }) {
  return (
    <div style={{ padding: '12px 20px 0' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginBottom: 12,
      }}>
        <Wordmark size={11} />
        <Mono style={{ fontSize: 10, color: TP.c.ink3 }}>
          Step {step} / {total}
        </Mono>
      </div>
      {/* Progress bar */}
      <div style={{ height: 3, background: TP.c.line, borderRadius: 2, overflow: 'hidden' }}>
        <div style={{
          width: `${(step / total) * 100}%`,
          height: '100%', background: TP.c.cta,
          transition: 'width 0.3s',
        }} />
      </div>
    </div>
  );
}

function QuizOption({ opt, selected }) {
  return (
    <div style={{
      padding: '16px 14px',
      border: `1.5px solid ${selected ? TP.c.ink : TP.c.line2}`,
      background: selected ? '#fafaf7' : '#fff',
      borderRadius: 10,
      display: 'flex', alignItems: 'center', gap: 12,
      cursor: 'pointer',
      position: 'relative',
    }}>
      {opt.e && (
        <div style={{
          width: 36, height: 36, borderRadius: 8,
          background: TP.c.paper, display: 'flex',
          alignItems: 'center', justifyContent: 'center', fontSize: 18,
          flexShrink: 0,
        }}>{opt.e}</div>
      )}
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: TP.c.ink }}>
          {opt.t}
        </div>
        <div style={{ fontSize: 11, color: TP.c.ink3, marginTop: 1 }}>{opt.s}</div>
      </div>
      {opt.hot && (
        <div style={{
          position: 'absolute', top: -6, right: 10,
          background: TP.c.cta, color: '#fff',
          fontFamily: 'var(--font-mono)', fontSize: 8,
          letterSpacing: '0.08em', padding: '2px 6px', borderRadius: 3,
        }}>MOST PICKED</div>
      )}
      <div style={{
        width: 22, height: 22, borderRadius: 999,
        border: `1.5px solid ${selected ? TP.c.ink : TP.c.line2}`,
        background: selected ? TP.c.ink : '#fff',
        flexShrink: 0,
      }} />
    </div>
  );
}

function QuizStep({ step }) {
  // step 1 = intro/step1 combined, 2 = step 2, 3 = step 3, 4 = result
  if (step === 1) {
    const s = QUIZ.steps[0];
    return (
      <PhoneShell>
        <QuizHeader step={1} />
        <div style={{ padding: '24px 20px' }}>
          <Eyebrow style={{ marginBottom: 10 }}>{QUIZ.intro.eyebrow}</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0,
          }}>{s.q}</h1>
          <div style={{ display: 'grid', gap: 8, marginTop: 22 }}>
            {s.opts.map((o, i) => (
              <QuizOption key={i} opt={o} selected={i === 1} />
            ))}
          </div>
          {/* trust strip */}
          <div style={{
            marginTop: 24, paddingTop: 16,
            borderTop: `1px solid ${TP.c.line}`,
            display: 'flex', alignItems: 'center', gap: 10, fontSize: 10, color: TP.c.ink3,
          }}>
            <Check size={12} />
            <span>No email until step 5 · zero spam · unsubscribe in 1 tap</span>
          </div>
        </div>
      </PhoneShell>
    );
  }

  if (step === 2 || step === 3) {
    const s = QUIZ.steps[step - 1];
    return (
      <PhoneShell>
        <QuizHeader step={step} />
        <div style={{ padding: '24px 20px' }}>
          <Eyebrow style={{ marginBottom: 10 }}>Question {step} of 5</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.03em', margin: 0,
          }}>{s.q}</h1>
          <div style={{ display: 'grid', gap: 8, marginTop: 22 }}>
            {s.opts.map((o, i) => (
              <QuizOption key={i} opt={o} selected={step === 2 ? i === 1 : i === 1} />
            ))}
          </div>
          <div style={{ marginTop: 18 }}>
            <CTA size="md">Continue →</CTA>
          </div>
          <div style={{
            marginTop: 14, fontSize: 10, color: TP.c.ink3, textAlign: 'center',
          }}>
            ← back · skip
          </div>
        </div>
      </PhoneShell>
    );
  }

  // result + email gate
  return (
    <PhoneShell>
      <QuizHeader step={5} />
      <div style={{ padding: '20px 20px 0' }}>
        {/* match meter */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
          <Stamp size={64} rotate={-8}>{QUIZ.result.matchPct}% MATCH</Stamp>
          <div>
            <Eyebrow style={{ marginBottom: 4 }}>Your protocol</Eyebrow>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 800,
              fontSize: 22, letterSpacing: '-0.025em', lineHeight: 1.05,
            }}>30-Day Recovery</div>
          </div>
        </div>

        {/* why card */}
        <div style={{
          background: TP.c.paper, padding: 14, marginBottom: 14,
          border: `1px solid ${TP.c.line2}`,
        }}>
          <Eyebrow style={{ marginBottom: 8 }}>Why this matched</Eyebrow>
          {QUIZ.result.why.map((w, i) => (
            <div key={i} style={{
              display: 'flex', gap: 8, alignItems: 'flex-start',
              fontSize: 12, color: TP.c.ink, marginBottom: 6, lineHeight: 1.4,
            }}>
              <Check size={12} />
              <span>{w}</span>
            </div>
          ))}
        </div>

        {/* product strip */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: 10, border: `1px solid ${TP.c.line2}`,
          marginBottom: 14, background: '#fff',
        }}>
          <ImgPlaceholder label="vial" w={50} h={60} radius={4} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>
              {QUIZ.result.starter.name}
            </div>
            <div style={{ fontSize: 10, color: TP.c.ink3, marginTop: 2 }}>{QUIZ.result.starter.sub}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 4 }}>
              <Stars size={9} />
              <span style={{ fontSize: 10, color: TP.c.ink2 }}>4.9 · 1,840 reviews</span>
            </div>
          </div>
        </div>

        {/* email gate */}
        <div style={{
          padding: 14, background: '#0a0a0a', color: '#fff',
          marginBottom: 12,
        }}>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 15, letterSpacing: '-0.01em', marginBottom: 4,
          }}>Where should we send your results?</div>
          <div style={{ fontSize: 11, opacity: 0.7, marginBottom: 10 }}>
            We'll email your full protocol + unlock $100 off the starter kit.
          </div>
          <input
            placeholder="you@email.com"
            style={{
              width: '100%', padding: '12px 12px',
              border: 'none', borderRadius: 4,
              fontSize: 13, fontFamily: 'var(--font-body)',
              marginBottom: 8,
            }} />
          <CTA size="md">Unlock my protocol →</CTA>
        </div>

        <div style={{
          fontSize: 9, color: TP.c.ink3, textAlign: 'center', lineHeight: 1.5,
        }}>
          By continuing you agree to our T&Cs. Research compound — not FDA-approved for human use.<br />Unsubscribe anytime.
        </div>
      </div>
    </PhoneShell>
  );
}

function Landing({ step = 1 }) {
  return (
    <div style={{
      width: 420, height: 900,
      background: TP.c.paper,
      padding: 12,
      fontFamily: 'var(--font-body)',
    }}>
      <QuizStep step={step} />
    </div>
  );
}

window.Landing = Landing;