// src/illustrations.jsx — V2 designed empty-state illustrations (per NN-2 / NN-3 / NN-4 / NN-9)
//
// Per A-NEW-PEP-4 "bottleneck images with claude-design" — until real photography
// arrives, we use *designed* SVG illustrations (NOT AI-slop hand-drawn humans,
// NOT solid color blocks). Vials are stylized clinical-aesthetic primitives.
//
// Components:
//   <IllustratedVial>   — Clear-glass peptide vial SVG, cohort-tinted, 3 sizes
//   <IPhoneMockCard>    — Mini iPhone mock showing fuji recommendation preview
//   <OrganicBlob>       — Soft cohort-themed background blob (replaces solid block)
//   <CitationRow>       — Peer-reviewed-source row (replaces TrimRX press-logo carousel)
//   <ProtocolMatcher>   — Interactive descriptive widget (no outcome claims)
//   <EmptyTestimonials> — Honest empty state (Option A per NN-4)

const { useState: useStateI, useMemo: useMemoI } = React;

// ─────────────────────────────────────────────────────────────────────────────
// ILLUSTRATED VIAL — clinical aesthetic, cohort-tinted, no AI slop
// ─────────────────────────────────────────────────────────────────────────────
function IllustratedVial({ size = 200, accent = 'auto', label = 'PEPTIDE', code = 'BPC-157', tilt = 0 }) {
  // Accent — 'auto' reads cohort-accent CSS var; or specific hue (e.g. 248)
  const a = accent === 'auto' ? 'var(--cohort-accent)' : `hsl(${accent} 70% 55%)`;
  const aDeep = accent === 'auto' ? 'var(--cohort-accent-deep)' : `hsl(${accent} 70% 38%)`;
  return (
    <svg
      viewBox="0 0 120 220"
      width={size}
      height={(size * 220) / 120}
      style={{ overflow: 'visible', transform: `rotate(${tilt}deg)`, transition: 'transform 280ms var(--easing-out)' }}
      aria-hidden="true"
    >
      <defs>
        <linearGradient id={`vial-glass-${code}`} x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%"  stopColor="hsl(220 14% 96%)" stopOpacity="0.85" />
          <stop offset="35%" stopColor="hsl(220 16% 92%)" stopOpacity="0.65" />
          <stop offset="75%" stopColor="hsl(220 14% 84%)" stopOpacity="0.85" />
          <stop offset="100%" stopColor="hsl(220 18% 76%)" stopOpacity="0.95" />
        </linearGradient>
        <linearGradient id={`vial-liquid-${code}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor={a}     stopOpacity="0.78" />
          <stop offset="100%" stopColor={aDeep} stopOpacity="0.94" />
        </linearGradient>
        <linearGradient id={`vial-cap-${code}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="hsl(220 8% 78%)" />
          <stop offset="50%" stopColor="hsl(220 6% 62%)" />
          <stop offset="100%" stopColor="hsl(220 8% 46%)" />
        </linearGradient>
        <linearGradient id={`vial-cap-band-${code}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor={aDeep}  />
          <stop offset="100%" stopColor={a} />
        </linearGradient>
      </defs>

      {/* shadow under vial */}
      <ellipse cx="60" cy="212" rx="38" ry="4" fill="hsl(225 14% 11%)" opacity="0.18" />

      {/* glass body */}
      <rect x="22" y="50" width="76" height="158" rx="6" fill={`url(#vial-glass-${code})`} stroke="hsl(220 16% 64%)" strokeWidth="0.8" />

      {/* liquid fill — ~62% */}
      <rect x="28" y="120" width="64" height="84" rx="3" fill={`url(#vial-liquid-${code})`} />

      {/* meniscus reflection on liquid surface */}
      <ellipse cx="60" cy="120" rx="32" ry="2.5" fill="white" opacity="0.18" />

      {/* glass highlight */}
      <path d="M28 56 Q28 55 32 55 L32 200 Q28 205 28 198 Z" fill="white" opacity="0.32" />
      <path d="M88 56 L88 200" stroke="white" strokeWidth="0.8" opacity="0.18" />

      {/* label */}
      <rect x="30" y="140" width="60" height="50" rx="2" fill="white" opacity="0.92" />
      <rect x="30" y="140" width="60" height="50" rx="2" fill="none" stroke="hsl(220 10% 78%)" strokeWidth="0.4" />
      {/* RX badge */}
      <rect x="33" y="144" width="22" height="11" rx="2" fill={a} />
      <text x="44" y="152" textAnchor="middle" fontFamily="var(--font-mono)" fontSize="8" fontWeight="700" fill="white" letterSpacing="0.6">RX</text>
      {/* code */}
      <text x="32" y="167" fontFamily="var(--font-mono)" fontSize="7.5" fontWeight="600" fill="hsl(225 14% 11%)" letterSpacing="0.4">{code}</text>
      <text x="32" y="178" fontFamily="var(--font-sans)" fontSize="6" fill="hsl(225 9% 42%)">{label}</text>
      <text x="32" y="186" fontFamily="var(--font-mono)" fontSize="5.5" fill="hsl(225 9% 58%)">5 mg · 2 mL</text>

      {/* neck */}
      <rect x="38" y="32" width="44" height="20" rx="2" fill={`url(#vial-glass-${code})`} stroke="hsl(220 16% 64%)" strokeWidth="0.8" />

      {/* aluminum crimp top */}
      <rect x="34" y="14" width="52" height="22" rx="3" fill={`url(#vial-cap-${code})`} />
      {/* colored band on cap */}
      <rect x="34" y="20" width="52" height="6" fill={`url(#vial-cap-band-${code})`} />
      {/* highlight on cap */}
      <rect x="36" y="16" width="2" height="18" rx="1" fill="white" opacity="0.55" />

      {/* rubber septum (top dot) */}
      <ellipse cx="60" cy="13" rx="14" ry="2.4" fill="hsl(0 0% 28%)" />
      <ellipse cx="60" cy="12" rx="13" ry="1.6" fill="hsl(0 0% 42%)" />
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// IPHONE MOCK CARD — shows a recommendation preview (cohort-themed)
// ─────────────────────────────────────────────────────────────────────────────
function IPhoneMockCard({ cohortKey, tone = 'neutral', width = 200 }) {
  const [g, age, goal] = (cohortKey || 'unknown:unknown:unknown').split(':');
  const protocolCode = goal === 'lean_muscle' ? 'BPC-TB' :
                       goal === 'recovery'    ? 'BPC-A'  :
                       goal === 'longevity'   ? 'CJC-IPA-L' :
                       goal === 'energy_vitality' ? 'CJC-IPA' :
                       'GLP1-A';
  const protocolName = goal === 'lean_muscle' ? 'BPC-157 + TB-500' :
                       goal === 'recovery'    ? 'BPC-157' :
                       goal === 'longevity'   ? 'CJC + Ipamorelin' :
                       goal === 'energy_vitality' ? 'CJC + Ipamorelin' :
                       'GLP-1 weight mgmt';
  const tier = goal === 'longevity' || goal === 'hormone' ? 'D2/D3' :
               goal === 'weight_loss' ? 'D1' : 'D2';

  return (
    <div className="iphone-mock" style={{ width: width }}>
      <div className="iphone-mock-screen" style={{ paddingTop: 28 }}>
        <div className="iphone-notch" />
        {/* tiny status bar */}
        <div style={{
          position: 'absolute', top: 6, left: 14, fontFamily: 'var(--font-mono)',
          fontSize: 8, color: 'var(--brand-text)', fontWeight: 600, zIndex: 6,
        }}>9:41</div>
        <div style={{
          position: 'absolute', top: 6, right: 14, display: 'flex', gap: 3, zIndex: 6,
        }}>
          <span style={{ width: 12, height: 6, borderRadius: 1, background: 'var(--brand-text)' }} />
          <span style={{ width: 8, height: 6, borderRadius: 1, background: 'var(--brand-text)', opacity: 0.5 }} />
        </div>

        {/* content */}
        <div style={{ padding: '38px 12px 12px', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {/* brand logo mini */}
          <BrandLogo size={11} />
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 6.5, color: 'var(--brand-text-soft)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>YOUR PROTOCOL · DRAFT</div>
          {/* card */}
          <div style={{
            background: 'var(--brand-bg-elev)',
            border: '1px solid var(--brand-border)',
            borderRadius: 8, padding: 8,
            display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 6, fontWeight: 700,
                color: 'var(--cohort-accent-strong)',
                background: 'var(--cohort-accent-soft)',
                border: '1px solid var(--cohort-accent-line)',
                borderRadius: 2, padding: '1px 3px', letterSpacing: '0.04em',
              }}>{protocolCode}</span>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 6, fontWeight: 700,
                color: 'var(--brand-secondary)',
                background: 'var(--brand-secondary-soft)',
                border: '1px solid var(--brand-secondary)',
                borderRadius: 2, padding: '1px 3px',
              }}>Tier {tier}</span>
            </div>
            <div style={{
              fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 9,
              color: 'var(--brand-text)', lineHeight: 1.1, marginTop: 2,
            }}>{protocolName}</div>
            <div style={{
              fontSize: 6.5, color: 'var(--brand-text-muted)', lineHeight: 1.3,
            }}>Pending physician review · 16-week titration · weekly check-in</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 4 }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
                color: 'var(--brand-text)', letterSpacing: '-0.02em',
              }}>$179<span style={{ fontSize: 6, color: 'var(--brand-text-soft)', marginLeft: 1 }}>/mo</span></span>
              <span style={{
                fontSize: 6, color: 'var(--brand-text-soft)',
              }}>$0 today</span>
            </div>
          </div>
          {/* mini CTA */}
          <div style={{
            background: 'var(--cohort-accent)', color: 'white',
            borderRadius: 6, padding: '5px 8px',
            fontSize: 7, fontWeight: 600, textAlign: 'center',
            boxShadow: '0 2px 8px hsl(var(--cohort-accent-hue) var(--cohort-accent-saturation) 50% / 0.32)',
          }}>Reserve my protocol</div>
          {/* footnote */}
          <div style={{
            fontSize: 5.5, color: 'var(--brand-text-soft)', textAlign: 'center', marginTop: 2,
            fontFamily: 'var(--font-mono)',
          }}>No charge today · cancel anytime</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ORGANIC BLOB — soft cohort-themed background shape
// ─────────────────────────────────────────────────────────────────────────────
function OrganicBlob({ style, hue = 'auto', size = 480 }) {
  const fill = hue === 'auto' ? 'var(--cohort-accent-soft)' : `hsl(${hue} 70% 88%)`;
  return (
    <div
      className="organic-blob"
      style={{
        width: size, height: size,
        background: `radial-gradient(circle at 35% 30%, ${fill} 0%, transparent 65%)`,
        ...style,
      }}
      aria-hidden="true"
    />
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CITATION ROW — peer-reviewed sources (replaces TrimRX press-logo pattern)
// Per NN-9 + A-NEW-PEP-10 — verifiable trust differentiator
// ─────────────────────────────────────────────────────────────────────────────
function CitationRow() {
  const sources = [
    { name: 'NIH PubMed',                href: 'https://pubmed.ncbi.nlm.nih.gov/' },
    { name: 'Endocrine Society',         href: 'https://www.endocrine.org/clinical-practice-guidelines' },
    { name: 'Journal of Peptide Science',href: 'https://onlinelibrary.wiley.com/journal/10991387' },
    { name: 'A4M',                       href: 'https://www.a4m.com/' },
    { name: 'FDA · Compounded Drugs',    href: 'https://www.fda.gov/drugs/development-approval-process-drugs/compounded-drugs' },
  ];
  return (
    <section className="cohort-shift" style={{
      borderTop: '1px solid var(--brand-border)',
      borderBottom: '1px solid var(--brand-border)',
      background: 'var(--brand-bg-elev)',
      padding: '22px 0',
    }}>
      <div className="container">
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          gap: 24, flexWrap: 'wrap', marginBottom: 10,
        }}>
          <span className="eyebrow">RESEARCH BASE · VERIFIABLE SOURCES</span>
          <span style={{ fontSize: 11, color: 'var(--brand-text-soft)' }}>
            Each link opens the source. We don't borrow press credibility we don't have.
          </span>
        </div>
        <div className="citation-row">
          {sources.map((s) => (
            <a
              key={s.name}
              href={s.href}
              target="_blank" rel="noopener noreferrer"
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontFamily: 'var(--font-mono)',
                fontSize: 12, fontWeight: 600, letterSpacing: '0.02em',
                color: 'var(--brand-text-muted)',
                textDecoration: 'none',
                padding: '6px 0',
                borderBottom: '1px dashed transparent',
                transition: 'color 200ms var(--easing-out), border-color 200ms',
                whiteSpace: 'nowrap',
              }}
              onMouseEnter={e => { e.currentTarget.style.color = 'var(--cohort-accent-strong)'; e.currentTarget.style.borderBottomColor = 'var(--cohort-accent-line)'; }}
              onMouseLeave={e => { e.currentTarget.style.color = 'var(--brand-text-muted)'; e.currentTarget.style.borderBottomColor = 'transparent'; }}
            >
              <span style={{
                width: 5, height: 5, borderRadius: 999,
                background: 'var(--cohort-accent)', flexShrink: 0,
              }} />
              {s.name}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// PROTOCOL MATCHER — interactive descriptive widget (NO outcome claims; per L1)
// ─────────────────────────────────────────────────────────────────────────────
function ProtocolMatcher({ onStartQuiz, operatorMode }) {
  const [goal,     setGoal]     = useStateI('weight_loss');
  const [ageRange, setAgeRange] = useStateI('30-44');
  const [activity, setActivity] = useStateI('mixed');

  // Descriptive output ONLY — no outcome promises.
  const match = useMemoI(() => {
    const protocolMap = {
      weight_loss:     { code: 'GLP1-A',     name: 'GLP-1 weight management', tier: 'D1', price: 179, family: 'Semaglutide / Tirzepatide' },
      lean_muscle:     { code: 'BPC-TB',     name: 'BPC-157 + TB-500 stack',  tier: 'D2', price: 184, family: 'Recovery + recomposition' },
      recovery:        { code: 'BPC-A',      name: 'BPC-157 connective',      tier: 'D2', price: 149, family: 'Targeted recovery' },
      energy_vitality: { code: 'CJC-IPA',    name: 'CJC-1295 / Ipamorelin',   tier: 'D2', price: 196, family: 'GH-axis vitality' },
      longevity:       { code: 'CJC-IPA-L',  name: 'CJC-1295 / Ipamorelin',   tier: 'D2', price: 196, family: 'GH-axis longevity' },
    };
    const p = protocolMap[goal] || protocolMap.weight_loss;
    const tierRec = (ageRange === '60+' || ageRange === '45-59') ? 'Standard' : (activity === 'lift' ? 'Comprehensive' : 'Standard');
    return { ...p, tierRec };
  }, [goal, ageRange, activity]);

  const select = (val, setVal, opts) => (
    <select
      value={val}
      onChange={(e) => setVal(e.target.value)}
      className="cohort-shift mono"
      style={{
        padding: '10px 12px', fontSize: 14,
        background: 'var(--brand-bg)', color: 'var(--brand-text)',
        border: '1px solid var(--brand-border)',
        borderRadius: 'var(--radius-input)', outline: 'none',
        fontFamily: 'var(--font-sans)',
        minHeight: 'var(--touch-target-min)',
        cursor: 'pointer',
        flex: 1, minWidth: 0,
      }}
    >
      {opts.map(([k, label]) => <option key={k} value={k}>{label}</option>)}
    </select>
  );

  return (
    <section className="container" style={{ paddingTop: 'clamp(48px, 8vw, 80px)', paddingBottom: 24 }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr', gap: 28,
        maxWidth: 880, margin: '0 auto',
      }}>
        <div style={{ textAlign: 'center' }}>
          <span className="eyebrow">PROTOCOL MATCHER · DESCRIPTIVE</span>
          <h2 className="hero-display" style={{ fontSize: 'clamp(26px, 3vw, 38px)', marginTop: 14 }}>
            What would a clinician likely consider for you?
          </h2>
          <p style={{ color: 'var(--brand-text-muted)', marginTop: 12, fontSize: 15, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
            This is descriptive, not a prediction. Your actual protocol is determined by a licensed physician reviewing your full intake.
          </p>
        </div>

        <Card padding={24} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div className="matcher-row" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            <style>{`
              @media (max-width: 640px) { .matcher-row { grid-template-columns: 1fr !important; } }
            `}</style>
            <Field label="My goal">
              {select(goal, setGoal, [
                ['weight_loss',     'Weight management'],
                ['lean_muscle',     'Lean muscle / recomp'],
                ['recovery',        'Injury recovery'],
                ['energy_vitality', 'Energy / vitality'],
                ['longevity',       'Healthy aging'],
              ])}
            </Field>
            <Field label="Age range">
              {select(ageRange, setAgeRange, [
                ['18-29', '18 – 29'],
                ['30-44', '30 – 44'],
                ['45-59', '45 – 59'],
                ['60+',   '60 +'],
              ])}
            </Field>
            <Field label="Activity">
              {select(activity, setActivity, [
                ['lift',           'Strength training'],
                ['cardio_pilates', 'Cardio · pilates · yoga'],
                ['mixed',          'Mixed'],
                ['sedentary',      'Mostly sedentary'],
              ])}
            </Field>
          </div>

          {/* output */}
          <div className="cohort-shift" style={{
            background: 'var(--brand-bg)', borderRadius: 'var(--radius-card)',
            border: '1px solid var(--cohort-accent-line)',
            padding: 18,
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 16, alignItems: 'center',
          }}>
            <div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 6 }}>
                <span className="mono" style={{
                  fontSize: 10, fontWeight: 700, padding: '3px 6px', borderRadius: 4,
                  background: 'var(--cohort-accent-soft)', color: 'var(--cohort-accent-strong)',
                  border: '1px solid var(--cohort-accent-line)', letterSpacing: '0.04em',
                }}>{match.code}</span>
                <span className="mono" style={{
                  fontSize: 10, fontWeight: 700, padding: '3px 6px', borderRadius: 4,
                  background: 'var(--brand-secondary-soft)', color: 'var(--brand-secondary)',
                  border: '1px solid var(--brand-secondary)',
                }}>Tier {match.tier}</span>
                <span className="mono" style={{
                  fontSize: 10, fontWeight: 700, padding: '3px 6px', borderRadius: 4,
                  background: 'var(--brand-bg-elev)', color: 'var(--brand-text-muted)',
                  border: '1px solid var(--brand-border)',
                }}>{match.tierRec.toUpperCase()} TIER</span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--brand-text)' }}>{match.name}</div>
              <div style={{ fontSize: 13, color: 'var(--brand-text-muted)', marginTop: 2 }}>{match.family}</div>
              <div style={{ fontSize: 12, color: 'var(--brand-text-soft)', marginTop: 6 }}>
                Members like you typically start with the <strong style={{ color: 'var(--brand-text)' }}>{match.tierRec}</strong> tier.
                A clinician reviews every intake before approving.
              </div>
            </div>
            <div style={{ textAlign: 'right', flexShrink: 0 }}>
              <div className="mono" style={{ fontSize: 24, fontWeight: 600, color: 'var(--brand-text)', letterSpacing: '-0.02em' }}>
                ~${match.price}<span style={{ fontSize: 12, color: 'var(--brand-text-soft)' }}>/mo</span>
              </div>
              <div style={{ fontSize: 10, color: 'var(--brand-text-soft)' }}>$0 today</div>
            </div>
          </div>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, alignItems: 'center' }}>
            <Button onClick={onStartQuiz} size="lg" pulse>
              Take the full 2-min quiz <Icon kind="arrow" size={16} />
            </Button>
            <span style={{ fontSize: 12, color: 'var(--brand-text-soft)', flex: 1, minWidth: 200 }}>
              The matcher uses 3 inputs. The quiz uses 12 — and a Bayesian engine tunes the recommendation to your specific cohort.
            </span>
            {operatorMode && <VariantTag id="matcher_v0_descriptive" />}
          </div>
        </Card>
      </div>
    </section>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 11, color: 'var(--brand-text-muted)', fontWeight: 500, letterSpacing: '0.02em' }}>{label}</span>
      {children}
    </label>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// EMPTY-TESTIMONIALS — Honest empty state (Option A per NN-4)
// "Real reviewer stories will appear here as Phase-1 members complete protocols."
// ─────────────────────────────────────────────────────────────────────────────
function EmptyTestimonials() {
  return (
    <section id="testimonials" className="container" style={{ paddingTop: 'clamp(48px, 8vw, 80px)', paddingBottom: 24 }}>
      <div style={{
        textAlign: 'center', maxWidth: 720, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center',
      }}>
        <span className="eyebrow">WHAT MEMBERS WILL SAY</span>
        <h2 className="hero-display" style={{ fontSize: 'clamp(26px, 3vw, 40px)' }}>
          We don't have customers yet. So we don't have testimonials.
        </h2>
        <p style={{ fontSize: 15.5, color: 'var(--brand-text-muted)', maxWidth: 580, lineHeight: 1.55 }}>
          {'Fuji'} is in Phase 1. The first cohort is being onboarded now. Real reviewer stories — verified members,
          with consent, with their cohort context — will appear here as members complete their protocols.
        </p>
        <p style={{
          fontSize: 13, color: 'var(--brand-text-soft)', maxWidth: 520,
          padding: '12px 16px', borderRadius: 999,
          background: 'var(--brand-bg-elev)', border: '1px solid var(--brand-border)',
        }}>
          Every other telehealth site in this category has a wall of 5-star testimonials before they've shipped to a single customer.
          We won't fabricate quotes.
        </p>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// FAQ (small accordion — common pre-purchase questions)
// ─────────────────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    {
      q: 'Will my card be charged before a clinician approves my protocol?',
      a: 'No. We validate your card at intake (a $0 authorization that releases within 48 hours) but do not charge until a licensed physician has reviewed your intake and your first vial ships. If you are not a candidate, we tell you — and discard the payment method.',
    },
    {
      q: 'What is a per-batch Certificate of Analysis?',
      a: 'Every batch of compounded peptide is tested by an independent lab for identity, purity, and microbial content. The CoA for the exact batch you receive is linked on every order. We surface the batch ID + lab + date on the protocol page — not buried in the FAQ.',
    },
    {
      q: 'How is this different from sourcing peptides on my own?',
      a: 'A physician in your state reviews your full intake, sets your dose, and stays available for check-ins. Compounding happens at a 503A pharmacy operating under state oversight. You get the CoA. None of that is available when you self-source.',
    },
    {
      q: 'What is the "D1–D5 peptide tier system" on the Safety page?',
      a: 'D1 is FDA-approved indications (semaglutide / tirzepatide). D2 is well-researched off-label peptides. D3 is investigational (informed-consent gated, not all states). D4 and D5 are tiers we do not offer — surfaced publicly so you can see the framework, not buried.',
    },
    {
      q: 'Can I cancel? Will I be auto-renewed?',
      a: 'Yes you can cancel any month. There is no auto-renew lock-in. Pro-rated refunds on the unused portion of a month if you stop mid-cycle.',
    },
    {
      q: 'Why does the quiz adapt to me — and does it share my data?',
      a: 'The quiz uses Bayesian inference on your answers to tune copy, dose framing, and protocol surfacing to your cohort. Inference runs client-side and is never sold. Your email is single-opt-in, CAN-SPAM compliant, and used only for protocol updates + safety notices.',
    },
  ];
  const [open, setOpen] = useStateI(0);
  return (
    <section id="faq" className="container" style={{ paddingTop: 'clamp(48px, 8vw, 80px)', paddingBottom: 'clamp(48px, 8vw, 80px)' }}>
      <div style={{ marginBottom: 24, maxWidth: 720 }}>
        <span className="eyebrow">FREQUENTLY ASKED</span>
        <h2 className="hero-display" style={{ fontSize: 'clamp(26px, 3vw, 40px)', marginTop: 12 }}>
          Questions worth answering before you take the quiz.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, maxWidth: 880 }}>
        {items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              borderTop: '1px solid var(--brand-border)',
              borderBottom: i === items.length - 1 ? '1px solid var(--brand-border)' : 'none',
            }}>
              <button
                onClick={() => setOpen(isOpen ? -1 : i)}
                style={{
                  width: '100%', textAlign: 'left',
                  padding: '18px 4px',
                  background: 'transparent', border: 'none',
                  cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  minHeight: 'calc(var(--touch-target-min) + 8px)',
                  color: 'var(--brand-text)',
                  fontFamily: 'inherit', fontSize: 'clamp(15px, 1.4vw, 17px)',
                  fontWeight: 540,
                }}
                aria-expanded={isOpen}
              >
                <span style={{ flex: 1, minWidth: 0 }}>{it.q}</span>
                <span style={{
                  flexShrink: 0, color: 'var(--cohort-accent)',
                  transition: 'transform 240ms var(--easing-out)',
                  transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                  width: 24, height: 24,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 22, fontWeight: 300,
                }}>+</span>
              </button>
              <div style={{
                maxHeight: isOpen ? 320 : 0,
                opacity: isOpen ? 1 : 0,
                overflow: 'hidden',
                transition: 'max-height 320ms var(--easing-out), opacity 240ms var(--easing-out)',
              }}>
                <p style={{
                  fontSize: 14.5, color: 'var(--brand-text-muted)', lineHeight: 1.6,
                  padding: '0 4px 22px', maxWidth: 720,
                }}>{it.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, {
  IllustratedVial, IPhoneMockCard, OrganicBlob,
  CitationRow, ProtocolMatcher, EmptyTestimonials, FAQ,
});
