// urlapi.me — Hero AI Console v2
// Activates the hero mock: cycling chat scenes, streaming tool calls,
// animated metrics, live CV events feed. Overrides window.AIConsoleSection.

const { useState: hc_uS, useEffect: hc_uE, useRef: hc_uR } = React;

// ── Chat scenes ────────────────────────────────────────
const SCENES = [
  {
    user: "Instagram 経由のLTV、他チャネルと比べて高い?",
    tools: [
      ["query_clicks", '{ src: "ig", window: "180d" }'],
      ["join_orders",  '{ window: "180d" }'],
      ["compute_ltv",  '{ groupby: "src" }'],
    ],
    reply: [
      ["t", "Instagram は LTV "],
      ["hi", "¥18,420"],
      ["t", " (全体平均より "],
      ["hi", "+42%"],
      ["t", ")。リピート率も "],
      ["hi", "+31%"],
      ["t", "。"],
      ["br"],
      ["t", "広告予算 "],
      ["chip", "+20%"],
      ["t", " 振替で月 "],
      ["hi", "¥84万"],
      ["t", " のリフトが見込めます。"],
    ],
    cta: ["予算配分を提案", "詳細"],
  },
  {
    user: "春キャンペーン作って、Metaに送って、結果週次でSlackに",
    tools: [
      ["create_campaign", '{ name: "spring-2026" }'],
      ["connect_meta",    '{ pixel: "auto" }'],
      ["schedule_report", '{ to: "#growth" }'],
    ],
    reply: [
      ["t", "準備できました。"],
      ["hi", "spring-2026"],
      ["t", " を発行、Meta CAPI 接続済み、毎週月曜 9 時に "],
      ["chip", "#growth"],
      ["t", " へ送信します。"],
    ],
    cta: ["URL一覧を見る", "編集"],
  },
  {
    user: "今日やばいやつあった?",
    tools: [
      ["scan_anomaly", '{ window: "24h" }'],
      ["check_capi",   '{ all: true }'],
    ],
    reply: [
      ["t", "Meta CAPI に未送信の CV が "],
      ["hi", "23件"],
      ["t", " 検出。原因は Pixel ID の不一致 ("],
      ["code", "tt-creator"],
      ["t", ")。"],
      ["chip", "auto-fix"],
      ["t", " で修復できます。"],
    ],
    cta: ["自動修復", "原因を見る"],
  },
];

function bodyTotal(body) {
  return body.reduce((s, p) => s + (p[0] === "br" ? 0 : p[1].length), 0);
}

function renderBody(body, shown) {
  let used = 0;
  const out = [];
  for (let i = 0; i < body.length; i++) {
    const [k, v] = body[i];
    if (k === "br") { out.push(<br key={i} />); continue; }
    const remain = Math.max(0, shown - used);
    if (remain <= 0) break;
    const slice = v.slice(0, remain);
    used += slice.length;
    if (k === "hi")   out.push(<strong key={i} style={{ color: "var(--success)", fontWeight: 700 }}>{slice}</strong>);
    else if (k === "chip") out.push(<span key={i} className="mono" style={{ padding: "1px 6px", background: "var(--accent-soft)", color: "var(--accent)", borderRadius: 4, fontSize: 11.5, margin: "0 1px" }}>{slice}</span>);
    else if (k === "code") out.push(<code key={i} className="mono" style={{ color: "var(--info)", fontSize: 11.5 }}>{slice}</code>);
    else out.push(<span key={i}>{slice}</span>);
  }
  return out;
}

// ── Live event pool (right column ticker) ──────────────
const EVENT_POOL = [
  { type: "cv",      icon: "💴", title: "spring26 ¥3,200",      meta: "Tokyo · iOS 17" },
  { type: "click",   icon: "👆", title: "Meta IG → spring26",   meta: "Tokyo · iOS Chrome" },
  { type: "cv",      icon: "💴", title: "lp-ai ¥1,800",          meta: "Osaka · Desktop" },
  { type: "system",  icon: "🔧", title: "Pixel自動修復",         meta: "tt-creator" },
  { type: "click",   icon: "👆", title: "Google → lp-ai",        meta: "Nagoya · Desktop" },
  { type: "cv",      icon: "💴", title: "tt-creator ¥2,400",     meta: "Fukuoka · Android" },
  { type: "click",   icon: "👆", title: "TikTok → tt-creator",   meta: "Sapporo · iOS" },
  { type: "system",  icon: "🤖", title: "週次レポート送信",       meta: "#growth · Slack" },
  { type: "cv",      icon: "💴", title: "mail-jul ¥4,800",        meta: "Sendai · Mail" },
  { type: "click",   icon: "👆", title: "YouTube → yt-thumb",     meta: "Tokyo · Smart TV" },
];

