// The 5 phone-screen beats. Each receives `on` (is this beat active) to drive
// in-screen animation. Active beat is keyed so it remounts and re-animates.
const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

// ── Beat 1 · Scrape ─────────────────────────────────────
function BeatScrape({ on }) {
  const companies = [
    { nm: "Meridian Health Group", sub: "Toronto · Healthcare · 480 staff", c: "#fb923c" },
    { nm: "Northwind SaaS", sub: "Ottawa · Software · 72 staff", c: "#38bdf8" },
    { nm: "BluePeak Logistics", sub: "Montreal · Supply chain · 210", c: "#34d399" },
    { nm: "Sentinel Finance", sub: "Calgary · Fintech · 134 staff", c: "#c084fc" },
    { nm: "Cascade Retail Co", sub: "Vancouver · E-commerce · 90", c: "#fbbf24" },
  ];
  const [count, setCount] = useStateB(0);
  useEffectB(() => {
    if (!on) { setCount(0); return; }
    let i = 0; const id = setInterval(() => { i++; setCount(i); if (i >= companies.length) clearInterval(id); }, 380);
    return () => clearInterval(id);
  }, [on]);
  return (
    <div className="scr-pad">
      <div className="scr-appbar">
        <span style={{ color: "var(--brand)" }}><Ic n="search" s={20} /></span>
        <span className="t">Scanning sources</span>
        <span className="badge">live</span>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14, fontSize: 12, color: "var(--muted)", fontFamily: "var(--f-mono)" }}>
        <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--success)", boxShadow: "0 0 8px var(--success)" }}></span>
        Apollo · Google Maps · LinkedIn
      </div>
      <div style={{ flex: 1, overflow: "hidden" }}>
        {companies.map((c, i) => (
          <div className="scan-row" key={c.nm} style={{ opacity: i < count ? 1 : 0.18, transform: i < count ? "none" : "translateY(6px)", transition: "opacity .4s, transform .4s" }}>
            <span className="av" style={{ background: c.c + "22", color: c.c, border: "1px solid " + c.c + "55", borderRadius: 11 }}>{c.nm.split(" ").slice(0, 2).map(w => w[0]).join("")}</span>
            <div><div className="nm">{c.nm}</div><div className="sub">{c.sub}</div></div>
            {i < count && <span className="tickmark"><Ic n="check" s={17} sw={3} /></span>}
          </div>
        ))}
      </div>
      <div style={{ textAlign: "center", fontFamily: "var(--f-mono)", fontSize: 12, color: "var(--muted)", paddingTop: 6 }}>
        <span style={{ color: "var(--brand)" }}>{(count * 49 + 12)}</span> ideal-fit companies found
      </div>
    </div>
  );
}

// ── Beat 2 · Score ──────────────────────────────────────
function BeatScore({ on }) {
  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 }));
  const [score, setScore] = useStateB(0);
  useEffectB(() => {
    if (!on) { setScore(0); return; }
    let s = 0; const id = setInterval(() => { s += 4; if (s >= 92) { s = 92; clearInterval(id); } setScore(s); }, 26);
    return () => clearInterval(id);
  }, [on]);
  return (
    <div className="scr-pad">
      <div className="scr-appbar">
        <span style={{ color: "var(--brand)" }}><Ic n="flame" s={20} /></span>
        <span className="t">Lead score</span>
        <span className="badge">Tier A</span>
      </div>
      <div className="pcard" style={{ background: "linear-gradient(160deg, color-mix(in srgb,var(--brand) 14%,transparent), var(--card) 60%)", borderColor: "var(--brand-30)" }}>
        <div className="row">
          <span className="av" style={{ background: "var(--brand-15)", color: "var(--brand)", border: "1px solid var(--brand-30)" }}>MH</span>
          <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 700 }}>Meridian Health Group</div><div style={{ fontSize: 11.5, color: "var(--muted)" }}>Toronto, ON</div></div>
          <div style={{ textAlign: "right" }}>
            <div className="score-ring" style={{ fontSize: 34, lineHeight: 1, color: "var(--brand)" }}>{score}</div>
            <div style={{ fontSize: 9, color: "var(--muted)", fontFamily: "var(--f-mono)", letterSpacing: ".08em" }}>FIT SCORE</div>
          </div>
        </div>
      </div>
      <div style={{ marginTop: 14 }} className="pcard">
        <Bars dims={dims} />
      </div>
      <div style={{ flex: 1 }}></div>
      <div className="pcard" style={{ background: "var(--card-2)" }}>
        <div style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--brand)", marginBottom: 7 }}>Why it scored high</div>
        <div style={{ fontSize: 12.5, lineHeight: 1.45, color: "var(--ink-dim)" }}>Strong growth signals · budget confirmed · decision-maker reachable.</div>
      </div>
    </div>
  );
}

