// ProspectEngine landing — page assembly + scroll-pinned narrative engine.
const { useState, useEffect, useRef, useLayoutEffect } = React;

// "Sign in" is for already-granted users; access to the app is gated — new
// users must request access (form below) and be approved before they get in.
const APP_URL = "https://app.prospectengine.io";
// Request-access form posts here. Formsubmit forwards each submission as an
// email to the address below — no backend needed. (One-time: submit once, then
// click the activation link Formsubmit emails you to start receiving them.)
const REQUEST_ENDPOINT = "https://prospect-engine-api.onrender.com/api/requests/public";
// "Book a walkthrough" → Cal.com booking link.
const CAL_URL = "https://cal.com/costa-l1oj4p";

// ---- hooks ------------------------------------------------
function useFitScale(designH = 760, pad = 140) {
  const [s, setS] = useState(1);
  useEffect(() => {
    const calc = () => setS(Math.min(1, Math.max(0.5, (window.innerHeight - pad) / designH)));
    calc(); window.addEventListener("resize", calc);
    return () => window.removeEventListener("resize", calc);
  }, []);
  return s;
}

// Fit a fixed-size design box (w×h) into the viewport, leaving padX horizontal
// and reserveY vertical room (for the caption above it). Used for the pinned
// mobile narrative so the phone/window shrinks to fit one screen.
function useFitBox(w, h, padX, reserveY) {
  const [s, setS] = useState(0.5);
  useEffect(() => {
    const calc = () => setS(Math.min(1, (window.innerWidth - padX) / w, (window.innerHeight - reserveY) / h));
    calc(); window.addEventListener("resize", calc);
    return () => window.removeEventListener("resize", calc);
  }, [w, h, padX, reserveY]);
  return s;
}

// Scales children AND collapses the layout box to the scaled size (plain
// transform:scale leaves the original footprint, which overflows on mobile).
function ScaledBox({ w, h, scale, children }) {
  return (
    <div style={{ width: w * scale, height: h * scale, flexShrink: 0 }}>
      <div style={{ width: w, height: h, transform: `scale(${scale})`, transformOrigin: "top left" }}>
        {children}
      </div>
    </div>
  );
}

