/* ============================================================
   scenes.jsx — the three new scrolljack scenes
   1. AI automations: agent decomposing a task, custom panel
   2. Custom sites: 4 fully realized site previews, picker UI
   3. Get discovered: SEO + AEO + Meta Ads + IG/social mentions
   ============================================================ */

const { useEffect: useEffectS, useState: useStateS, useRef: useRefS } = React;

/* ============================================================
   SCENE 1 — AI Automations
   ============================================================ */

const AI_TASKS = [
  {
    prompt: "Reconcile this month's books across QuickBooks + Stripe + Square",
    nodes: [
      { id: "plan", indent: 0, label: "Plan", meta: "8 steps", duration: 600 },
      { id: "qb",   indent: 1, label: "Pull QuickBooks ledger", meta: "1,247 rows", duration: 1100 },
      { id: "st",   indent: 1, label: "Pull Stripe payouts",     meta: "April 1–30",  duration: 900 },
      { id: "sq",   indent: 1, label: "Pull Square deposits",    meta: "April 1–30",  duration: 900 },
      { id: "norm", indent: 2, label: "Normalize merchant fees", meta: "match by ref", duration: 1300 },
      { id: "diff", indent: 2, label: "Diff against ledger",     meta: "12 mismatches", duration: 900 },
      { id: "fix",  indent: 2, label: "Open exception report",   meta: "for review", duration: 700 },
      { id: "done", indent: 0, label: "Deliver", meta: "ready", duration: 500 },
    ],
    logs: [
      { kind: "k",    text: "› running task: books-reconcile" },
      { kind: "norm", text: "  fetched 1,247 quickbooks ledger entries" },
      { kind: "norm", text: "  fetched 412 stripe payouts (apr 1–30)" },
      { kind: "norm", text: "  fetched 289 square deposits (apr 1–30)" },
      { kind: "warn", text: "  12 mismatches detected, opening review queue" },
      { kind: "ok",   text: "  delivered: report.pdf · 12 exceptions flagged" },
    ],
  },
  {
    prompt: "Triage 38 unread customer emails and draft replies",
    nodes: [
      { id: "p",  indent: 0, label: "Plan", meta: "6 steps", duration: 500 },
      { id: "e",  indent: 1, label: "Pull inbox (last 24h)", meta: "38 messages", duration: 800 },
      { id: "c",  indent: 1, label: "Classify intent",        meta: "8 buckets",   duration: 1000 },
      { id: "r",  indent: 2, label: "Route urgent → on-call", meta: "3 routed",    duration: 700 },
      { id: "d",  indent: 2, label: "Draft replies",           meta: "29 drafts",   duration: 1500 },
      { id: "s",  indent: 0, label: "Send to inbox", meta: "ready for review", duration: 500 },
    ],
    logs: [
      { kind: "k",    text: "› running task: inbox-triage" },
      { kind: "norm", text: "  pulled 38 unread, last 24h" },
      { kind: "norm", text: "  classified: 14 service · 11 sales · 3 urgent · 10 ops" },
      { kind: "warn", text: "  3 urgent → routed to on-call" },
      { kind: "ok",   text: "  drafted 29 replies, queued in your inbox" },
    ],
  },
];

