// Voice Analytics · Guestmaker · dark + light fuchsia
const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM } = React;

// ============== THEME ==============
const PALETTES = {
  dark: {
    bg: "#120912", panel: "#1a0f1a", panel2: "#22142a",
    rule: "#3a1f3a", ruleSoft: "#2a172a",
    ink: "#f5e6f0", muted: "#a896a6", dim: "#7a6a78",
    fuchsia: "#ff4d97", fDeep: "#d63d80", fLight: "#ff8fbc", fSoft: "rgba(255,77,151,0.12)",
    pink: "#ff7ab8", magenta: "#c235a3", rose: "#ff5577", plum: "#8a3a78", hot: "#ff2d7c",
    pos: "#5cd0a0", neg: "#ff8068", warn: "#f4c45a",
    chip: "#22142a", chipBorder: "#3a1f3a",
    onFuchsia: "#fff",
  },
  light: {
    bg: "#f6f4ef", panel: "#ffffff", panel2: "#fbf8f3",
    rule: "rgba(0,0,0,0.10)", ruleSoft: "rgba(0,0,0,0.06)",
    ink: "#1a1a1a", muted: "#6b6358", dim: "#a99fa3",
    fuchsia: "#ED4D86", fDeep: "#B8336A", fLight: "#F58FB7", fSoft: "rgba(237,77,134,0.10)",
    pink: "#d8669a", magenta: "#a93a82", rose: "#cc4d6a", plum: "#7a3a68", hot: "#d52f72",
    pos: "#3f9d6f", neg: "#c45a3f", warn: "#a87a1f",
    chip: "#fbf8f3", chipBorder: "rgba(0,0,0,0.10)",
    onFuchsia: "#fff",
  },
};
const VA_T = { ...PALETTES.dark };
function vaApplyTheme(d) { Object.assign(VA_T, d ? PALETTES.dark : PALETTES.light); document.body.dataset.theme = d ? "dark" : "light"; }

// ============== ATOMS ==============
const Mono = ({ children, size = 11, color, style }) => (
  <span style={{ fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: size, color: color || VA_T.muted, letterSpacing: "0.04em", ...style }}>{children}</span>
);
const Eyebrow = ({ children, color, style }) => (
  <div style={{ fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: color || VA_T.fuchsia, fontWeight: 500, ...style }}>{children}</div>
);

