// All the marketing sections for BaySync landing page.
// Globalized at the bottom so app.jsx can compose them.

/* ---------- HERO ---------- */

function Hero({ onRequestAccess, onLogin }) {
  return (
    <section className="hero" data-screen-label="Hero">
      <div className="hero-glow"/>
      <div className="hero-grid-bg"/>
      <div className="wrap hero-inner">
        <div>
          <div className="tag"><span className="dot"/>v1.0 · Now piloting with dealership groups</div>
          <h1 className="h1" style={{marginTop:18}}>
            Run your service department from <span className="grad">appointment to repair order</span> in one connected system.
          </h1>
          <p className="lead">
            BaySync helps dealerships coordinate advisors, technicians, bays, repair orders, inspections, estimates, parts, and customer updates &mdash; without the spreadsheet chaos.
          </p>

          <div className="hero-ctas">
            <button className="btn btn-primary" onClick={onRequestAccess}>Request Access <IconArrow size={14}/></button>
            <button className="btn btn-ghost" onClick={onLogin}><IconLock size={14}/> Log In</button>
          </div>

          <div className="hero-trust">
            <div>Built for</div>
            <div className="roles">
              <span className="pill">Advisors</span>
              <span className="pill">Technicians</span>
              <span className="pill">Parts</span>
              <span className="pill">BDC</span>
              <span className="pill">Managers</span>
              <span className="pill">Directors</span>
            </div>
          </div>
        </div>

        <HeroDispatchBoard />
      </div>

      <Ticker />
    </section>
  );
}

function HeroDispatchBoard() {
  // 5 lanes × visible time window. Positions are %.
  const ros = [
    {lane:0, l:5,  w:18, type:"teal",  vh:"RAV4 · 7HFE423",      op:"LOF · ROT"},
    {lane:0, l:28, w:22, type:"blue",  vh:"Camry · 2KCV881",     op:"BR-FR · WI"},
    {lane:0, l:56, w:28, type:"amber", vh:"Sienna · 8AXP332",    op:"DIAG · A/C"},

    {lane:1, l:2,  w:14, type:"slate", vh:"Tacoma · 9XLG118",    op:"COMPLETE"},
    {lane:1, l:20, w:26, type:"teal",  vh:"4Runner · 5KQT902",   op:"30K SVC"},
    {lane:1, l:54, w:24, type:"blue",  vh:"Corolla · 6PRD441",   op:"BR-RR"},

    {lane:2, l:8,  w:20, type:"violet",vh:"Highlander · 4ZNB770",op:"RECALL · 24V-512"},
    {lane:2, l:34, w:30, type:"teal",  vh:"Tundra · 7VFK503",    op:"TRANS-SVC"},

    {lane:3, l:4,  w:24, type:"blue",  vh:"Prius · 3LMW118",     op:"HV-BATT"},
    {lane:3, l:34, w:16, type:"teal",  vh:"Camry · 1HXP088",     op:"TIRES"},
    {lane:3, l:56, w:26, type:"amber", vh:"Sequoia · 9CTV221",   op:"P/S LEAK"},

    {lane:4, l:0,  w:16, type:"teal",  vh:"GR86 · 4PRZ012",      op:"ALIGN"},
    {lane:4, l:22, w:18, type:"slate", vh:"bZ4X · 6BTR404",      op:"PDI"},
    {lane:4, l:48, w:30, type:"blue",  vh:"Tundra · 7VFK503",    op:"INT/RECON"},
  ];
  const lanes = [
    {n:"L1", t:"Express"},
    {n:"L2", t:"Maint"},
    {n:"L3", t:"Heavy"},
    {n:"L4", t:"Diag"},
    {n:"L5", t:"Internal"},
  ];
  return (
    <div className="board" data-screen-label="Dispatch board">
      <div className="board-head">
        <div>
          <div className="eyebrow">Dispatch board</div>
          <div style={{fontSize:14,marginTop:4,letterSpacing:"-0.01em"}}>Today &middot; <span className="mono" style={{color:"var(--ink-dim)"}}>Tue Apr 14</span></div>
        </div>
        <div className="board-tabs">
          <button>Day</button>
          <button className="active">Lanes</button>
          <button>Techs</button>
        </div>
        <div className="board-meta">
          <span className="live-dot"/> <span className="mono">LIVE</span>
        </div>
      </div>

      <div className="lanes">
        {lanes.map((l,i) => (
          <React.Fragment key={i}>
            <div className="lane-label"><span>{l.t}</span><span className="num">{l.n}</span></div>
            <div className="lane-track">
              <div className="lane-grid"/>
              {ros.filter(r => r.lane===i).map((r,j) => (
                <div key={j} className={`ro ${r.type}`} style={{left:`${r.l}%`, width:`${r.w}%`}}>
                  <span className="status"/>
                  <div className="vh">{r.vh}</div>
                  <div className="op">{r.op}</div>
                </div>
              ))}
            </div>
          </React.Fragment>
        ))}
      </div>

      <div className="board-foot">
        <div className="stat"><div className="k">Open ROs</div><div className="v">47</div></div>
        <div className="stat"><div className="k">Bay util.</div><div className="v">74<small>%</small></div></div>
        <div className="stat"><div className="k">Tech eff.</div><div className="v">112<small>%</small></div></div>
        <div className="stat"><div className="k">Promise hit</div><div className="v">96<small>%</small></div></div>
      </div>
    </div>
  );
}