function AIScene() {
  const [taskIdx, setTaskIdx] = useStateS(0);
  const [active, setActive] = useStateS(0); // index of running node
  const [done, setDone] = useStateS(new Set());
  const [logIdx, setLogIdx] = useStateS(0);

  const task = AI_TASKS[taskIdx];

  useEffectS(() => {
    let cancelled = false;
    let t;
    setActive(0);
    setDone(new Set());
    setLogIdx(0);

    const run = (i) => {
      if (cancelled) return;
      if (i >= task.nodes.length) {
        // small pause then loop to next task
        t = setTimeout(() => {
          if (cancelled) return;
          setTaskIdx((x) => (x + 1) % AI_TASKS.length);
        }, 1800);
        return;
      }
      setActive(i);
      // also creep the log forward proportionally
      const logsPerNode = task.logs.length / task.nodes.length;
      setLogIdx(Math.min(task.logs.length, Math.ceil((i + 1) * logsPerNode)));
      t = setTimeout(() => {
        if (cancelled) return;
        setDone((s) => new Set([...s, task.nodes[i].id]));
        run(i + 1);
      }, task.nodes[i].duration);
    };
    run(0);
    return () => { cancelled = true; clearTimeout(t); };
  }, [taskIdx]); // eslint-disable-line

  return (
    <div className="ai-stage">
      <div className="titlebar">
        <span>Crewsive</span>
        <span>·</span>
        <b>Agents</b>
        <span className="live">Live</span>
      </div>

      <div className="body">
        <div className="ai-tree">
          <div className="lbl">Task plan</div>
          {task.nodes.map((n, i) => {
            const isDone = done.has(n.id);
            const isActive = i === active && !isDone;
            const cls = ["row"];
            if (n.indent === 1) cls.push("indent");
            if (n.indent === 2) cls.push("indent2");
            if (isActive) cls.push("active");
            if (isDone) cls.push("done");
            return (
              <div key={n.id} className={cls.join(" ")}>
                <span className="ic">
                  {isDone ? "✓" : isActive ? <span className="spinner" /> : "○"}
                </span>
                <span>{n.label}</span>
                <span className="meta">{n.meta}</span>
              </div>
            );
          })}
        </div>

        <div className="ai-log">
          <div className="lbl">Run log</div>
          <div className="lines">
            {task.logs.slice(0, logIdx).map((l, i) => (
              <div className="ln" key={i}>
                <span className="t">{String(i + 1).padStart(2, "0")}</span>
                <span className={l.kind === "k" ? "k" : l.kind === "ok" ? "ok" : l.kind === "warn" ? "warn" : ""}>
                  {l.text}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="panel">
        <span className="arrow">›</span>
        <span className="input">{task.prompt}</span>
        <span className="ctrls">
          <span>⌘</span><span>K</span>
        </span>
        <span className="run">Run</span>
      </div>
    </div>
  );
}

/* ============================================================
   SCENE 2 — Custom sites picker
   ============================================================ */

const SITE_OPTIONS = [
  { id: "a", nm: "Coffee roaster", kind: "Brand site" },
  { id: "b", nm: "Linen & supply", kind: "E-commerce" },
  { id: "c", nm: "Photographer", kind: "Portfolio" },
  { id: "d", nm: "B2B SaaS", kind: "Product" },
];

function SitesScene() {
  const [pick, setPick] = useStateS("a");
  const idleRef = useRefS(null);

  const [userTouched, setUserTouched] = useStateS(false);
  // auto-cycle when idle, but stop after first user click
  useEffectS(() => {
    if (userTouched) return;
    clearTimeout(idleRef.current);
    idleRef.current = setTimeout(() => {
      setPick((p) => {
        const i = SITE_OPTIONS.findIndex((s) => s.id === p);
        return SITE_OPTIONS[(i + 1) % SITE_OPTIONS.length].id;
      });
    }, 4500);
    return () => clearTimeout(idleRef.current);
  }, [pick, userTouched]);

  return (
    <div className="sites-stage">
      <div className="picker-bar">
        {SITE_OPTIONS.map((s) => (
          <button
            key={s.id}
            className={pick === s.id ? "active" : ""}
            onClick={() => { setUserTouched(true); setPick(s.id); }}
          >
            <span>{s.kind}</span>
            <span className="nm">{s.nm}</span>
          </button>
        ))}
      </div>

      <div className="frame">
        <div className={`pane ${pick === "a" ? "active" : ""}`}><SiteA /></div>
        <div className={`pane ${pick === "b" ? "active" : ""}`}><SiteB /></div>
        <div className={`pane ${pick === "c" ? "active" : ""}`}><SiteC /></div>
        <div className={`pane ${pick === "d" ? "active" : ""}`}><SiteD /></div>
      </div>
    </div>
  );
}

function SiteA() {
  return (
    <div className="site-a">
      <div className="nav-a">
        <span className="b">CASCADIA · ROASTERS</span>
        <span className="links">
          <span>Coffee</span><span>Subscriptions</span><span>Cafés</span><span>Journal</span>
        </span>
        <span className="bag">Bag · 2</span>
      </div>

      <div className="hero-a">
        <div className="copy">
          <span className="kicker">Lot 04 · Yirgacheffe · Single origin</span>
          <h1>
            A cup that <em>tastes like</em> the morning it was picked.
          </h1>
          <p>
            Small-batch, slow-roasted in Portland. Shipped within 48 hours
            of roast — never before, never after.
          </p>
          <div className="ctas">
            <span className="cta">Shop the lot</span>
            <span className="cta-g">Read the story →</span>
          </div>
        </div>
        <div className="prod">
          <div className="bag-shot">
            <div className="band">
              <div className="lt">CASCADIA</div>
              <div className="md">ETHIOPIA / YIRGACHEFFE</div>
              <div className="lt">12 OZ · WHOLE BEAN</div>
              <div className="notes">jasmine · stone fruit · honey</div>
            </div>
          </div>
          <div className="dial">
            <span><b>Roast</b><i>·····●····</i></span>
            <span><b>Acid</b> <i>·······●··</i></span>
            <span><b>Body</b> <i>···●······</i></span>
          </div>
        </div>
      </div>

      <div className="ticker-a">
        <span>Free shipping over $40</span>
        <span>·</span>
        <span>Roasted Tue + Fri</span>
        <span>·</span>
        <span>Carbon-neutral by 2026</span>
        <span>·</span>
        <span>Trade direct from 9 farms</span>
      </div>
    </div>
  );
}

function SiteB() {
  return (
    <div className="site-b">
      <div className="nav-b">
        <span>Shop</span>
        <span className="b">Marbet & Co.</span>
        <span className="cart"><span>Bag</span><span>(3)</span></span>
      </div>
      <h1 className="h1-b">Linens, <em>made well</em>, made to last.</h1>
      <div className="grid-b">
        <div className="card-b">
          <div className="ph" />
          <div className="meta">
            <span className="sub">Bedding</span>
            <span className="nm">Heritage Sheet Set</span>
            <span className="pr">$248</span>
          </div>
        </div>
        <div className="card-b">
          <div className="ph" />
          <div className="meta">
            <span className="sub">Bath</span>
            <span className="nm">Aegean Towel</span>
            <span className="pr">$58</span>
          </div>
        </div>
        <div className="card-b">
          <div className="ph" />
          <div className="meta">
            <span className="sub">Table</span>
            <span className="nm">Belgian Runner</span>
            <span className="pr">$112</span>
          </div>
        </div>
        <div className="card-b">
          <div className="ph" />
          <div className="meta">
            <span className="sub">New</span>
            <span className="nm">Garden Throw</span>
            <span className="pr">$184</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function SiteC() {
  return (
    <div className="site-c">
      <div className="nav-c">
        <span className="b">Marin Okafor</span>
        <span>Index · Stories · Print · Contact</span>
      </div>
      <div className="grid-c">
        <div className="ph tall"><span className="cap">No. 01 — Atacama, 2024</span></div>
        <div className="ph b1"><span className="cap">02 — Lagos</span></div>
        <div className="ph b2"><span className="cap">03 — Iceland</span></div>
        <div className="ph b3"><span className="cap">04 — Kyoto</span></div>
        <div className="ph b4"><span className="cap">05 — Studio</span></div>
      </div>
    </div>
  );
}

function SiteD() {
  return (
    <div className="site-d">
      <div className="nav-d">
        <span className="b">Lattice</span>
        <span className="links"><span>Product</span><span>Customers</span><span>Pricing</span><span>Docs</span></span>
        <span className="cta">Get a demo</span>
      </div>
      <h1 className="h1-d">
        <span className="pill">New</span>
        Forecasting <em>that explains itself.</em>
      </h1>
      <div className="product-d">
        <div className="top">
          <span className="tab on">Forecast</span>
          <span className="tab">Pipeline</span>
          <span className="tab">Cohorts</span>
        </div>
        <div className="body">
          <div className="side">
            <span className="i on">Overview</span>
            <span className="i">Revenue</span>
            <span className="i">Bookings</span>
            <span className="i">Churn</span>
          </div>
          <div className="area">
            <div className="stat-row">
              <div className="stat"><div className="v">$2.41M</div><div className="l">Q2 forecast</div></div>
              <div className="stat"><div className="v">+18%</div><div className="l">vs Q1</div></div>
              <div className="stat"><div className="v">94%</div><div className="l">Confidence</div></div>
            </div>
            <div className="bars">
              {[42, 58, 52, 70, 64, 82, 76, 92].map((h, i) => (
                <b key={i} style={{ height: `${h}%` }} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   SCENE 3 — Get discovered (SEO · AEO · Meta · IG)
   ============================================================ */

function DiscoScene() {
  const [phase, setPhase] = useStateS(0);
  useEffectS(() => {
    const id = setInterval(() => setPhase((p) => (p + 1) % 4), 2400);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="disco-stage">
      <div className="disco-col">
        <div className={`surf surf-google ${phase === 0 ? "lit" : ""}`}>
          <div className="surf-head">
            <span>Google · Organic</span>
            <span className="badge">Top result <span className="delta">↑ 6</span></span>
          </div>
          <div className="rank">Searched · <b>"best forecasting tool for revops"</b></div>
          <div className="res">
            <div className="url-row">
              <span className="fav" />
              <div>
                <div className="site">lattice.app</div>
                <div className="path">› forecasting › for revops</div>
              </div>
            </div>
            <div className="ttl">Forecasting that explains itself — Lattice for RevOps</div>
            <div className="desc">
              The forecasting platform RevOps teams trust. Confidence intervals
              tied to pipeline cohorts. Audit-friendly, works with HubSpot &amp; Salesforce.
              <span className="tag"> Rated 4.8 / 312 reviews.</span>
            </div>
            <div className="snippets">
              <span className="snip">Pricing</span>
              <span className="snip">Demo</span>
              <span className="snip">Changelog</span>
              <span className="snip">vs. Clari</span>
            </div>
          </div>
          <div className="rank rank-foot">Now ranking <b>#1</b> · was #7 last month</div>
        </div>

        <div className={`surf surf-ai ${phase === 1 ? "lit" : ""}`}>
          <div className="surf-head">
            <span className="ai-tag"><span className="spark">✦</span>AI Overview · ChatGPT &middot; Perplexity &middot; Gemini</span>
            <span className="badge">Cited 14×</span>
          </div>
          <div className="body">
            For RevOps teams that need forecasting they can audit, <b>Lattice</b> is the most
            frequently recommended platform<span className="cite">1</span>. Its confidence
            intervals are tied to pipeline cohorts<span className="cite">2</span>, and reviewers
            specifically cite the assumption-tracing as easier to explain to a CFO than
            legacy tools like Clari or Anaplan<span className="cite">3</span>.
          </div>
          <div className="sources">
            <span className="s brand">lattice.app</span>
            <span className="s">g2.com</span>
            <span className="s">producthunt.com</span>
            <span className="s">techcrunch.com</span>
            <span className="s">+10 more</span>
          </div>
        </div>
      </div>

      <div className="disco-col">
        <div className={`surf surf-meta ${phase === 2 ? "lit" : ""}`}>
          <div className="surf-head">
            <span><span className="meta-mark">∞</span> Meta Ads Manager</span>
            <span className="badge">Last 7 days</span>
          </div>
          <div className="meta-summary">
            <div>
              <div className="lbl">Spend</div>
              <div className="v">$1,057</div>
            </div>
            <div>
              <div className="lbl">Leads</div>
              <div className="v">253 <span className="up">↑ 38%</span></div>
            </div>
            <div>
              <div className="lbl">Avg CPL</div>
              <div className="v">$4.18 <span className="up">↓ 22%</span></div>
            </div>
            <div>
              <div className="lbl">ROAS</div>
              <div className="v">5.2× <span className="up">↑ 1.4</span></div>
            </div>
          </div>
          <div className="row">
            <div className="nm">
              <span className="ic" />
              <div>
                <div className="t">Spring drop · 30s video</div>
                <div className="s">Lookalike 1% · feed + reels</div>
              </div>
            </div>
            <div className="v up">$3.81 CPL</div>
            <div className="v">142 leads</div>
            <span className="pill">Active</span>
          </div>
          <div className="row">
            <div className="nm">
              <span className="ic alt" />
              <div>
                <div className="t">Customer story · testimonial</div>
                <div className="s">Lookalike 1% · stories</div>
              </div>
            </div>
            <div className="v up">$2.94 CPL</div>
            <div className="v">88 leads</div>
            <span className="pill">Active</span>
          </div>
          <div className="row">
            <div className="nm">
              <span className="ic alt2" />
              <div>
                <div className="t">Cart abandon · static</div>
                <div className="s">Retargeting 30d</div>
              </div>
            </div>
            <div className="v dn">$11.20 CPL</div>
            <div className="v">23 leads</div>
            <span className="pill off">Paused</span>
          </div>
        </div>

        <div className={`surf surf-mentions ${phase === 3 ? "lit" : ""}`}>
          <div className="surf-head">
            <span>Earned mentions · this week</span>
            <span className="badge">Reach 47.8K</span>
          </div>
          <div className="ment">
            <span className="src ig">IG</span>
            <div className="bod">
              <div className="who">@marin.studios <span className="meta">· portfolio · 38K followers</span></div>
              <div className="txt">"If you want a portfolio that feels like the work — <span className="tag">@marbet.co</span> made theirs feel like a gallery."</div>
              <div className="stats"><span>♥ 412</span><span>↻ 38</span><span>14.2K reach</span></div>
            </div>
          </div>
          <div className="ment">
            <span className="src tt">TT</span>
            <div className="bod">
              <div className="who">@hometechdiy <span className="meta">· tiktok · 612K followers</span></div>
              <div className="txt">"This is the cleanest dashboard I've seen in a small business — <span className="tag">@crewboard</span>."</div>
              <div className="stats"><span>♥ 8.4K</span><span>💬 220</span><span>184K plays</span></div>
            </div>
          </div>
          <div className="ment">
            <span className="src x">X</span>
            <div className="bod">
              <div className="who">@dani_revops <span className="meta">· x · 11K followers</span></div>
              <div className="txt">"Three forecasting tools in one quarter. <span className="tag">@lattice</span> was the only one that survived a CFO review."</div>
              <div className="stats"><span>♥ 312</span><span>↻ 64</span><span>9.1K impressions</span></div>
            </div>
          </div>
          <div className="ment">
            <span className="src rd">RD</span>
            <div className="bod">
              <div className="who">u/forecast_nerd <span className="meta">· r/revops · 1.2K upvotes</span></div>
              <div className="txt">"Switched from Clari to Lattice last month. Onboarding was a Tuesday. AMA."</div>
              <div className="stats"><span>↑ 1.2K</span><span>💬 184</span><span>r/revops</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}


Object.assign(window, { AIScene, SitesScene, DiscoScene });