/* ============================================================
   METABOLE — Sections A: Nav, Hero, Trust strip
   ============================================================ */

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Features", "#features"], ["Estimator", "#estimator"], ["Reports", "#reports"], ["Privacy", "#privacy"], ["Pricing", "#pricing"], ["FAQ", "#faq"]];
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap" style={{ height: 68, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#top"><Logo /></a>
        <div className="hide-mobile" style={{ display: "flex", gap: 30, alignItems: "center" }}>
          {links.map(([l, h]) => <a key={l} href={h} className="navlink">{l}</a>)}
        </div>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <a href="/login" className="navlink hide-mobile" style={{ fontWeight: 600, color: "var(--ink)" }}>Sign in</a>
          <a href="/signup" className="btn btn-primary btn-sm">
            Sign up
          </a>
        </div>
      </div>
    </nav>
  );
}

function PrivacyChips() {
  const chips = [["lock", "On-device storage"], ["shield", "Private iCloud sync"], ["check", "No ad tracking"]];
  return (
    <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
      {chips.map(([ic, t]) => (
        <span key={t} className="chip" style={{ color: "var(--ink-2)" }}>
          <Icon name={ic} size={14} color="var(--green)" /> {t}
        </span>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <header id="top" className="section" style={{ paddingTop: 132, paddingBottom: 90, position: "relative", overflow: "hidden" }}>
      <div className="glow-mint" style={{ position: "absolute", inset: "-10% -20% auto auto", width: 720, height: 720, pointerEvents: "none" }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div className="m-hero-grid" style={{ display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,1fr)", gap: 40, alignItems: "center" }}>
          {/* Left */}
          <div>
            <Reveal><span className="eyebrow">GLP-1 &amp; peptide tracker</span></Reveal>
            <Reveal delay={60}>
              <h1 className="display" style={{ marginTop: 22 }}>
                Your protocol,<br />finally in one<br /><span className="serif-em" style={{ color: "var(--green)" }}>calm</span> place.
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <p className="lead" style={{ marginTop: 24, maxWidth: 480 }}>
                Track every dose, side effect, and pound — and walk into your next appointment with a report your provider will actually thank you for. You, in control.
              </p>
            </Reveal>
            <Reveal delay={180}>
              <div style={{ display: "flex", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
                <a href="/signup" className="btn btn-primary">Sign up</a>
                <a href="#features" className="btn btn-ghost">See how it works <Icon name="arrow" size={17} /></a>
              </div>
            </Reveal>
            <Reveal delay={240}>
              <div style={{ marginTop: 30 }}><PrivacyChips /></div>
            </Reveal>
          </div>

          {/* Right — floating collage */}
          <div className="hide-mobile" style={{ position: "relative", height: 540 }}>
            <div className="float-a" style={{ position: "absolute", top: 0, right: 24, zIndex: 3 }}>
              <DoseCard />
            </div>
            <div className="float-b" style={{ position: "absolute", top: 150, left: -10, zIndex: 4 }}>
              <WeightCard />
            </div>
            <div className="float-c" style={{ position: "absolute", top: 318, right: 0, zIndex: 5 }}>
              <InsightCard />
            </div>
            <div className="float-a" style={{ position: "absolute", top: 392, left: 6, zIndex: 2 }}>
              <CheckinCard />
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function TrustStrip() {
  const meds = ["Ozempic", "Wegovy", "Mounjaro", "Zepbound", "Compounded semaglutide", "Compounded tirzepatide", "Oral GLP-1s", "Peptide protocols"];
  const loop = [...meds, ...meds];
  return (
    <section className="section" style={{ padding: "10px 0 56px" }}>
      <div className="wrap">
        <Reveal>
          <p className="mono" style={{ textAlign: "center", fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-3)", marginBottom: 22 }}>
            Built for what your provider actually prescribed
          </p>
        </Reveal>
        <div className="marquee">
          <div className="marquee-track">
            {loop.map((m, i) => (
              <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 14, fontSize: 19, fontWeight: 600, color: "var(--ink-2)", letterSpacing: "-0.01em" }}>
                {m}<span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--mint-2)" }} />
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, TrustStrip, PrivacyChips });