/* BioReveal — Quiz step components, brand-matched (white paper, ink type, dusty rose accent) */

const StepIntro = ({ onNext }) => {
  const { FaceScanDemo, HowAIWorks, SampleReveal, SocialProof, FAQ, StartCTA } = window.BR_LANDING;
  return (
    <>
      <section className="br-hero">
        <div className="container br-hero-inner">
          <div className="br-hero-copy">
            <div className="eyebrow" style={{ marginBottom: 20, display: "block" }}>★ BIOREVEAL · 90-SECOND ANALYSIS</div>
            <h1 className="br-hero-h1">Decode<br/><span className="accent">your stack.</span></h1>
            <p className="br-hero-p">A 90-second AI read of your goals, signals, and lifestyle. We map you against 47,000+ outcomes to surface the peptides most likely to move your mind, body, and life.</p>
            <button className="btn btn-dark btn-lg" onClick={onNext} style={{ marginTop: 8 }}>Begin analysis →</button>
            <ul className="br-hero-meta">
              <li><span>★</span> 8 quick steps</li>
              <li><span>★</span> No bloodwork</li>
              <li><span>★</span> MD-reviewed</li>
            </ul>
          </div>
          <div className="br-hero-vials">
            {["BPC-157", "NAD+", "Ipamorelin", "GHK-Cu"].map(p => (
              <div key={p} className="br-hero-vial"><ProductShot product={p} chip={false}/></div>
            ))}
          </div>
        </div>
      </section>

      {/* Live face-scan demo */}
      <section className="br-section br-facescan-section">
        <div className="container">
          <FaceScanDemo/>
        </div>
      </section>

      <HowAIWorks/>
      <SampleReveal/>
      <SocialProof/>
      <FAQ/>
      <StartCTA onNext={onNext}/>
    </>
  );
};

const GOALS = [
  { id: "muscle",    icon: "◆", label: "Build muscle",       sub: "Train harder. Recover faster." },
  { id: "weight",    icon: "▼", label: "Lose weight",        sub: "Quiet cravings. Move the scale." },
  { id: "skin",      icon: "✿", label: "Fix your skin",      sub: "Calm redness. Smooth texture." },
  { id: "hair",      icon: "❋", label: "Grow your hair",     sub: "Wake sleeping follicles." },
  { id: "energy",    icon: "✦", label: "More energy",        sub: "Stop needing the second coffee." },
  { id: "sleep",     icon: "☾", label: "Sleep deeper",       sub: "Wake up actually rested." },
  { id: "brain",     icon: "▲", label: "Think smarter",      sub: "Sharper focus. Calmer mood." },
  { id: "longevity", icon: "∞", label: "Age slower",         sub: "Look 30 at 40." },
  { id: "libido",    icon: "♥", label: "More drive",         sub: "Reignite the spark." },
];

const StepGoals = ({ value = [], onChange }) => {
  const toggle = (id) => onChange(value.includes(id) ? value.filter(v => v !== id) : [...value, id].slice(-3));
  return (
    <>
      <div className="br-eyebrow">02 / 08 · Pick up to 3</div>
      <h2 className="br-question">What do you want different in 90 days?</h2>
      <p className="br-sub">No wrong answers — just your honest list.</p>
      <div className="br-grid">
        {GOALS.map(g => (
          <button key={g.id} className={"br-tile " + (value.includes(g.id) ? "selected" : "")} onClick={() => toggle(g.id)}>
            <div className="br-tile-icon">{g.icon}</div>
            <div className="br-tile-label">{g.label}</div>
            <div className="br-tile-sub">{g.sub}</div>
          </button>
        ))}
      </div>
    </>
  );
};

