/* BioReveal landing — extra sections shown only on intro/landing */

/* Animated face scan demo — auto-loops to show what selfie step does */
const FaceScanDemo = () => {
  const [phase, setPhase] = React.useState(0); // 0=idle, 1=scanning, 2=analyzing, 3=done
  React.useEffect(() => {
    const seq = [
      [0, 600],   // idle
      [1, 2400],  // scanning
      [2, 1800],  // analyzing
      [3, 2200],  // done
    ];
    let i = 0;
    let timer;
    const tick = () => {
      const [p, dur] = seq[i];
      setPhase(p);
      timer = setTimeout(() => { i = (i + 1) % seq.length; tick(); }, dur);
    };
    tick();
    return () => clearTimeout(timer);
  }, []);

  const POINTS = [
    { id: "skin",    label: "Skin tone",       x: 32, y: 38, val: "warm · 7.2" },
    { id: "eye",     label: "Eye area",        x: 68, y: 36, val: "low · 4.1" },
    { id: "lip",     label: "Lip vitality",    x: 50, y: 70, val: "med · 6.0" },
    { id: "frame",   label: "Facial symmetry", x: 78, y: 58, val: "high · 8.4" },
    { id: "glow",    label: "Skin glow",       x: 22, y: 62, val: "med · 5.7" },
  ];

  return (
    <div className="br-facescan">
      <div className="br-facescan-frame">
        {/* Photo subject for the scan demo */}
        <img className="br-facescan-face" src="assets/face-scan.jpg" alt="" aria-hidden="true"/>
        <div className="br-facescan-vignette" aria-hidden="true"/>

        {/* Corner brackets */}
        <div className="br-corner tl"/><div className="br-corner tr"/>
        <div className="br-corner bl"/><div className="br-corner br"/>

        {/* Top-left status */}
        <div className="br-fs-stat tl-stat">
          {phase === 0 && "● ALIGN FACE"}
          {phase === 1 && "● SCANNING"}
          {phase === 2 && "● ANALYZING"}
          {phase === 3 && "✓ COMPLETE"}
        </div>
        <div className="br-fs-stat tr-stat">RGB · 24-BIT</div>

        {/* Scan line */}
        {phase === 1 && <div className="br-scan-line br-scan-active"/>}

        {/* Detection points appear during phase 2+ */}
        {POINTS.map((pt, idx) => {
          const visible = phase >= 2;
          return (
            <div key={pt.id} className={"br-fs-point " + (visible ? "show" : "")}
                 style={{ left: pt.x + "%", top: pt.y + "%", transitionDelay: (idx * 0.12) + "s" }}>
              <div className="br-fs-dot"/>
              <div className="br-fs-line"/>
              <div className="br-fs-readout">
                <div className="lbl">{pt.label}</div>
                <div className="val">{pt.val}</div>
              </div>
            </div>
          );
        })}

        {/* Bottom result strip */}
        <div className={"br-fs-result " + (phase === 3 ? "show" : "")}>
          <div className="br-fs-result-row">
            <span>VITALITY INDEX</span>
            <span className="num">7.4 / 10</span>
          </div>
          <div className="br-fs-result-bar"><div className="fill"/></div>
          <div className="br-fs-result-row sub">
            <span>Top signal</span>
            <span>Recovery + skin renewal</span>
          </div>
        </div>
      </div>

      <div className="br-facescan-caption">
        <div className="eyebrow" style={{ color: "var(--lime-deep)" }}>★ LIVE DEMO</div>
        <h3>An optional selfie<br/>= more accurate stack.</h3>
        <p>We read soft-light vitality cues — skin tone, eye area, glow, symmetry — across 5 facial zones. It's <em>not</em> a diagnostic. It's just one more signal we feed into your stack.</p>
        <ul className="br-checklist">
          <li><span>✓</span> Photo never leaves your device unencrypted</li>
          <li><span>✓</span> Auto-deleted after analysis</li>
          <li><span>✓</span> Skip it — totally optional</li>
        </ul>
      </div>
    </div>
  );
};