// ── Beat 3 · Voice agent ────────────────────────────────
function BeatVoice({ on }) {
  const [t, setT] = useStateB(0);
  const barsRef = useRefB(Array.from({ length: 22 }, () => 30));
  const [, force] = useStateB(0);
  useEffectB(() => {
    if (!on) { setT(0); return; }
    const sec = setInterval(() => setT(x => x + 1), 1000);
    const wv = setInterval(() => { barsRef.current = barsRef.current.map(() => 14 + Math.random() * 46); force(x => x + 1); }, 130);
    return () => { clearInterval(sec); clearInterval(wv); };
  }, [on]);
  const mm = String(Math.floor(t / 60)).padStart(2, "0"), ss = String(t % 60).padStart(2, "0");
  return (
    <div className="scr-pad">
      <div className="scr-appbar">
        <span style={{ color: "var(--success)" }}><Ic n="phoneCall" s={20} /></span>
        <span className="t">AI voice agent</span>
        <span className="badge" style={{ color: "var(--success)", borderColor: "color-mix(in srgb,var(--success) 40%,transparent)", background: "color-mix(in srgb,var(--success) 12%,transparent)" }}>● live</span>
      </div>
      <div className="pcard" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, paddingTop: 20, paddingBottom: 20 }}>
        <span className="av" style={{ width: 56, height: 56, borderRadius: 18, background: "var(--brand-15)", color: "var(--brand)", border: "1px solid var(--brand-30)", fontSize: 18 }}>MV</span>
        <div style={{ fontSize: 15, fontWeight: 700, marginTop: 6 }}>Marcus Vale</div>
        <div style={{ fontSize: 12, color: "var(--muted)" }}>VP Operations · Meridian Health</div>
        <div className="mono" style={{ fontSize: 13, color: "var(--success)", marginTop: 4 }}>{mm}:{ss}</div>
      </div>
      <div className="wave" style={{ marginTop: 6 }}>
        {barsRef.current.map((h, i) => <i key={i} style={{ height: on ? h : 6, opacity: 0.4 + (i % 4) * 0.15, transition: "height .12s" }}></i>)}
      </div>
      <div style={{ flex: 1, marginTop: 8 }}>
        <div className="call-line"><span className="who" style={{ color: "var(--brand)" }}>AI</span> <span style={{ color: "var(--ink-dim)" }}> Quick call about helping your team hit its Q3 targets — got two minutes?</span></div>
        <div className="call-line"><span className="who">Marcus</span> <span> "Yeah, we've been looking into that. Who should I loop in?"</span></div>
        <div className="call-line"><span className="who" style={{ color: "var(--brand)" }}>AI</span> <span style={{ color: "var(--muted)" }}> detecting interest → offering a demo slot…</span></div>
      </div>
    </div>
  );
}

