// BaySync landing — top-level composition.

function Nav({ onLogin, onRequestAccess }) {
  const links = [
    {h:"#product", l:"Product"},
    {h:"#workflows", l:"Workflows"},
    {h:"#ai-dispatch", l:"AI Dispatch"},
    {h:"#integration", l:"DMS Integration"},
    {h:"#security", l:"Security"},
    {h:"#request-access", l:"Request Access"},
  ];
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="brand" onClick={(e)=>{e.preventDefault();window.scrollTo({top:0,behavior:"smooth"})}}>
          <div className="brand-mark">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="M4 14l4-4 4 4 4-6 4 6"/>
            </svg>
          </div>
          BaySync
          <span className="brand-pilot">Pilot</span>
        </a>
        <div className="nav-links">
          {links.map((l,i)=>(
            <a key={i} href={l.h} onClick={(e)=>{
              e.preventDefault();
              const el = document.querySelector(l.h);
              if (el) el.scrollIntoView({behavior:"smooth", block:"start"});
            }}>{l.l}</a>
          ))}
        </div>
        <div className="nav-cta">
          <button className="btn btn-ghost" onClick={onLogin}>Log In</button>
          <button className="btn btn-primary" onClick={onRequestAccess}>Request Access</button>
        </div>
      </div>
    </nav>
  );
}

function ProductSnapshotSection() {
  return (
    <section id="product" data-screen-label="Product snapshot">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Product snapshot</span>
          <h2 className="h2">The whole service department, on one screen.</h2>
          <p className="lead">Manager dashboard with live appointments, repair orders, bay utilization, technician dispatch, parts, inspections, customer approvals, and alerts &mdash; designed for the people running the drive, not analysts in a back office.</p>
        </div>
        <ProductSnapshot/>
      </div>
    </section>
  );
}

function App() {
  const [modal, setModal] = React.useState(null); // 'login' | 'reset' | null
  const [toast, setToast] = React.useState(null);

  const openLogin = () => { window.top.location.href = "/login"; };
  const openReset = () => setModal("reset");
  const closeModal = () => setModal(null);
  const goRequestAccess = () => {
    closeModal();
    const el = document.getElementById("request-access");
    if (el) el.scrollIntoView({behavior:"smooth", block:"start"});
    setToast({msg:"Scroll to the form below to request access"});
    setTimeout(()=>setToast(null), 3000);
  };

  // close on Escape
  React.useEffect(()=>{
    function onKey(e){ if (e.key==="Escape") closeModal(); }
    window.addEventListener("keydown", onKey);
    return ()=>window.removeEventListener("keydown", onKey);
  },[]);

  return (
    <>
      <Nav onLogin={openLogin} onRequestAccess={goRequestAccess}/>
      <Hero onLogin={openLogin} onRequestAccess={goRequestAccess}/>
      <ProductSnapshotSection/>
      <Features/>
      <div id="workflows"/>
      <Workflow/>
      <div id="ai-dispatch"/>
      <AIDispatch/>
      <div id="integration"/>
      <Integration/>
      <div id="security"/>
      <Security/>
      <RequestAccess/>
      <Footer onLogin={openLogin} onRequestAccess={goRequestAccess}/>

      {modal === "login" && (
        <LoginModal onClose={closeModal} onForgot={openReset} onRequestAccess={goRequestAccess}/>
      )}
      {modal === "reset" && (
        <ResetModal onClose={closeModal} onBack={openLogin}/>
      )}
      {toast && (
        <div className="toast"><IconCheck size={16}/> {toast.msg}</div>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);