/* 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>A 25-second face scan<br/>tells us a lot.</h3>
        <p>Look at the camera, talk about what you want to fix. We pick up your heart rate, your skin, and what you said — and the AI builds the right stack for you.</p>
        <ul className="br-checklist">
          <li><span>✓</span> Nothing leaves your browser except numbers</li>
          <li><span>✓</span> Skip it if you don't want to</li>
          <li><span>✓</span> Works on any phone or laptop</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 THIS WORKS</div>
        <h2>Not another quiz.</h2>
        <p>You answer a few honest questions. AI reads your face, voice, and answers. A real US doctor reviews everything. You get the right peptides — for what <em>you</em> actually want to fix.</p>
      </div>
      <div className="br-how-grid">
        <div className="br-how-card">
          <div className="br-how-num">01</div>
          <h3>You tell us<br/>what you want fixed.</h3>
          <p>Hair. Skin. Weight. Muscle. Sleep. Energy. Drive. Pick what you want to upgrade and tell us how you actually feel.</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 AI reads<br/>everything together.</h3>
          <p>Your goals, your bioscan, your voice — all of it goes into one analysis. It picks the peptides that fit you, not the average.</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>A real doctor<br/>checks it.</h3>
          <p>Every order is reviewed by a licensed US doctor. They make sure it's safe for you. Then it ships from a US pharmacy.</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 get<br/>at the end.</h2>
        <p>A real read on you. The exact peptides we'd recommend. And a week-by-week look at what'll change.</p>
      </div>
      <div className="br-sample-grid">
        <div className="br-sample-card">
          <div className="br-sample-tag">YOUR READ</div>
          <div className="br-sample-arch">Sleep deeper.<br/><span className="accent">Recover faster.</span></div>
          <p>You said you train hard but recovery is the wall. The AI picked peptides that fix exactly that — better sleep, less soreness, real strength gains.</p>
          <div className="br-sample-stats">
            <div><strong>3</strong><span>peptides</span></div>
            <div><strong>94%</strong><span>fit</span></div>
            <div><strong>12wk</strong><span>plan</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> fit</div>
            <ProductShot product="BPC-157" chip={false}/>
          </div>
          <div className="br-sample-info">
            <div className="name">BPC-157</div>
            <div className="tag">Heal + recover</div>
            <p>Speeds up healing of tendons, joints, and gut. You said recovery is the wall — this hits it directly.</p>
          </div>
        </div>
        <div className="br-sample-card sample-tl">
          <div className="br-sample-tag">12-WEEK CHANGE</div>
          <div className="br-sample-tl">
            <div className="tl-row"><span className="wk">WK 01</span><span className="t">Better sleep</span></div>
            <div className="tl-row"><span className="wk">WK 02</span><span className="t">Less soreness</span></div>
            <div className="tl-row"><span className="wk">WK 04</span><span className="t">Real energy</span></div>
            <div className="tl-row"><span className="wk">WK 08</span><span className="t">Visible changes</span></div>
            <div className="tl-row"><span className="wk">WK 12</span><span className="t">A new normal</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">12,400</div>
          <div className="lbl">People upgraded</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">Doctor approved</div>
        </div>
        <div className="br-social-stat">
          <div className="num">48h</div>
          <div className="lbl">Ships to you</div>
        </div>
      </div>
      <div className="br-quotes">
        {[
          { q: "Took it on a Thursday. By Monday I had peptides actually built for what I wanted to fix — not whatever the influencer was selling.", n: "Maya, 34", role: "Pilates instructor" },
          { q: "I've tried every supplement on TikTok. This is the first thing that asked the right questions and got me what actually works.", n: "Jordan, 29", role: "Tech founder" },
          { q: "It tells you exactly why each one was picked for you. Way smarter than guessing or copying someone else's protocol.", 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 — but a real US doctor reviews every order before anything ships. They're the prescriber, not the AI. The AI just finds your fit." },
    { q: "Do I have to do the face scan?", a: "Nope. Skip it. The AI still works off your goals and answers. The scan just makes it a little more accurate." },
    { q: "Are peptides legal?", a: "Yes — when prescribed by a licensed doctor for your personal use. We use US doctors and FDA-registered pharmacies." },
    { q: "How fast will I feel something?", a: "Most people notice better sleep and faster recovery in week one. Energy and body changes show up around weeks 4–8. Real new normal by week 12." },
    { q: "Can I cancel?", a: "Anytime. No auto-renewal lock. We check in before each refill so you decide whether to continue, switch, or stop." },
  ];
  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 upgrade<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 } });