/* field UI kit, sticky top nav + hero */
const { useState, useEffect } = React;

function Nav({ onConsult }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const root = document.querySelector('.kit-scroll') || window;
    const el = document.querySelector('.kit-scroll');
    const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 24);
    root.addEventListener('scroll', onScroll);
    return () => root.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#top" className="nav__brand">Field Vitality</a>
      <div className="nav__links">
        <a href="#programs">Programs</a>
        <a href="#how">How it works</a>
        <a href="#about">About</a>
        <button className="btn btn--primary" onClick={onConsult}>start consult</button>
      </div>
    </nav>
  );
}

function TrustStrip() {
  return (
    <div className="trust">
      <span><Icon d={Icons.stethoscope} size={17} /> Physician network</span>
      <span className="sep">·</span>
      <span><Icon d={Icons.shieldCheck} size={17} /> LegitScript-certified pharmacy</span>
      <span className="sep">·</span>
      <span><Icon d={Icons.package} size={17} /> Rx-fulfilled</span>
    </div>
  );
}

function Hero({ onConsult }) {
  return (
    <header className="hero" id="top">
      <img className="hero__mark" src="/assets/field-wordmark-graphite.svg" alt="field" />
      <p className="hero__lockup">Vitality</p>
      <div className="hero__rule" />
      <h1 className="hero__h1">Raise your field.</h1>
      <p className="hero__sub">Physician-guided vitality for adults who want to feel their best, evidence-grounded protocols, U.S. compounded, transparently sourced.</p>
      <div className="hero__cta">
        <button className="btn btn--primary" onClick={onConsult}>start consult</button>
        <a className="btn btn--ghost" href="#how">how it works</a>
      </div>
      <TrustStrip />
    </header>
  );
}

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