// Assessment recommendation screen.
// Shown after the deep questionnaire and before account creation.

const HeardYou = ({ track, name, deepAnswers, onContinue, onBack }) => {
  const trackInfo = CATEGORIES.find(c => c.id === track) || CATEGORIES[0];
  const summary = buildSummary(track, deepAnswers);

  return (
    <div className="shell">
      <nav className="nav">
        <div className="nav-inner">
          <Logo size={20} asLink />
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.15em', color: 'var(--ink-mute)', textTransform: 'uppercase' }}>
            ASSESSMENT · READY
          </div>
          <button className="btn btn-soft btn-sm" onClick={onBack}>← Back</button>
        </div>
      </nav>

      <div className="section" style={{ paddingTop: 56, paddingBottom: 56 }}>
        <div style={{ maxWidth: 820, marginBottom: 34 }}>
          <div className="section-eyebrow">
            <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--ok)', marginRight: 10 }} />
            — WE HEARD YOU
          </div>
          <h2 className="serif">
            {name ? `${name}, ` : ''}your answers point toward <em>{trackInfo.name.toLowerCase()} support.</em>
          </h2>
          <p className="section-lede" style={{ marginTop: 16 }}>
            Your plan starts with what you told us, then carries into checkout. Before anything ships, your account, verification, and review all stay connected to the same member record.
          </p>
        </div>

        <div className="heard-grid">
          <div className="heard-summary">
            <div className="mono heard-tag">YOUR ASSESSMENT · {trackInfo.name.toUpperCase()}</div>
            <h3 className="serif heard-h3">What this tells us:</h3>
            <ul className="heard-list">
              {summary.bullets.map((b, i) => (
                <li key={i}><span className="heard-list-num">{String(i + 1).padStart(2, '0')}</span>{b}</li>
              ))}
            </ul>
          </div>

          <div className="heard-summary">
            <div className="mono heard-tag">WHAT HAPPENS NEXT</div>
            <h3 className="serif heard-h3">A clean path from here.</h3>
            <ul className="heard-list">
              <li><span className="heard-list-num">01</span>Create your member account so your assessment can be saved.</li>
              <li><span className="heard-list-num">02</span>Choose your vial plan and provider support level before payment.</li>
              <li><span className="heard-list-num">03</span>Finish verification in your dashboard before fulfillment.</li>
            </ul>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 12, marginTop: 40, justifyContent: 'flex-end' }}>
          <button className="btn btn-soft" onClick={onBack}>← Back</button>
          <button className="btn btn-primary btn-lg" onClick={onContinue}>
            Create your account →
          </button>
        </div>
      </div>
    </div>
  );
};

const val = (x) => String(x || '').split(' — ')[0].toLowerCase();

const buildSummary = (track, a) => {
  const presets = {
    weight: [
      a.w_history ? `You pointed to ${val(a.w_history)} as the part that feels stuck.` : 'You pointed to weight support as the main need.',
      a.w_glp1 ? `Your GLP-1 history gives the review team useful context.` : 'Your prior medication history will help shape review.',
      a.w_goal ? `Your goal gives us a clear direction without locking you into one vial forever.` : 'Your plan can adjust as your needs change.',
    ],
    libido: [
      a.l_arousal ? `You described the change as ${val(a.l_arousal)}.` : 'You described a real change in desire or response.',
      a.l_partner ? `Your relationship context gives the review team useful context.` : 'Your context matters, not just the symptom.',
      'The plan can focus on the experience you want back, not just a product name.',
    ],
    menopause: [
      a.m_phase ? `You identified your menopause phase as ${val(a.m_phase)}.` : 'You identified menopause support as the main need.',
      a.m_top ? `The loudest issue is ${val(a.m_top)}.` : 'Your answers help prioritize what should be reviewed first.',
      a.m_hrt ? `Your HRT history gives the review team useful context.` : 'Your current support history will travel with your account.',
    ],
    hair: [
      a.h_where ? `You told us where the thinning shows up: ${val(a.h_where)}.` : 'You identified hair support as the main need.',
      a.h_tried ? `Your prior attempts help avoid repeating what already failed.` : 'Your prior routine will help shape review.',
      'The plan can focus on the pattern you are seeing, not a generic hair category.',
    ],
    skin: [
      a.s_concern ? `Your top skin concern is ${val(a.s_concern)}.` : 'You identified skin support as the main need.',
      a.s_routine ? `Your current routine gives the review team useful context.` : 'Your current routine matters.',
      'The plan can focus on texture, tone, firmness, or overall skin quality based on your answers.',
    ],
    sleep: [
      a.sl_pattern ? `The sleep issue you named is ${val(a.sl_pattern)}.` : 'You identified sleep support as the main need.',
      a.sl_day ? `You also told us how it affects your day: ${val(a.sl_day)}.` : 'Your daily experience gives the review team context.',
      'The plan can focus on rest, recovery, and waking up with more capacity.',
    ],
    energy: [
      a.e_pattern ? `You told us your energy drops around ${val(a.e_pattern)}.` : 'You identified energy support as the main need.',
      a.e_need ? `You need energy for ${val(a.e_need)}.` : 'Your reason for wanting more energy matters.',
      'The plan can focus on usable daily performance, not just stimulation.',
    ],
    healing: [
      a.he_area ? `The recovery area you named is ${val(a.he_area)}.` : 'You identified healing support as the main need.',
      a.he_limit ? `You told us this is affecting ${val(a.he_limit)}.` : 'Your limitation helps shape review.',
      'The plan can focus on recovery support and what your body needs to do again.',
    ],
    cognition: [
      a.cog_gap ? `The cognitive gap you named is ${val(a.cog_gap)}.` : 'You identified cognition support as the main need.',
      a.cog_pressure ? `You notice it most around ${val(a.cog_pressure)}.` : 'Your real-life context matters.',
      'The plan can focus on clarity, focus, and follow-through.',
    ],
    stress: [
      a.st_pattern ? `Stress shows up as ${val(a.st_pattern)}.` : 'You identified stress support as the main need.',
      a.st_recover ? `The hardest recovery point is ${val(a.st_recover)}.` : 'Your recovery pattern matters.',
      'The plan can focus on helping your system feel less switched on.',
    ],
  };
  return { bullets: presets[track] || presets.weight };
};

Object.assign(window, { HeardYou });