// ── Beat 4 · Reply handling ─────────────────────────────
function BeatReply({ on }) {
  const [step, setStep] = useStateB(0);
  useEffectB(() => {
    if (!on) { setStep(0); return; }
    const a = setTimeout(() => setStep(1), 500);
    const b = setTimeout(() => setStep(2), 1300);
    const c = setTimeout(() => setStep(3), 2200);
    return () => { clearTimeout(a); clearTimeout(b); clearTimeout(c); };
  }, [on]);
  return (
    <div className="scr-pad">
      <div className="scr-appbar">
        <span style={{ color: "var(--brand)" }}><Ic n="message" s={20} /></span>
        <span className="t">AI conversation</span>
        <span className="badge">auto</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}>
        <div className="bub out" style={{ opacity: step >= 0 ? 1 : 0, transition: "opacity .4s" }}>Noticed Northwind is scaling fast — worth a quick look at how we help teams like yours grow pipeline?</div>
        <div className="bub inb" style={{ opacity: step >= 1 ? 1 : 0, transform: step >= 1 ? "none" : "translateY(8px)", transition: "all .4s" }}>Sounds useful — what does onboarding look like, and how soon would we see leads?</div>
        <div style={{ display: step >= 2 ? "flex" : "none", alignItems: "center", gap: 8, alignSelf: "flex-start", margin: "2px 0 10px", fontSize: 11, color: "var(--brand)", fontFamily: "var(--f-mono)" }}>
          <Ic n="sparkles" s={13} /> AI drafting reply…
        </div>
        <div className="ai-suggest" style={{ opacity: step >= 3 ? 1 : 0, transform: step >= 3 ? "none" : "translateY(10px)", transition: "all .5s" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
            <Ic n="sparkles" s={14} c="var(--brand)" />
            <span style={{ fontFamily: "var(--f-mono)", fontSize: 9.5, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--brand)" }}>Sent automatically</span>
          </div>
          <div style={{ fontSize: 12.5, lineHeight: 1.45, color: "var(--ink-dim)" }}>"Onboarding takes ~10 min — leads start scoring within 24h. Here's a 15-min slot 👉"</div>
        </div>
      </div>
    </div>
  );
}

// ── Beat 5 · Demo booked ────────────────────────────────
function BeatBooked({ on }) {
  return (
    <div className="scr-pad" style={{ justifyContent: "center" }}>
      <div style={{ transform: on ? "scale(1)" : "scale(.8)", opacity: on ? 1 : 0, transition: "all .5s cubic-bezier(.2,.9,.3,1.4)" }}>
        <div className="booked-check"><Ic n="check" s={34} sw={3} /></div>
        <div style={{ textAlign: "center", marginTop: 18 }}>
          <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: "-.02em" }}>Demo booked</div>
          <div style={{ fontSize: 13.5, color: "var(--muted)", marginTop: 6 }}>Added to your calendar — zero lifting.</div>
        </div>
      </div>
      <div className="cal-chip" style={{ marginTop: 26, opacity: on ? 1 : 0, transform: on ? "none" : "translateY(12px)", transition: "all .5s .15s" }}>
        <span className="av" style={{ background: "var(--brand-15)", color: "var(--brand)", border: "1px solid var(--brand-30)", borderRadius: 11 }}><Ic n="calendar" s={18} /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>Meridian Health Group</div>
          <div style={{ fontSize: 11.5, color: "var(--muted)" }}>Thu, Jun 26 · 2:00 PM · 30 min</div>
        </div>
        <span className="chip" style={{ color: "var(--success)", borderColor: "color-mix(in srgb,var(--success) 35%,transparent)", background: "color-mix(in srgb,var(--success) 12%,transparent)" }}>Confirmed</span>
      </div>
      <div className="cal-chip" style={{ marginTop: 10, opacity: on ? 1 : 0, transform: on ? "none" : "translateY(12px)", transition: "all .5s .28s", background: "var(--card-2)" }}>
        <span className="av" style={{ background: "var(--card)", color: "var(--success)", border: "1px solid var(--border)", borderRadius: 11 }}><Ic n="phoneCall" s={17} /></span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>Cascade Retail Co</div>
          <div style={{ fontSize: 11.5, color: "var(--muted)" }}>Booked by voice agent · 1h ago</div>
        </div>
        <span className="chip" style={{ color: "var(--success)", borderColor: "color-mix(in srgb,var(--success) 35%,transparent)", background: "color-mix(in srgb,var(--success) 12%,transparent)" }}>Confirmed</span>
      </div>
    </div>
  );
}

const BEATS = [
  { id: "scrape", step: "Step 01", kicker: "Find", h: "It finds your ideal customers for you.", p: "Describe who you want to reach — any industry, any region — and ProspectEngine continuously scans Apollo, Google Maps and LinkedIn for companies that match. No lists, no manual digging.", stat: [["2,755", "found / mo"], ["3", "live sources"]], icon: "search", Screen: BeatScrape },
  { id: "score", step: "Step 02", kicker: "Score", h: "It scores every lead on fit & pain.", p: "AI enriches each company and ranks it on fit, pain, reach and size — so your team only ever talks to prospects worth talking to.", stat: [["74", "avg fit score"], ["Tier A–C", "ranked"]], icon: "flame", Screen: BeatScore },
  { id: "voice", step: "Step 03", kicker: "Call", h: "An AI voice agent makes the calls.", p: "The agent dials your top prospects, opens with their exact pain signal, handles the conversation, and warm-transfers or books when there's interest.", stat: [["32%", "connect rate"], ["24/7", "dialing"]], icon: "phoneCall", Screen: BeatVoice },
  { id: "reply", step: "Step 04", kicker: "Reply", h: "It answers replies on its own.", p: "Email and DM replies are read, classified, and answered automatically — the AI keeps the conversation moving until a demo is on the table.", stat: [["47", "AI replies / day"], ["0", "you write"]], icon: "message", Screen: BeatReply },
  { id: "booked", step: "Step 05", kicker: "Book", h: "Demos land on your calendar.", p: "When a prospect says yes, the booking drops straight onto your calendar and into your CRM. You show up to qualified meetings — that's it.", stat: [["12", "demos / mo"], ["$0", "extra effort"]], icon: "calendar", Screen: BeatBooked },
];

Object.assign(window, { BeatScrape, BeatScore, BeatVoice, BeatReply, BeatBooked, BEATS });