// Engine A–Z — pinned desktop app window that walks through the whole pipeline.
// EngineWindow({active}) renders chrome + sidebar + crossfading stages.
const { useState: useStateE, useEffect: useEffectE, useRef: useRefE } = React;

const ENG_NAV = [
  { ic: "target", label: "Targeting" },
  { ic: "search", label: "Discovery" },
  { ic: "flame", label: "Scoring" },
  { ic: "send", label: "Campaigns" },
  { ic: "phoneCall", label: "Outreach" },
  { ic: "calendar", label: "Pipeline" },
];

function heat(s) { return s >= 80 ? "heat-hot" : s >= 65 ? "heat-warm" : "heat-cool"; }

// ── Stage A · Targeting / ICP ───────────────────────────
function StgTarget({ on }) {
  const V = [["SaaS", 1], ["Healthcare", 1], ["Fintech", 1], ["E-commerce", 1], ["Agencies", 0], ["Manufacturing", 0]];
  const R = [["US", 1], ["Canada", 1], ["UK & EU", 0], ["APAC", 0]];
  const [fill, setFill] = useStateE(0);
  useEffectE(() => { if (!on) { setFill(0); return; } const t = setTimeout(() => setFill(70), 200); return () => clearTimeout(t); }, [on]);
  return (
    <div className="eng-stage" data-on={on}>
      <div className="eng-h"><span style={{ color: "var(--brand)" }}><Ic n="target" s={18} /></span><span className="t">Describe your ideal customer</span><span className="sub">in plain English</span></div>
      <div style={{ display: "flex", alignItems: "center", gap: 9, background: "var(--card)", border: "1px solid var(--brand-30)", borderRadius: 11, padding: "10px 12px", marginBottom: 14 }}>
        <span style={{ color: "var(--brand)", flexShrink: 0 }}><Ic n="sparkles" s={15} /></span>
        <span style={{ fontSize: 11.5, color: "var(--ink-dim)", lineHeight: 1.35 }}>“Find RevOps leaders at 50–500 person SaaS &amp; fintech companies in the US.”</span>
      </div>
      <div className="eng-label">Verticals it picked</div>
      <div className="echips">{V.map(([t, o]) => <span key={t} className={"echip" + (o ? " on" : "")}>{o ? <Ic n="check" s={12} sw={3} /> : null}{t}</span>)}</div>
      <div className="eng-label" style={{ marginTop: 16 }}>Regions</div>
      <div className="echips">{R.map(([t, o]) => <span key={t} className={"echip" + (o ? " on" : "")}>{o ? <Ic n="check" s={12} sw={3} /> : null}{t}</span>)}</div>
      <div className="eng-label" style={{ marginTop: 18 }}>Minimum fit score</div>
      <div style={{ position: "relative", height: 6, borderRadius: 4, background: "#26262e" }}>
        <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: fill + "%", background: "var(--grad)", borderRadius: 4, transition: "width .9s cubic-bezier(.2,.8,.2,1)" }}></div>
        <div style={{ position: "absolute", left: fill + "%", top: "50%", width: 15, height: 15, borderRadius: "50%", background: "var(--brand)", transform: "translate(-50%,-50%)", boxShadow: "0 0 10px var(--brand)", transition: "left .9s cubic-bezier(.2,.8,.2,1)" }}></div>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 9, fontFamily: "var(--f-mono)", fontSize: 10.5, color: "var(--muted)" }}><span>Broad</span><span style={{ color: "var(--brand)" }}>70+</span><span>Best fit</span></div>
    </div>
  );
}