const StepSelfie = ({ value, onChange }) => {
  const [scanning, setScanning] = React.useState(false);
  const [done, setDone] = React.useState(!!value);
  const start = () => {
    setScanning(true);
    setTimeout(() => { setScanning(false); setDone(true); onChange({ captured: true }); }, 2400);
  };
  return (
    <>
      <div className="br-eyebrow">03 / 08 · Optional · Not stored</div>
      <h2 className="br-question">Snap a selfie.</h2>
      <p className="br-sub">A soft-light read of skin, eye area, and vitality cues. We use it as a fun visual signal — not a diagnostic. Skip if you'd rather not.</p>
      <div className="br-selfie-frame">
        <div className="br-corner tl"/><div className="br-corner tr"/>
        <div className="br-corner bl"/><div className="br-corner br"/>
        <div className="br-face-guide"><div className="br-face-guide-shape"/></div>
        {scanning && <div className="br-scan-line"/>}
        <div className="br-selfie-stat" style={{ top: 16, left: 44 }}>RGB · 24-BIT</div>
        <div className="br-selfie-stat" style={{ top: 16, right: 44 }}>● REC</div>
        <div className="br-selfie-stat" style={{ bottom: 16, left: 44 }}>{done ? "✓ ANALYZED" : scanning ? "SCANNING…" : "ALIGN FACE"}</div>
      </div>
      <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
        <button className={"br-option " + (done ? "selected" : "")} style={{ flex: 1, justifyContent: "center" }} onClick={start} disabled={scanning}>
          {done ? "✓ Captured" : scanning ? "Scanning…" : "Capture"}
        </button>
        <button className="br-option" style={{ flex: 1, justifyContent: "center" }} onClick={() => { setDone(true); onChange({ skipped: true }); }}>
          Skip
        </button>
      </div>
    </>
  );
};

const FEEL = [
  { id: "energy",   label: "Energy day-to-day",     low: "Drained",   high: "Wired" },
  { id: "sleep",    label: "Sleep quality",          low: "Wrecked",   high: "Restorative" },
  { id: "recovery", label: "Post-workout recovery",  low: "Days",      high: "Hours" },
  { id: "mood",     label: "Mood & focus",           low: "Foggy",     high: "Locked-in" },
  { id: "drive",    label: "Drive / libido",         low: "Flat",      high: "Roaring" },
];

const StepFeel = ({ value = {}, onChange }) => {
  const get = (id) => value[id] ?? 5;
  return (
    <>
      <div className="br-eyebrow">04 / 08 · Be honest</div>
      <h2 className="br-question">How do you feel right now?</h2>
      <p className="br-sub">1 = ground floor. 10 = peak. We calibrate from here.</p>
      <div className="br-slider-group">
        {FEEL.map(f => {
          const v = get(f.id);
          return (
            <div key={f.id} className="br-slider-row">
              <label><span>{f.label}</span><span className="val">{v}/10</span></label>
              <input type="range" min="1" max="10" value={v}
                style={{ "--p": ((v - 1) / 9 * 100) + "%" }}
                onChange={(e) => onChange({ ...value, [f.id]: Number(e.target.value) })} />
              <div className="br-slider-low-high"><span>{f.low}</span><span>{f.high}</span></div>
            </div>
          );
        })}
      </div>
    </>
  );
};

const TRAIN = [
  { id: "elite",   mark: "◆", label: "Elite",         sub: "5+ days, programmed" },
  { id: "regular", mark: "▲", label: "Regular",       sub: "3–4 days a week" },
  { id: "casual",  mark: "●", label: "Casual",        sub: "1–2 days, mixed" },
  { id: "none",    mark: "○", label: "Just walking",  sub: "Building back up" },
];

const StepTraining = ({ value, onChange }) => (
  <>
    <div className="br-eyebrow">05 / 08 · Movement profile</div>
    <h2 className="br-question">How are you training?</h2>
    <p className="br-sub">Stack intensity scales to your load.</p>
    <div className="br-options">
      {TRAIN.map(o => (
        <button key={o.id} className={"br-option " + (value === o.id ? "selected" : "")} onClick={() => onChange(o.id)}>
          <span className="br-option-mark">{o.mark}</span>
          <div>
            <div className="br-option-label">{o.label}</div>
            <div className="br-option-sub">{o.sub}</div>
          </div>
        </button>
      ))}
    </div>
  </>
);