function Ticker() {
  const items = [
    {a:"RO #31988", b:"dispatched → Bay 04 · Reyes"},
    {a:"24 Sienna", b:"recall surfaced at intake · NHTSA 24V-512"},
    {a:"MPI ·", b:"3 red items · estimate sent to customer"},
    {a:"Parts 90919-02250", b:"ETA 10:40 · auto-released to dispatch"},
    {a:"Promise hit", b:"4Runner · 5KQT902 · -8 min under"},
    {a:"PDI Lane 2", b:"3 vehicles queued · reassign suggested"},
    {a:"Customer · Hannah B.", b:"approved $1,284.50 · brake job"},
    {a:"Express Lane", b:"capacity 88% · 2 walk-ins ahead"},
    {a:"AI dispatch", b:"swapped Tundra → Thompson · skill match"},
    {a:"Internal recon", b:"3 vehicles inbound from used car"},
  ];
  return (
    <div className="ticker">
      <div className="wrap" style={{padding:0}}>
        <div className="ticker-track">
          {[...items,...items].map((it,i) => (
            <div key={i} className="ticker-item"><span className="pip"/><b>{it.a}</b> {it.b}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- FEATURES ---------- */

function Features() {
  const items = [
    {ic:<IconCalendar/>, h:"Smart Appointment Intake",
      d:"Customers book by service need, not advisor calendar. BaySync looks at op codes, skill match, lane capacity, and promise time before offering slots.",
      tag:"BOOK → SCHEDULE"},
    {ic:<IconClipboard/>, h:"Repair Order Workflow",
      d:"Every RO moves through Intake → Dispatch → Inspect → Estimate → Parts → Complete with clear ownership, timestamps, and a full audit trail.",
      tag:"RO LIFECYCLE"},
    {ic:<IconCpu/>, h:"AI Technician Dispatch",
      d:"Routes jobs to the right tech using skill codes, certification, efficiency, capacity, lane, parts status, and promise time. Managers can override anything.",
      tag:"SKILL + CAPACITY"},
    {ic:<IconCheck/>, h:"Multi-Point Inspections",
      d:"Configurable digital MPI with photos, video, and severity. Findings turn into priced estimate lines a customer can approve from their phone.",
      tag:"DIGITAL MPI"},
    {ic:<IconBox/>, h:"Parts &amp; Special Order Tracking",
      d:"Tracks every line from request to received. Parts pull triggers, ETA, back-order alerts, and slot recovery for promised-by jobs.",
      tag:"PARTS WATCH"},
    {ic:<IconChart/>, h:"Manager Accountability",
      d:"One screen for promise hit, technician efficiency, parts SLA, declined work, and idle bays. Drill into any number to the underlying ROs.",
      tag:"OPS REPORTING"},
  ];
  return (
    <section data-screen-label="What BaySync does">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">What BaySync does</span>
          <h2 className="h2">An operating system, not a scheduling bolt-on.</h2>
          <p className="lead">Six modules built for the specific roles, decisions, and handoffs of a modern service department &mdash; not generic field service software.</p>
        </div>
        <div className="features">
          {items.map((it,i)=>(
            <div key={i} className="feature">
              <div className="ic">{it.ic}</div>
              <h3 className="h3" dangerouslySetInnerHTML={{__html:it.h}}/>
              <p dangerouslySetInnerHTML={{__html:it.d}}/>
              <div className="tagline">{it.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- WORKFLOW ---------- */

function Workflow() {
  const steps = [
    {l:"Book",     s:"customer/BDC", ic:<IconCalendar size={22}/>, state:"done"},
    {l:"Intake",   s:"walk-around",  ic:<IconCar size={22}/>, state:"done"},
    {l:"Dispatch", s:"AI + manager", ic:<IconCpu size={22}/>, state:"done"},
    {l:"Inspect",  s:"MPI · media",  ic:<IconEye size={22}/>, state:"active"},
    {l:"Estimate", s:"customer-side",ic:<IconDoc size={22}/>, state:""},
    {l:"Parts",    s:"pull · receive",ic:<IconBox size={22}/>, state:""},
    {l:"Complete", s:"tech · QC",    ic:<IconCheck size={22}/>, state:""},
    {l:"Follow Up",s:"declined work",ic:<IconChat size={22}/>, state:""},
  ];
  return (
    <section data-screen-label="Workflow">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Service lifecycle</span>
          <h2 className="h2">From booking to follow-up, on one rail.</h2>
          <p className="lead">Every vehicle moves through the same eight stages. Every role sees only what they own. Every handoff is logged.</p>
        </div>
        <div className="workflow">
          <div className="workflow-rail">
            <div className="wf-line" style={{display:"none"}}/>
            {steps.map((s,i)=>(
              <div key={i} className={`wf-step ${s.state}`}>
                <div className="wf-node">{s.ic}</div>
                <div className="label">{s.l}</div>
                <div className="sub">{s.s}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- AI DISPATCH ---------- */

function AIDispatch() {
  return (
    <section data-screen-label="AI Dispatch">
      <div className="wrap dispatch-wrap">
        <div>
          <span className="eyebrow">AI Dispatch</span>
          <h2 className="h2" style={{margin:"14px 0 18px"}}>The right job, on the right tech, at the right time.</h2>
          <p className="lead">BaySync scores every available technician against every dispatchable job using seven inputs &mdash; then surfaces the best match. The manager always has the final word.</p>
          <div className="dispatch-list">
            {[
              {ic:<IconLayers size={16}/>, b:"Skill code", s:"Op codes mapped to certifications and experience tiers."},
              {ic:<IconChart size={16}/>, b:"Capacity",   s:"Live booked hours vs. flat-rate availability."},
              {ic:<IconSpark size={16}/>, b:"Efficiency", s:"Rolling 30-day efficiency score per tech per category."},
              {ic:<IconWrench size={16}/>, b:"Job type",  s:"Express, maint, heavy, diag, internal recon, PDI."},
              {ic:<IconBox size={16}/>, b:"Parts status", s:"Won't dispatch until parts are in or ETA is honored."},
              {ic:<IconBolt size={16}/>, b:"Promise time",s:"Promised-by drives lane and tech priority."},
              {ic:<IconRoute size={16}/>, b:"Lane policy",s:"Internal / recon / PDI lanes stay isolated by config."},
            ].map((d,i)=>(
              <div key={i} className="di">
                <span className="ic">{d.ic}</span>
                <div><b>{d.b}</b><span>{d.s}</span></div>
              </div>
            ))}
          </div>
          <div style={{marginTop:22,fontSize:12.5,color:"var(--ink-mute)",fontFamily:'"JetBrains Mono",monospace',display:"flex",alignItems:"center",gap:8}}>
            <IconShield size={14}/> AI suggests · managers decide · every override is logged.
          </div>
        </div>

        <DispatchScoring/>
      </div>
    </section>
  );
}

function DispatchScoring() {
  const scores = [
    {n:"Marcus Reyes",  sub:"Master · A4 · Hybrid",   v:96, best:true},
    {n:"Jay Thompson",  sub:"Master · Diag · ASE",    v:84},
    {n:"Luis Kim",      sub:"Cert · Maint",           v:62},
    {n:"Anika Patel",   sub:"Cert · Maint · Recall",  v:54},
    {n:"Sam Okafor",    sub:"Apprentice · Express",   v:31},
  ];
  return (
    <div className="di-viz">
      <h4><span className="live-dot"/> AI Dispatch · suggesting</h4>
      <div className="sub" style={{marginTop:4}}>RO #31988 &middot; awaiting assignment</div>

      <div className="job">
        <div className="job-head">
          <div>
            <b>23 Highlander Hybrid</b>
            <small>VIN •••• 4ZNB770 · Internal recon lane</small>
          </div>
          <span className="op-pill">A1·DIAG·HV</span>
        </div>
        <div style={{display:"flex",gap:8,marginTop:8,flexWrap:"wrap"}}>
          <span className="op-pill" style={{background:"rgba(245,158,11,.15)",borderColor:"rgba(245,158,11,.3)",color:"#fbbf24"}}>Recall 24V-512</span>
          <span className="op-pill" style={{background:"rgba(45,212,191,.15)",borderColor:"rgba(45,212,191,.3)",color:"var(--teal)"}}>Promise · 14:30</span>
          <span className="op-pill" style={{background:"rgba(148,163,184,.1)",borderColor:"rgba(148,163,184,.25)",color:"#cbd5e1"}}>Parts · IN</span>
        </div>

        <div className="scoring">
          {scores.map((s,i)=>(
            <div key={i} className={`score ${s.best?"best":""}`}>
              <div className="who">{s.n}<small>{s.sub}</small></div>
              <div className={`score-bar ${s.best?"best":""}`}><i style={{width:`${s.v}%`}}/></div>
              <div className="v">{s.v}</div>
            </div>
          ))}
        </div>

        <div className="recommend">
          <span className="ic"><IconSpark size={16}/></span>
          <b>Recommend: Marcus Reyes · Bay 04</b>
          <div className="ap">
            <button className="ov">Override</button>
            <button className="ok">Approve</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- INTEGRATION ---------- */

function Integration() {
  return (
    <section data-screen-label="Integration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">DMS integration</span>
          <h2 className="h2">Talks to your DMS &mdash; on your terms.</h2>
          <p className="lead">Designed to connect with the dealer management systems you already run &mdash; CDK Global, Reynolds &amp; Reynolds, Dealertrack, Tekion, Auto/Mate, PBS &mdash; for appointments, repair orders, customers, vehicles, op codes, labor types, parts, and service history.</p>
        </div>

        <div className="integration">
          <div>
            <h3 className="h3" style={{marginTop:0,fontSize:18}}>Read-only discovery first.</h3>
            <p style={{color:"var(--ink-dim)",fontSize:14.5,lineHeight:1.6,margin:"10px 0 0"}}>
              We start by mirroring your DMS environment into a read-only sandbox so your team can see exactly what BaySync sees &mdash; before a single byte is written back. Writeback is enabled module by module, only after dealership sign-off on every field and direction.
            </p>
            <div style={{display:"flex",flexWrap:"wrap",gap:8,marginTop:18}}>
              {["Appointments","Repair Orders","Customers","Vehicles","Op Codes","Labor Types","Parts","Service History"]
                .map((t,i)=>(
                  <span key={i} style={{fontSize:11.5,fontFamily:'"JetBrains Mono",monospace',padding:"5px 10px",borderRadius:6,background:"#070c14",border:"1px solid var(--line)",color:"var(--ink-dim)",letterSpacing:".04em"}}>{t}</span>
              ))}
            </div>
            <div className="note">
              <IconShield size={16}/>
              <div>
                <b>Read-only discovery first.</b>
                Writeback only with dealership-approved safeguards, per-field allowlists, and full audit logs.
              </div>
            </div>
          </div>

          <FlowDiagram/>
        </div>
      </div>
    </section>
  );
}

function FlowDiagram() {
  return (
    <div className="flow-diagram">
      <svg className="flow-svg" viewBox="0 0 480 320" preserveAspectRatio="none">
        <path d="M120 60 C 200 60, 240 120, 320 120" />
        <path d="M120 120 C 200 120, 240 160, 320 160" className="active"/>
        <path d="M120 180 C 200 180, 240 200, 320 200" />
        <path d="M120 240 C 200 240, 240 220, 320 220" className="active"/>
      </svg>

      <div className="node cdk" style={{top:"12%",left:"3%"}}><b>Your DMS</b><small>CDK · Reynolds · Tekion · Dealertrack</small></div>
      <div className="node cdk" style={{top:"32%",left:"3%"}}><b>Op Codes</b><small>labor + service menu</small></div>
      <div className="node cdk" style={{top:"52%",left:"3%"}}><b>Parts</b><small>SKU · ETA · cost</small></div>
      <div className="node cdk" style={{top:"72%",left:"3%"}}><b>Service History</b><small>RO + VIN</small></div>

      <div className="node bay" style={{top:"22%",right:"3%"}}><b>BaySync · Read</b><small>discovery sandbox</small></div>
      <div className="node bay" style={{top:"58%",right:"3%"}}><b>BaySync · Write</b><small>scoped + audited</small></div>

      <div className="data-chip" style={{top:"34%",left:"40%"}}>customer.vin</div>
      <div className="data-chip" style={{top:"56%",left:"42%"}}>ro.opcode</div>
    </div>
  );
}

/* ---------- SECURITY ---------- */

function Security() {
  const items = [
    {ic:<IconUsers/>, h:"Role-based access", d:"Every user is scoped: BDC, advisor, tech, parts, manager, director, admin. No view they shouldn't have, no action they can't undo."},
    {ic:<IconLock/>, h:"Customer data protection", d:"VINs, contact info, and payment context are stored encrypted at rest and only surfaced to roles with explicit need-to-know."},
    {ic:<IconBell/>, h:"Notification controls", d:"Quiet hours, opt-in channels, frequency caps, and per-customer preferences &mdash; configured by the dealership, not us."},
    {ic:<IconDoc/>, h:"Audit trails", d:"Every dispatch, override, estimate change, and customer message is timestamped with the actor and reason. Exportable."},
    {ic:<IconShield2/>, h:"Production-safe rollout", d:"Pilot lanes, shadow dispatch, and feature flags let your team trial BaySync alongside your existing process &mdash; with a one-click rollback."},
    {ic:<IconKey/>, h:"Dealership-controlled integrations", d:"You own your DMS credentials, your data, and the right to pause writeback at any time. Per-field allowlists by default."},
  ];
  return (
    <section data-screen-label="Security">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Security · pilot safety</span>
          <h2 className="h2">Built to be trusted with your production drive.</h2>
          <p className="lead">A service department isn't a sandbox. BaySync ships with the controls dealership groups expect &mdash; and the visibility to prove they're working.</p>
        </div>
        <div className="sec-grid">
          {items.map((it,i)=>(
            <div key={i} className="sec-card">
              <div className="ic">{it.ic}</div>
              <h4>{it.h}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- REQUEST ACCESS ---------- */

function RequestAccess() {
  const [state, setState] = React.useState({
    name:"", email:"", phone:"", dealership:"", role:"", rooftops:"1", dms:"", goals:""
  });
  const [submitted, setSubmitted] = React.useState(false);
  const update = (k) => (e) => setState(s => ({...s, [k]: e.target.value}));
  function submit(e){ e.preventDefault(); setSubmitted(true); }

  return (
    <section id="request-access" data-screen-label="Request access">
      <div className="wrap">
        <div className="access-wrap">
          <div className="access-left">
            <span className="eyebrow">Request access</span>
            <h2 className="h2" style={{marginTop:14}}>Talk to a real human about a pilot.</h2>
            <p className="lead" style={{fontSize:15}}>BaySync is currently rolling out with select dealership groups. We respond to every request within one business day.</p>
            <ul>
              <li><IconCheck size={16}/> Read-only DMS discovery &mdash; no production writes until you say go.</li>
              <li><IconCheck size={16}/> 30-day pilot on a single rooftop, with shadow dispatch alongside your current process.</li>
              <li><IconCheck size={16}/> Direct support channel with the BaySync founding team during pilot.</li>
              <li><IconCheck size={16}/> One-click rollback &mdash; you stay in control.</li>
            </ul>
            <div style={{marginTop:28,padding:14,borderRadius:10,background:"#070c14",border:"1px dashed var(--line)",fontSize:12.5,color:"var(--ink-mute)",fontFamily:'"JetBrains Mono",monospace',lineHeight:1.55}}>
              Already on BaySync? Skip the form &mdash; <a href="/login" target="_top" style={{color:"var(--teal)"}}>Sign in →</a>
            </div>
          </div>

          {!submitted ? (
            <form className="access" onSubmit={submit}>
              <div className="field">
                <label>Name</label>
                <input value={state.name} onChange={update("name")} required placeholder="Jane Doe"/>
              </div>
              <div className="field">
                <label>Work email</label>
                <input type="email" value={state.email} onChange={update("email")} required placeholder="you@dealer.com"/>
              </div>
              <div className="field">
                <label>Phone</label>
                <input value={state.phone} onChange={update("phone")} required placeholder="(555) 555-0142"/>
              </div>
              <div className="field">
                <label>Dealership / group</label>
                <input value={state.dealership} onChange={update("dealership")} required placeholder="Magnolia Auto Group"/>
              </div>
              <div className="field">
                <label>Your role</label>
                <select value={state.role} onChange={update("role")} required>
                  <option value="">Select your role…</option>
                  <option>Service Director</option>
                  <option>Service Manager</option>
                  <option>Fixed Operations Director</option>
                  <option>Dealer Principal / GM</option>
                  <option>IT / Systems</option>
                  <option>Advisor / BDC</option>
                  <option>Other</option>
                </select>
              </div>
              <div className="field">
                <label>Number of rooftops</label>
                <select value={state.rooftops} onChange={update("rooftops")}>
                  <option>1</option>
                  <option>2 &ndash; 5</option>
                  <option>6 &ndash; 15</option>
                  <option>16 &ndash; 50</option>
                  <option>50+</option>
                </select>
              </div>
              <div className="field full">
                <label>Current DMS provider</label>
                <select value={state.dms} onChange={update("dms")}>
                  <option value="">Select your DMS…</option>
                  <option>CDK Global</option>
                  <option>Reynolds &amp; Reynolds</option>
                  <option>Dealertrack</option>
                  <option>Tekion</option>
                  <option>PBS</option>
                  <option>Auto/Mate</option>
                  <option>Other / not sure</option>
                </select>
              </div>
              <div className="field full">
                <label>What are you trying to improve?</label>
                <textarea value={state.goals} onChange={update("goals")} placeholder="e.g. promise time, technician efficiency, parts SLA, advisor capacity, customer approvals…"/>
              </div>
              <div className="submit-row">
                <span className="note">We'll never share your info. By submitting you agree to our <a href="/terms" target="_top" style={{color:"var(--ink-dim)",textDecoration:"underline"}}>terms</a> &amp; <a href="/privacy" target="_top" style={{color:"var(--ink-dim)",textDecoration:"underline"}}>privacy</a>.</span>
                <button className="btn btn-primary" type="submit">Request Access <IconArrow size={14}/></button>
              </div>
            </form>
          ) : (
            <div className="success" style={{minHeight:380,justifyContent:"center"}}>
              <div className="check"><IconCheck size={32}/></div>
              <div className="h3" style={{fontSize:22,fontWeight:600}}>Thanks &mdash; the BaySync team will follow up shortly.</div>
              <p style={{color:"var(--ink-dim)",fontSize:14,maxWidth:"42ch",lineHeight:1.55,margin:0}}>
                We'll be in touch at <b style={{color:"#fff",fontWeight:500}}>{state.email || "your email"}</b> within one business day to schedule a discovery call.
              </p>
              <div style={{marginTop:8,padding:"10px 14px",borderRadius:8,background:"#070c14",border:"1px dashed var(--line)",fontFamily:'"JetBrains Mono",monospace',fontSize:11.5,color:"var(--ink-mute)",letterSpacing:".04em"}}>
                REQ-{Math.random().toString(36).slice(2,8).toUpperCase()} · queued
              </div>
              <button className="btn btn-ghost" type="button" onClick={()=>setSubmitted(false)}>Submit another request</button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */

function Footer({ onLogin, onRequestAccess }) {
  const year = new Date().getFullYear();
  return (
    <footer>
      <div className="wrap" style={{position:"relative",zIndex:1}}>
        <div className="foot">
          <div>
            <div style={{display:"flex",alignItems:"center",gap:10}}>
              <div className="brand-mark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M4 14l4-4 4 4 4-6 4 6"/></svg></div>
              <div style={{fontSize:20,fontWeight:600,letterSpacing:"-0.02em"}}>BaySync</div>
            </div>
            <p className="blurb">The AI-powered service department operating system for modern automotive dealerships.</p>
          </div>
          <div>
            <h6>Product</h6>
            <ul>
              <li><a href="#">Workflows</a></li>
              <li><a href="#">AI Dispatch</a></li>
              <li><a href="#">Multi-Point Inspections</a></li>
              <li><a href="#">Parts Watch</a></li>
              <li><a href="#">Manager Reporting</a></li>
            </ul>
          </div>
          <div>
            <h6>Platform</h6>
            <ul>
              <li><a href="#">DMS Integration</a></li>
              <li><a href="#">Security</a></li>
              <li><a href="#">Audit &amp; Compliance</a></li>
              <li><a href="#">Pilot rollout</a></li>
              <li><a href="#">Status</a></li>
            </ul>
          </div>
          <div>
            <h6>Account</h6>
            <ul>
              <li><a href="#" onClick={(e)=>{e.preventDefault();onRequestAccess()}}>Request Access</a></li>
              <li><a href="#" onClick={(e)=>{e.preventDefault();onLogin()}}>Login</a></li>
              {/* target=_top: this page renders inside an iframe on /, so legal
                  links must navigate the top window, not the frame */}
              <li><a href="/privacy" target="_top">Privacy</a></li>
              <li><a href="/terms" target="_top">Terms</a></li>
              <li><a href="mailto:jimmy@baysync.ai">Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© {year} BaySync, Inc. · v1.0 pilot</div>
          <div>Made for the service drive · Not affiliated with any DMS provider</div>
        </div>
      </div>
      <div className="megamark">BaySync</div>
    </footer>
  );
}

Object.assign(window, {
  Hero, Features, Workflow, AIDispatch, Integration, Security,
  RequestAccess, Footer
});