// ── Stage B · Discovery / scrape ────────────────────────
function StgDiscover({ on }) {
  const rows = [
    { nm: "Meridian Health Group", sub: "Toronto · 480 staff", c: "#fb923c" },
    { nm: "Northwind SaaS", sub: "Ottawa · 72 staff", c: "#38bdf8" },
    { nm: "BluePeak Logistics", sub: "Montreal · 210 staff", c: "#34d399" },
    { nm: "Sentinel Finance", sub: "Calgary · 134 staff", c: "#c084fc" },
    { nm: "Cascade Retail Co", sub: "Vancouver · 90 staff", c: "#fbbf24" },
  ];
  const [c, setC] = useStateE(0);
  useEffectE(() => { if (!on) { setC(0); return; } let i = 0; const id = setInterval(() => { i++; setC(i); if (i >= rows.length) clearInterval(id); }, 320); return () => clearInterval(id); }, [on]);
  return (
    <div className="eng-stage" data-on={on}>
      <div className="eng-h"><span style={{ color: "var(--brand)" }}><Ic n="search" s={18} /></span><span className="t">Scanning sources</span><span className="sub" style={{ color: "var(--success)" }}>● live</span></div>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>{["Apollo", "Google Maps", "LinkedIn"].map(s => <span key={s} className="echip on" style={{ fontSize: 10 }}>{s}</span>)}</div>
      <div className="etbl">
        {rows.map((r, i) => (
          <div className="etrow" key={r.nm} style={{ opacity: i < c ? 1 : 0.16, transform: i < c ? "none" : "translateY(5px)", transition: "opacity .35s,transform .35s" }}>
            <span className="av" style={{ width: 30, height: 30, fontSize: 11, borderRadius: 9, background: r.c + "22", color: r.c, border: "1px solid " + r.c + "55" }}>{r.nm.split(" ").slice(0, 2).map(w => w[0]).join("")}</span>
            <div style={{ flex: 1 }}><div className="nm">{r.nm}</div><div className="sub">{r.sub}</div></div>
            {i < c && <span style={{ color: "var(--success)" }}><Ic n="check" s={15} sw={3} /></span>}
          </div>
        ))}
      </div>
      <div style={{ marginTop: "auto", textAlign: "center", fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--muted)", paddingTop: 8 }}><span style={{ color: "var(--brand)" }}>{c * 49 + 14}</span> MSP-fit companies found</div>
    </div>
  );
}

// ── Stage C · Scoring ───────────────────────────────────
function StgScore({ on }) {
  const rows = [
    { nm: "Meridian Health Group", sub: "Toronto, ON", s: 92, t: "A", hot: true },
    { nm: "Northwind SaaS", sub: "Ottawa, ON", s: 88, t: "A" },
    { nm: "BluePeak Logistics", sub: "Montreal, QC", s: 84, t: "A" },
    { nm: "Sentinel Finance", sub: "Calgary, AB", s: 76, t: "B" },
    { nm: "Cascade Retail Co", sub: "Vancouver, BC", s: 71, t: "B" },
  ];
  const dims = [{ n: "Fit", v: 92, c: "var(--dim-fit)" }, { n: "Pain", v: 88, c: "var(--dim-pain)" }, { n: "Reach", v: 79, c: "var(--dim-reach)" }, { n: "Size", v: 85, c: "var(--dim-size)" }].map(d => ({ ...d, on }));
  return (
    <div className="eng-stage" data-on={on}>
      <div className="eng-h"><span style={{ color: "var(--brand)" }}><Ic n="flame" s={18} /></span><span className="t">Scored & ranked</span><span className="sub">247 leads</span></div>
      <div className="etbl" style={{ gap: 6 }}>
        {rows.map((r) => (
          <div className={"etrow" + (r.hot ? " hot" : "")} key={r.nm} style={{ padding: "7px 11px" }}>
            <div style={{ flex: 1 }}><div className="nm" style={{ fontSize: 12 }}>{r.nm}</div><div className="sub">{r.sub}</div></div>
            <span className={"etier " + (r.t === "A" ? "heat-hot" : "heat-warm")} style={{ background: "transparent" }}>TIER {r.t}</span>
            <span className={"score-pill " + heat(r.s)}>{r.s}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, background: "var(--card)", border: "1px solid var(--brand-30)", borderRadius: 11, padding: "10px 12px" }}>
        <div className="eng-label" style={{ marginBottom: 7 }}>Meridian Health · why it scored 92</div>
        <Bars dims={dims} />
      </div>
    </div>
  );
}

// ── Stage D · Campaigns / sequence ──────────────────────
function StgCampaign({ on }) {
  const steps = [["mail", "Day 0", "Pain-led intro email"], ["refresh", "Day 2", "Wait + LinkedIn view"], ["phoneCall", "Day 3", "AI voice agent call"], ["mail", "Day 5", "Case-study follow-up"]];
  const [c, setC] = useStateE(0);
  useEffectE(() => { if (!on) { setC(0); return; } let i = 0; const id = setInterval(() => { i++; setC(i); if (i >= steps.length) clearInterval(id); }, 300); return () => clearInterval(id); }, [on]);
  return (
    <div className="eng-stage" data-on={on}>
      <div className="eng-h"><span style={{ color: "var(--brand)" }}><Ic n="send" s={18} /></span><span className="t">Sequence built</span><span className="sub">84 enrolled</span></div>
      <div className="eseq">
        {steps.map((s, i) => (
          <div className="eseq-row" key={i} style={{ opacity: i < c ? 1 : 0.18, transition: "opacity .35s" }}>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
              <div className="eseq-node"><Ic n={s[0]} s={15} /></div>
              {i < steps.length - 1 && <div className="eseq-line"></div>}
            </div>
            <div className="eseq-card"><div className="lbl">{s[1]}</div><div className="ttl">{s[2]}</div></div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: "auto", display: "flex", gap: 8, flexWrap: "wrap", paddingTop: 6 }}>
        {["{{first_name}}", "{{company}}", "{{pain_signal}}"].map(m => <span key={m} className="echip on" style={{ fontFamily: "var(--f-mono)", fontSize: 10 }}>{m}</span>)}
      </div>
    </div>
  );
}

// ── Stage E · Outreach (voice + replies) ────────────────
function StgOutreach({ on }) {
  const ref = useRefE(Array.from({ length: 16 }, () => 24));
  const [, f] = useStateE(0);
  const [step, setStep] = useStateE(0);
  useEffectE(() => {
    if (!on) { setStep(0); return; }
    const wv = setInterval(() => { ref.current = ref.current.map(() => 10 + Math.random() * 34); f(x => x + 1); }, 140);
    const a = setTimeout(() => setStep(1), 600), b = setTimeout(() => setStep(2), 1500);
    return () => { clearInterval(wv); clearTimeout(a); clearTimeout(b); };
  }, [on]);
  return (
    <div className="eng-stage" data-on={on}>
      <div className="eng-h"><span style={{ color: "var(--success)" }}><Ic n="phoneCall" s={18} /></span><span className="t">Outreach running</span><span className="sub" style={{ color: "var(--success)" }}>● live</span></div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 11, flex: 1, minHeight: 0 }}>
        <div style={{ background: "var(--card)", border: "1px solid var(--brand-30)", borderRadius: 12, padding: 12, display: "flex", flexDirection: "column" }}>
          <div className="eng-label" style={{ marginBottom: 8 }}>AI voice agent</div>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <span className="av" style={{ width: 28, height: 28, fontSize: 10, borderRadius: 8, background: "var(--brand-15)", color: "var(--brand)", border: "1px solid var(--brand-30)" }}>MV</span>
            <div><div style={{ fontSize: 11.5, fontWeight: 600 }}>Marcus Vale</div><div style={{ fontSize: 9.5, color: "var(--muted)" }}>Meridian Health</div></div>
          </div>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 3, height: 40, marginTop: 10 }}>
            {ref.current.map((h, i) => <i key={i} style={{ width: 3, height: on ? h : 4, borderRadius: 3, background: "var(--brand)", transition: "height .12s" }}></i>)}
          </div>
          <div style={{ marginTop: "auto", fontSize: 10.5, color: "var(--muted)", lineHeight: 1.35 }}>"…offering a demo slot — booking now."</div>
        </div>
        <div style={{ background: "var(--card)", border: "1px solid var(--border)", borderRadius: 12, padding: 12, display: "flex", flexDirection: "column" }}>
          <div className="eng-label" style={{ marginBottom: 8 }}>AI replies</div>
          <div className="bub inb" style={{ fontSize: 10.5, padding: "7px 10px", maxWidth: "94%", opacity: step >= 1 ? 1 : 0, transition: "opacity .4s" }}>What does onboarding look like?</div>
          <div className="bub out" style={{ fontSize: 10.5, padding: "7px 10px", maxWidth: "94%", opacity: step >= 2 ? 1 : 0, transition: "opacity .4s" }}>~10 min — leads in 24h. Here's a slot 👉</div>
          <div style={{ marginTop: "auto", display: step >= 2 ? "flex" : "none", alignItems: "center", gap: 6, fontSize: 9.5, fontFamily: "var(--f-mono)", color: "var(--brand)" }}><Ic n="sparkles" s={11} />Sent automatically</div>
        </div>
      </div>
    </div>
  );
}