/* How the AI works — 3 cards */
const HowAIWorks = () => (
  <section className="br-section br-how-ai">
    <div className="container">
      <div className="br-section-head">
        <div className="eyebrow">★ HOW THE ANALYSIS WORKS</div>
        <h2>Not another quiz.</h2>
        <p>BioReveal is a pattern engine, not a flowchart. Your inputs feed an outcome model trained on real protocol data — so you get a stack that fits <em>you</em>, not the average.</p>
      </div>
      <div className="br-how-grid">
        <div className="br-how-card">
          <div className="br-how-num">01</div>
          <h3>You answer<br/>8 fast questions.</h3>
          <p>Goals, energy, sleep, recovery, training load, lifestyle friction. Honest sliders — not multiple choice.</p>
          <div className="br-how-visual">
            <div className="br-how-sliders">
              <div className="br-how-slider"><div className="bar" style={{ width: "30%" }}/></div>
              <div className="br-how-slider"><div className="bar" style={{ width: "65%" }}/></div>
              <div className="br-how-slider"><div className="bar" style={{ width: "45%" }}/></div>
              <div className="br-how-slider"><div className="bar" style={{ width: "80%" }}/></div>
            </div>
          </div>
        </div>
        <div className="br-how-card featured">
          <div className="br-how-num">02</div>
          <h3>The model maps you<br/>to 47K outcomes.</h3>
          <p>We pattern-match your signal panel against a database of real peptide protocols and the goals they actually moved.</p>
          <div className="br-how-visual">
            <svg viewBox="0 0 240 120" className="br-how-net">
              <defs>
                <radialGradient id="netnode" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="#E8B5A8"/>
                  <stop offset="100%" stopColor="#C68B7C"/>
                </radialGradient>
              </defs>
              {/* Lines */}
              <g stroke="rgba(232,181,168,0.35)" strokeWidth="0.8" fill="none">
                <line x1="20" y1="30" x2="120" y2="60"/>
                <line x1="20" y1="60" x2="120" y2="60"/>
                <line x1="20" y1="90" x2="120" y2="60"/>
                <line x1="120" y1="60" x2="220" y2="20"/>
                <line x1="120" y1="60" x2="220" y2="50"/>
                <line x1="120" y1="60" x2="220" y2="80"/>
                <line x1="120" y1="60" x2="220" y2="100"/>
              </g>
              {/* Input nodes */}
              <circle cx="20" cy="30" r="5" fill="#fff" stroke="#E8B5A8" strokeWidth="1"/>
              <circle cx="20" cy="60" r="5" fill="#fff" stroke="#E8B5A8" strokeWidth="1"/>
              <circle cx="20" cy="90" r="5" fill="#fff" stroke="#E8B5A8" strokeWidth="1"/>
              {/* Hub */}
              <circle cx="120" cy="60" r="14" fill="url(#netnode)"/>
              <circle cx="120" cy="60" r="22" fill="none" stroke="#E8B5A8" strokeWidth="1" opacity="0.4">
                <animate attributeName="r" from="14" to="32" dur="2s" repeatCount="indefinite"/>
                <animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/>
              </circle>
              {/* Output nodes */}
              <circle cx="220" cy="20" r="5" fill="#0A0A0A"/>
              <circle cx="220" cy="50" r="5" fill="#0A0A0A"/>
              <circle cx="220" cy="80" r="5" fill="#0A0A0A"/>
              <circle cx="220" cy="100" r="5" fill="#0A0A0A"/>
              {/* Labels */}
              <text x="20" y="14" fontSize="7" fill="#9A9A93" textAnchor="middle" fontFamily="JetBrains Mono">SLEEP</text>
              <text x="20" y="112" fontSize="7" fill="#9A9A93" textAnchor="middle" fontFamily="JetBrains Mono">ENERGY</text>
              <text x="120" y="38" fontSize="7" fill="#9A9A93" textAnchor="middle" fontFamily="JetBrains Mono">MODEL</text>
              <text x="220" y="115" fontSize="7" fill="#9A9A93" textAnchor="middle" fontFamily="JetBrains Mono">STACK</text>
            </svg>
          </div>
        </div>
        <div className="br-how-card">
          <div className="br-how-num">03</div>
          <h3>You get a stack.<br/>MD reviewed.</h3>
          <p>3 peptides, dosed and sequenced for your profile. Every order is reviewed by a licensed U.S. clinician before anything ships.</p>
          <div className="br-how-visual">
            <div className="br-how-vials">
              <div className="br-mini-vial"><ProductShot product="BPC-157" chip={false}/></div>
              <div className="br-mini-vial"><ProductShot product="NAD+" chip={false}/></div>
              <div className="br-mini-vial"><ProductShot product="Ipamorelin" chip={false}/></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* Sample reveal preview — what you get */
const SampleReveal = () => (
  <section className="br-section br-sample">
    <div className="container">
      <div className="br-section-head">
        <div className="eyebrow">★ A SNEAK PEEK</div>
        <h2>What you'll see<br/>after 90 seconds.</h2>
        <p>Your stack, your archetype, and a 12-week timeline of what'll change in your mind, body, and life.</p>
      </div>
      <div className="br-sample-grid">
        <div className="br-sample-card">
          <div className="br-sample-tag">YOUR ARCHETYPE</div>
          <div className="br-sample-arch">The Recovery<br/><span className="accent">Hunter.</span></div>
          <p>You train hard — your bottleneck is repair. We'll tune for tissue regeneration, deeper sleep, and the GH pulse that turns work into adaptation.</p>
          <div className="br-sample-stats">
            <div><strong>3</strong><span>peptides</span></div>
            <div><strong>94%</strong><span>match</span></div>
            <div><strong>12wk</strong><span>protocol</span></div>
          </div>
        </div>
        <div className="br-sample-card sample-vial">
          <div className="br-sample-vial">
            <div className="match-pill"><span className="num">96%</span> match</div>
            <ProductShot product="BPC-157" chip={false}/>
          </div>
          <div className="br-sample-info">
            <div className="name">BPC-157</div>
            <div className="tag">Healing · Recovery</div>
            <p>Foundation peptide — repairs gut, tendon, vascular tissue. Your recovery score made this an easy first pick.</p>
          </div>
        </div>
        <div className="br-sample-card sample-tl">
          <div className="br-sample-tag">12-WEEK FEEL</div>
          <div className="br-sample-tl">
            <div className="tl-row"><span className="wk">WK 01</span><span className="t">Sleep deepens</span></div>
            <div className="tl-row"><span className="wk">WK 02</span><span className="t">Recovery halves</span></div>
            <div className="tl-row"><span className="wk">WK 04</span><span className="t">Energy floor lifts</span></div>
            <div className="tl-row"><span className="wk">WK 08</span><span className="t">Body recomposed</span></div>
            <div className="tl-row"><span className="wk">WK 12</span><span className="t">New baseline locks</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* Social proof — testimonials + stat strip */
const SocialProof = () => (
  <section className="br-section br-social">
    <div className="container">
      <div className="br-social-strip">
        <div className="br-social-stat">
          <div className="num">47K+</div>
          <div className="lbl">Outcomes modeled</div>
        </div>
        <div className="br-social-stat">
          <div className="num">12,400</div>
          <div className="lbl">Stacks delivered</div>
        </div>
        <div className="br-social-stat">
          <div className="num">4.9★</div>
          <div className="lbl">2,800 reviews</div>
        </div>
        <div className="br-social-stat">
          <div className="num">100%</div>
          <div className="lbl">MD reviewed</div>
        </div>
      </div>
      <div className="br-quotes">
        {[
          { q: "Took the analysis on a Thursday. By the next Monday I was on a stack actually built for my goals — not whatever the influencer was selling.", n: "Maya, 34", role: "Pilates instructor" },
          { q: "I've tried every supplement protocol on TikTok. This is the first one that asked the right questions and got me peptides that work together.", n: "Jordan, 29", role: "Tech founder" },
          { q: "The reasoning trace was the moment I trusted it. They literally show you why each peptide was picked. Way smarter than guessing.", n: "Devi, 41", role: "Physician" },
        ].map((t, i) => (
          <figure key={i} className="br-quote">
            <blockquote>"{t.q}"</blockquote>
            <figcaption>— <strong>{t.n}</strong>, {t.role}</figcaption>
          </figure>
        ))}
      </div>
    </div>
  </section>
);

/* FAQ */
const FAQ = () => {
  const items = [
    { q: "Is this medical advice?", a: "No. BioReveal is a fit-finder that surfaces peptides matched to your goals. A licensed U.S. clinician reviews every order before anything is shipped, and they're the prescribing authority — not the model." },
    { q: "Is the selfie required?", a: "Totally optional. Skip it and the model still works on your goals + signal panel. Adding a selfie just makes the stack a few percentage points more accurate." },
    { q: "Are peptides legal?", a: "Yes — when prescribed by a licensed clinician for personal use. We work with U.S.-licensed providers and only ship from FDA-registered compounding pharmacies." },
    { q: "How fast will I feel something?", a: "Most people notice sleep depth and recovery shifts in week one. Body composition and energy curves shift through weeks 4–8. Full set point by week 12." },
    { q: "Can I cancel?", a: "Anytime. We don't lock you into auto-renewal — you'll get a check-in before each cycle to decide whether to continue, rotate, or taper." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="br-section br-faq">
      <div className="container">
        <div className="br-section-head">
          <div className="eyebrow">★ COMMON QUESTIONS</div>
          <h2>The basics.</h2>
        </div>
        <div className="br-faq-list">
          {items.map((it, i) => (
            <div key={i} className={"br-faq-item " + (open === i ? "open" : "")}>
              <button className="br-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="br-faq-icon">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <div className="br-faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Bottom secondary CTA */
const StartCTA = ({ onNext }) => (
  <section className="br-section br-start-cta">
    <div className="container" style={{ textAlign: "center" }}>
      <div className="eyebrow" style={{ marginBottom: 20 }}>★ 90 SECONDS</div>
      <h2 className="br-start-h">Your stack<br/><span className="accent">is waiting.</span></h2>
      <p>No bloodwork. No commitment. Just an honest read on what'll move the needle.</p>
      <button className="btn btn-dark btn-lg" onClick={onNext}>Begin BioReveal →</button>
      <div className="br-start-meta">
        <span>★ Free analysis</span>
        <span>★ MD reviewed</span>
        <span>★ U.S. licensed</span>
      </div>
    </div>
  </section>
);

Object.assign(window, { BR_LANDING: { FaceScanDemo, HowAIWorks, SampleReveal, SocialProof, FAQ, StartCTA } });