// ── Brand color map for CV送信 cards ───────────────────
function CVSendBadge({ name, color }) {
  return (
    <div style={{
      width: 18, height: 18, borderRadius: 4,
      background: color, display: "grid", placeItems: "center",
      color: "white", fontWeight: 800, fontSize: 9,
      flexShrink: 0,
    }}>{name[0]}</div>
  );
}

// ── Main section ───────────────────────────────────────
function AIConsoleSection() {
  // — chat scene state
  const [sceneIdx, setSceneIdx] = hc_uS(0);
  // step machine: 0=empty, 1=user, 2..(2+tools-1)=tools, ToolsDone=2+tools, ReplyEnd=ReplyChars, CTA visible after that
  const [step, setStep] = hc_uS(0);   // 0 = blank, 1 = user shown
  const [toolStage, setToolStage] = hc_uS(0);
  const [chars, setChars] = hc_uS(0);
  const scene = SCENES[sceneIdx];
  const total = bodyTotal(scene.reply);

  hc_uE(() => {
    // Drive the scene through phases.
    let delay = 700;
    if (step === 0) delay = 350;
    else if (step === 1) {
      // start tools after a beat
      if (toolStage < scene.tools.length) {
        const t = setTimeout(() => setToolStage(s => s + 1), 480);
        return () => clearTimeout(t);
      }
      if (chars < total) {
        const t = setTimeout(() => setChars(c => Math.min(total, c + 3)), 26);
        return () => clearTimeout(t);
      }
      // chars done -> hold then next scene
      const t = setTimeout(() => {
        setSceneIdx(i => (i + 1) % SCENES.length);
        setStep(0); setToolStage(0); setChars(0);
      }, 3600);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setStep(1), delay);
    return () => clearTimeout(t);
  }, [step, toolStage, chars, sceneIdx, total, scene.tools.length]);

  // — live counter
  const [count, setCount] = hc_uS(0);
  hc_uE(() => {
    const t = setInterval(() => setCount(c => c + Math.floor(Math.random() * 3) + 1), 200);
    return () => clearInterval(t);
  }, []);
  const liveCV = (1247821 + count).toLocaleString();

  // — live CV送信 totals (tick occasionally)
  const [cvSends, setCvSends] = hc_uS({ Meta: 847, Google: 293, TikTok: 164, LINE: 65 });
  hc_uE(() => {
    const t = setInterval(() => {
      const keys = Object.keys(cvSends);
      const k = keys[Math.floor(Math.random() * keys.length)];
      setCvSends(s => ({ ...s, [k]: s[k] + 1 }));
    }, 1400);
    return () => clearInterval(t);
  }, []);

  // — flying event feed
  const [events, setEvents] = hc_uS(() =>
    [...Array(5)].map((_, i) => ({ ...EVENT_POOL[i % EVENT_POOL.length], id: i, age: i * 8 + 3 }))
  );
  const idRef = hc_uR(100);
  hc_uE(() => {
    const t = setInterval(() => {
      const sample = EVENT_POOL[Math.floor(Math.random() * EVENT_POOL.length)];
      const id = ++idRef.current;
      setEvents(list => [{ ...sample, id, age: 0, fresh: true }, ...list].slice(0, 6));
      setTimeout(() => setEvents(list => list.map(e => e.id === id ? { ...e, fresh: false } : e)), 1600);
    }, 2400);
    return () => clearInterval(t);
  }, []);

  // age events
  hc_uE(() => {
    const t = setInterval(() => setEvents(list => list.map(e => ({ ...e, age: e.age + 1 }))), 1000);
    return () => clearInterval(t);
  }, []);

  // — animated trend chart points (subtle drift)
  const [chartT, setChartT] = hc_uS(0);
  hc_uE(() => {
    const t = setInterval(() => setChartT(t => t + 1), 120);
    return () => clearInterval(t);
  }, []);

  const showTools = (i) => step >= 1 && toolStage > i;
  const showReply = step >= 1 && toolStage >= scene.tools.length;
  const showCTA = showReply && chars >= total;

  return (
    <section style={{ padding: "16px 0 32px", position: "relative" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", maxWidth: 880, marginInline: "auto", marginBottom: 28 }}>
          <div className="mono" style={{
            fontSize: 11, color: "var(--accent-2)", letterSpacing: 0.2,
            textTransform: "uppercase", marginBottom: 10,
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: 4, background: "var(--success)", boxShadow: "0 0 8px var(--success)", animation: "pulse-soft 1.4s infinite" }} />
            AI Console · LIVE
          </div>
          <h2 className="display" style={{ fontSize: "clamp(26px, 4.2vw, 40px)", fontWeight: 700, margin: 0, letterSpacing: -0.025, lineHeight: 1.2 }}>
            自然言語で、<br />計測の全部を動かす。
          </h2>
          <p style={{ fontSize: 14.5, color: "var(--text-mid)", marginTop: 16, lineHeight: 1.7, maxWidth: 640, marginInline: "auto" }}>
            ダッシュボードを開かずに、AI へ指示するだけで計測が動く。<br />
            CV 集計・媒体送信・LTV 分析、ぜんぶ会話で完結。
          </p>
        </div>

        <div className="hero-mock" style={{ position: "relative", maxWidth: 1180, marginInline: "auto" }}>
          {/* outer glow */}
          <div style={{
            position: "absolute", inset: -50,
            background: "radial-gradient(ellipse at 50% 50%, var(--accent-glow), transparent 70%)",
            pointerEvents: "none", filter: "blur(48px)",
          }} />

          <div style={{
            position: "relative",
            background: "var(--bg-1)",
            border: "1px solid var(--border-strong)",
            borderRadius: 20, overflow: "hidden",
            boxShadow: "0 40px 100px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.04)",
          }}>
            {/* shimmer top accent */}
            <div aria-hidden style={{
              position: "absolute", left: 0, right: 0, top: 0, height: 3,
              background: "linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent)",
              zIndex: 5,
            }} />

            {/* window chrome */}
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              padding: "12px 18px",
              background: "var(--bg-2)",
              borderBottom: "1px solid var(--border)",
            }}>
              <span style={{ width: 11, height: 11, borderRadius: 6, background: "#FF5F57" }} />
              <span style={{ width: 11, height: 11, borderRadius: 6, background: "#FEBC2E" }} />
              <span style={{ width: 11, height: 11, borderRadius: 6, background: "#28C840" }} />
              <div className="mono" style={{
                flex: 1, textAlign: "center", fontSize: 11, color: "var(--text-mute)",
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--success)", boxShadow: "0 0 6px var(--success)", animation: "pulse-soft 1.4s infinite" }} />
                app.urlapi.me / dashboard
              </div>
              <div className="mono" style={{
                fontSize: 10, color: "var(--text-mute)",
                padding: "3px 8px", background: "var(--bg-3)",
                border: "1px solid var(--border)", borderRadius: 4,
                letterSpacing: 0.06, textTransform: "uppercase",
              }}>
                live · 9lick.me
              </div>
            </div>

            <div className="hero-mock-grid" style={{
              display: "grid", gridTemplateColumns: "1.3fr 1fr",
              minHeight: 540,
            }}>
              {/* ── LEFT — AI Chat ───────────────────── */}
              <div style={{
                padding: "20px 24px 18px",
                borderRight: "1px solid var(--border)",
                display: "flex", flexDirection: "column",
                position: "relative",
              }}>
                {/* header strip */}
                <div style={{
                  display: "flex", alignItems: "center", gap: 8,
                  marginBottom: 14,
                }}>
                  <div className="mono" style={{
                    fontSize: 9.5, color: "var(--text-mute)",
                    letterSpacing: 0.16, textTransform: "uppercase",
                  }}>AI CONSOLE · sonnet-4.5</div>
                  <div style={{ flex: 1 }} />
                  <div className="mono" style={{
                    fontSize: 9.5, color: "var(--accent-2)",
                    letterSpacing: 0.1,
                    padding: "2px 7px",
                    background: "var(--accent-soft)",
                    border: "1px solid var(--accent-soft)",
                    borderRadius: 3,
                  }}>
                    SCENE {sceneIdx + 1}/{SCENES.length}
                  </div>
                </div>

                {/* user msg — right-aligned */}
                <div style={{
                  display: "flex", gap: 12, justifyContent: "flex-end",
                  opacity: step >= 1 ? 1 : 0,
                  transform: step >= 1 ? "translateY(0)" : "translateY(6px)",
                  transition: "opacity .35s, transform .35s",
                }}>
                  <div style={{
                    fontSize: 13.5, color: "var(--text)",
                    padding: "8px 12px",
                    background: "var(--accent-soft)",
                    border: "1px solid var(--accent-soft)",
                    borderRadius: "12px 12px 4px 12px",
                    lineHeight: 1.5,
                    maxWidth: "78%",
                  }}>
                    {scene.user}
                  </div>
                  <div style={{
                    width: 28, height: 28, borderRadius: 7,
                    background: "var(--bg-3)",
                    border: "1px solid var(--border)",
                    display: "grid", placeItems: "center",
                    fontSize: 12, fontWeight: 700, flexShrink: 0,
                    color: "var(--text)",
                  }}>9</div>
                </div>

                {/* AI side */}
                <div style={{ display: "flex", gap: 12, marginTop: 14, flex: 1, minHeight: 280 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 7,
                    background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                    display: "grid", placeItems: "center", flexShrink: 0,
                    boxShadow: "0 0 12px var(--accent-glow)",
                    opacity: showTools(0) || (step >= 1 && toolStage > 0) ? 1 : 0.3,
                    transition: "opacity .3s",
                  }}>
                    <I.Logo size={14} color="#0A0A0A" />
                  </div>
                  <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                    {/* tool calls */}
                    {scene.tools.map(([n, a], i) => (
                      <div key={`${sceneIdx}-${i}`} className="mono" style={{
                        display: "inline-flex", alignItems: "center", gap: 7,
                        padding: "4px 9px",
                        background: showTools(i) ? "rgba(124,92,255,0.06)" : "var(--bg-2)",
                        border: `1px solid ${showTools(i) ? "var(--accent-soft)" : "var(--border)"}`,
                        borderRadius: 5, fontSize: 11,
                        width: "fit-content", maxWidth: "100%",
                        opacity: showTools(i) ? 1 : 0,
                        transform: showTools(i) ? "translateX(0)" : "translateX(-8px)",
                        transition: "opacity .3s, transform .3s",
                      }}>
                        <I.Check size={10} style={{ color: "var(--success)", flexShrink: 0 }} />
                        <span style={{ color: "var(--accent)" }}>{n}</span>
                        <span style={{ color: "var(--text-mute)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{a}</span>
                      </div>
                    ))}

                    {/* pending indicator while tool is running */}
                    {step >= 1 && toolStage < scene.tools.length && (
                      <div className="mono" style={{
                        display: "inline-flex", alignItems: "center", gap: 7,
                        padding: "4px 9px",
                        background: "var(--bg-2)",
                        border: "1px solid var(--border)",
                        borderRadius: 5, fontSize: 11, color: "var(--text-mute)",
                        width: "fit-content",
                      }}>
                        <span style={{
                          display: "inline-block", width: 8, height: 8, borderRadius: 4,
                          background: "var(--accent)",
                          animation: "pulse-soft 0.7s infinite",
                        }} />
                        {scene.tools[toolStage] && scene.tools[toolStage][0]}…
                      </div>
                    )}

                    {/* reply */}
                    {showReply && (
                      <div style={{
                        fontSize: 13.5, lineHeight: 1.65, color: "var(--text)",
                        padding: "10px 14px",
                        background: "var(--bg-1)",
                        border: "1px solid var(--border)",
                        borderRadius: "10px 10px 10px 4px",
                        marginTop: 4,
                      }}>
                        {renderBody(scene.reply, chars)}
                        {chars < total && (
                          <span style={{
                            display: "inline-block", width: 1, height: 13, marginLeft: 1,
                            background: "var(--accent)", verticalAlign: "middle",
                            animation: "blink 1s infinite",
                          }} />
                        )}
                      </div>
                    )}

                    {/* cta */}
                    {showCTA && (
                      <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
                        <button style={{
                          padding: "7px 12px",
                          background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                          color: "white", border: "none", borderRadius: 6,
                          fontSize: 12, fontWeight: 600, cursor: "pointer",
                          boxShadow: "0 0 14px var(--accent-glow)",
                        }}>{scene.cta[0]}</button>
                        <button style={{
                          padding: "7px 12px",
                          background: "transparent",
                          color: "var(--text-mid)",
                          border: "1px solid var(--border)",
                          borderRadius: 6, fontSize: 12, cursor: "pointer",
                        }}>{scene.cta[1]}</button>
                      </div>
                    )}
                  </div>
                </div>

                {/* scene indicator dots */}
                <div style={{ display: "flex", gap: 6, marginTop: 14, justifyContent: "center" }}>
                  {SCENES.map((_, i) => (
                    <span key={i} style={{
                      width: i === sceneIdx ? 18 : 6, height: 6, borderRadius: 3,
                      background: i === sceneIdx ? "var(--accent)" : "var(--border-strong)",
                      transition: "width .3s, background .3s",
                    }} />
                  ))}
                </div>

                {/* input bar */}
                <div style={{
                  marginTop: 14,
                  background: "var(--bg-2)",
                  border: "1px solid var(--border-strong)",
                  borderRadius: 11,
                  padding: "8px 8px 8px 14px",
                  display: "flex", alignItems: "center", gap: 8,
                  boxShadow: "0 0 0 3px var(--accent-soft)",
                }}>
                  <span style={{ flex: 1, fontSize: 13, color: "var(--text-mute)" }}>
                    Ask anything…
                    <span style={{
                      display: "inline-block", width: 1, height: 14, marginLeft: 2,
                      background: "var(--accent)", verticalAlign: "middle",
                      animation: "blink 1s infinite",
                    }} />
                  </span>
                  <span className="mono" style={{
                    fontSize: 10, color: "var(--text-mute)",
                    padding: "2px 5px", background: "var(--bg-3)",
                    border: "1px solid var(--border)", borderRadius: 3,
                  }}>⌘K</span>
                  <button style={{
                    width: 28, height: 28,
                    background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                    border: "none", borderRadius: 6, color: "white",
                    display: "grid", placeItems: "center",
                    boxShadow: "0 0 14px var(--accent-glow)",
                  }}>
                    <I.ArrowUp size={13} />
                  </button>
                </div>
              </div>

              {/* ── RIGHT — Live ops ─────────────────── */}
              <div style={{
                padding: "20px 22px 18px",
                display: "flex", flexDirection: "column", gap: 14,
                background: "var(--bg-1)",
                position: "relative",
              }}>
                {/* header */}
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 7, height: 7, borderRadius: 4, background: "var(--success)", boxShadow: "0 0 8px var(--success)", animation: "pulse-soft 1.4s infinite" }} />
                  <div className="mono" style={{ fontSize: 9.5, color: "var(--text-mute)", letterSpacing: 0.16, textTransform: "uppercase" }}>
                    LIVE · オペレーション
                  </div>
                </div>

                {/* big metric */}
                <div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--text-mute)", textTransform: "uppercase", letterSpacing: 0.1 }}>
                    TOTAL CLICKS · LAST 30D
                  </div>
                  <div className="display hero-mock-headline" style={{
                    fontSize: 38, fontWeight: 800, marginTop: 4, letterSpacing: -0.025,
                    fontVariantNumeric: "tabular-nums",
                    background: "linear-gradient(180deg, #FFFFFF 0%, #BFA8FF 100%)",
                    WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
                  }}>
                    {liveCV}
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 2 }}>
                    <I.Up size={11} style={{ color: "var(--success)" }} />
                    <span className="mono" style={{ fontSize: 11, color: "var(--success)" }}>+24.6%</span>
                    <span className="mono" style={{ fontSize: 10, color: "var(--text-mute)" }}>vs prev 30d</span>
                  </div>
                </div>

                {/* animated trend chart */}
                <div style={{ height: 64, position: "relative" }}>
                  <svg width="100%" height="100%" viewBox="0 0 280 64" preserveAspectRatio="none">
                    <defs>
                      <linearGradient id="hg2" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.55" />
                        <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
                      </linearGradient>
                    </defs>
                    {(() => {
                      const base = [50, 52, 48, 58, 62, 55, 70, 68, 72, 80, 78, 82, 75, 88];
                      // gently breath the values
                      const pts = base.map((v, i) => v + Math.sin((chartT + i * 7) / 6) * 1.6);
                      const max = Math.max(...pts), min = Math.min(...pts) - 5;
                      const stepX = 280 / (pts.length - 1);
                      const xy = pts.map((p, i) => [i * stepX, 64 - ((p - min) / (max - min)) * 56 - 2]);
                      const d = xy.map((p, i) => `${i === 0 ? "M" : "L"}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(" ");
                      const last = xy[xy.length - 1];
                      return (
                        <>
                          <path d={`${d} L 280 64 L 0 64 Z`} fill="url(#hg2)" />
                          <path d={d} fill="none" stroke="var(--accent-2)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                          <circle cx={last[0]} cy={last[1]} r="3" fill="var(--accent-2)" />
                          <circle cx={last[0]} cy={last[1]} r="7" fill="var(--accent-2)" opacity="0.22">
                            <animate attributeName="r" values="5;9;5" dur="1.6s" repeatCount="indefinite" />
                            <animate attributeName="opacity" values="0.35;0.1;0.35" dur="1.6s" repeatCount="indefinite" />
                          </circle>
                        </>
                      );
                    })()}
                  </svg>
                </div>

                {/* CV送信状況 */}
                <div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--text-mute)", textTransform: "uppercase", letterSpacing: 0.1, marginBottom: 6 }}>
                    CV送信状況 · 今日
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 5 }}>
                    {[
                      { n: "Meta",   c: "#0093F2" },
                      { n: "Google", c: "#4285F4" },
                      { n: "TikTok", c: "#FE2C55" },
                      { n: "LINE",   c: "#06C755" },
                    ].map(p => (
                      <div key={p.n} style={{
                        padding: "7px 9px",
                        background: "var(--bg-2)",
                        border: "1px solid var(--border)",
                        borderRadius: 6,
                        display: "flex", alignItems: "center", gap: 7,
                      }}>
                        <CVSendBadge name={p.n} color={p.c} />
                        <span style={{ fontSize: 11, fontWeight: 600, flex: 1 }}>{p.n}</span>
                        <span className="mono" style={{
                          fontSize: 11.5, color: "var(--text)",
                          fontVariantNumeric: "tabular-nums",
                        }}>{cvSends[p.n]}</span>
                        <I.Check size={10} style={{ color: "var(--success)" }} />
                      </div>
                    ))}
                  </div>
                </div>

                {/* events feed */}
                <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0 }}>
                  <div className="mono" style={{ fontSize: 10, color: "var(--text-mute)", textTransform: "uppercase", letterSpacing: 0.1, marginBottom: 6, display: "flex", alignItems: "center", gap: 6 }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--success)", boxShadow: "0 0 6px var(--success)", animation: "pulse-soft 1.4s infinite" }} />
                    LIVE EVENTS
                  </div>
                  <div style={{
                    flex: 1, overflow: "hidden",
                    display: "flex", flexDirection: "column", gap: 4,
                    minHeight: 0,
                  }}>
                    {events.slice(0, 5).map(ev => (
                      <div key={ev.id} style={{
                        display: "flex", alignItems: "center", gap: 8,
                        padding: "6px 9px",
                        background: ev.fresh ? "rgba(124,92,255,0.08)" : "var(--bg-2)",
                        border: `1px solid ${ev.fresh ? "var(--accent-soft)" : "var(--border)"}`,
                        borderRadius: 6,
                        transition: "background 1.4s, border-color 1.4s",
                      }}>
                        <span style={{
                          width: 18, height: 18, borderRadius: 5,
                          background: "var(--bg-3)",
                          border: "1px solid var(--border)",
                          display: "grid", placeItems: "center",
                          fontSize: 10, flexShrink: 0,
                        }}>{ev.icon}</span>
                        <span style={{
                          flex: 1, fontSize: 11, color: "var(--text)",
                          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                        }}>{ev.title}</span>
                        <span className="mono" style={{
                          fontSize: 9, color: "var(--text-mute)", letterSpacing: 0.04, flexShrink: 0,
                        }}>{ev.age < 60 ? `${ev.age}s` : `${Math.floor(ev.age/60)}m`}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>

            {/* bottom footer band */}
            <div style={{
              display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "9px 18px",
              background: "var(--bg-2)",
              borderTop: "1px solid var(--border)",
              fontSize: 10.5, color: "var(--text-mute)",
            }} className="mono">
              <div style={{ display: "inline-flex", alignItems: "center", gap: 14 }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3, background: "var(--success)" }} />
                  edge-redirect · 12ms p95
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3, background: "var(--success)" }} />
                  capi-sync · OK
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
                  <span style={{ width: 5, height: 5, borderRadius: 3, background: "var(--accent-2)" }} />
                  ai-console · sonnet-4.5
                </span>
              </div>
              <span style={{ letterSpacing: 0.06 }}>regions: tokyo · osaka · singapore · frankfurt</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AIConsoleSection = AIConsoleSection;