function useAnimNum(target, dur = 600) {
  const [v, setV] = useS(target);
  const fr = useR(target);
  useE(() => {
    fr.current = v; const start = performance.now(); let raf;
    const loop = () => {
      const t = Math.min(1, (performance.now() - start) / dur);
      const e = 1 - Math.pow(1 - t, 3);
      setV(fr.current + (target - fr.current) * e);
      if (t < 1) raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [target]);
  return v;
}

function useLiveNum(seed, jitter = 4, ms = 2000) {
  const [v, setV] = useS(seed);
  useE(() => {
    const id = setInterval(() => setV(x => x + Math.floor(Math.random() * jitter * 2)), ms);
    return () => clearInterval(id);
  }, []);
  return v;
}

// ============== CHARTS ==============
function Spark({ data, color, height = 32, gid }) {
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v, i) => [(i / (data.length - 1)) * 100, height - 4 - ((v - min) / (max - min || 1)) * (height - 8)]);
  const d = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");
  const id = `sp-${gid}`;
  return (
    <svg width="100%" height={height} viewBox={`0 0 100 ${height}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.45" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={`${d} L 100 ${height} L 0 ${height} Z`} fill={`url(#${id})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="round" />
      <circle cx={pts[pts.length-1][0]} cy={pts[pts.length-1][1]} r="2" fill={color}>
        <animate attributeName="r" values="2;3.4;2" dur="1.6s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}

function AreaChart({ data, color, height = 200, gid, secondary }) {
  const max = Math.max(...data, ...(secondary || [0]));
  const pts = data.map((v, i) => [(i / (data.length - 1)) * 100, height - 24 - (v / (max || 1)) * (height - 40)]);
  const d = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");
  const sec = secondary && secondary.map((v, i) => [(i / (secondary.length - 1)) * 100, height - 24 - (v / (max || 1)) * (height - 40)]);
  const dSec = sec && sec.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");
  const id = `ac-${gid}`;
  return (
    <svg width="100%" height={height} viewBox={`0 0 100 ${height}`} preserveAspectRatio="none" style={{ overflow: "visible" }}>
      <defs>
        <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.5" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      {[0.25, 0.5, 0.75].map((g, i) => (
        <line key={i} x1="0" x2="100" y1={(height - 24) * (1 - g)} y2={(height - 24) * (1 - g)}
          stroke={VA_T.rule} strokeWidth="0.3" strokeDasharray="0.8 1" vectorEffect="non-scaling-stroke" />
      ))}
      <path d={`${d} L 100 ${height-24} L 0 ${height-24} Z`} fill={`url(#${id})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="1.6" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
      {dSec && <path d={dSec} fill="none" stroke={VA_T.fLight} strokeWidth="1.2" strokeDasharray="2 2" opacity="0.6" vectorEffect="non-scaling-stroke" />}
    </svg>
  );
}

function Donut({ segments, size = 180, thickness = 22, label, sublabel }) {
  const r = (size - thickness) / 2, C = 2 * Math.PI * r;
  const total = segments.reduce((a, s) => a + s.value, 0);
  let off = 0;
  return (
    <div style={{ position: "relative", width: size, height: size }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={VA_T.ruleSoft} strokeWidth={thickness} />
        {segments.map((s, i) => {
          const len = (s.value / total) * C, dasharray = `${len} ${C - len}`, dashoffset = -off;
          off += len;
          return (
            <circle key={i} cx={size/2} cy={size/2} r={r} fill="none" stroke={s.color} strokeWidth={thickness}
              strokeDasharray={dasharray} strokeDashoffset={dashoffset}
              style={{ transition: "stroke-dasharray 0.6s ease", filter: i === 0 ? `drop-shadow(0 0 6px ${s.color}90)` : "none" }} />
          );
        })}
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 28, fontWeight: 400, color: VA_T.ink, letterSpacing: "-0.02em", lineHeight: 1 }}>{label}</div>
        <Mono size={10.5} color={VA_T.dim} style={{ marginTop: 4 }}>{sublabel}</Mono>
      </div>
    </div>
  );
}

function BarChart({ data, format = (v) => v.toLocaleString() }) {
  const max = Math.max(...data.map(d => d.value));
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      {data.map((d, i) => {
        const w = (d.value / max) * 100, c = d.color || VA_T.fuchsia;
        return (
          <div key={i} style={{ animation: `gm-fadein 0.35s ease ${i * 0.04}s both` }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
              <span style={{ fontSize: 12.5, color: VA_T.ink, fontWeight: 500 }}>{d.label}</span>
              <Mono size={11} color={c} style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{format(d.value)}</Mono>
            </div>
            <div style={{ height: 6, background: VA_T.ruleSoft, borderRadius: 3, overflow: "hidden" }}>
              <div style={{ height: "100%", width: `${w}%`, background: `linear-gradient(90deg, ${c}, ${c}aa)`, boxShadow: `0 0 8px ${c}40`, transition: "width 0.6s cubic-bezier(.2,.8,.2,1)" }} />
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ============== CARD ==============
function Card({ title, subtitle, action, children, padBody = true, style = {} }) {
  return (
    <div style={{ background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, ...style }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", padding: "16px 18px 12px", borderBottom: `1px solid ${VA_T.ruleSoft}` }}>
        <div>
          <div style={{ fontSize: 14, fontWeight: 600, color: VA_T.ink, letterSpacing: "-0.005em" }}>{title}</div>
          {subtitle && <Mono size={10.5} color={VA_T.dim} style={{ display: "block", marginTop: 3, letterSpacing: "0.1em", textTransform: "uppercase" }}>{subtitle}</Mono>}
        </div>
        {action}
      </div>
      <div style={{ padding: padBody ? 18 : 0 }}>{children}</div>
    </div>
  );
}

function KPI({ lbl, value, delta, deltaColor, suffix = "", spark, color, prefix = "", gid }) {
  return (
    <div style={{ background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, padding: "16px 18px 14px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: `linear-gradient(90deg, transparent, ${color || VA_T.fuchsia}80, transparent)` }} />
      <Mono size={10.5} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase", display: "block" }}>{lbl}</Mono>
      <div style={{ fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 26, fontWeight: 500, color: VA_T.ink, letterSpacing: "-0.02em", lineHeight: 1.1, marginTop: 6, marginBottom: 4, fontVariantNumeric: "tabular-nums" }}>
        {prefix}{typeof value === "number" ? value.toLocaleString("en-US") : value}{suffix}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: spark ? 10 : 0 }}>
        <span style={{ fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 11, color: deltaColor || VA_T.pos, fontWeight: 600 }}>{delta}</span>
        <Mono size={10.5} color={VA_T.dim}>vs last 30d</Mono>
      </div>
      {spark && <div style={{ marginTop: 4, marginBottom: -4 }}><Spark data={spark} color={color || VA_T.fuchsia} height={32} gid={gid} /></div>}
    </div>
  );
}

// ============== DATA ==============
const VA_CALLS = [
  { id: "C-26041", time: "Apr 29 · 8:35 PM", caller: "Antoni Joan", phone: "+34 636 771 583", lang: "ES", guest: "Returning", dur: "3m 11s", outcome: "Booked", channel: "Voice · Inbound", status: "Completed", score: 94, summary: "Repeat guest booked Junior Suite at BLUESEA Costa Bastián, May 18–22. All-inclusive, 2 adults. Confirmed by email.", score_dims: { obj: 92, ups: 78, kb: 96, tone: 95, res: 94 } },
  { id: "C-26040", time: "Apr 29 · 8:30 PM", caller: "Unknown", phone: "+34 681 220 410", lang: "ES", guest: "New Prospect", dur: "1m 47s", outcome: "Info", channel: "Web Widget", status: "Completed", score: 81, summary: "Browsed Canaries portfolio. No booking. Requested brochure by email." },
  { id: "C-26039", time: "Apr 27 · 4:18 PM", caller: "Antoni Joan", phone: "+34 636 771 583", lang: "ES", guest: "Returning", dur: "3m 11s", outcome: "Booked", channel: "Voice · Inbound", status: "Completed", score: 90, summary: "Family-friendly stay in Lanzarote, 3 nights, 2A+1C. Junior Suite all-inclusive €482.22. Booking link sent." },
  { id: "C-26038", time: "Apr 23 · 10:30 AM", caller: "Daniel Antich", phone: "+34 673 043 885", lang: "ES", guest: "Returning", dur: "3m 15s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 88, summary: "Daniel inquired about family-friendly hotels in Canarias and expressed interest in the Blue Sea Costa Bastián in Lanzarote for September 15–18 (3 nights) for 2 adults and 1 child. The agent provided availability and pricing details for a Junior Suite with all-inclusive service at €160.74/night (€482.22 total), and sent booking details via email for Daniel to complete the reservation.", score_dims: { obj: 85, ups: 70, kb: 95, tone: 92, res: 90 } },
  { id: "C-26037", time: "Apr 22 · 3:44 PM", caller: "Antoni Joan", phone: "+34 636 771 583", lang: "ES", guest: "Returning", dur: "1m 48s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 84, summary: "Quick availability check, follow up scheduled." },
  { id: "C-26036", time: "Apr 16 · 6:44 PM", caller: "Antoni Joan", phone: "+34 636 771 583", lang: "ES", guest: "Returning", dur: "2m 16s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 87, summary: "Pricing for Junior Suite, all-inclusive option discussed." },
  { id: "C-26035", time: "Apr 16 · 3:29 PM", caller: "Antoni Joan", phone: "+34 636 771 583", lang: "ES", guest: "Returning", dur: "3m 10s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 86, summary: "Discussed family-friendly amenities and Kids Club hours." },
  { id: "C-26034", time: "Apr 16 · 3:27 PM", caller: "Antoni Joan", phone: "+34 636 771 583", lang: "ES", guest: "Returning", dur: "32s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 75, summary: "Brief call, dropped before completion." },
  { id: "C-26033", time: "Apr 15 · 5:50 PM", caller: "Enrique", phone: "+34 635 592 837", lang: "ES", guest: "Returning", dur: "4m 35s", outcome: "Booked", channel: "Voice · Inbound", status: "Completed", score: 96, summary: "Long-stay booking, 7 nights, Sunset Beach Mallorca. Half-board upgrade accepted." },
  { id: "C-26032", time: "Apr 14 · 2:07 PM", caller: "jose maestro", phone: "+34 605 183 290", lang: "ES", guest: "Returning", dur: "4m 45s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 89, summary: "Group of 4 adults, late June, comparing 3 properties." },
  { id: "C-26031", time: "Apr 14 · 2:06 PM", caller: "Enrique", phone: "+34 635 592 837", lang: "ES", guest: "Returning", dur: "N/A", outcome: "Missed", channel: "Voice · Inbound", status: "Failed", score: 0, summary: "Call disconnected before agent picked up." },
  { id: "C-26030", time: "Apr 14 · 2:05 PM", caller: "Enrique", phone: "+34 635 592 837", lang: "ES", guest: "Returning", dur: "N/A", outcome: "Missed", channel: "Voice · Inbound", status: "Failed", score: 0, summary: "Caller hung up before connecting." },
  { id: "C-26029", time: "Apr 10 · 11:36 AM", caller: "Enrique", phone: "+34 635 592 837", lang: "ES", guest: "Returning", dur: "2m 57s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 88, summary: "Asked about pet policy, full breakdown given." },
  { id: "C-26028", time: "Mar 31 · 5:55 PM", caller: "Mauricio Espinoza", phone: "+52 552 003 7603", lang: "ES", guest: "Returning", dur: "3m 46s", outcome: "Interested", channel: "Voice · Inbound", status: "Completed", score: 91, summary: "Long-haul guest from Mexico, comparing Mallorca and Canarias." },
];

// transcript for the open call
const TRANSCRIPT_DEMO = [
  { who: "system", t: "10:30:50 AM", text: "Esta llamada puede ser grabada con fines de aseguramiento de calidad." },
  { who: "agent", t: "10:31:04 AM", text: "¡Hola Daniel! Nos alegra mucho verte de nuevo, gracias por llamar. Veo que has estado explorando opciones en Madrid, Baleares y la costa este mes, así que estamos aquí para ayudarte a encontrar el destino perfecto para tu familia." },
  { who: "guest", t: "10:31:10 AM", text: "Bueno, me gustaría explorar los hoteles que tenéis en Canarias para niños." },
  { who: "agent", t: "10:31:19 AM", text: "Perfecto, vamos a buscar nuestras opciones en Canarias que son ideales para familias con niños. Déjame ver qué tenemos disponible para ti." },
  { who: "guest", t: "10:31:34 AM", text: "Vale, tengo un niño pequeño de 4 años." },
  { who: "agent", t: "10:31:44 AM", text: "Genial. BLUESEA Costa Bastián en Lanzarote tiene Mini Club, piscina infantil climatizada y menú dedicado. ¿Te interesan unas fechas en particular?" },
  { who: "guest", t: "10:32:01 AM", text: "Septiembre, del 15 al 18, tres noches." },
  { who: "agent", t: "10:32:14 AM", text: "Tengo disponibilidad. Junior Suite con todo incluido a 160,74 € por noche, total 482,22 €. ¿Te envío los detalles por email?" },
  { who: "guest", t: "10:32:25 AM", text: "Sí, perfecto." },
  { who: "agent", t: "10:32:33 AM", text: "Listo, te envío el enlace de reserva ahora mismo." },
];

const THINKING_DEMO = [
  { step: "intent_classification", out: "intent=BOOKING_INQUIRY confidence=0.94", ms: 180 },
  { step: "memory_recall", out: "loaded 14 preferences for +34 673 043 885", ms: 90 },
  { step: "kb_lookup", out: "BLUESEA Costa Bastián · family policy, mini-club, suite types", ms: 240 },
  { step: "availability_check", out: "PMS · 9 rooms available Sep 15–18", ms: 320 },
  { step: "rate_quote", out: "Junior Suite AI · €160.74/night · €482.22 total", ms: 180 },
  { step: "delivery", out: "send email · template=booking_link · personalize=true", ms: 110 },
];

const MEMORIES = [
  { tag: "preference", text: "Prefers late September travel dates (September 21–24, 2026)" },
  { tag: "preference", text: "Needs accommodations for large family group (6 people total)" },
  { tag: "preference", text: "Wants all-inclusive package at BLUESEA Gran Playa" },
  { tag: "preference", text: "Needs family-friendly hotels with activities for young children" },
  { tag: "preference", text: "Prefers late July travel dates (July 20–23)" },
  { tag: "preference", text: "Needs infant-friendly accommodations (traveling with 1 infant)" },
  { tag: "preference", text: "Interested in late June travel dates (June 24 to July 1)" },
  { tag: "preference", text: "Prefers quiet and peaceful hotel environments" },
  { tag: "preference", text: "Wants to travel August 18–21, 2026" },
  { tag: "preference", text: "Prefers beachfront hotels over urban hotels" },
  { tag: "preference", text: "Prefers adults-only hotels" },
  { tag: "preference", text: "Prefers short stays (3 nights)" },
  { tag: "preference", text: "Wants detailed pricing breakdowns before booking" },
  { tag: "preference", text: "Prefers half board meal plan" },
  { tag: "preference", text: "Prefers Spanish-speaking hotel staff" },
  { tag: "preference", text: "Prefers Junior Suite accommodations for family travel" },
  { tag: "preference", text: "Prefers rooms with ocean views and private terraces" },
  { tag: "preference", text: "Needs hotel parking for car" },
  { tag: "preference", text: "Prefers One Bedroom Apartment Standard accommodations" },
  { tag: "preference", text: "Needs pet-friendly hotels" },
  { tag: "preference", text: "Wants on-site restaurant at hotel" },
  { tag: "context", text: "Group traveler organizing accommodation for 30 people" },
  { tag: "context", text: "Traveling with 1 child (corrected from previous assumption of 2 children)" },
  { tag: "context", text: "Planning romantic escape for couple" },
  { tag: "context", text: "Returning guest, last booking March 2025 at BLUESEA Costa Bastián" },
];

const LEARNINGS = [
  { date: "2 days ago", title: "Upsell hesitation pattern", desc: "Detected 8 calls where agent skipped half-board upsell after price objection. Updated dialog policy: present upsell before price.", impact: "+€18,400 ARR", calls: 8, status: "shipped" },
  { date: "5 days ago", title: "Knowledge gap · pet policy at Sunset Beach", desc: "Agent answered 'no pets' for 4 callers; KB had stale doc. Re-indexed pet_policy_v3 from PMS.", impact: "+12% KB acc.", calls: 4, status: "shipped" },
  { date: "1 week ago", title: "Tone calibration · Mexican Spanish callers", desc: "AI scored 'tone' below 88 on 11 LATAM Spanish calls. Voice prompt now adapts to regional warmth markers.", impact: "+6 pts tone score", calls: 11, status: "shipped" },
  { date: "today", title: "Group bookings >20 rooms", desc: "AI was attempting to quote groups >20 rooms in-call. Now auto-escalates to Group Sales with brief.", impact: "100% routed", calls: 3, status: "live" },
];

// ============== TABS ==============
const TABS = ["Analytics", "Commercial", "Call History", "Intelligence", "Performance", "Knowledge"];

function Tabs({ active, onChange }) {
  return (
    <div style={{ display: "flex", gap: 4, padding: 4, background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, alignSelf: "flex-start" }}>
      {TABS.map(tab => {
        const on = tab === active;
        return (
          <button key={tab} onClick={() => onChange(tab)} style={{
            border: "none", background: on ? VA_T.fSoft : "transparent",
            color: on ? VA_T.fuchsia : VA_T.muted,
            padding: "8px 16px", borderRadius: 7, cursor: "pointer",
            fontFamily: "Inter, system-ui, sans-serif", fontSize: 13, fontWeight: on ? 600 : 500,
            display: "flex", alignItems: "center", gap: 8,
            transition: "all 0.18s ease",
          }}>
            <TabIcon name={tab} on={on} />
            {tab}
          </button>
        );
      })}
    </div>
  );
}

function TabIcon({ name, on }) {
  const c = on ? VA_T.fuchsia : VA_T.muted;
  const s = { width: 14, height: 14, flexShrink: 0 };
  if (name === "Analytics") return (<svg style={s} viewBox="0 0 16 16" fill="none"><path d="M2 13V8M6 13V4M10 13V9M14 13V6" stroke={c} strokeWidth="1.4" strokeLinecap="round" /></svg>);
  if (name === "Commercial") return (<svg style={s} viewBox="0 0 16 16" fill="none"><path d="M8 2V14M11 4.5C11 4.5 10 3.5 8 3.5C6 3.5 5 4.5 5 5.5C5 6.5 6 7 8 7.5C10 8 11 8.5 11 9.5C11 10.5 10 11.5 8 11.5C6 11.5 5 10.5 5 10.5" stroke={c} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>);
  if (name === "Call History") return (<svg style={s} viewBox="0 0 16 16" fill="none"><path d="M3.5 2.5C3.5 2.5 5 2 6 3.5C7 5 6.5 6 6 6.5C7 8 8 9 9.5 10C10 9.5 11 9 12.5 10C14 11 13.5 12.5 13.5 12.5C12 14 9 13 6 10C3 7 2 4 3.5 2.5Z" stroke={c} strokeWidth="1.3" strokeLinejoin="round" /></svg>);
  if (name === "Intelligence") return (<svg style={s} viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="3" stroke={c} strokeWidth="1.3" /><path d="M5 11C5 11 6 13 8 13C10 13 11 11 11 11" stroke={c} strokeWidth="1.3" strokeLinecap="round" /><circle cx="8" cy="6" r="1" fill={c} /></svg>);
  if (name === "Performance") return (<svg style={s} viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke={c} strokeWidth="1.3" /><path d="M8 4V8L10.5 9.5" stroke={c} strokeWidth="1.3" strokeLinecap="round" /></svg>);
  if (name === "Knowledge") return (<svg style={s} viewBox="0 0 16 16" fill="none"><path d="M3 3H13V13H3V3Z" stroke={c} strokeWidth="1.3" /><path d="M5.5 6H10.5M5.5 8.5H10.5M5.5 11H8" stroke={c} strokeWidth="1.3" strokeLinecap="round" /></svg>);
  return null;
}

// ============== ANALYTICS TAB ==============
function AnalyticsTab() {
  const calls = useLiveNum(2840, 5, 2200);
  const aht = 142;
  const res = 84;
  const esc = 11;

  const sparks = {
    calls: [120,135,128,150,165,172,184,192,205,218,230,244,252,268,278,290],
    aht:   [165,160,158,156,152,150,148,146,145,144,143,142,141,140,140,142],
    res:   [72,73,74,75,77,78,79,80,81,82,83,84,84,84,85,85],
    esc:   [16,15,15,14,14,13,13,12,12,12,11,11,11,11,10,11],
  };

  const callVolume = [180,195,210,225,240,260,275,290,310,335,360,380,400,420,445,470,495,520,548,572,598,625,652,680];

  const outcomes = [
    { label: "Booked",       value: 920, color: VA_T.fuchsia },
    { label: "Interested",   value: 1240, color: VA_T.pink },
    { label: "Info",         value: 480, color: VA_T.hot },
    { label: "Escalated",    value: 200, color: VA_T.rose },
  ];

  const intents = [
    { label: "Booking inquiry",   value: 1840, color: VA_T.fuchsia },
    { label: "Availability",      value: 1240, color: VA_T.pink },
    { label: "Pricing / quote",   value: 980, color: VA_T.hot },
    { label: "Amenities · KB",    value: 720, color: VA_T.rose },
    { label: "Modify booking",    value: 480, color: VA_T.magenta },
    { label: "Group inquiry",     value: 220, color: VA_T.plum },
  ];

  return (
    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <KPI lbl="Calls handled · 30d" value={calls} delta="↑ 14.2%" spark={sparks.calls} color={VA_T.fuchsia} gid="k1" />
        <KPI lbl="Avg handle time" value={aht} suffix="s" delta="↓ 8.1%" spark={sparks.aht} color={VA_T.pink} gid="k2" />
        <KPI lbl="Resolution rate" value={res} suffix="%" delta="↑ 4.6%" spark={sparks.res} color={VA_T.hot} gid="k3" />
        <KPI lbl="Escalation rate" value={esc} suffix="%" delta="↓ 1.2%" spark={sparks.esc} color={VA_T.rose} gid="k4" />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 18 }}>
        <Card title="Call volume" subtitle="LAST 24 HOURS · BUCKETED HOURLY" action={<Mono size={10.5} color={VA_T.dim}>{calls.toLocaleString()} TOTAL</Mono>}>
          <div style={{ height: 220 }}><AreaChart data={callVolume} color={VA_T.fuchsia} height={220} gid="cv" /></div>
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: 10, color: VA_T.dim }}>
            <span>00</span><span>04</span><span>08</span><span>12</span><span>16</span><span>20</span><span>24</span>
          </div>
        </Card>

        <Card title="Outcome mix" subtitle="ALL OUTCOMES · 30D">
          <div style={{ display: "flex", justifyContent: "center" }}>
            <Donut segments={outcomes} size={180} thickness={20} label="32.4%" sublabel="conversion" />
          </div>
          <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 6 }}>
            {outcomes.map(r => (
              <div key={r.label} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0", borderBottom: `1px solid ${VA_T.ruleSoft}` }}>
                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: r.color }} />
                  <span style={{ fontSize: 12, color: VA_T.muted }}>{r.label}</span>
                </span>
                <Mono size={11.5} color={r.color} style={{ fontWeight: 600 }}>{r.value}</Mono>
              </div>
            ))}
          </div>
        </Card>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
        <Card title="Top intents" subtitle="DETECTED · 30D">
          <BarChart data={intents} format={v => v.toLocaleString()} />
        </Card>
        <Card title="Recent calls" subtitle="LIVE · LAST HOUR" padBody={false}>
          <div>
            {VA_CALLS.slice(0, 6).map((c, i) => (
              <div key={c.id} style={{
                display: "grid", gridTemplateColumns: "1fr auto auto",
                alignItems: "center", gap: 12, padding: "10px 18px",
                borderBottom: i < 5 ? `1px solid ${VA_T.ruleSoft}` : "none",
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, minWidth: 0 }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: c.outcome === "Booked" ? VA_T.pos : c.outcome === "Missed" ? VA_T.neg : VA_T.fuchsia, boxShadow: `0 0 6px currentColor`, color: c.outcome === "Booked" ? VA_T.pos : c.outcome === "Missed" ? VA_T.neg : VA_T.fuchsia }} />
                  <span style={{ fontSize: 12.5, color: VA_T.ink, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.caller}</span>
                </div>
                <Mono size={10.5} color={VA_T.dim}>{c.time.split("·")[1]}</Mono>
                <OutcomePill v={c.outcome} />
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

function OutcomePill({ v }) {
  const map = { Booked: VA_T.pos, Interested: VA_T.fuchsia, Info: VA_T.muted, Escalated: VA_T.warn, Missed: VA_T.neg };
  const c = map[v] || VA_T.muted;
  return (
    <span style={{
      padding: "2px 9px", borderRadius: 999,
      background: `${c}1f`, color: c, border: `1px solid ${c}40`,
      fontFamily: "'JetBrains Mono', ui-monospace, monospace",
      fontSize: 10, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase",
    }}>{v}</span>
  );
}

// ============== COMMERCIAL TAB ==============
function CommercialTab() {
  const rev = useLiveNum(2_840_000, 1200, 2200);
  const bookings = useLiveNum(1840, 4, 2400);

  const sparks = {
    rev:    [120,135,148,162,178,194,210,228,246,265,284,302,320,340,360,384],
    book:   [62,68,74,80,86,94,102,110,118,126,134,142,152,162,172,184],
    adr:    [248,251,254,256,259,261,264,266,268,270,272,274,275,277,278,280],
    attach: [22,23,24,25,26,27,28,29,30,30,31,31,32,32,33,34],
  };

  const funnel = [
    { lbl: "Calls received",      v: 2840, color: VA_T.fuchsia },
    { lbl: "Qualified intent",    v: 2380, color: VA_T.pink    },
    { lbl: "Quote presented",     v: 1960, color: VA_T.hot     },
    { lbl: "Hold / saved cart",   v: 1240, color: VA_T.rose    },
    { lbl: "Booking confirmed",   v:  920, color: VA_T.magenta },
  ];

  const channelShift = [
    { ch: "Direct (Voice agent)", share: 38, color: VA_T.fuchsia, comm: 0 },
    { ch: "Direct (Web/App)",     share: 22, color: VA_T.pink,    comm: 0 },
    { ch: "OTA · Booking",        share: 18, color: VA_T.muted,   comm: 17 },
    { ch: "OTA · Expedia",        share: 12, color: VA_T.dim,     comm: 18 },
    { ch: "GDS",                  share:  6, color: VA_T.plum,    comm: 12 },
    { ch: "Wholesalers",          share:  4, color: VA_T.rose,    comm: 22 },
  ];

  const containment = {
    fullyResolved: 84,
    aiCostPerCall: 0.28,
    bpoCostPerCall: 4.40,
    monthlySavings: 162400,
    hoursSaved: 11620,
  };

  const propRevenue = [
    { label: "BLUESEA Costa Bastián", value: 612000, color: VA_T.fuchsia },
    { label: "Sunset Beach Mallorca", value: 548000, color: VA_T.pink    },
    { label: "Olea Cliffside Crete",  value: 482000, color: VA_T.hot     },
    { label: "Zafira Marina Ibiza",   value: 410000, color: VA_T.rose    },
    { label: "Casa Verde Algarve",    value: 296000, color: VA_T.magenta },
    { label: "Atlantic House Lisbon", value: 248000, color: VA_T.plum    },
    { label: "Sierra Lodge Andorra",  value: 184000, color: VA_T.fLight  },
  ];

  const csat = 4.6;
  const nps  = 62;
  const sentiment = [62, 24, 14]; // pos / neutral / neg

  const compliance = [
    { lbl: "Recording disclosure",   v: "100%",   color: VA_T.pos,  sub: "every call"     },
    { lbl: "PCI redaction events",   v: 412,      color: VA_T.pos,  sub: "auto-masked"    },
    { lbl: "Hallucination flags",    v: 6,        color: VA_T.warn, sub: "0.21% of calls" },
    { lbl: "Escalation SLA",         v: "98.4%",  color: VA_T.pos,  sub: "<60s to human"  },
    { lbl: "GDPR data requests",     v: "100%",   color: VA_T.pos,  sub: "auto-fulfilled" },
    { lbl: "Do-Not-Call respect",    v: "100%",   color: VA_T.pos,  sub: "0 violations"   },
  ];

  return (
    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 18 }}>
      {/* exec KPI strip */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <KPI lbl="Revenue attributed · 30d" value={rev} prefix="€" delta="↑ 22.4%" spark={sparks.rev} color={VA_T.fuchsia} gid="cm1" />
        <KPI lbl="Bookings confirmed" value={bookings} delta="↑ 18.6%" spark={sparks.book} color={VA_T.pink} gid="cm2" />
        <KPI lbl="Avg daily rate" value={278} prefix="€" delta="↑ 4.2%" spark={sparks.adr} color={VA_T.hot} gid="cm3" />
        <KPI lbl="Ancillary attach" value={34} suffix="%" delta="↑ 6.4 pts" spark={sparks.attach} color={VA_T.rose} gid="cm4" />
      </div>

      {/* funnel + containment */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <Card title="Call → booking funnel" subtitle="LAST 30 DAYS · LEAKAGE BY STAGE">
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {funnel.map((s, i) => {
              const pct = (s.v / funnel[0].v) * 100;
              const drop = i > 0 ? ((funnel[i-1].v - s.v) / funnel[i-1].v) * 100 : 0;
              return (
                <div key={i} style={{ animation: `gm-fadein 0.3s ease ${i * 0.05}s both` }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                    <span style={{ fontSize: 13, color: VA_T.ink, fontWeight: 500 }}>{s.lbl}</span>
                    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                      {i > 0 && <Mono size={10.5} color={VA_T.neg}>↓ {drop.toFixed(1)}%</Mono>}
                      <Mono size={11.5} color={s.color} style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums", minWidth: 50, textAlign: "right" }}>{s.v.toLocaleString()}</Mono>
                      <Mono size={10.5} color={VA_T.dim} style={{ minWidth: 44, textAlign: "right" }}>{pct.toFixed(0)}%</Mono>
                    </div>
                  </div>
                  <div style={{ height: 18, background: VA_T.panel2, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 4, overflow: "hidden", position: "relative" }}>
                    <div style={{ height: "100%", width: `${pct}%`, background: `linear-gradient(90deg, ${s.color}, ${s.color}aa)`, boxShadow: `0 0 10px ${s.color}40`, transition: "width 0.7s cubic-bezier(.2,.8,.2,1)", position: "relative", overflow: "hidden" }}>
                      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent)", animation: "gm-shimmer 3s ease-in-out infinite" }} />
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{ marginTop: 14, padding: "10px 12px", borderRadius: 8, background: VA_T.fSoft, border: `1px solid ${VA_T.fuchsia}30`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Mono size={11} color={VA_T.muted}>Call → booking conversion</Mono>
            <Mono size={14} color={VA_T.fuchsia} style={{ fontWeight: 700, fontVariantNumeric: "tabular-nums" }}>32.4%</Mono>
          </div>
        </Card>

        <Card title="Containment economics" subtitle="AI VS HUMAN BPO · 30D">
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", paddingBottom: 14, borderBottom: `1px solid ${VA_T.ruleSoft}`, marginBottom: 14 }}>
            <Donut segments={[{ color: VA_T.fuchsia, value: containment.fullyResolved }, { color: VA_T.ruleSoft, value: 100 - containment.fullyResolved }]} size={170} thickness={18} label={`${containment.fullyResolved}%`} sublabel="AI containment" />
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <CostRow lbl="Cost / call · AI"        v={`$${containment.aiCostPerCall.toFixed(2)}`} color={VA_T.fuchsia} />
            <CostRow lbl="Cost / call · Human BPO" v={`$${containment.bpoCostPerCall.toFixed(2)}`} color={VA_T.muted} />
            <div style={{ height: 1, background: VA_T.ruleSoft, margin: "4px 0" }} />
            <CostRow lbl="Hours of human time saved" v={containment.hoursSaved.toLocaleString()} color={VA_T.pink} />
            <div style={{ background: VA_T.fSoft, border: `1px solid ${VA_T.fuchsia}40`, borderRadius: 8, padding: "10px 12px", marginTop: 4 }}>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Monthly savings</Mono>
              <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 26, fontWeight: 400, color: VA_T.pos, lineHeight: 1.1, marginTop: 4, letterSpacing: "-0.02em" }}>${containment.monthlySavings.toLocaleString()}</div>
              <Mono size={10.5} color={VA_T.pos}>↑ 28% MoM · annualized $1.95M</Mono>
            </div>
          </div>
        </Card>
      </div>

      {/* channel shift + CSAT */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <Card title="Channel shift · commission saved" subtitle="DIRECT VS OTA · BOOKING SHARE %" padBody={false}>
          <div style={{ padding: "16px 18px 6px", display: "flex", justifyContent: "space-between", alignItems: "baseline", borderBottom: `1px solid ${VA_T.ruleSoft}`, marginBottom: 6 }}>
            <div>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Direct mix</Mono>
              <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 28, fontWeight: 400, color: VA_T.fuchsia, lineHeight: 1, marginTop: 4, letterSpacing: "-0.02em" }}>60%</div>
              <Mono size={10.5} color={VA_T.pos}>↑ 14 pts YoY</Mono>
            </div>
            <div style={{ textAlign: "right" }}>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Commission saved</Mono>
              <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 28, fontWeight: 400, color: VA_T.pos, lineHeight: 1, marginTop: 4, letterSpacing: "-0.02em" }}>€428k</div>
              <Mono size={10.5} color={VA_T.pos}>vs OTA-equivalent · 30d</Mono>
            </div>
          </div>
          <div style={{ padding: "8px 18px 18px" }}>
            {channelShift.map((c, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 70px 70px", gap: 12, padding: "10px 0", borderBottom: i < channelShift.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none", alignItems: "center" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <span style={{ width: 8, height: 8, borderRadius: 2, background: c.color, boxShadow: `0 0 6px ${c.color}80` }} />
                  <span style={{ fontSize: 12.5, color: VA_T.ink }}>{c.ch}</span>
                </div>
                <div style={{ height: 5, background: VA_T.ruleSoft, borderRadius: 3, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: `${c.share * 2.5}%`, background: c.color, boxShadow: `0 0 6px ${c.color}50`, transition: "width 0.6s ease" }} />
                </div>
                <Mono size={11.5} color={VA_T.muted} style={{ fontVariantNumeric: "tabular-nums", textAlign: "right" }}>{c.share}%</Mono>
                <Mono size={11} color={c.comm > 0 ? VA_T.neg : VA_T.pos} style={{ fontWeight: 600, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{c.comm > 0 ? `−${c.comm}%` : "0%"}</Mono>
              </div>
            ))}
          </div>
        </Card>

        <Card title="Guest experience" subtitle="POST-CALL · 30D">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <div style={{ background: VA_T.panel2, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8, padding: 14 }}>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>CSAT</Mono>
              <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 32, fontWeight: 400, color: VA_T.ink, marginTop: 4, letterSpacing: "-0.02em", lineHeight: 1 }}>
                {csat}<span style={{ fontSize: 18, color: VA_T.dim }}> / 5</span>
              </div>
              <Mono size={10.5} color={VA_T.pos}>↑ 0.18 vs 30d</Mono>
            </div>
            <div style={{ background: VA_T.panel2, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8, padding: 14 }}>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>NPS</Mono>
              <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 32, fontWeight: 400, color: VA_T.pos, marginTop: 4, letterSpacing: "-0.02em", lineHeight: 1 }}>+{nps}</div>
              <Mono size={10.5} color={VA_T.pos}>↑ 8 pts vs 30d</Mono>
            </div>
          </div>
          <div style={{ marginTop: 14 }}>
            <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 8, display: "block" }}>In-call sentiment</Mono>
            <div style={{ display: "flex", height: 22, borderRadius: 4, overflow: "hidden", border: `1px solid ${VA_T.ruleSoft}` }}>
              <div style={{ width: `${sentiment[0]}%`, background: `linear-gradient(90deg, ${VA_T.pos}, ${VA_T.pos}cc)`, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Mono size={10} color="#fff" style={{ fontWeight: 700 }}>{sentiment[0]}%</Mono>
              </div>
              <div style={{ width: `${sentiment[1]}%`, background: VA_T.muted + "40", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Mono size={10} color={VA_T.muted} style={{ fontWeight: 700 }}>{sentiment[1]}%</Mono>
              </div>
              <div style={{ width: `${sentiment[2]}%`, background: VA_T.neg + "cc", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Mono size={10} color="#fff" style={{ fontWeight: 700 }}>{sentiment[2]}%</Mono>
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
              <Mono size={10} color={VA_T.pos}>● Positive</Mono>
              <Mono size={10} color={VA_T.muted}>● Neutral</Mono>
              <Mono size={10} color={VA_T.neg}>● Negative</Mono>
            </div>
          </div>
          <div style={{ marginTop: 14, padding: "10px 12px", background: VA_T.fSoft, border: `1px solid ${VA_T.fuchsia}30`, borderRadius: 8 }}>
            <Mono size={10} color={VA_T.fuchsia} style={{ letterSpacing: "0.12em", textTransform: "uppercase" }}>Top driver · positive</Mono>
            <div style={{ fontSize: 12.5, color: VA_T.ink, marginTop: 4, lineHeight: 1.5 }}>"Quick, knowledgeable, in my own language", cited in 64% of 5-star surveys.</div>
          </div>
        </Card>
      </div>

      {/* revenue by property + booking value */}
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <Card title="Revenue by property" subtitle="ATTRIBUTED TO VOICE AGENT · 30D">
          <BarChart data={propRevenue} format={v => `€${(v/1000).toFixed(0)}k`} />
        </Card>
        <Card title="Booking value distribution" subtitle="GBV BY GUEST SEGMENT">
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              { lbl: "Returning · Platinum", v: 38, gbv: "€1,082k", ct: "€2,840", color: VA_T.fuchsia },
              { lbl: "Returning · Gold",     v: 26, gbv: "€738k",   ct: "€1,610", color: VA_T.pink },
              { lbl: "Returning · Silver",   v: 18, gbv: "€512k",   ct: "€940",   color: VA_T.hot },
              { lbl: "Returning · Blue",     v: 10, gbv: "€284k",   ct: "€520",   color: VA_T.rose },
              { lbl: "New / prospect",       v:  8, gbv: "€224k",   ct: "€410",   color: VA_T.muted },
            ].map((r, i) => (
              <div key={i}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ fontSize: 12.5, color: VA_T.ink }}>{r.lbl}</span>
                  <Mono size={11} color={r.color} style={{ fontWeight: 600 }}>{r.gbv}</Mono>
                </div>
                <div style={{ height: 5, background: VA_T.ruleSoft, borderRadius: 3, overflow: "hidden", marginBottom: 4 }}>
                  <div style={{ height: "100%", width: `${r.v * 2.5}%`, background: r.color, boxShadow: `0 0 6px ${r.color}50` }} />
                </div>
                <Mono size={10} color={VA_T.dim}>avg booking · {r.ct}</Mono>
              </div>
            ))}
          </div>
        </Card>
      </div>

      {/* compliance row */}
      <Card title="Compliance & risk" subtitle="REGULATORY · BRAND-SAFETY · 30D" padBody={false}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)" }}>
          {compliance.map((c, i) => (
            <div key={i} style={{ padding: "16px 14px", borderRight: i < 5 ? `1px solid ${VA_T.ruleSoft}` : "none" }}>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.12em", textTransform: "uppercase", display: "block", marginBottom: 6 }}>{c.lbl}</Mono>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6 }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 18, fontWeight: 600, color: c.color, fontVariantNumeric: "tabular-nums" }}>{c.v}</span>
              </div>
              <Mono size={10.5} color={VA_T.dim} style={{ marginTop: 2 }}>{c.sub}</Mono>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function CostRow({ lbl, v, color }) {
  return (
    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
      <span style={{ fontSize: 12.5, color: VA_T.muted }}>{lbl}</span>
      <Mono size={13} color={color} style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{v}</Mono>
    </div>
  );
}

// ============== CALL HISTORY TAB ==============
function CallHistoryTab({ onOpen }) {
  const [q, setQ] = useS("");
  const filtered = VA_CALLS.filter(c => !q || c.caller.toLowerCase().includes(q.toLowerCase()) || c.phone.includes(q));

  return (
    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
        <SearchBox value={q} onChange={setQ} />
        <Filter label="All Statuses" />
        <Filter label="All Outcomes" />
        <Filter label="All Channels" />
        <DateField />
        <DateField />
      </div>

      <Card title="Call history" subtitle={`${filtered.length} VA_CALLS · LAST 30 DAYS`} padBody={false}>
        <div style={{ overflowX: "auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "120px 1.4fr 1.4fr 1.4fr 70px 110px 90px 110px 32px", gap: 14, padding: "10px 18px", borderBottom: `1px solid ${VA_T.ruleSoft}`, background: VA_T.panel2 }}>
            {["Channel", "Date / Time", "Caller", "Phone", "Lang", "Guest type", "Duration", "Outcome", ""].map((h, i) => (
              <Mono key={i} size={10} color={VA_T.dim} style={{ letterSpacing: "0.1em", textTransform: "uppercase" }}>{h}</Mono>
            ))}
          </div>
          {filtered.map((c, i) => (
            <div key={c.id} onClick={() => onOpen(c)} style={{
              display: "grid", gridTemplateColumns: "120px 1.4fr 1.4fr 1.4fr 70px 110px 90px 110px 32px",
              gap: 14, padding: "12px 18px",
              borderBottom: i < filtered.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none",
              alignItems: "center", cursor: "pointer", transition: "background 0.18s ease",
              animation: `gm-fadein 0.25s ease ${Math.min(i, 12) * 0.02}s both`,
            }} onMouseEnter={e => e.currentTarget.style.background = VA_T.panel2} onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
              <ChannelTag />
              <div>
                <div style={{ fontSize: 12.5, color: VA_T.ink }}>{c.time.split("·")[0]}</div>
                <Mono size={10.5} color={VA_T.dim}>{c.time.split("·")[1].trim()}</Mono>
              </div>
              <span style={{ fontSize: 13, color: VA_T.ink, fontWeight: 500 }}>{c.caller}</span>
              <Mono size={11.5} color={VA_T.muted} style={{ fontVariantNumeric: "tabular-nums" }}>{c.phone}</Mono>
              <Mono size={10.5} color={VA_T.muted} style={{ padding: "2px 7px", borderRadius: 4, background: VA_T.fSoft, color: VA_T.fuchsia, textAlign: "center", display: "inline-block", width: "fit-content" }}>{c.lang}</Mono>
              <Mono size={10.5} color={VA_T.muted} style={{ padding: "2px 7px", borderRadius: 4, background: VA_T.chip, border: `1px solid ${VA_T.chipBorder}`, textAlign: "center" }}>{c.guest}</Mono>
              <Mono size={11.5} color={VA_T.dim} style={{ fontVariantNumeric: "tabular-nums" }}>{c.dur}</Mono>
              <OutcomePill v={c.outcome} />
              <span style={{ color: VA_T.dim, fontSize: 14 }}>›</span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function SearchBox({ value, onChange }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "0 12px", height: 36, background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8, minWidth: 240 }}>
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="4" stroke={VA_T.dim} strokeWidth="1.3" /><path d="M11 11L13.5 13.5" stroke={VA_T.dim} strokeWidth="1.3" strokeLinecap="round" /></svg>
      <input value={value} onChange={e => onChange(e.target.value)} placeholder="Search phone, name…" style={{
        background: "transparent", border: "none", outline: "none", color: VA_T.ink,
        fontFamily: "Inter", fontSize: 13, flex: 1,
      }} />
    </div>
  );
}

function Filter({ label }) {
  return (
    <button style={{
      height: 36, padding: "0 14px", background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8,
      color: VA_T.muted, fontFamily: "Inter", fontSize: 13, cursor: "pointer",
      display: "flex", alignItems: "center", gap: 8,
    }}>
      {label}
      <span style={{ color: VA_T.dim, fontSize: 10 }}>▾</span>
    </button>
  );
}

function DateField() {
  return (
    <div style={{ height: 36, padding: "0 14px", background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8, color: VA_T.dim, fontFamily: "'JetBrains Mono', monospace", fontSize: 12, display: "flex", alignItems: "center", gap: 8 }}>
      mm/dd/yyyy
      <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="3.5" width="11" height="10" rx="1.5" stroke={VA_T.dim} strokeWidth="1.2" /><path d="M2.5 6.5H13.5M5.5 2V5M10.5 2V5" stroke={VA_T.dim} strokeWidth="1.2" strokeLinecap="round" /></svg>
    </div>
  );
}

function ChannelTag() {
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "2px 8px", borderRadius: 999, background: VA_T.fSoft, color: VA_T.fuchsia, border: `1px solid ${VA_T.fuchsia}30`, fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, fontWeight: 500, letterSpacing: "0.04em", textTransform: "uppercase", width: "fit-content" }}>
      <span style={{ width: 4, height: 4, borderRadius: "50%", background: VA_T.fuchsia }} />
      Web Widget
    </span>
  );
}

// ============== INTELLIGENCE TAB ==============
function IntelligenceTab() {
  const types = [
    { label: "preference", count: 21, color: VA_T.fuchsia },
    { label: "context", count: 14, color: VA_T.pink },
    { label: "constraint", count: 8, color: VA_T.hot },
    { label: "intent", count: 6, color: VA_T.rose },
  ];

  return (
    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <KPI lbl="Memories captured" value={4280} delta="↑ 22.4%" color={VA_T.fuchsia} gid="m1" spark={[20,28,32,38,44,50,58,68,76,84,92,98,108,118,128,142]} />
        <KPI lbl="Active profiles" value={1840} delta="↑ 9.6%" color={VA_T.pink} gid="m2" spark={[80,88,95,102,108,116,124,130,140,148,156,162,170,176,180,184]} />
        <KPI lbl="Recall hit rate" value={94} suffix="%" delta="↑ 2.1%" color={VA_T.hot} gid="m3" spark={[88,89,89,90,90,91,91,92,92,93,93,93,94,94,94,94]} />
        <KPI lbl="Avg facts / profile" value="2.32" delta="↑ 0.18" color={VA_T.rose} gid="m4" spark={[180,184,189,193,198,202,206,210,214,218,221,225,228,230,231,232]} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 18 }}>
        <Card title="Memory types" subtitle="DISTRIBUTION">
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {types.map((t, i) => (
              <div key={i}>
                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                  <span style={{ fontSize: 12.5, color: VA_T.ink }}>{t.label}</span>
                  <Mono size={11} color={t.color} style={{ fontWeight: 600 }}>{t.count}</Mono>
                </div>
                <div style={{ height: 5, background: VA_T.ruleSoft, borderRadius: 3, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: `${(t.count / 21) * 100}%`, background: t.color, boxShadow: `0 0 6px ${t.color}50` }} />
                </div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, padding: 12, borderRadius: 8, background: VA_T.fSoft, border: `1px solid ${VA_T.fuchsia}30` }}>
            <Eyebrow>Profile · Daniel Antich</Eyebrow>
            <div style={{ fontSize: 13, color: VA_T.ink, marginTop: 6, lineHeight: 1.5 }}>14 memories across 6 calls. Last touched <span style={{ color: VA_T.fuchsia }}>2 days ago</span>.</div>
          </div>
        </Card>

        <Card title="Extracted memories" subtitle="DANIEL ANTICH · +34 673 043 885" padBody={false}>
          <div className="gm-scroll" style={{ maxHeight: 580, overflowY: "auto" }}>
            {MEMORIES.map((m, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "100px 1fr auto",
                gap: 14, padding: "10px 18px",
                borderBottom: i < MEMORIES.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none",
                alignItems: "center", animation: `gm-fadein 0.3s ease ${Math.min(i, 12) * 0.02}s both`,
              }}>
                <span style={{
                  padding: "2px 9px", borderRadius: 999,
                  background: m.tag === "preference" ? VA_T.fSoft : `${VA_T.pink}1f`,
                  color: m.tag === "preference" ? VA_T.fuchsia : VA_T.pink,
                  border: `1px solid ${m.tag === "preference" ? VA_T.fuchsia + "40" : VA_T.pink + "40"}`,
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, fontWeight: 500,
                  letterSpacing: "0.06em", textAlign: "center",
                }}>{m.tag}</span>
                <span style={{ fontSize: 13, color: VA_T.ink }}>{m.text}</span>
                <Mono size={10.5} color={VA_T.dim}>{(2 + i % 6)}d ago</Mono>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ============== PERFORMANCE TAB ==============
function PerformanceTab() {
  const dims = [
    { label: "Objection handling", value: 85, color: VA_T.fuchsia },
    { label: "Upsell attempts",    value: 70, color: VA_T.pink },
    { label: "KB accuracy",        value: 95, color: VA_T.hot },
    { label: "Tone & professionalism", value: 92, color: VA_T.rose },
    { label: "Resolution efficiency", value: 90, color: VA_T.magenta },
  ];

  return (
    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <KPI lbl="Avg AI score" value={88} suffix="%" delta="↑ 3.2%" color={VA_T.fuchsia} gid="p1" spark={[78,79,80,81,82,82,83,84,85,85,86,86,87,87,88,88]} />
        <KPI lbl="CSAT post-call" value="4.6" suffix=" / 5" delta="↑ 0.18" color={VA_T.pink} gid="p2" spark={[40,41,42,42,43,43,44,44,44,45,45,45,46,46,46,46]} />
        <KPI lbl="Self-corrections" value={142} delta="↑ 28%" color={VA_T.hot} gid="p3" spark={[40,46,52,58,64,72,78,86,94,102,112,120,126,132,138,142]} />
        <KPI lbl="Improvements shipped" value={28} delta="↑ 4" color={VA_T.rose} gid="p4" spark={[10,11,12,14,16,18,19,20,21,22,23,24,25,26,27,28]} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 18 }}>
        <Card title="Score dimensions" subtitle="ROLLING 30D · ALL VA_CALLS">
          <div style={{ display: "flex", alignItems: "center", gap: 24, paddingBottom: 18, borderBottom: `1px solid ${VA_T.ruleSoft}`, marginBottom: 16 }}>
            <Donut segments={[{ color: VA_T.fuchsia, value: 88 }, { color: VA_T.ruleSoft, value: 12 }]} size={150} thickness={18} label="88%" sublabel="overall score" />
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 12 }}>
              {dims.map((d, i) => (
                <div key={i}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 5 }}>
                    <span style={{ fontSize: 12.5, color: VA_T.ink }}>{d.label}</span>
                    <Mono size={11} color={d.value >= 90 ? VA_T.pos : d.value >= 80 ? d.color : VA_T.warn} style={{ fontWeight: 600 }}>{d.value}%</Mono>
                  </div>
                  <div style={{ height: 5, background: VA_T.ruleSoft, borderRadius: 3, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${d.value}%`, background: d.value >= 90 ? VA_T.pos : d.color, boxShadow: `0 0 6px ${d.color}50`, transition: "width 0.6s ease" }} />
                  </div>
                </div>
              ))}
            </div>
          </div>
          <Eyebrow color={VA_T.dim}>30-DAY TREND</Eyebrow>
          <div style={{ height: 140, marginTop: 8 }}>
            <AreaChart data={[78,79,80,81,82,83,82,84,85,85,86,87,87,88,88,88,89]} color={VA_T.fuchsia} height={140} gid="trend" />
          </div>
        </Card>

        <Card title="Self-learning loop" subtitle="MISTAKES → FIXES → SHIPPED" padBody={false}>
          <div>
            {LEARNINGS.map((l, i) => (
              <div key={i} style={{ padding: "14px 18px", borderBottom: i < LEARNINGS.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 4 }}>
                  <span style={{ fontSize: 13, color: VA_T.ink, fontWeight: 600 }}>{l.title}</span>
                  <Mono size={10.5} color={VA_T.dim}>{l.date}</Mono>
                </div>
                <div style={{ fontSize: 12, color: VA_T.muted, lineHeight: 1.5, marginBottom: 8 }}>{l.desc}</div>
                <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                  <span style={{ padding: "2px 8px", borderRadius: 4, background: l.status === "shipped" ? `${VA_T.pos}1f` : `${VA_T.fuchsia}1f`, color: l.status === "shipped" ? VA_T.pos : VA_T.fuchsia, border: `1px solid ${(l.status === "shipped" ? VA_T.pos : VA_T.fuchsia)}40`, fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>{l.status}</span>
                  <Mono size={10.5} color={VA_T.dim}>{l.calls} calls</Mono>
                  <span style={{ marginLeft: "auto" }}><Mono size={11} color={VA_T.fuchsia} style={{ fontWeight: 600 }}>{l.impact}</Mono></span>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

// ============== KNOWLEDGE TAB ==============
function KnowledgeTab() {
  const sources = [
    { label: "verde_menu_q2.pdf",        hits: 480, conf: 96, color: VA_T.fuchsia },
    { label: "parking_policy_2826.pdf",  hits: 412, conf: 99, color: VA_T.pink },
    { label: "kids_club_hours_v3.pdf",   hits: 380, conf: 95, color: VA_T.hot },
    { label: "pet_policy_v3.pdf",        hits: 240, conf: 95, color: VA_T.rose },
    { label: "transfers_q2.pdf",         hits: 198, conf: 91, color: VA_T.magenta },
    { label: "checkout_tiers.pdf",       hits: 162, conf: 97, color: VA_T.plum },
    { label: "pool_ops_winter.pdf",      hits: 144, conf: 93, color: VA_T.fLight },
  ];
  const gaps = [
    { q: "Are scooters allowed in lobbies?", count: 14, severity: "med" },
    { q: "Can I store luggage after checkout?", count: 11, severity: "low" },
    { q: "Is there a halal menu?", count: 8, severity: "high" },
    { q: "Bicycle rental at Sunset Beach?", count: 6, severity: "low" },
  ];
  return (
    <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 18 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
        <KPI lbl="KB queries · 30d" value={4860} delta="↑ 18.2%" color={VA_T.fuchsia} gid="kb1" spark={[120,140,160,180,200,220,240,265,290,320,350,380,410,440,470,486]} />
        <KPI lbl="Avg confidence" value={94} suffix="%" delta="↑ 1.8%" color={VA_T.pink} gid="kb2" spark={[88,89,90,90,91,91,92,92,93,93,93,93,94,94,94,94]} />
        <KPI lbl="Coverage" value={92} suffix="%" delta="↑ 4.1%" color={VA_T.hot} gid="kb3" spark={[78,80,82,83,84,85,86,87,88,89,90,90,91,91,92,92]} />
        <KPI lbl="Open gaps" value={11} delta="↓ 3" deltaColor={VA_T.pos} color={VA_T.rose} gid="kb4" spark={[24,22,21,20,18,17,16,15,14,13,13,12,12,11,11,11]} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 18 }}>
        <Card title="Top sources" subtitle="MOST-CITED DOCUMENTS · 30D" padBody={false}>
          <div>
            {sources.map((s, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "1.2fr 1fr 70px",
                gap: 14, padding: "12px 18px",
                borderBottom: i < sources.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none",
                alignItems: "center", animation: `gm-fadein 0.3s ease ${i * 0.04}s both`,
              }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <DocIcon color={s.color} />
                  <Mono size={11.5} color={VA_T.ink} style={{ fontWeight: 500 }}>{s.label}</Mono>
                </div>
                <div>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 3 }}>
                    <Mono size={10.5} color={VA_T.dim}>HITS</Mono>
                    <Mono size={11} color={VA_T.muted} style={{ fontVariantNumeric: "tabular-nums" }}>{s.hits}</Mono>
                  </div>
                  <div style={{ height: 4, background: VA_T.ruleSoft, borderRadius: 2, overflow: "hidden" }}>
                    <div style={{ height: "100%", width: `${(s.hits / 480) * 100}%`, background: s.color, boxShadow: `0 0 6px ${s.color}50` }} />
                  </div>
                </div>
                <Mono size={11.5} color={VA_T.pos} style={{ fontWeight: 600, textAlign: "right", fontVariantNumeric: "tabular-nums" }}>{s.conf}%</Mono>
              </div>
            ))}
          </div>
        </Card>
        <Card title="Knowledge gaps" subtitle="ASKED · NO CONFIDENT ANSWER" padBody={false}>
          <div>
            {gaps.map((g, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "1fr auto auto",
                gap: 12, padding: "14px 18px",
                borderBottom: i < gaps.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none",
                alignItems: "center",
              }}>
                <span style={{ fontSize: 13, color: VA_T.ink }}>{g.q}</span>
                <Mono size={10.5} color={VA_T.dim}>{g.count}×</Mono>
                <span style={{
                  padding: "2px 8px", borderRadius: 999,
                  background: g.severity === "high" ? `${VA_T.neg}1f` : g.severity === "med" ? `${VA_T.warn}1f` : `${VA_T.muted}1f`,
                  color: g.severity === "high" ? VA_T.neg : g.severity === "med" ? VA_T.warn : VA_T.muted,
                  border: `1px solid ${(g.severity === "high" ? VA_T.neg : g.severity === "med" ? VA_T.warn : VA_T.muted)}40`,
                  fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, fontWeight: 600,
                  letterSpacing: "0.06em", textTransform: "uppercase",
                }}>{g.severity}</span>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  );
}

function DocIcon({ color }) {
  return (<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 2H10L12.5 4.5V14H3.5V2Z" stroke={color} strokeWidth="1.3" strokeLinejoin="round" /><path d="M9.5 2V5H12.5" stroke={color} strokeWidth="1.3" strokeLinejoin="round" /></svg>);
}

// ============== SIDE DRAWER ==============
function CallDrawer({ call, onClose }) {
  const [tab, setTab] = useS("Transcript");
  const SUBTABS = ["Transcript", "Thinking", "Score", "Cost", "Intel"];

  return (
    <>
      <div onClick={onClose} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,0.55)", animation: "gm-fade-bg 0.2s ease both", zIndex: 90 }} />
      <div className="gm-scroll" style={{
        position: "fixed", top: 0, right: 0, bottom: 0, width: 560,
        background: VA_T.bg, borderLeft: `1px solid ${VA_T.rule}`,
        animation: "gm-slide-in-right 0.32s cubic-bezier(.2,.8,.2,1) both",
        overflowY: "auto", zIndex: 100,
      }}>
        <div style={{ padding: "20px 24px 16px", borderBottom: `1px solid ${VA_T.ruleSoft}`, position: "sticky", top: 0, background: VA_T.bg, zIndex: 2 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <PhoneIcon />
              <span style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 22, fontWeight: 400, color: VA_T.ink }}>Call Details</span>
            </div>
            <button onClick={onClose} style={{ width: 28, height: 28, borderRadius: 6, border: `1px solid ${VA_T.ruleSoft}`, background: VA_T.fSoft, color: VA_T.fuchsia, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>×</button>
          </div>
        </div>

        <div style={{ padding: "20px 24px", display: "flex", flexDirection: "column", gap: 18 }}>
          {/* meta grid */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            <Meta label="Phone" value={call.phone} />
            <Meta label="Direction" value="Inbound" />
            <Meta label="Status" value={<StatusPill v={call.status} />} />
            <Meta label="Outcome" value={<OutcomePill v={call.outcome} />} />
            <Meta label="Started" value={<><div>{call.time.split("·")[0]}</div><Mono size={10.5} color={VA_T.dim}>{call.time.split("·")[1].trim()}</Mono></>} />
            <Meta label="Duration" value={<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><svg width="12" height="12" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke={VA_T.dim} strokeWidth="1.2" /><path d="M8 4.5V8L10 9.5" stroke={VA_T.dim} strokeWidth="1.2" strokeLinecap="round" /></svg>{call.dur}</span>} />
          </div>

          <a style={{ display: "inline-flex", alignItems: "center", gap: 6, color: VA_T.fuchsia, fontSize: 13, cursor: "pointer", textDecoration: "none" }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="2.5" stroke={VA_T.fuchsia} strokeWidth="1.3" /><path d="M3 13C3 10.5 5 9.5 8 9.5C11 9.5 13 10.5 13 13" stroke={VA_T.fuchsia} strokeWidth="1.3" strokeLinecap="round" /></svg>
            View contact <span>↗</span>
          </a>

          {/* summary */}
          <Card title={<span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="2.5" y="2.5" width="11" height="11" rx="1.5" stroke={VA_T.muted} strokeWidth="1.3" /><path d="M5 6H11M5 8.5H11M5 11H8" stroke={VA_T.muted} strokeWidth="1.3" strokeLinecap="round" /></svg>Summary</span>}>
            <div style={{ fontSize: 13, color: VA_T.muted, lineHeight: 1.6 }}>{call.summary}</div>
          </Card>

          {/* sub-tabs */}
          <div style={{ display: "flex", gap: 4, padding: 4, background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10 }}>
            {SUBTABS.map(s => {
              const on = s === tab;
              return (
                <button key={s} onClick={() => setTab(s)} style={{
                  border: "none", background: on ? VA_T.bg : "transparent",
                  color: on ? VA_T.ink : VA_T.muted,
                  flex: 1, padding: "8px 12px", borderRadius: 7, cursor: "pointer",
                  fontFamily: "Inter", fontSize: 12, fontWeight: on ? 600 : 500,
                  display: "flex", alignItems: "center", justifyContent: "center", gap: 6,
                  border: on ? `1px solid ${VA_T.ruleSoft}` : "1px solid transparent",
                }}>{s}</button>
              );
            })}
          </div>

          {tab === "Transcript" && <TranscriptView />}
          {tab === "Thinking" && <ThinkingView />}
          {tab === "Score" && <ScoreView call={call} />}
          {tab === "Cost" && <CostView />}
          {tab === "Intel" && <IntelView />}
        </div>
      </div>
    </>
  );
}

function Meta({ label, value }) {
  return (
    <div>
      <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.12em", textTransform: "uppercase" }}>{label}</Mono>
      <div style={{ marginTop: 5, fontSize: 14, color: VA_T.ink, fontWeight: 500 }}>{value}</div>
    </div>
  );
}

function StatusPill({ v }) {
  const c = v === "Completed" ? VA_T.pos : VA_T.neg;
  return (
    <span style={{ padding: "3px 10px", borderRadius: 999, background: `${c}1f`, color: c, border: `1px solid ${c}40`, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase", display: "inline-flex", alignItems: "center", gap: 6 }}>
      <span style={{ width: 6, height: 6, borderRadius: "50%", background: c }} />
      {v}
    </span>
  );
}

function PhoneIcon() {
  return (<span style={{ width: 32, height: 32, borderRadius: "50%", background: VA_T.fSoft, border: `1px solid ${VA_T.fuchsia}40`, display: "flex", alignItems: "center", justifyContent: "center" }}>
    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3.5 2.5C3.5 2.5 5 2 6 3.5C7 5 6.5 6 6 6.5C7 8 8 9 9.5 10C10 9.5 11 9 12.5 10C14 11 13.5 12.5 13.5 12.5C12 14 9 13 6 10C3 7 2 4 3.5 2.5Z" stroke={VA_T.fuchsia} strokeWidth="1.3" strokeLinejoin="round" /></svg>
  </span>);
}

function TranscriptView() {
  const [playing, setPlaying] = useS(false);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Recorder playing={playing} setPlaying={setPlaying} />
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {TRANSCRIPT_DEMO.map((m, i) => (
          <div key={i} style={{ background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, padding: "10px 12px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
              <Mono size={10} color={VA_T.dim} style={{ letterSpacing: "0.12em", textTransform: "uppercase", fontWeight: 600 }}>{m.who === "agent" ? "AI Agent" : m.who === "guest" ? "Caller" : "System"}</Mono>
              <Mono size={10} color={VA_T.dim}>{m.t}</Mono>
            </div>
            <div style={{ fontSize: 13, color: VA_T.ink, lineHeight: 1.5 }}>{m.text}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Recorder({ playing, setPlaying }) {
  return (
    <div style={{ background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, padding: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
        <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M5 4L11 8L5 12V4Z" stroke={VA_T.fuchsia} strokeWidth="1.3" strokeLinejoin="round" fill={playing ? VA_T.fuchsia : "none"} /></svg>
        <span style={{ fontSize: 13, color: VA_T.ink, fontWeight: 600 }}>Call Recording</span>
        <Mono size={11} color={VA_T.dim}>3m 18s</Mono>
        <button onClick={() => setPlaying(!playing)} style={{ marginLeft: "auto", padding: "5px 12px", borderRadius: 999, background: playing ? VA_T.fuchsia : VA_T.fSoft, color: playing ? VA_T.onFuchsia : VA_T.fuchsia, border: `1px solid ${VA_T.fuchsia}40`, cursor: "pointer", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>
          {playing ? "Pause" : "Play"}
        </button>
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 2, height: 36 }}>
        {Array.from({ length: 64 }, (_, i) => {
          const h = 6 + (Math.sin(i * 0.4) * 0.5 + 0.5) * 22 + Math.sin(i * 0.13) * 6;
          return <div key={i} style={{
            flex: 1, height: Math.max(3, h), background: i < 18 ? VA_T.fuchsia : VA_T.rule,
            borderRadius: 1, transformOrigin: "center",
            animation: playing && i < 18 ? `gm-bar 0.${300 + i * 30}s ease-in-out infinite alternate` : "none",
          }} />;
        })}
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
        <Mono size={10} color={VA_T.dim}>0:53</Mono>
        <Mono size={10} color={VA_T.dim}>3:18</Mono>
      </div>
    </div>
  );
}

function ThinkingView() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {THINKING_DEMO.map((s, i) => (
        <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 12, padding: "10px 12px", background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8, alignItems: "center" }}>
          <span style={{ width: 22, height: 22, borderRadius: 4, background: VA_T.fSoft, color: VA_T.fuchsia, border: `1px solid ${VA_T.fuchsia}40`, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, fontWeight: 700 }}>{i+1}</span>
          <div>
            <Mono size={10.5} color={VA_T.fuchsia} style={{ fontWeight: 600 }}>{s.step}</Mono>
            <div style={{ fontSize: 12, color: VA_T.muted, marginTop: 2, fontFamily: "'JetBrains Mono', monospace" }}>{s.out}</div>
          </div>
          <Mono size={10.5} color={VA_T.dim}>{s.ms}ms</Mono>
        </div>
      ))}
    </div>
  );
}

function ScoreView({ call }) {
  const dims = call.score_dims || { obj: 85, ups: 70, kb: 95, tone: 92, res: 90 };
  const items = [
    { label: "Objection handling", v: dims.obj },
    { label: "Upsell attempts", v: dims.ups },
    { label: "KB accuracy", v: dims.kb },
    { label: "Tone & professionalism", v: dims.tone },
    { label: "Resolution efficiency", v: dims.res },
  ];
  const strengths = [
    "Excellent professionalism and warm tone throughout the call, appropriate for luxury hospitality.",
    "Efficient handling of the booking inquiry with quick availability checks and clear pricing communication.",
    "Strong knowledge base accuracy. Correctly identified family-friendly amenities (Kids Club, mini-disco, children's pool).",
    "Effective use of tools to search for relevant information and provide comprehensive details.",
    "Clear communication of pricing breakdown (€160.74/night, €482.22 total) with transparent all-inclusive benefits.",
    "Proactive email follow-up with complete booking details and direct booking link.",
  ];
  const improvements = [
    "Increase upsell attempts by suggesting premium room categories or value-added services (spa packages, dining).",
    "Ask qualifying questions about guest preferences (room location, special occasions, accessibility needs).",
    "Mention ancillary services like airport transfers, car rentals, or pre-booking activities.",
    "Consider offering a loyalty program enrollment or mentioning any family packages.",
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      <div style={{ background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, padding: 22, display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Mono size={10.5} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Overall score</Mono>
        <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 64, fontWeight: 400, color: VA_T.pos, lineHeight: 1, marginTop: 6, letterSpacing: "-0.02em" }}>{call.score}%</div>
      </div>
      <div>
        <Mono size={10.5} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase", marginBottom: 10, display: "block" }}>Dimension scores</Mono>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {items.map((d, i) => (
            <div key={i}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                <span style={{ fontSize: 12.5, color: VA_T.ink }}>{d.label}</span>
                <Mono size={11} color={d.v >= 90 ? VA_T.pos : d.v >= 80 ? VA_T.fuchsia : VA_T.warn} style={{ fontWeight: 600 }}>{d.v}%</Mono>
              </div>
              <div style={{ height: 6, background: VA_T.ruleSoft, borderRadius: 3, overflow: "hidden" }}>
                <div style={{ height: "100%", width: `${d.v}%`, background: d.v >= 90 ? VA_T.pos : d.v >= 80 ? VA_T.fuchsia : VA_T.warn, boxShadow: `0 0 6px currentColor`, color: d.v >= 90 ? VA_T.pos : d.v >= 80 ? VA_T.fuchsia : VA_T.warn }} />
              </div>
            </div>
          ))}
        </div>
      </div>
      <ScoreList eyebrow="Strengths" color={VA_T.pos} items={strengths} icon="↑" />
      <ScoreList eyebrow="Improvements" color={VA_T.warn} items={improvements} icon="↘" />

      <div style={{ background: VA_T.fSoft, border: `1px solid ${VA_T.fuchsia}40`, borderRadius: 10, padding: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
          <span style={{ width: 22, height: 22, borderRadius: "50%", background: VA_T.fuchsia, color: VA_T.onFuchsia, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 700 }}>↻</span>
          <span style={{ fontSize: 13, color: VA_T.ink, fontWeight: 600 }}>Auto-learn applied</span>
        </div>
        <div style={{ fontSize: 12, color: VA_T.muted, lineHeight: 1.5 }}>The agent's upsell pattern from this call has been added to the training set. Tomorrow's runs will surface premium room categories before pricing on similar inquiries.</div>
      </div>
    </div>
  );
}

function ScoreList({ eyebrow, color, items, icon }) {
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
        <span style={{ color, fontSize: 14 }}>{icon}</span>
        <Mono size={10.5} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>{eyebrow}</Mono>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((s, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 10, padding: "8px 0", borderBottom: i < items.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: color, marginTop: 7 }} />
            <span style={{ fontSize: 12.5, color: VA_T.muted, lineHeight: 1.5 }}>{s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CostView() {
  const rows = [
    { label: "STT (Whisper-large)", units: "3m 18s", cost: 0.024 },
    { label: "LLM (gpt-5)", units: "12 turns · 8.4k toks", cost: 0.082 },
    { label: "TTS (Eleven · v3)", units: "3m 02s", cost: 0.054 },
    { label: "KB lookup · vector", units: "6 calls", cost: 0.006 },
    { label: "PMS · availability + book", units: "2 calls", cost: 0.012 },
    { label: "Email · transactional", units: "1 send", cost: 0.001 },
  ];
  const total = rows.reduce((a, r) => a + r.cost, 0);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 10, padding: 18, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <Mono size={10.5} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Total call cost</Mono>
          <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 36, fontWeight: 400, color: VA_T.ink, marginTop: 4, letterSpacing: "-0.02em" }}>${total.toFixed(3)}</div>
        </div>
        <div style={{ textAlign: "right" }}>
          <Mono size={10.5} color={VA_T.dim} style={{ letterSpacing: "0.14em", textTransform: "uppercase" }}>Booking value</Mono>
          <div style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: 22, fontWeight: 400, color: VA_T.pos, marginTop: 4 }}>€482.22</div>
          <Mono size={10.5} color={VA_T.pos}>2,727× ROI</Mono>
        </div>
      </div>
      <Card title="Breakdown" subtitle="PER COMPONENT · USD" padBody={false}>
        <div>
          {rows.map((r, i) => (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr auto", gap: 14, padding: "10px 18px", borderBottom: i < rows.length - 1 ? `1px solid ${VA_T.ruleSoft}` : "none", alignItems: "center" }}>
              <span style={{ fontSize: 12.5, color: VA_T.ink }}>{r.label}</span>
              <Mono size={11} color={VA_T.dim}>{r.units}</Mono>
              <Mono size={12} color={VA_T.fuchsia} style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>${r.cost.toFixed(3)}</Mono>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}

function IntelView() {
  const newOnes = MEMORIES.slice(0, 6).map(m => ({ ...m, fresh: true }));
  const all = [...newOnes, ...MEMORIES.slice(6, 14)];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <Eyebrow>Extracted memories</Eyebrow>
        <Mono size={10.5} color={VA_T.fuchsia}>+6 new this call</Mono>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {all.map((m, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "90px 1fr auto", gap: 12, padding: "8px 12px", background: m.fresh ? VA_T.fSoft : VA_T.panel, border: `1px solid ${m.fresh ? VA_T.fuchsia + "40" : VA_T.ruleSoft}`, borderRadius: 8, alignItems: "center" }}>
            <span style={{ padding: "2px 8px", borderRadius: 999, background: m.tag === "preference" ? VA_T.fSoft : `${VA_T.pink}1f`, color: m.tag === "preference" ? VA_T.fuchsia : VA_T.pink, border: `1px solid ${m.tag === "preference" ? VA_T.fuchsia + "40" : VA_T.pink + "40"}`, fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, fontWeight: 500, letterSpacing: "0.06em", textAlign: "center" }}>{m.tag}</span>
            <span style={{ fontSize: 12.5, color: VA_T.ink }}>{m.text}</span>
            {m.fresh && <Mono size={10} color={VA_T.fuchsia} style={{ fontWeight: 700 }}>NEW</Mono>}
          </div>
        ))}
      </div>
    </div>
  );
}

// ============== ROOT — light theme forced, no Tweaks panel ==============
function VoiceAnalyticsSection() {
  const [tab, setTab] = useS("Analytics");
  const [open, setOpen] = useS(null);
  vaApplyTheme(false);
  useE(() => { vaApplyTheme(false); }, []);
  const tw = { dark: false };

  return (
    <section style={{ width: "100%", padding: "100px 40px 80px", background: VA_T.bg, color: VA_T.ink }}>
      {/* Local keyframes — the artifact's animations rely on these names */}
      <style>{`
        @keyframes gm-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.55; } }
        @keyframes gm-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes gm-fade-bg { from { opacity: 0; } to { opacity: 1; } }
        @keyframes gm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
      `}</style>

      {/* hero */}
      <div style={{ maxWidth: "var(--rail)", margin: "0 auto 40px", textAlign: "center" }}>
        <Eyebrow>VOICE ANALYTICS</Eyebrow>
        <h1 style={{ fontFamily: "'Instrument Serif', 'Source Serif 4', Georgia, serif", fontSize: "clamp(30px, 4vw, 56px)", fontWeight: 400, color: VA_T.ink, letterSpacing: "-0.025em", lineHeight: 1.05, margin: "14px 0 12px" }}>
          Every call, <em style={{ fontStyle: "italic", color: VA_T.fuchsia }}>scored, learned, replayed.</em>
        </h1>
        <p style={{ fontSize: 15, color: VA_T.muted, lineHeight: 1.6, maxWidth: 620, margin: "0 auto", textWrap: "pretty" }}>
          Volume, outcomes, intents, knowledge gaps and live agent self-correction. The whole voice operation, in one dashboard.
        </p>
      </div>

      {/* dashboard */}
      <ScaleFrame nativeWidth={1216} style={{ maxWidth: 1216, margin: "0 auto" }}>
      <div style={{ maxWidth: "var(--rail)", margin: "0 auto", background: VA_T.panel2, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 14, overflow: "hidden", boxShadow: tw.dark ? "0 30px 80px rgba(255,77,151,0.08), 0 1px 0 rgba(255,255,255,0.02) inset" : "0 30px 80px rgba(0,0,0,0.10)" }}>
        <div style={{ padding: "18px 24px 0", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12 }}>
          <Tabs active={tab} onChange={setTab} />
          <div style={{ display: "flex", alignItems: "center", gap: 4, padding: 4, background: VA_T.panel, border: `1px solid ${VA_T.ruleSoft}`, borderRadius: 8 }}>
            {["7d", "30d", "90d", "YTD"].map(r => (
              <button key={r} style={{ padding: "5px 10px", borderRadius: 5, background: r === "30d" ? VA_T.fuchsia : "transparent", color: r === "30d" ? VA_T.onFuchsia : VA_T.muted, border: "none", cursor: "pointer", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, fontWeight: 600 }}>{r}</button>
            ))}
            <span style={{ width: 1, height: 14, background: VA_T.ruleSoft, margin: "0 4px" }} />
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "0 8px", color: VA_T.pos, fontFamily: "'JetBrains Mono', monospace", fontSize: 11 }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: VA_T.pos, animation: "gm-pulse 1.6s ease-in-out infinite" }} />
              Live
            </span>
          </div>
        </div>

        {tab === "Analytics" && <AnalyticsTab />}
        {tab === "Commercial" && <CommercialTab />}
        {tab === "Call History" && <CallHistoryTab onOpen={setOpen} />}
        {tab === "Intelligence" && <IntelligenceTab />}
        {tab === "Performance" && <PerformanceTab />}
        {tab === "Knowledge" && <KnowledgeTab />}

        <div style={{ padding: "12px 24px", borderTop: `1px solid ${VA_T.ruleSoft}`, display: "flex", justifyContent: "space-between", alignItems: "center", background: VA_T.panel }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: "50%", background: VA_T.fuchsia }} /><Mono size={10.5} color={VA_T.dim}>snapshot · 30d</Mono></span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: "50%", background: VA_T.pos, animation: "gm-pulse 1.6s ease-in-out infinite" }} /><Mono size={10.5} color={VA_T.dim}>sync · 4s ago</Mono></span>
            <Mono size={10.5} color={VA_T.dim}>2,840 calls · 14 properties</Mono>
          </div>
          <div style={{ display: "flex", gap: 14 }}>
            {["Export", "CSV", "PDF", "Schedule report"].map(a => (
              <Mono key={a} size={10.5} color={VA_T.dim} style={{ cursor: "pointer" }}>{a}</Mono>
            ))}
          </div>
        </div>
      </div>
      </ScaleFrame>

      {open && <CallDrawer call={open} onClose={() => setOpen(null)} />}
    </section>
  );
}

// expose
window.VoiceAnalytics = VoiceAnalyticsSection;