function useScrolled(threshold = 24) {
  const [v, setV] = useState(false);
  useEffect(() => {
    const on = () => setV(window.scrollY > threshold);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return v;
}

// true on phone/tablet widths — drives the non-pinned mobile narrative layout.
function useIsMobile(bp = 980) {
  const [m, setM] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia(`(max-width:${bp}px)`);
    const on = () => setM(mq.matches);
    on();
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, [bp]);
  return m;
}

// reveal-on-scroll
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.18 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

// scroll-pinned stage progress — synchronous (no rAF, so it works even when
// the tab was backgrounded) but throttled to one compute per frame budget.
function useScrollStages(ref, n) {
  const [active, setActive] = useState(0);
  const [railP, setRailP] = useState(0);
  useEffect(() => {
    let ticking = false;
    const compute = () => {
      ticking = false;
      const el = ref.current; if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = el.offsetHeight - window.innerHeight;
      if (total <= 0) return;
      const prog = Math.min(1, Math.max(0, -rect.top / total));
      const seg = 1 / n;
      const idx = Math.min(n - 1, Math.floor(prog / seg));
      setActive(idx);
      setRailP((prog - idx * seg) / seg);
    };
    const onScroll = () => { if (ticking) return; ticking = true; setTimeout(compute, 16); };
    compute();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [ref, n]);
  return [active, railP];
}

// ---- nav --------------------------------------------------
function Nav() {
  const sc = useScrolled();
  return (
    <nav className={"nav" + (sc ? " scrolled" : "")}>
      <div className="wrap">
        <Logo />
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#engine">The engine</a>
          <a href="#roi">ROI</a>
        </div>
        <a className="btn btn-ghost btn-sm" href={APP_URL} style={{ marginLeft: 0 }}>Sign in</a>
        <a className="btn btn-primary btn-sm" href="#request">Request access</a>
      </div>
    </nav>
  );
}

// ---- hero -------------------------------------------------
function Hero() {
  const scale = useFitScale();
  const [beat, setBeat] = useState(1);
  useEffect(() => {
    const id = setInterval(() => setBeat((b) => (b + 1) % BEATS.length), 3000);
    return () => clearInterval(id);
  }, []);
  return (
    <header className="hero" id="top">
      <div className="grid-bg"></div>
      <div className="glow"></div>
      <div className="wrap hero-inner">
        <div>
          <span className="hero-badge"><span className="pulse"></span> AI prospecting for any B2B &amp; B2B2C team</span>
          <h1>Your next client,<br /><span className="grad-ink">engineered.</span></h1>
          <p className="sub">Just tell ProspectEngine who you're after — any industry, any region — and the AI finds, scores, calls, and books them. You show up to qualified demos. Nothing else.</p>
          <div className="hero-cta">
            <a className="btn btn-primary" href="#request">Request access <Ic n="arrow" s={18} /></a>
            <a className="btn btn-ghost" href="#how">See how it works</a>
          </div>
          <div className="hero-trust">
            <span>No lead lists</span><span className="dotsep"></span>
            <span>No cold-calling team</span><span className="dotsep"></span>
            <span>Live in 24 hours</span>
          </div>
        </div>
        <div className="hero-stage">
          <div className="glow"></div>
          <div style={{ transform: `scale(${scale})`, transformOrigin: "center" }}>
            <Phone>
              {BEATS.map((b, i) => (
                <div className="scr" key={b.id} data-on={i === beat}>
                  <b.Screen on={i === beat} />
                </div>
              ))}
            </Phone>
          </div>
        </div>
      </div>
    </header>
  );
}

// ---- scroll narrative -------------------------------------
function Story({ layout }) {
  const ref = useRef(null);
  const n = BEATS.length;
  const [active, railP] = useScrollStages(ref, n);
  const isMobile = useIsMobile();
  // Mobile keeps the pinning but fits the phone to the screen (caption above it).
  const mobileScale = useFitBox(344, 712, 40, 188);
  const desktopScale = useFitScale(760, layout === "stage" ? 300 : 150);
  const scale = isMobile ? mobileScale : desktopScale;

  const beat = BEATS[active];
  const glowColors = ["#38bdf8", "#fb923c", "#34d399", "#c084fc", "#ff5a1f"];

  const Copy = (
    <div className="story-copy">
      {BEATS.map((b, i) => (
        <div className="beat-layer" key={b.id} data-on={i === active}>
          <div className="beat-step"><span className="n">{String(i + 1).padStart(2, "0")}</span>{b.kicker}</div>
          <h3 className="beat-h">{b.h}</h3>
          <p className="beat-p">{b.p}</p>
          <div className="beat-stat">
            {b.stat.map(([v, l]) => <div key={l}><div className="v grad-ink">{v}</div><div className="l">{l}</div></div>)}
          </div>
        </div>
      ))}
    </div>
  );

  const PhoneStack = (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <ScaledBox w={344} h={712} scale={scale}>
        <Phone>
          {BEATS.map((b, i) => (
            <div className="scr" key={b.id} data-on={i === active}>
              <b.Screen on={i === active} />
            </div>
          ))}
        </Phone>
      </ScaledBox>
    </div>
  );

  const VRail = (
    <div className="vrail">
      {BEATS.map((b, i) => (
        <div className={"vrail-item" + (i === active ? " on" : "")} key={b.id}>
          <span className="vrail-dot"><Ic n={b.icon} s={18} /></span>
          <div><div className="vt">{b.kicker}</div><div className="vs">{["Find companies", "Rank by fit & pain", "AI calls & books", "Auto-replies", "On your calendar"][i]}</div></div>
        </div>
      ))}
    </div>
  );

  return (
    <section className="story" id="how" ref={ref} style={{ height: `${n * 95 + 70}vh` }}>
      <div className="story-sticky">
        <div className="grid-bg"></div>
        <div className="story-glow" style={{ left: layout === "stage" ? "50%" : "62%", top: "44%", transform: "translate(-50%,-50%)", background: `radial-gradient(circle, ${glowColors[active]}55, transparent 65%)` }}></div>
        <div className={"story-inner" + (layout === "stage" ? " center" : "")}>
          {layout === "stage" ? (
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 30 }}>
              <div style={{ maxWidth: 680 }}>{Copy}</div>
              {PhoneStack}
            </div>
          ) : (
            <>
              {Copy}
              {PhoneStack}
              {VRail}
            </>
          )}
        </div>
        <div className="rail">
          {BEATS.map((b, i) => (
            <i key={b.id} className={i < active ? "done" : i === active ? "active" : ""} style={{ "--p": i === active ? railP : 0 }}><b></b></i>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- engine A–Z (pinned desktop) -------------------------
function Engine() {
  const ref = useRef(null);
  const n = ENGINE.length;
  const [active, railP] = useScrollStages(ref, n);
  const isMobile = useIsMobile();
  // Mobile keeps the pinned scroll effect; the window scales to the screen width.
  const mobileScale = useFitBox(740, 486, 40, 196);
  const desktopScale = useFitScale(486, 320);
  const scale = isMobile ? mobileScale : desktopScale;
  return (
    <section className="story engine" id="engine" ref={ref} style={{ height: `${n * 92 + 60}vh` }}>
      <div className="story-sticky">
        <div className="grid-bg"></div>
        <div className="story-glow" style={{ left: "70%", top: "46%", transform: "translate(-50%,-50%)", background: "radial-gradient(circle, var(--brand) 0%, transparent 65%)", opacity: .22 }}></div>
        <div className="engine-inner">
          <div className="story-copy">
            {ENGINE.map((b, i) => (
              <div className="beat-layer" key={b.id} data-on={i === active}>
                <div className="beat-step"><span className="n">{String(i + 1).padStart(2, "0")}</span>{b.kicker}</div>
                <h3 className="beat-h">{b.h}</h3>
                <p className="beat-p">{b.p}</p>
                <div className="beat-stat">{b.stat.map(([v, l]) => <div key={l}><div className="v grad-ink">{v}</div><div className="l">{l}</div></div>)}</div>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "center" }}>
            <ScaledBox w={740} h={486} scale={scale}>
              <EngineWindow active={active} />
            </ScaledBox>
          </div>
        </div>
        <div className="rail">
          {ENGINE.map((b, i) => <i key={b.id} className={i < active ? "done" : i === active ? "active" : ""} style={{ "--p": i === active ? railP : 0 }}><b></b></i>)}
        </div>
      </div>
    </section>
  );
}

// ---- proof band -------------------------------------------
function Proof() {
  const stats = [["2,755", "Prospects scored / mo"], ["32%", "AI-call connect rate"], ["11.4%", "Reply rate"], ["12", "Demos booked / mo"]];
  return (
    <section className="proof reveal">
      <div className="wrap"><div className="proof-grid">
        {stats.map(([v, l]) => <div className="proof-cell" key={l}><div className="v">{v}</div><div className="l">{l}</div></div>)}
      </div></div>
    </section>
  );
}

// ---- features ---------------------------------------------
function Features() {
  const f = [
    { ic: "phoneCall", h: "AI voice agent", p: "An autonomous agent dials prospects, opens with their exact pain signal, and warm-transfers or books when there's interest." },
    { ic: "sparkles", h: "Autonomous replies", p: "Inbound email and DM replies are read, classified, and answered on their own — until a demo is on the calendar." },
    { ic: "flame", h: "Fit & pain scoring", p: "Every company is enriched and ranked on fit, pain, reach and size, so you only talk to prospects worth your time." },
    { ic: "refresh", h: "CRM & calendar sync", p: "Won leads, booked demos and reply status flow straight into HubSpot, Salesforce and your calendar." },
    { ic: "shield", h: "Deliverability built in", p: "Mailbox warmup, domain auth and bounce monitoring keep your outreach landing in the inbox, not spam." },
    { ic: "layers", h: "Live segments", p: "Save a target profile once; new scored prospects that match get added automatically, forever." },
  ];
  return (
    <section className="sec" id="features">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="kick"><span className="d"></span>The engine</span>
          <h2>Everything it takes to fill your pipeline — in one system.</h2>
          <p>Scrape, enrich, score, call, reply, book. ProspectEngine runs the whole outbound motion so your team can stay on delivery.</p>
        </div>
        <div className="feat-grid">
          {f.map((x, i) => (
            <div className="feat reveal" key={x.h} style={{ transitionDelay: (i % 3 * 0.08) + "s" }}>
              <div className="fic"><Ic n={x.ic} s={24} /></div>
              <h3>{x.h}</h3><p>{x.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---- pricing ----------------------------------------------
// ---- ROI calculator (console) -----------------------------
function Slider({ icon, label, sub, value, display, min, max, step, onChange }) {
  return (
    <div className="calc-input">
      <div className="ci-top">
        <span className="ci-label"><Ic n={icon} s={16} />{label}</span>
        <span className="ci-val">{display}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={e => onChange(Number(e.target.value))} aria-label={label} />
      <div className="ci-sub">{sub}</div>
    </div>
  );
}

function Calculator() {
  const [reps, setReps] = useState(2);
  const [demos, setDemos] = useState(20);
  const [tools, setTools] = useState(1500);

  const PE = 799, SDR = 7500, RECLAIM = 22;
  const sdrCost = reps * SDR;
  const yourWay = sdrCost + tools;
  const safe = Math.max(yourWay, 1);
  const dataLists = Math.round(tools * 0.6);
  const dialer = tools - dataLists;
  const savedMo = Math.max(0, yourWay - PE);
  const savedYr = savedMo * 12;
  const cheaper = Math.max(0, Math.min(99, Math.round((1 - PE / safe) * 100)));
  const hours = Math.round(reps * RECLAIM + demos * 0.6);
  const fte = (hours / 40).toFixed(1);
  const cpdYour = demos > 0 ? Math.round(yourWay / demos) : 0;
  const cpdPE = demos > 0 ? Math.round(PE / demos) : 0;
  const fmt = n => "$" + Math.round(n).toLocaleString("en-US");
  const kfmt = n => n >= 1000 ? "$" + Math.round(n / 1000) + "K" : "$" + Math.round(n);

  const H = 186;
  const sdrSeg = Math.round((sdrCost / safe) * H);
  const toolSeg = Math.max(0, H - sdrSeg);
  const peH = Math.max(8, Math.min(H, Math.round((PE / safe) * H)));

  return (
    <section className="sec calc-sec" id="roi" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="kick"><span className="d"></span>ROI calculator</span>
          <h2>See what you'd save.</h2>
          <p>Drag in your numbers. ProspectEngine replaces the SDR team, the data tools and the dialer — and books the same demos for a fraction of the cost.</p>
        </div>
        <div className="calc-win reveal">
          <div className="calc-bar">
            <div className="lights"><i></i><i></i><i></i></div>
            <div className="url"><Ic n="layers" s={13} c="var(--brand)" /><b>prospectengine.io/roi</b></div>
            <div className="live"><i></i>live estimate</div>
          </div>
          <div className="calc-body">
            <div className="calc-side">
              <div className="calc-grp">Your inputs</div>
              <Slider icon="user" label="Outbound reps (SDRs)" sub="People dialing & list-building today" value={reps} display={reps} min={0} max={10} step={1} onChange={setReps} />
              <Slider icon="calendar" label="Demos wanted / month" sub="Qualified meetings on the calendar" value={demos} display={demos} min={1} max={60} step={1} onChange={setDemos} />
              <Slider icon="layers" label="Tools & data / month" sub="Apollo, ZoomInfo, dialer, sequencer…" value={tools} display={fmt(tools)} min={0} max={5000} step={100} onChange={setTools} />
              <div className="calc-assume">
                <div className="ca-h">Assumptions</div>
                <div>SDR loaded · {fmt(SDR)}/mo</div>
                <div>ProspectEngine · {fmt(PE)}/mo</div>
                <div>Reclaimed · {RECLAIM}h / rep / wk</div>
                <div className="ca-faint">Industry-benchmark estimates</div>
              </div>
            </div>
            <div className="calc-main">
              <div className="calc-chart">
                <div className="cc-bars">
                  <div className="cc-col">
                    <div className="cc-val">{kfmt(yourWay)}</div>
                    <div className="cc-bar yourway" style={{ height: H }}>
                      <div className="seg tools" style={{ height: toolSeg }}></div>
                      <div className="seg sdr" style={{ height: sdrSeg }}></div>
                    </div>
                    <div className="cc-label">Your way<span>/mo</span></div>
                  </div>
                  <div className="cc-col">
                    <div className="cc-val brand">{fmt(PE)}</div>
                    <div className="cc-bar pe" style={{ height: peH }}></div>
                    <div className="cc-label brand">ProspectEngine<span>/mo</span></div>
                  </div>
                </div>
                <div className="cc-legend">
                  {[["SDR team", fmt(sdrCost), "#f87a7a"], ["Data & lists", fmt(dataLists), "#fbbf24"], ["Dialer & email", fmt(dialer), "#ffb060"], ["ProspectEngine", fmt(PE), "var(--brand)"]].map(([l, v, c]) => (
                    <div className="lg-row" key={l}><span className="dot" style={{ background: c }}></span><span className="lg-l">{l}</span><span className="lg-v">{v}</span></div>
                  ))}
                </div>
              </div>
              <div className="calc-stats">
                <div className="cstat hl"><div className="cs-l">Saved / month</div><div className="cs-v brand">{fmt(savedMo)}</div></div>
                <div className="cstat"><div className="cs-l">Saved / year</div><div className="cs-v green">{fmt(savedYr)}</div></div>
                <div className="cstat"><div className="cs-l">Cheaper</div><div className="cs-v green">{cheaper}%</div></div>
                <div className="cstat"><div className="cs-l">Demos booked / mo</div><div className="cs-v">{demos}</div></div>
              </div>
              <div className="calc-hours">
                <div className="ch-top"><span>Team hours reclaimed each week</span><span className="green">{hours}h</span></div>
                <div className="ch-bar"><i style={{ width: Math.min(100, hours / 80 * 100) + "%" }}></i></div>
                <div className="ch-sub"><span>No list-building · no manual dialing</span><span>≈ {fte} FTE</span></div>
              </div>
            </div>
          </div>
          <div className="calc-foot">
            <div className="cf-cpd">Cost / booked demo <s>{fmt(cpdYour)}</s> <Ic n="arrow" s={14} /> <b className="green">{fmt(cpdPE)}</b></div>
            <a className="btn btn-primary" href="#request">Request access <Ic n="arrow" s={18} /></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- request access (gated) -------------------------------
function RequestAccess() {
  const [status, setStatus] = useState("idle"); // idle | sending | done | error
  const [form, setForm] = useState({ company: "", name: "", email: "", vertical: "" });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  function submit(e) {
    e.preventDefault();
    if (!form.company.trim() || !form.name.trim() || !form.email.trim()) return;
    setStatus("sending");
    fetch(REQUEST_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify({
        company: form.company,
        name: form.name,
        email: form.email,
        notes: form.vertical ? `Vertical: ${form.vertical}` : undefined,
      }),
    })
      .then(r => { if (!r.ok) throw new Error("HTTP " + r.status); setStatus("done"); })
      .catch(() => setStatus("error"));
  }

  return (
    <section className="req" id="request">
      <div className="glow"></div>
      <div className="wrap req-inner">
        <div className="req-copy reveal">
          <span className="kick"><span className="d"></span>Request access</span>
          <h2>Access is invite-only.</h2>
          <p>ProspectEngine is rolling out one vertical at a time. Tell us who you are and what you sell — we review every request by hand and grant access ourselves. No self-serve signup.</p>
          <ul className="req-points">
            <li><Ic n="shield" s={18} c="var(--brand)" /> Hand-approved — you're never auto-enrolled</li>
            <li><Ic n="layers" s={18} c="var(--brand)" /> Tuned to your vertical before you're let in</li>
            <li><Ic n="calendar" s={18} c="var(--brand)" /> Prefer to talk first? Book a walkthrough.</li>
          </ul>
        </div>
        <div className="req-card reveal">
          {status === "done" ? (
            <div className="req-done">
              <div className="rd-check"><Ic n="check" s={30} sw={3} /></div>
              <h3>Request received</h3>
              <p>You're in the queue — we'll email {form.email || "you"} once your vertical is ready.</p>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              {status === "error" && <p className="req-err" role="alert">Couldn't send — please try again, your details are still here.</p>}
              <label>Company<input type="text" autoComplete="organization" placeholder="Northshore IT Group" value={form.company} onChange={set("company")} required /></label>
              <label>Name<input type="text" autoComplete="name" placeholder="Alex Tremblay" value={form.name} onChange={set("name")} required /></label>
              <label>Work email<input type="email" autoComplete="email" placeholder="alex@northshoreit.com" value={form.email} onChange={set("email")} required /></label>
              <label>What do you sell / your vertical<input type="text" placeholder="Managed IT services, B2B SaaS, …" value={form.vertical} onChange={set("vertical")} /></label>
              <button className="btn btn-primary" type="submit" disabled={status === "sending"}>{status === "sending" ? "Sending…" : <>Request access <Ic n="arrow" s={18} /></>}</button>
              <a className="btn btn-ghost" href={CAL_URL} target="_blank" rel="noopener noreferrer">Book a walkthrough instead</a>
              <p className="req-note">We review every request by hand. No card, no auto-access.</p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ---- CTA + footer -----------------------------------------
function CTA() {
  return (
    <section className="cta-band" id="cta">
      <div className="grid-bg"></div>
      <div className="glow"></div>
      <div className="wrap reveal">
        <h2>Your next client is<br /><span className="grad-ink">already out there.</span></h2>
        <p>Let ProspectEngine find, score, and book them — while you stay on delivery.</p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", position: "relative", zIndex: 2 }}>
          <a className="btn btn-primary" href="#request" style={{ height: 54, fontSize: 16.5, padding: "0 30px" }}>Request access <Ic n="arrow" s={19} /></a>
          <a className="btn btn-ghost" href={CAL_URL} target="_blank" rel="noopener noreferrer" style={{ height: 54, fontSize: 16.5, padding: "0 26px" }}>Book a walkthrough</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ["Product", [["How it works", "#how"], ["The engine", "#engine"], ["ROI calculator", "#roi"]]],
    ["Company", [["Request access", "#request"], ["Sign in", APP_URL], ["Contact", "mailto:hello@prospectengine.io"]]],
    ["Legal", [["Privacy", "#"], ["Terms", "#"], ["Security", "#"]]],
  ];
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div style={{ maxWidth: 300 }}>
            <Logo />
            <p style={{ color: "var(--muted)", fontSize: 14.5, lineHeight: 1.6, marginTop: 16 }}>AI prospecting for any B2B &amp; B2B2C team. Your next client, engineered.</p>
          </div>
          {cols.map(([h, links]) => (
            <div className="foot-col" key={h}>
              <h4>{h}</h4>
              {links.map(([l, href]) => <a href={href} key={l}>{l}</a>)}
            </div>
          ))}
        </div>
        <div className="foot-bottom">
          <span>© 2026 ProspectEngine. All rights reserved.</span>
          <span className="mono">prospectengine.io</span>
        </div>
      </div>
    </footer>
  );
}

// ---- app --------------------------------------------------
function App() {
  useReveal();
  return (
    <>
      <Nav />
      <Hero />
      <Story layout="split" />
      <Proof />
      <Engine />
      <Calculator />
      <RequestAccess />
      <CTA />
      <Footer />
    </>
  );
}

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