// ── Stage F · Pipeline / booked ─────────────────────────
function StgPipeline({ on }) {
  return (
    <div className="eng-stage" data-on={on}>
      <div className="eng-h"><span style={{ color: "var(--brand)" }}><Ic n="calendar" s={18} /></span><span className="t">Demos on your calendar</span><span className="sub">this month</span></div>
      <div className="estat-grid">
        {[["Demos booked", "12", "+5 this wk"], ["Reply rate", "11.4%", "+1.2%"], ["Pipeline", "$84k", "live"]].map(([l, v, d]) => (
          <div className="estat" key={l}><div className="l">{l}</div><div className="v grad-ink">{v}</div><div className="dl">{d}</div></div>
        ))}
      </div>
      <div className="cal-chip" style={{ marginTop: 12, opacity: on ? 1 : 0, transform: on ? "none" : "translateY(10px)", transition: "all .5s .1s" }}>
        <span className="av" style={{ width: 32, height: 32, borderRadius: 10, background: "var(--brand-15)", color: "var(--brand)", border: "1px solid var(--brand-30)" }}><Ic n="calendar" s={16} /></span>
        <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600 }}>Meridian Health Group</div><div style={{ fontSize: 10.5, color: "var(--muted)" }}>Thu Jun 26 · 2:00 PM</div></div>
        <span className="echip" style={{ color: "var(--success)", borderColor: "rgba(52,211,153,.35)", background: "rgba(52,211,153,.12)" }}>Confirmed</span>
      </div>
      <div className="cal-chip" style={{ marginTop: 9, background: "var(--card-2)", opacity: on ? 1 : 0, transform: on ? "none" : "translateY(10px)", transition: "all .5s .22s" }}>
        <span className="av" style={{ width: 32, height: 32, borderRadius: 10, background: "var(--card)", color: "var(--success)", border: "1px solid var(--border)" }}><Ic n="phoneCall" s={15} /></span>
        <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 600 }}>Cascade Retail Co</div><div style={{ fontSize: 10.5, color: "var(--muted)" }}>Booked by voice agent · 1h ago</div></div>
        <span className="echip" style={{ color: "var(--success)", borderColor: "rgba(52,211,153,.35)", background: "rgba(52,211,153,.12)" }}>Confirmed</span>
      </div>
    </div>
  );
}