const VICES = [
  { id: "drink",     icon: "◇", label: "Alcohol",         sub: "More than I'd like" },
  { id: "screen",    icon: "▢", label: "Late screens",    sub: "Scrolling past midnight" },
  { id: "stress",    icon: "≈", label: "Chronic stress",  sub: "Always wired" },
  { id: "sugar",     icon: "✕", label: "Sugar / refined", sub: "Cravings rule" },
  { id: "smoke",     icon: "~", label: "Nicotine",        sub: "Vape, smoke, pouch" },
  { id: "sedentary", icon: "—", label: "Mostly sitting",  sub: "Desk-bound days" },
];

const StepVices = ({ value = [], onChange }) => {
  const toggle = (id) => onChange(value.includes(id) ? value.filter(v => v !== id) : [...value, id]);
  return (
    <>
      <div className="br-eyebrow">06 / 08 · No judgment</div>
      <h2 className="br-question">What's blocking your peak?</h2>
      <p className="br-sub">Pick everything that applies. We adjust the protocol around it.</p>
      <div className="br-grid">
        {VICES.map(v => (
          <button key={v.id} className={"br-tile " + (value.includes(v.id) ? "selected" : "")} onClick={() => toggle(v.id)}>
            <div className="br-tile-icon">{v.icon}</div>
            <div className="br-tile-label">{v.label}</div>
            <div className="br-tile-sub">{v.sub}</div>
          </button>
        ))}
      </div>
    </>
  );
};

const StepBasics = ({ value = {}, onChange }) => {
  const sex = value.sex;
  const age = value.age ?? 32;
  return (
    <>
      <div className="br-eyebrow">07 / 08 · Calibration data</div>
      <h2 className="br-question">A few basics.</h2>
      <p className="br-sub">Sex and age shape baseline hormone curves.</p>
      <div style={{ marginBottom: 16 }}>
        <div className="br-eyebrow" style={{ marginBottom: 10 }}>Sex assigned at birth</div>
        <div style={{ display: "flex", gap: 10 }}>
          {["female", "male", "intersex"].map(s => (
            <button key={s} className={"br-option " + (sex === s ? "selected" : "")} style={{ flex: 1, justifyContent: "center", textTransform: "capitalize" }} onClick={() => onChange({ ...value, sex: s })}>
              {s}
            </button>
          ))}
        </div>
      </div>
      <div className="br-slider-row" style={{ marginTop: 24 }}>
        <label><span>Age</span><span className="val">{age}</span></label>
        <input type="range" min="18" max="75" value={age}
          style={{ "--p": ((age - 18) / 57 * 100) + "%" }}
          onChange={(e) => onChange({ ...value, age: Number(e.target.value) })} />
        <div className="br-slider-low-high"><span>18</span><span>75</span></div>
      </div>
    </>
  );
};

const StepEmail = ({ value = "", onChange }) => (
  <>
    <div className="br-eyebrow">08 / 08 · Where to send your blueprint</div>
    <h2 className="br-question">Reveal the protocol.</h2>
    <p className="br-sub">We'll email a copy of your stack + 12-week timeline. No spam, ever.</p>
    <input
      type="email"
      placeholder="you@where.com"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      style={{
        width: "100%", boxSizing: "border-box", padding: "18px 20px",
        background: "var(--paper-2)", border: "1.5px solid var(--paper-3)",
        borderRadius: "var(--r-md)", fontSize: 16, fontFamily: "inherit", color: "var(--ink)",
        marginTop: 8,
      }}
    />
    <div style={{ display: "flex", gap: 12, alignItems: "flex-start", marginTop: 16, fontSize: 13, color: "var(--muted)", lineHeight: 1.5 }}>
      <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius: 4, background: "var(--lime)", color: "var(--ink)", display: "grid", placeItems: "center", fontSize: 11, fontWeight: 800 }}>✓</span>
      <span>I understand BioReveal is a fit-finder, not medical advice. A licensed clinician reviews every order before fulfillment.</span>
    </div>
  </>
);

// StepSelfie is the legacy fake-scan; StepVitals (in bioreveal-vitals.jsx) is the real rPPG one.
window.BR_STEPS = window.BR_STEPS || {};
Object.assign(window.BR_STEPS, { StepIntro, StepGoals, StepSelfie, StepFeel, StepTraining, StepVices, StepBasics, StepEmail });