/**
 * BuzzLead deck slides 01 – 10
 * All ten slides in one file for easy review.
 */

const TOTAL = 12;

// ═══════════════════════════════════════════════════════
// SLIDE 01 · COVER
// ═══════════════════════════════════════════════════════
function Slide01Cover() {
  const ref = useRef(null);
  const state = useSlideState(0, ref); // entry only, no click states
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    const deck = document.querySelector('deck-stage');
    const onCh = (e) => {
      if (e.detail.slide === ref.current) {
        setEntered(false);
        setTimeout(() => setEntered(true), 80);
      }
    };
    deck?.addEventListener('slidechange', onCh);
    setTimeout(() => setEntered(true), 120);
    return () => deck?.removeEventListener('slidechange', onCh);
  }, []);

  return (
    <section ref={ref} className="slide slide-cover" data-label="Cover">
      <div className="scan-line" />
      <div className="cover-lockup">
        <img src="assets/buzzlead-lockup.png" alt="BuzzLead" className={`lockup ${entered ? 'in' : ''}`} />
      </div>

      <div className="cover-meta">
        <Reveal show={entered} delay={0} kind="fade">
          <div className="label label--orange">SPEC · v1.0 · APR 2026</div>
        </Reveal>
      </div>

      <div className="cover-headline">
        <Reveal show={entered} delay={300} kind="rise">
          <div className="cover-h1">
            Outbound,
          </div>
        </Reveal>
        <Reveal show={entered} delay={600} kind="rise">
          <div className="cover-h1">
            <span className="h-italic">engineered.</span>
          </div>
        </Reveal>
        <Reveal show={entered} delay={900} kind="fade">
          <div className="cover-sub">By <span className="prospect">Buzzlead</span></div>
        </Reveal>
      </div>

      <div className="cover-footer">
        <Reveal show={entered} delay={1100} kind="fade">
          <div className="label">Troy Aitken · CEO, BuzzLead LLC</div>
        </Reveal>
        <Reveal show={entered} delay={1200} kind="fade">
          <div className="label">April 2026</div>
        </Reveal>
      </div>
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 02 · SIGNAL FLOW HERO (cornerstone)
// ═══════════════════════════════════════════════════════
const SIGNALS = [
'Series B+ funding', 'New exec hire', 'Job posts: SDR/AE',
'Tech stack change', 'Website re-platform', 'LinkedIn engagement',
'Podcast mentions', 'Content velocity', 'Hiring surge',
'M&A activity', 'Product launches', 'Conference speakers',
'First 90 days in new role'];

// Concave fan offsets — middle pushes leftward, ends stay near the engine line
const SIGNAL_FAN = [0, -14, -26, -36, -42, -46, -48, -46, -42, -36, -26, -14, 0];


const STACK_TOOLS = ['Clay', 'AI-ARK', 'EmailBison', 'Close', 'HeyReach', 'Claude'];

function Slide02SignalFlow() {
  const ref = useRef(null);
  const state = useSlideState(2, ref);

  const stageRef = useRef(null);
  const signalRefs = useRef([]);
  const channelRefs = useRef([]);
  const engineRef = useRef(null);
  const [paths, setPaths] = useState({ inPaths: [], outPaths: [], engineCx: 0, engineCy: 0, width: 0, height: 0 });

  useLayoutEffect(() => {
    function measure() {
      const stage = stageRef.current;
      const engine = engineRef.current;
      if (!stage || !engine) return;
      const stageBox = stage.getBoundingClientRect();
      const engBox = engine.getBoundingClientRect();
      const eLeft = engBox.left - stageBox.left;
      const eRight = engBox.right - stageBox.left;
      const eMidY = (engBox.top + engBox.bottom) / 2 - stageBox.top;
      const eMidX = (engBox.left + engBox.right) / 2 - stageBox.left;

      const inPaths = signalRefs.current
      .map((el) => {
        if (!el) return null;
        const b = el.getBoundingClientRect();
        const x0 = b.right - stageBox.left;
        const y0 = (b.top + b.bottom) / 2 - stageBox.top;
        const cx = x0 + (eLeft - x0) * 0.5;
        return `M ${x0} ${y0} C ${cx} ${y0}, ${cx} ${eMidY}, ${eLeft} ${eMidY}`;
      }).
      filter(Boolean);

      const outPaths = channelRefs.current.
      map((el) => {
        if (!el) return null;
        const b = el.getBoundingClientRect();
        const x1 = b.left - stageBox.left;
        const y1 = (b.top + b.bottom) / 2 - stageBox.top;
        const cx = eRight + (x1 - eRight) * 0.5;
        return `M ${eRight} ${eMidY} C ${cx} ${eMidY}, ${cx} ${y1}, ${x1} ${y1}`;
      }).
      filter(Boolean);

      setPaths({ inPaths, outPaths, engineCx: eMidX, engineCy: eMidY, width: stageBox.width, height: stageBox.height });
    }

    measure();
    const timers = [50, 200, 500, 1000].map((t) => setTimeout(measure, t));
    const ro = new ResizeObserver(measure);
    if (stageRef.current) ro.observe(stageRef.current);
    if (engineRef.current) ro.observe(engineRef.current);
    signalRefs.current.forEach((el) => el && ro.observe(el));
    channelRefs.current.forEach((el) => el && ro.observe(el));
    window.addEventListener('resize', measure);
    return () => {
      timers.forEach(clearTimeout);
      ro.disconnect();
      window.removeEventListener('resize', measure);
    };
  }, []);

  return (
    <section ref={ref} className="slide slide-hero" data-label="Signal flow">
      <BeeMark />
      <div className="bg-grid" />

      <div className="hero-header">
        <div className="label">SECTION 06 · HOW WE THINK</div>
        <h2 className="h-title" style={{ fontSize: 52, fontWeight: 500, marginTop: 18 }}>
          Hundreds of signals. One engine. <span className="h-italic">Three synchronized channels.</span>
        </h2>
      </div>

      <div className="hero-grid" ref={stageRef}>
        {/* Column 1: signals */}
        <div className="hero-col hero-col--signals">
          <div className="label" style={{ marginBottom: 22 }}>01 · INTENT SIGNALS</div>
          <div className="signal-list">
            {SIGNALS.map((s, i) =>
            <div
              key={s}
              ref={(el) => {signalRefs.current[i] = el;}}
              className="signal-card in"
              style={{ transitionDelay: `${i * 55}ms`, '--fanX': `${SIGNAL_FAN[i] ?? 0}px` }}>

                <span className="signal-dot pulse-dot" style={{ animationDelay: `${i % 6 * 180}ms` }} />
                <span className="signal-label">{s}</span>
                <span className="signal-meter">
                  <span className="meter-bar" style={{ width: `${30 + i * 7 % 65}%` }} />
                </span>
              </div>
            )}
          </div>
        </div>

        {/* SVG layer for connecting lines + particles (measured at runtime) */}
        <svg
          className="hero-lines"
          width={paths.width || 1}
          height={paths.height || 1}
          viewBox={`0 0 ${Math.max(1, paths.width)} ${Math.max(1, paths.height)}`}
          preserveAspectRatio="none">

          <defs>
            <linearGradient id="lineGradIn" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="#F58C4B" stopOpacity="0" />
              <stop offset="40%" stopColor="#F58C4B" stopOpacity="0.35" />
              <stop offset="100%" stopColor="#F58C4B" stopOpacity="0.7" />
            </linearGradient>
            <linearGradient id="lineGradOut" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="#F58C4B" stopOpacity="0.7" />
              <stop offset="60%" stopColor="#F58C4B" stopOpacity="0.35" />
              <stop offset="100%" stopColor="#F58C4B" stopOpacity="0" />
            </linearGradient>
            <radialGradient id="engineGlow" cx="0.5" cy="0.5" r="0.5">
              <stop offset="0%" stopColor="#F58C4B" stopOpacity="0.35" />
              <stop offset="60%" stopColor="#F58C4B" stopOpacity="0.08" />
              <stop offset="100%" stopColor="#F58C4B" stopOpacity="0" />
            </radialGradient>
          </defs>

          {paths.engineCx > 0 &&
          <ellipse cx={paths.engineCx} cy={paths.engineCy} rx="280" ry="240" fill="url(#engineGlow)" />
          }

          {paths.inPaths.map((d, i) =>
          <g key={'in' + i}>
              <path
              d={d}
              fill="none"
              stroke="url(#lineGradIn)"
              strokeWidth="1.2"
              className="flow-line in"
              style={{ transitionDelay: `${i * 40}ms` }} />

              {state >= 1 &&
            <circle r="2.5" fill="#F58C4B" className="particle particle--in">
                  <animateMotion dur={`${1.4 + i % 4 * 0.3}s`} repeatCount="indefinite" path={d} begin={`${i * 0.12}s`} />
                  <animate attributeName="opacity" values="0;1;1;0" dur={`${1.4 + i % 4 * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.12}s`} />
                </circle>
            }
            </g>
          )}

          {paths.outPaths.map((d, i) =>
          <g key={'out' + i}>
              <path
              d={d}
              fill="none"
              stroke="url(#lineGradOut)"
              strokeWidth="1.5"
              className="flow-line in"
              style={{ transitionDelay: `${i * 90}ms` }} />

              {state >= 2 &&
            <circle r="3" fill="#F58C4B" className="particle particle--out">
                  <animateMotion dur={`${1.2 + i * 0.15}s`} repeatCount="indefinite" path={d} begin={`${i * 0.25}s`} />
                  <animate attributeName="opacity" values="0;1;1;0" dur={`${1.2 + i * 0.15}s`} repeatCount="indefinite" begin={`${i * 0.25}s`} />
                </circle>
            }
            </g>
          )}
        </svg>

        {/* Column 2: engine */}
        <div className="hero-col hero-col--engine">
          <div className="label" style={{ textAlign: 'center', marginBottom: 22 }}>02 · THE STACK</div>
          <div className="engine-card ignited" ref={engineRef}>
            <div className="engine-label">BUZZLEAD</div>
            <div className="engine-sub">Enrichment · Verification · Match</div>
            <div className="engine-tools">
              {STACK_TOOLS.map((t, i) =>
              <div key={t} className="engine-tool in" style={{ transitionDelay: `${i * 70}ms` }}>
                  {t}
                </div>
              )}
            </div>
            <div className="engine-readout">
              <div className="readout-row">
                <span>ICP match</span><span className="readout-val">94.2%</span>
              </div>
              <div className="readout-row">
                <span>Enriched</span><span className="readout-val">31 DB</span>
              </div>
              <div className="readout-row">
                <span>Verified</span><span className="readout-val">LIVE</span>
              </div>
            </div>
          </div>
        </div>

        {/* Column 3: outreach */}
        <div className="hero-col hero-col--outreach">
          <div className="label" style={{ marginBottom: 22 }}>03 · SYNCHRONIZED OUTREACH</div>
          <div className="outreach-list">
            <OutreachCard
              cardRef={(el) => {channelRefs.current[0] = el;}}
              channel="EMAIL"
              kicker="Subject: Re: your SDR job post"
              body={`Noticed you opened 3 SDR reqs after the Series B — we help teams like Acme skip the 90-day ramp entirely.`}
              show={true}
              delay={0} />

            <OutreachCard
              cardRef={(el) => {channelRefs.current[1] = el;}}
              channel="LINKEDIN"
              kicker="Connection + DM"
              body={`Saw the team just hired 2 AEs in 30 days. Worth a 15-min on how we fill their calendars before month one?`}
              show={true}
              delay={180} />

            <OutreachCard
              cardRef={(el) => {channelRefs.current[2] = el;}}
              channel="COLD CALL"
              kicker="Intent-matched dial"
              body={`Hey — I'm calling because Acme opened SDR reqs after funding. Thirty seconds on what we do and I'll let you go.`}
              show={true}
              delay={360} />

          </div>
        </div>
      </div>

      <SlideFooter n={6} total={TOTAL} title="SIGNAL FLOW" />
      <StateHint state={state} max={2} />
    </section>);

}

function OutreachCard({ channel, kicker, body, show, delay, cardRef }) {
  return (
    <div ref={cardRef} className={`outreach-card ${show ? 'in' : ''}`} style={{ transitionDelay: show ? `${delay}ms` : '0ms' }}>
      <div className="outreach-head">
        <span className="outreach-ch">{channel}</span>
        <span className="outreach-dot" />
      </div>
      <div className="outreach-kicker">{kicker}</div>
      <div className="outreach-body">
        {show && <Typewriter text={body} active={show} startDelay={delay + 220} speed={TIMING.typewriter} />}
      </div>
    </div>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 03 · PROOF
// ═══════════════════════════════════════════════════════
function Slide03Proof() {
  const ref = useRef(null);
  const state = useSlideState(0, ref);
  const [entered, setEntered] = useState(false);
  useEffect(() => {
    const deck = document.querySelector('deck-stage');
    const onCh = (e) => {
      if (e.detail.slide === ref.current) {setEntered(false);setTimeout(() => setEntered(true), 80);}
    };
    deck?.addEventListener('slidechange', onCh);
    setTimeout(() => setEntered(true), 120);
    return () => deck?.removeEventListener('slidechange', onCh);
  }, []);

  const metrics = [
  { label: 'CLOSED REVENUE', value: 8, prefix: '$', suffix: 'M+', format: (n) => n },
  { label: 'COLD EMAILS SENT', value: 10, suffix: 'M+', format: (n) => n },
  { label: 'COMMUNITY MEMBERS', value: 600, suffix: '+', format: (n) => n.toLocaleString() },
  { label: 'INDUSTRIES SERVED', value: 20, suffix: '+', format: (n) => n }];


  return (
    <section ref={ref} className="slide slide-proof" data-label="Proof">
      <BeeMark />
      <div className="proof-head">
        <div className="label">SECTION 02 · PROOF</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500, maxWidth: 1200 }}>
          Four years. <span className="h-italic">Verified numbers.</span>
        </h2>
      </div>

      <div className="proof-grid">
        {metrics.map((m, i) =>
        <div key={i} className="proof-cell">
            <div className="proof-label label">{m.label}</div>
            <div className="proof-number">
              {m.prefix || ''}
              <Counter value={m.value} format={m.format} active={entered} duration={1200} />
              {m.suffix || ''}
            </div>
            <div className="proof-rule" />
          </div>
        )}
      </div>

      <SlideFooter n={2} total={TOTAL} title="PROOF" />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 04 · THE PROBLEM
// ═══════════════════════════════════════════════════════
function Slide04Problem() {
  const ref = useRef(null);
  const state = useSlideState(0, ref);

  const rows = [
  { n: '01', title: 'Unpredictable lead flow', desc: 'Pipeline is feast-or-famine. Month-to-month revenue is a coin flip.', icon: 'pulse' },
  { n: '02', title: 'Over-reliance on referrals', desc: 'Growth plateaus the moment your best customers stop talking.', icon: 'node' },
  { n: '03', title: 'Costly, unpredictable paid growth', desc: 'CAC keeps climbing on paid and SEO, with no clear ROI.', icon: 'chart' },
  { n: '04', title: 'Previous partners who didn\'t deliver', desc: 'Burned by generic campaigns, template sequences, and missing reporting.', icon: 'x' }];


  return (
    <section ref={ref} className="slide slide-problem" data-label="Problem">
      <BeeMark />
      <div className="problem-head">
        <div className="label">SECTION 03 · THE PROBLEM</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          The four places you might be <span className="h-italic">stuck.</span>
        </h2>
      </div>

      <div className="problem-rows">
        {rows.map((r, i) =>
        <div
          key={r.n}
          className="problem-row in"
          style={{ transitionDelay: `${i * 120}ms` }}>
          
            <div className="problem-row-n mono">{r.n}</div>
            <div className="problem-row-icon">
              <ProblemIcon kind={r.icon} />
            </div>
            <div className="problem-row-title">{r.title}</div>
            <div className="problem-row-desc">{r.desc}</div>
          </div>
        )}
      </div>

      <SlideFooter n={3} total={TOTAL} title="PROBLEM" />
    </section>);

}

function ProblemIcon({ kind }) {
  const common = { stroke: '#F58C4B', strokeWidth: 1.5, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (kind === 'pulse') return (
    <svg width="48" height="48" viewBox="0 0 48 48"><path d="M4 24 L14 24 L18 12 L24 36 L30 20 L34 24 L44 24" {...common} /></svg>);

  if (kind === 'node') return (
    <svg width="48" height="48" viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="6" {...common} /><circle cx="8" cy="10" r="3" {...common} /><circle cx="40" cy="10" r="3" {...common} /><circle cx="8" cy="38" r="3" {...common} /><circle cx="40" cy="38" r="3" {...common} />
      <path d="M11 12 L19 22 M37 12 L29 22 M11 36 L19 26 M37 36 L29 26" {...common} />
    </svg>);

  if (kind === 'chart') return (
    <svg width="48" height="48" viewBox="0 0 48 48">
      <path d="M6 40 L6 8 M6 40 L42 40" {...common} />
      <path d="M12 32 L20 24 L26 28 L36 14" {...common} /><circle cx="36" cy="14" r="2.5" {...common} fill="#F58C4B" />
    </svg>);

  // x
  return (
    <svg width="48" height="48" viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="16" {...common} />
      <path d="M16 16 L32 32 M32 16 L16 32" {...common} />
    </svg>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 05 · OUR PROCESS (5 stations)
// ═══════════════════════════════════════════════════════
const STATIONS = [
{ n: '01', label: 'Infrastructure', detail: 'We optimize email infrastructure to 95–98% deliverability before a single message goes out. Domains, inboxes, warm-up, DNS, TryKitt verification. Your sender reputation gets engineered, not gambled.', beat: 'First we lock in deliverability — 95 to 98 percent inbox placement before we send anything.' },
{ n: '02', label: 'Audiences', detail: 'We don\'t run one generic list. We pull multiple ICP-fit audiences across firmographics, technographics, and intent — so we can test which segments actually convert.', beat: 'We find several different audiences that fit your ICP, not just one generic list.' },
{ n: '03', label: 'Research', detail: 'Deep dive on every business and persona before we write a word. Pain points, recent triggers, hiring signals, competitor moves. AI-augmented, human-reviewed.', beat: 'We do deep research on each business and persona — what pain points they\'re running into, what triggered them recently.' },
{ n: '04', label: 'Engage', detail: 'Personalized emails go out at scale. Real conversations, not spam blasts. Spintax variations, framework rotation, reply triggers — we A/B everything.', beat: 'Personalized emails go out and engage individuals — real conversations, not spam.' },
{ n: '05', label: 'Book', detail: 'We handle objection rounds, qualify replies, and book the meeting straight to your calendar. You show up to closeable calls. That\'s it.', beat: 'We handle objections and book the meetings. All you do is attend the call.' }];


function Slide05Process() {
  const ref = useRef(null);
  const state = useSlideState(STATIONS.length, ref);

  // On entry (state 0) the active station is the first; arrow keys cycle through 1..7.
  const active = Math.max(0, Math.min(state, STATIONS.length) - 1);

  return (
    <section ref={ref} className="slide slide-process" data-label="Process">
      <BeeMark />
      <div className="process-head">
        <div className="label">SECTION 04 · OUR PROCESS</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          Five steps. From cold to <span className="h-italic">closeable.</span>
        </h2>
      </div>

      <div className="process-timeline">
        <div className="timeline-track">
          <div className="timeline-fill" style={{ width: `${Math.max(1, state) / STATIONS.length * 100}%` }} />
          {STATIONS.map((s, i) =>
          <div key={s.n} className="timeline-node-wrap" style={{ left: `${(i + 0.5) / STATIONS.length * 100}%` }}>
              <div className={`timeline-node ${i <= active ? 'active' : ''}`}>
                <div className="timeline-node-n mono">{s.n}</div>
              </div>
              <div className={`timeline-node-label ${i <= active ? 'active' : ''}`}>{s.label}</div>
            </div>
          )}
        </div>
      </div>

      <div className="process-cards">
        {STATIONS.map((s, i) =>
        <div
          key={s.n}
          className={`process-card in ${active === i ? 'current' : ''}`}
          style={{ transitionDelay: `${i * 40}ms` }}>
          
            <div className="process-card-n mono">{s.n}</div>
            <div className="process-card-title">{s.label}</div>
            <div className="process-card-detail">{s.detail}</div>
          </div>
        )}
      </div>

      <div className={`process-tagline mono ${state >= 1 ? 'in' : ''}`}>
        <span className="process-tagline-dot" />
        <span>Every step is data-driven. Full transparency, end-to-end.</span>
      </div>

      <SlideFooter n={4} total={TOTAL} title="PROCESS" />
      <StateHint state={state} max={STATIONS.length} />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 06 · CAMPAIGN STRATEGY (3 plays in parallel)
// ═══════════════════════════════════════════════════════
const PLAYS = [
{
  n: '01',
  title: 'Lookalikes',
  tactic: 'Your best customers, cloned at scale.',
  items: [
  'Pull renewal + referral source data',
  'Score across 40+ firmographic + behavioral attributes',
  'Generate look-alike list of net-new accounts'],

  metric: 'FASTEST_PATH_TO_WINS'
},
{
  n: '02',
  title: 'Intent signals',
  tactic: "Buyers showing they're in-market, right now.",
  items: [
  'Funding rounds, hiring surges, exec changes',
  'Tech stack adds, M&A, product launches',
  'Outreach triggered within 48 hours of signal'],

  metric: 'HIGHEST_REPLY_RATE'
},
{
  n: '03',
  title: 'TAM',
  tactic: 'Top of funnel kept wide.',
  items: [
  'Full addressable market mapping',
  'Multi-segment campaign rotation',
  'A/B testing across messaging frameworks'],

  metric: 'WIDEST_REACH'
}];


function Slide06CampaignStrategy() {
  const ref = useRef(null);
  const state = useSlideState(0, ref);

  return (
    <section ref={ref} className="slide slide-plays" data-label="Campaign strategy">
      <BeeMark />
      <div className="plays-head">
        <div className="label">SECTION 05 · CAMPAIGN STRATEGY</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          Three plays. Running <span className="h-italic">in parallel.</span>
        </h2>
        <div className="plays-sub mono">// We don't pick one. We run all three at once.</div>
      </div>

      <div className="plays-grid">
        {PLAYS.map((p, i) =>
        <div key={p.n} className="play-card in" style={{ transitionDelay: `${i * 140}ms` }}>
            <div className="play-card-top">
              <div className="play-card-n mono">{p.n}</div>
              <div className="play-card-title">{p.title}</div>
            </div>
            <div className="play-card-tactic">{p.tactic}</div>
            <div className="play-card-rule" />
            <ul className="play-card-items">
              {p.items.map((it, j) =>
            <li key={j}>
                  <span className="play-tick" />
                  <span>{it}</span>
                </li>
            )}
            </ul>
            <div className="play-card-metric mono">{p.metric}</div>
          </div>
        )}
      </div>

      <div className="plays-footnote mono">
        <span className="plays-footnote-dot" />
        Lookalikes find quick wins. Intent finds the in-market 3%. TAM keeps the funnel full. Together they compound.
      </div>

      <SlideFooter n={5} total={TOTAL} title="CAMPAIGN STRATEGY" />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 07 · THE $150K TECH STACK
// ═══════════════════════════════════════════════════════
const STACK_ALL = [
{ name: 'EmailBison', note: 'Deliverability + send infra', core: true },
{ name: 'Clay', note: 'Enrichment waterfalls', core: true },
{ name: 'AI-ARK', note: 'AI copy + iteration', core: true },
{ name: 'Close', note: 'CRM + reply routing', core: true },
{ name: 'JustCall', note: 'Cold dial + transcription', core: true },
{ name: 'TryKitt', note: 'Email verification', core: true },
{ name: 'EXA', note: 'Deep market research' },
{ name: 'Apify', note: 'Custom data scrapers' },
{ name: 'RB2B', note: 'Website visitor tracking' },
{ name: 'LinkedIn Sales Nav', note: 'Account signals' },
{ name: 'HeyReach', note: 'LinkedIn automation' },
{ name: 'Trigify', note: 'Event triggers' },
{ name: 'Common Room', note: 'Community signals' },
{ name: 'Ocean.io', note: 'Lookalike ICP' },
{ name: 'EmailGuard', note: 'Email hygiene' },
{ name: 'Hunter', note: 'Domain discovery' },
{ name: 'Twilio', note: 'Calling infrastructure' },
{ name: 'Claude Code', note: 'Customer data scrapers', lastCol: true }];


function Slide07Stack() {
  const ref = useRef(null);
  const state = useSlideState(1, ref);

  return (
    <section ref={ref} className="slide slide-stack" data-label="Tech stack">
      <BeeMark />
      <div className="stack-head">
        <div className="label">SECTION 07 · THE STACK</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          The stack we run on <span className="h-italic">your behalf.</span>
        </h2>
        <div className="stack-sub body body--dim" style={{ marginTop: 22, maxWidth: 820 }}>
          Four years assembling the operator-grade tools we use every day. You get access to all of it, managed by the people who actually run it.
        </div>
      </div>

      <div className="stack-grid">
        {STACK_ALL.map((t, i) =>
        <div
          key={t.name}
          className={`stack-tile in ${state >= 1 && t.core ? 'core' : ''} ${state >= 1 && !t.core ? 'dim' : ''}`}
          style={{
            transitionDelay: `${i % 9 * 90}ms`,
            ...(t.lastCol ? { gridColumn: 6 } : {})
          }}>
          
            <div className="stack-tile-name">{t.name}</div>
            <div className="stack-tile-note">{t.note}</div>
            {t.core && <div className="stack-tile-tag">CORE</div>}
          </div>
        )}
      </div>

      <div className="stack-callout in">
        <div className="stack-callout-num">$150K+</div>
        <div className="stack-callout-text">
          <div>In annual software, managed for you.</div>
          <div className="body body--dim" style={{ fontSize: 18, marginTop: 4 }}>One partnership. Zero procurement cycles.</div>
        </div>
      </div>

      <SlideFooter n={7} total={TOTAL} title="TECH STACK" />
      <StateHint state={state} max={1} />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 08 · 90-DAY TIMELINE
// ═══════════════════════════════════════════════════════
function Slide08Timeline() {
  const ref = useRef(null);
  const state = useSlideState(1, ref);

  const months = [
  {
    n: 1, phase: 'TEST',
    tagline: 'Find what resonates',
    items: ['3–5 campaigns live across ICPs', 'Message-market fit hypotheses', 'First qualified meetings booked', 'Reply tone & objection mapping']
  },
  {
    n: 2, phase: 'SCALE',
    tagline: 'Double down on winners',
    items: ['Shut down losing plays', 'New ICP segments rotated in', 'Volume on top-performing messages', 'High-intent signals go live']
  },
  {
    n: 3, phase: 'SUSTAIN',
    tagline: 'Pipeline compounds',
    items: ['Message-market fit locked', 'Intent triggers fully automated', 'Predictable weekly meeting cadence', 'Handoff to your AE team tuned']
  }];


  return (
    <section ref={ref} className="slide slide-timeline" data-label="90 days">
      <BeeMark />
      <div className="timeline-head">
        <div className="label">SECTION 08 · THE FIRST 90 DAYS</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          Three months. <span className="h-italic">One trajectory.</span>
        </h2>
      </div>

      <div className="timeline-columns">
        {months.map((m, i) =>
        <div key={m.n} className="timeline-column in" style={{ transitionDelay: `${i * 140}ms` }}>
            <div className="timeline-col-month mono">MONTH {String(m.n).padStart(2, '0')}</div>
            <div className="timeline-col-phase">{m.phase}</div>
            <div className="timeline-col-tagline">{m.tagline}</div>
            <div className="timeline-col-rule" />
            <ul className="timeline-col-items">
              {m.items.map((it, j) =>
            <li key={j}>
                  <span className="timeline-tick" />
                  <span>{it}</span>
                </li>
            )}
            </ul>
          </div>
        )}
      </div>

      <div className={`guarantee-bar ${state >= 1 ? 'in' : ''}`}>
        <div className="guarantee-stamp">
          <div className="guarantee-stamp-top mono">90-DAY GUARANTEE</div>
          <div className="guarantee-stamp-num">40+</div>
          <div className="guarantee-stamp-bot mono">QUALIFIED APPOINTMENTS</div>
        </div>
        <div className="guarantee-text">
          40 qualified appointments in your first 90 days, <span className="h-italic">or we keep working for free</span> until you hit the number.
        </div>
      </div>

      <SlideFooter n={8} total={TOTAL} title="90-DAY TIMELINE" />
      <StateHint state={state} max={1} />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 09 · HOW WE WORK TOGETHER
// ═══════════════════════════════════════════════════════
const WORK_STAGES = [
{
  n: '01',
  title: 'Onboarding',
  detail: 'Complete intake form captures ICP, messaging angles, campaign goals, and best-fit case studies.',
  icon: 'clipboard'
},
{
  n: '02',
  title: 'Strategy call',
  detail: 'Internal GTM team digs into your business, analyzes your market, and maps the exact approach.',
  icon: 'strategy'
},
{
  n: '03',
  title: 'Kickoff',
  detail: 'Walk through campaign setup, messaging, and timeline together. You approve before launch.',
  icon: 'rocket'
},
{
  n: '04',
  title: 'Customer portal',
  detail: '24/7 dashboard. Real-time replies, meetings booked, lead activity. No black box.',
  icon: 'dashboard'
},
{
  n: '05',
  title: 'Weekly updates',
  detail: 'Your CSM sends a detailed breakdown of what\u2019s working, what we\u2019re testing, where we\u2019re optimizing.',
  icon: 'calendar'
},
{
  n: '06',
  title: 'Monthly reviews',
  detail: 'Results review, new opportunities, next-phase planning \u2014 every 30 days, on the calendar.',
  icon: 'cycle'
}];


function WorkIcon({ kind }) {
  const stroke = '#FE8A4F';
  const sw = 1.5;
  switch (kind) {
    case 'clipboard':
      return (
        <svg viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw}>
          <rect x="7" y="6" width="18" height="22" rx="1" />
          <rect x="11" y="3" width="10" height="5" rx="1" />
          <line x1="11" y1="14" x2="21" y2="14" />
          <line x1="11" y1="19" x2="21" y2="19" />
          <line x1="11" y1="24" x2="17" y2="24" />
        </svg>);

    case 'strategy':
      return (
        <svg viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw}>
          <circle cx="16" cy="16" r="3" />
          <circle cx="6" cy="8" r="2" />
          <circle cx="26" cy="8" r="2" />
          <circle cx="6" cy="24" r="2" />
          <circle cx="26" cy="24" r="2" />
          <line x1="8" y1="9" x2="13.5" y2="14.5" />
          <line x1="24" y1="9" x2="18.5" y2="14.5" />
          <line x1="8" y1="23" x2="13.5" y2="17.5" />
          <line x1="24" y1="23" x2="18.5" y2="17.5" />
        </svg>);

    case 'rocket':
      return (
        <svg viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw}>
          <path d="M16 4 c5 4 7 9 7 14 l-3 3 h-8 l-3 -3 c0 -5 2 -10 7 -14 z" />
          <circle cx="16" cy="13" r="2.2" />
          <path d="M11 22 l-3 4 l4 -1 z" />
          <path d="M21 22 l3 4 l-4 -1 z" />
        </svg>);

    case 'dashboard':
      return (
        <svg viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw}>
          <rect x="4" y="6" width="24" height="20" rx="1.5" />
          <line x1="4" y1="12" x2="28" y2="12" />
          <rect x="8" y="16" width="4" height="6" />
          <rect x="14" y="14" width="4" height="8" />
          <rect x="20" y="18" width="4" height="4" />
        </svg>);

    case 'calendar':
      return (
        <svg viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw}>
          <rect x="5" y="7" width="22" height="20" rx="1.5" />
          <line x1="5" y1="13" x2="27" y2="13" />
          <line x1="11" y1="4" x2="11" y2="9" />
          <line x1="21" y1="4" x2="21" y2="9" />
          <path d="M12 19 l3 3 l5 -6" />
        </svg>);

    case 'cycle':
      return (
        <svg viewBox="0 0 32 32" fill="none" stroke={stroke} strokeWidth={sw}>
          <path d="M7 16 a9 9 0 0 1 15 -6.5" />
          <polyline points="22,4 22,10 16,10" />
          <path d="M25 16 a9 9 0 0 1 -15 6.5" />
          <polyline points="10,28 10,22 16,22" />
        </svg>);

    default:
      return null;
  }
}

function Slide09HowWeWork() {
  const ref = useRef(null);
  const state = useSlideState(0, ref);

  return (
    <section ref={ref} className="slide slide-work" data-label="How we work">
      <BeeMark />
      <div className="work-head">
        <div className="label">SECTION 09 · HOW WE WORK TOGETHER</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          Built-in <span className="h-italic">feedback loops.</span>
        </h2>
        <div className="work-sub mono">// Six checkpoints. Zero guesswork.</div>
      </div>

      <div className="work-grid">
        {WORK_STAGES.map((s, i) => {
          const row = Math.floor(i / 3);
          const col = i % 3;
          const delay = (row * 3 + col) * 90;
          return (
            <div key={s.n} className="work-card in" style={{ transitionDelay: `${delay}ms` }}>
              <div className="work-card-icon"><WorkIcon kind={s.icon} /></div>
              <div className="work-card-n mono">{s.n}</div>
              <div className="work-card-title">{s.title}</div>
              <div className="work-card-detail">{s.detail}</div>
            </div>);

        })}
      </div>

      <div className="work-footnote mono">
        <span className="work-footnote-dot" />
        // CSM assigned in week 1. You'll know their name before launch.
      </div>

      <SlideFooter n={9} total={TOTAL} title="HOW WE WORK" />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 10 · CASE STUDIES
// ═══════════════════════════════════════════════════════
const CASES = [
{
  name: 'Product EVO',
  industry: 'B2B SaaS · Operations',
  lead: { n: 90, prefix: '$', suffix: 'K', label: 'PROFIT CLOSED' },
  stats: [
  { k: '8', v: 'deals closed' },
  { k: '27', v: 'deals in pipeline' },
  { k: '4 mo', v: 'engagement' }],

  quote: '"The pipeline they built in four months is what my old SDR team couldn\'t build in a year."'
},
{
  name: 'Forever Fierce',
  industry: 'Commerce · Brand strategy',
  lead: { n: 75, prefix: '$', suffix: 'K+', label: 'MONTHLY REVENUE' },
  stats: [
  { k: '25+', v: 'qualified leads / mo' },
  { k: '$20K', v: 'recent single deal' },
  { k: 'B2B', v: 'expansion' }],

  quote: '"Our calendar stays full. I stopped worrying about where next month\'s meetings come from."'
},
{
  name: 'Perkin Industries',
  industry: 'Channel · B2C → B2B',
  lead: { n: 1, prefix: '$', suffix: 'M', label: 'CLOSED IN 4 MO' },
  stats: [
  { k: '$2.8M+', v: 'pipeline built' },
  { k: 'Channel Partners', v: 'pivot landed' },
  { k: '3x', v: 'meeting volume' }],

  quote: '"They rebuilt our GTM motion from B2C to B2B without losing a quarter."'
}];


function Slide10Cases() {
  const ref = useRef(null);
  const state = useSlideState(0, ref);

  return (
    <section ref={ref} className="slide slide-cases" data-label="Case studies">
      <BeeMark />
      <div className="cases-head">
        <div className="label">SECTION 10 · CASE STUDIES</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          Three recent <span className="h-italic">wins.</span>
        </h2>
      </div>

      <div className="cases-grid">
        {CASES.map((c, i) =>
        <div key={c.name} className="case-card in" style={{ transitionDelay: `${i * 120}ms` }}>
            <div className="case-card-head">
              <div className="case-card-name">{c.name}</div>
              <div className="case-card-industry label">{c.industry}</div>
            </div>

            <div className="case-card-lead">
              <div className="case-card-lead-label label">{c.lead.label}</div>
              <div className="case-card-lead-num">
                {c.lead.prefix}
                <Counter value={c.lead.n} active={true} duration={1200} format={(n) => n} />
                {c.lead.suffix}
              </div>
            </div>

            <div className="case-card-stats">
              {c.stats.map((s, j) =>
            <div key={j} className="case-card-stat">
                  <div className="case-card-stat-k">{s.k}</div>
                  <div className="case-card-stat-v label">{s.v}</div>
                </div>
            )}
            </div>

            <div className="case-card-quote">{c.quote}</div>
          </div>
        )}
      </div>

      <SlideFooter n={10} total={TOTAL} title="CASE STUDIES" />
    </section>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 11 · FULL TRANSPARENCY (placeholder for dashboard)
// ═══════════════════════════════════════════════════════
function Slide11Transparency() {
  const ref = useRef(null);
  const state = useSlideState(1, ref);
  const [replyFlash, setReplyFlash] = useState(false);

  useEffect(() => {
    if (state >= 1) {
      setReplyFlash(true);
      const t = setTimeout(() => setReplyFlash(false), 2200);
      return () => clearTimeout(t);
    }
  }, [state]);

  return (
    <section ref={ref} className="slide slide-transp" data-label="Transparency">
      <BeeMark />
      <div className="transp-left">
        <div className="label">SECTION 11 · TRANSPARENCY</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          No PDFs. <span className="h-italic">Live dashboard.</span>
        </h2>
        <div className="transp-list">
          <TranspLi>Every reply, every meeting booked, every active lead — updated in real time.</TranspLi>
          <TranspLi>Weekly PDF updates from your dedicated CS lead.</TranspLi>
          <TranspLi>Monthly strategy calls. You always know where you stand.</TranspLi>
        </div>
              </div>

      <div className="transp-right">
        <DashboardMock state={state} replyFlash={replyFlash} />
      </div>

      <SlideFooter n={11} total={TOTAL} title="TRANSPARENCY" />
      <StateHint state={state} max={1} />
    </section>);

}

function TranspLi({ children }) {
  return (
    <div className="transp-li">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12.5 L10 17 L19 7" stroke="#F58C4B" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
      <span>{children}</span>
    </div>);

}

function DashboardMock({ state, replyFlash }) {
  const [live, setLive] = useState(247);
  useEffect(() => {
    const id = setInterval(() => setLive((n) => n + 1), 3000);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="dash in">
      <div className="dash-chrome">
        <div className="dash-dots"><span /><span /><span /></div>
        <div className="dash-url mono">buzzlead.io/pipeline · Client -2026</div>
        <div className="dash-live mono"><span className="dash-live-dot pulse-dot" /> LIVE</div>
      </div>
      <div className="dash-body">
        <div className="dash-kpis">
          <div className="dash-kpi"><div className="dash-kpi-k">{live}</div><div className="dash-kpi-v">Replies · 30d</div></div>
          <div className="dash-kpi"><div className="dash-kpi-k">42</div><div className="dash-kpi-v">Meetings booked</div></div>
          <div className="dash-kpi"><div className="dash-kpi-k">1,883</div><div className="dash-kpi-v">Active leads</div></div>
          <div className="dash-kpi"><div className="dash-kpi-k">6.2%</div><div className="dash-kpi-v">Reply rate</div></div>
        </div>

        <div className="dash-main">
          <div className="dash-panel">
            <div className="dash-panel-head">
              <span>Meetings booked · 30d</span>
              <span className="label mono" style={{ color: 'var(--orange)' }}>+31% MoM</span>
            </div>
            <svg viewBox="0 0 420 140" className="dash-chart" preserveAspectRatio="none">
              <defs>
                <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#F58C4B" stopOpacity="0.35" />
                  <stop offset="100%" stopColor="#F58C4B" stopOpacity="0" />
                </linearGradient>
              </defs>
              <path d="M0 110 L30 100 L60 105 L90 90 L120 88 L150 72 L180 75 L210 60 L240 55 L270 42 L300 38 L330 32 L360 24 L390 20 L420 15 L420 140 L0 140 Z" fill="url(#chartFill)" />
              <path d="M0 110 L30 100 L60 105 L90 90 L120 88 L150 72 L180 75 L210 60 L240 55 L270 42 L300 38 L330 32 L360 24 L390 20 L420 15" fill="none" stroke="#F58C4B" strokeWidth="2" />
            </svg>
          </div>

          <div className="dash-panel">
            <div className="dash-panel-head">
              <span>Recent replies</span>
              <span className="label mono" style={{ color: 'var(--text-3)' }}>Live feed</span>
            </div>
            <div className="dash-feed">
              <div className={`dash-feed-row ${replyFlash ? 'flash' : ''}`}>
                <span className="dash-avatar">MK</span>
                <div>
                  <div className="dash-feed-name">Marcus K. · VP Sales, Ridgeline</div>
                  <div className="dash-feed-msg">"Interested — can we do Thursday 2pm?"</div>
                </div>
                <div className="dash-feed-time mono">just now</div>
              </div>
              <div className="dash-feed-row">
                <span className="dash-avatar">JT</span>
                <div>
                  <div className="dash-feed-name">Jenna T. · CRO, Fieldsy</div>
                  <div className="dash-feed-msg">"Send the case study on the SDR ramp."</div>
                </div>
                <div className="dash-feed-time mono">14m</div>
              </div>
              <div className="dash-feed-row">
                <span className="dash-avatar">DA</span>
                <div>
                  <div className="dash-feed-name">Derek A. · Founder, Loom Labs</div>
                  <div className="dash-feed-msg">"Worth a 15. Send a calendar link."</div>
                </div>
                <div className="dash-feed-time mono">1h</div>
              </div>
              <div className="dash-feed-row">
                <span className="dash-avatar">SR</span>
                <div>
                  <div className="dash-feed-name">Sam R. · Head of GTM, Parseq</div>
                  <div className="dash-feed-msg">"Not right now, but keep me warm."</div>
                </div>
                <div className="dash-feed-time mono">3h</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>);

}

// ═══════════════════════════════════════════════════════
// SLIDE 12 · PACKAGES + CLOSE
// ═══════════════════════════════════════════════════════
function Slide12Packages() {
  const ref = useRef(null);
  const state = useSlideState(2, ref);

  const tiers = [
  {
    name: 'Minimum', price: '$4K', period: '/mo',
    impl: '+ $1.5K implementation', implColor: '#FFFFFF',
    items: ['Cold email', 'Self-managed inbox', 'CRM Integration', 'Interested subsequences']
  },
  {
    name: 'Pro', price: '$5K', period: '/mo', featured: true,
    impl: '+ $2K implementation',
    items: ['Everything in Minimum', 'Inbox Manager', 'Warm calling', 'High-intent signal triggers']
  },
  {
    name: 'Enterprise', price: '$10.5K', period: '/mo',
    impl: '+ $3K implementation', implColor: '#F5EBEB',
    items: ['Everything in Pro', 'Dedicated SDR: warm and cold calling', 'LinkedIn outreach from 3 accounts', 'Website visitor retargeting', 'CRM attribution']
  }];


  return (
    <section ref={ref} className="slide slide-packages" data-label="Packages">
      <BeeMark />
      <div className="pkg-head">
        <div className="label">SECTION 12 · PACKAGES</div>
        <h2 className="h-title" style={{ marginTop: 18, fontWeight: 500 }}>
          Three ways to <span className="h-italic">start.</span>
        </h2>
      </div>

      <div className="pkg-grid">
        {tiers.map((t, i) =>
        <div key={t.name} className={`pkg-card in ${t.featured && state >= 1 ? 'featured' : ''}`} style={{ transitionDelay: `${i * 120}ms` }}>
            {t.featured && state >= 1 && <div className="pkg-badge">MOST CHOSEN</div>}
            <div className="pkg-name">{t.name}</div>
            <div className="pkg-price">
              <span className="pkg-price-num">{t.price}</span>
              <span className="pkg-price-per">{t.period}</span>
            </div>
            <div className="pkg-impl label" style={{ ...(t.implColor ? { color: t.implColor } : undefined), color: "rgb(245, 235, 235)" }}>{t.impl}</div>
            <div className="pkg-rule" />
            <ul className="pkg-items">
              {t.items.map((x, j) => <li key={j}><span className="pkg-tick" />{x.split('\n').map((ln, k, arr) => <React.Fragment key={k}>{ln}{k < arr.length - 1 && <br />}</React.Fragment>)}</li>)}
            </ul>
          </div>
        )}
      </div>

      <div className={`pkg-cta-bar ${state >= 2 ? 'in' : ''}`}>
        <div className="pkg-cta-text">
          <div className="label">NEXT STEP</div>
          <div className="pkg-cta-h">Start the onboarding form <span className="h-italic">→ kick off within a week</span></div>
        </div>
        <div className="pkg-cta-right">
          <div className="pkg-qr">
            <QRGlyph />
          </div>
          <div className="pkg-url mono">buzzlead.io/start</div>
        </div>
      </div>

      <SlideFooter n={12} total={TOTAL} title="PACKAGES" />
      <StateHint state={state} max={2} />
    </section>);

}

function QRGlyph() {
  // Decorative QR-like stylized glyph (placeholder — real QR generated server-side)
  const cells = [];
  const rng = (s) => {let x = s;return () => {x = x * 16807 % 2147483647;return x / 2147483647;};};
  const r = rng(42);
  for (let y = 0; y < 9; y++) for (let x = 0; x < 9; x++) {
    const corner = x < 3 && y < 3 || x > 5 && y < 3 || x < 3 && y > 5;
    const on = corner || r() > 0.45;
    cells.push(<rect key={`${x}-${y}`} x={x * 10} y={y * 10} width={9} height={9} fill={on ? '#F58C4B' : 'transparent'} />);
  }
  // frame corners
  return (
    <svg viewBox="0 0 90 90" width="100%" height="100%">
      <rect x="0" y="0" width="90" height="90" fill="#0A0A0A" />
      {cells}
    </svg>);

}

// ─── Export ────────────────────────────────────────────
Object.assign(window, {
  Slide01Cover, Slide02SignalFlow, Slide03Proof, Slide04Problem,
  Slide05Process, Slide06CampaignStrategy, Slide07Stack, Slide08Timeline,
  Slide09HowWeWork, Slide10Cases, Slide11Transparency, Slide12Packages
});