const ENGINE = [
  { id: "target", kicker: "A · Targeting", h: "Just describe who you want.", p: "Tell ProspectEngine your ideal customer in plain language — any industry, any region, B2B or B2B2C. That becomes the brief the whole engine works against. No lists to buy, ever.", stat: [["Any", "vertical"], ["Plain", "English"]], Stage: StgTarget },
  { id: "discover", kicker: "B · Discovery", h: "It finds every match.", p: "ProspectEngine continuously scrapes Apollo, Google Maps and LinkedIn for companies that fit your profile — and de-duplicates them into one clean list.", stat: [["2,755", "found / mo"], ["3", "sources"]], Stage: StgDiscover },
  { id: "score", kicker: "C · Scoring", h: "It ranks them by fit & pain.", p: "Every company is enriched with contacts, tech stack and pain signals, then scored on fit, pain, reach and size — so only real opportunities rise to the top.", stat: [["74", "avg score"], ["A–C", "tiers"]], Stage: StgScore },
  { id: "campaign", kicker: "D · Campaigns", h: "It builds the outreach.", p: "Top prospects are enrolled into a multi-step sequence — email, LinkedIn and voice — personalized with each company's own pain signal.", stat: [["84", "enrolled"], ["4-step", "sequence"]], Stage: StgCampaign },
  { id: "outreach", kicker: "E · Outreach", h: "Calls and replies, handled.", p: "An AI voice agent makes the calls and an AI SDR answers every reply — moving conversations toward a booked demo without you lifting a finger.", stat: [["32%", "connect rate"], ["47", "AI replies / day"]], Stage: StgOutreach },
  { id: "pipeline", kicker: "F · Pipeline", h: "Demos land on your calendar.", p: "When a prospect says yes, the meeting drops onto your calendar and into your CRM. You show up to qualified demos — that's the whole job.", stat: [["12", "demos / mo"], ["$0", "extra effort"]], Stage: StgPipeline },
];

function EngineWindow({ active }) {
  return (
    <div className="eng-win">
      <div className="eng-bar">
        <div className="lights"><i></i><i></i><i></i></div>
        <div className="url"><Ic n="layers" s={13} c="var(--brand)" /><b>app.prospectengine.io</b></div>
        <div className="live"><i></i>running</div>
      </div>
      <div className="eng-body">
        <div className="eng-side">
          <div className="grp">Engine</div>
          {ENG_NAV.map((m, i) => (
            <div key={m.label} className={"eng-nav" + (i === active ? " on" : i < active ? " done" : "")}>
              <span className="ec"><Ic n={m.ic} s={16} /></span>{m.label}
              <span className="echeck"><Ic n="check" s={13} sw={3} /></span>
            </div>
          ))}
        </div>
        <div className="eng-main">
          {ENGINE.map((s, i) => <s.Stage key={s.id} on={i === active} />)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ENGINE, EngineWindow });