// MISLAK — section visuals (mini mock UIs inside cards)
const { useState, useEffect } = React;

// Reusable waveform
function Wave({ bars = 32, hi = [4,5,12,13,18,19,20] }) {
  return (
    <div className="wave">
      {Array.from({length: bars}).map((_, i) => {
        const h = 20 + Math.abs(Math.sin(i * 0.6) * 50) + (i % 3) * 6;
        return <span key={i} className={hi.includes(i) ? "hi" : ""} style={{height: `${Math.min(40, h)}px`}}></span>;
      })}
    </div>
  );
}

// Per-feature visual
function FeatViz({ kind, dark }) {
  if (kind === "unified") {
    return (
      <div className="feat-viz" style={{padding: 0, alignItems: "stretch", justifyContent: "stretch", minHeight: 200}}>
        <div style={{padding: "22px 24px", display: "flex", flexDirection: "column", gap: 12, flex: 1}}>
          <div style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
            <div className="mono" style={{fontSize: 22, fontWeight: 700, letterSpacing: "-.02em", color: dark ? "#fff" : "var(--ink)"}}>9200 · 12345</div>
          </div>
          <div style={{display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6}}>
            {[window.L("الرياض","Riyadh"),window.L("جدة","Jeddah"),window.L("الدمام","Dammam"),window.L("مكة","Makkah"),window.L("المدينة","Madinah")].map((b, i) => (
              <div key={b} style={{padding: "10px 8px", borderRadius: 10, background: dark ? "rgba(255,255,255,.18)" : "var(--surface)", border: `1px solid ${dark ? "rgba(255,255,255,.28)" : "var(--hairline)"}`, fontSize: 12, textAlign: "center", color: dark ? "#fff" : "var(--ink)"}}>
                <div style={{opacity: dark ? .85 : .6, marginBottom: 2}}>{b}</div>
                <div style={{fontWeight: 700, fontFamily: "JetBrains Mono", fontSize: 14}}>{[12,28,8,15,6][i]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  if (kind === "ivr") {
    return (
      <div className="feat-viz" style={{padding: 18, alignItems: "stretch", justifyContent: "flex-start", flexDirection: "column", gap: 8, minHeight: 200}}>
        {[
          {k: "1", l: window.L("المبيعات", "Sales"), c: 142},
          {k: "2", l: window.L("الدعم الفني", "Technical Support"), c: 89},
          {k: "3", l: window.L("الفواتير", "Billing"), c: 56},
          {k: "4", l: window.L("تحدث مع موظف", "Talk to an agent"), c: 23},
        ].map((r, i) => (
          <div key={r.k} style={{display: "flex", alignItems: "center", gap: 12, padding: "10px 12px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, fontSize: 13}}>
            <span className="mono" style={{width: 24, height: 24, borderRadius: 6, background: "var(--ink)", color: "var(--bg)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 12}}>{r.k}</span>
            <span style={{fontWeight: 600, flex: 1}}>{r.l}</span>
            <span className="mono" style={{color: "var(--muted)", fontSize: 12}}>{r.c} {window.L("اليوم", "today")}</span>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "ai") {
    return (
      <div className="feat-viz" style={{padding: 16, flexDirection: "column", alignItems: "stretch", gap: 10, minHeight: 200}}>
        <div style={{display: "flex", flexDirection: "column", gap: 8}}>
          <div style={{alignSelf: "flex-start", maxWidth: "85%", padding: "10px 14px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "14px 14px 14px 4px", fontSize: 13}}>
            {window.L("متى أقرب موعد متاح؟", "When's the next available appointment?")}
          </div>
          <div style={{alignSelf: "flex-end", maxWidth: "85%", padding: "8px 14px 10px", background: "var(--brand-gradient)", color: "#fff", borderRadius: "14px 14px 4px 14px", fontSize: 13, fontWeight: 500}}>
            <div style={{display: "inline-block", fontSize: 11, fontWeight: 800, marginBottom: 4, padding: "2px 8px", borderRadius: 6, background: "color-mix(in srgb, #fff 22%, transparent)", color: "#fff"}}>{window.L("وكيل الذكاء الاصطناعي", "AI Agent")}</div>
            <div>{window.L("متاح يوم الخميس الساعة ٤ مساءً. أحجز لك؟", "Available Thursday at 4 PM. Shall I book it?")}</div>
          </div>
          <div style={{alignSelf: "flex-start", maxWidth: "60%", padding: "10px 14px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: "14px 14px 14px 4px", fontSize: 13, fontStyle: "italic", color: "var(--muted)"}}>
            <span style={{display: "inline-flex", gap: 3}}>
              <span className="typing-dot"></span><span className="typing-dot"></span><span className="typing-dot"></span>
            </span>
          </div>
        </div>
      </div>
    );
  }

  if (kind === "whatsapp") {
    return (
      <div className="feat-viz" style={{padding: 18, flexDirection: "column", alignItems: "stretch", gap: 8, minHeight: 200}}>
        {[
          {n: "+966 5•• ••12", m: window.L("هل المنتج متوفر بمقاس L؟", "Is this available in size L?"), u: 3},
          {n: "+966 5•• ••48", m: window.L("تم استلام الطلب، شكراً!", "Order received, thanks!"), u: 0},
          {n: "+966 5•• ••73", m: window.L("كم سعر التوصيل للدمام؟", "How much is delivery to Dammam?"), u: 1},
        ].map((c, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 10, fontSize: 13}}>
            <span style={{width: 32, height: 32, borderRadius: "50%", background: "var(--hairline-strong)", display: "grid", placeItems: "center", color: "var(--ink)"}}>
              <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" fill="currentColor"/><path d="M4 20c0-4 3.5-6 8-6s8 2 8 6" fill="currentColor"/></svg>
            </span>
            <div style={{flex: 1, minWidth: 0}}>
              <div className="mono" style={{fontWeight: 700, fontSize: 13}}>{c.n}</div>
              <div style={{color: "var(--muted)", fontSize: 12, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>{c.m}</div>
            </div>
            {c.u > 0 && <span style={{background: "var(--accent)", color: "var(--accent-ink)", borderRadius: 999, padding: "2px 8px", fontWeight: 700, fontSize: 11}}>{c.u}</span>}
          </div>
        ))}
      </div>
    );
  }

  if (kind === "sentiment") {
    const played = 30; // % of waveform played
    return (
      <div className="feat-viz" style={{padding: 18, flexDirection: "column", alignItems: "stretch", gap: 12, minHeight: 200, justifyContent: "flex-start"}}>
        {/* Call detail header */}
        <div style={{display: "flex", flexDirection: "column", gap: 10}}>
          <div style={{display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 12}}>
            <div style={{display: "flex", flexDirection: "column", gap: 8, minWidth: 0}}>
              <div style={{display: "flex", gap: 6}}>
                <span className="mono" style={{padding: "3px 9px", borderRadius: 6, fontSize: 10, fontWeight: 700, letterSpacing: ".06em", background: "var(--hairline-strong)", color: "var(--ink)", display: "inline-flex", alignItems: "center", gap: 4}}><span style={{fontSize: 11, lineHeight: 1}}>↗</span>{window.L("مكالمة صادرة", "OUTBOUND")}</span>
                <span className="mono" style={{padding: "3px 9px", borderRadius: 6, fontSize: 10, fontWeight: 700, letterSpacing: ".04em", background: "var(--hairline-strong)", color: "var(--ink)"}}>{window.L("رضا منخفض", "Low CSAT")}</span>
              </div>
              <div style={{display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap"}}>
                <span style={{display: "inline-flex", alignItems: "baseline", gap: 5}}>
                  <span className="mono" style={{fontSize: 9, fontWeight: 700, letterSpacing: ".08em", color: "var(--muted)", textTransform: "uppercase"}}>{window.L("الوكيل", "Agent")}</span>
                  <span style={{fontWeight: 800, fontSize: 13, letterSpacing: "-.01em", lineHeight: 1.2}}>{window.L("خالد العتيبي", "Khalid Al-Otaibi")}</span>
                </span>
                <span style={{width: 1, height: 12, background: "var(--hairline-strong)"}}></span>
                <span style={{display: "inline-flex", alignItems: "baseline", gap: 5}}>
                  <span className="mono" style={{fontSize: 9, fontWeight: 700, letterSpacing: ".08em", color: "var(--muted)", textTransform: "uppercase"}}>{window.L("العميل", "Customer")}</span>
                  <span className="mono" style={{fontWeight: 700, fontSize: 12, color: "var(--ink)", display: "inline-flex", alignItems: "center", gap: 4}}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" style={{flexShrink: 0}}><rect x="5" y="11" width="14" height="9" rx="2" fill="var(--muted)"/><path d="M8 11V8a4 4 0 0 1 8 0v3" stroke="var(--muted)" strokeWidth="2" fill="none"/></svg>
                    +966 5•• ••27
                  </span>
                </span>
              </div>
            </div>
            <div style={{textAlign: "center", flexShrink: 0}}>
              <div className="mono" style={{fontSize: 10, color: "var(--muted)", letterSpacing: ".08em"}}>{window.L("رضا العميل", "CSAT")}</div>
              <div style={{fontSize: 24, fontWeight: 800, letterSpacing: "-.02em", lineHeight: 1}}>2/5</div>
            </div>
          </div>
          <div style={{height: 1, background: "var(--hairline)"}}></div>
        </div>
        {/* Recording player */}
        <div style={{display: "flex", flexDirection: "column", gap: 10, padding: "14px", borderRadius: 12, background: "var(--surface)", border: "1px solid var(--hairline)"}}>
          <div className="mono" style={{fontSize: 10, fontWeight: 700, letterSpacing: ".1em", color: "var(--muted)"}}>{window.L("تسجيل المكالمة", "CALL RECORDING")}</div>
          <div style={{display: "flex", alignItems: "center", gap: 12}}>
            <span style={{width: 38, height: 38, borderRadius: "50%", background: "var(--ink)", color: "var(--bg)", display: "grid", placeItems: "center", flexShrink: 0, fontSize: 13, paddingLeft: 2}}>▶</span>
            <div className="wave" style={{flex: 1, minWidth: 0, height: 34, gap: 2, overflow: "hidden"}}>
              {Array.from({length: 28}).map((_, i) => {
                const h = 8 + Math.abs(Math.sin(i * 0.9) * 22) + (i % 4) * 4;
                const on = (i / 28) * 100 < played;
                return <span key={i} className={on ? "hi" : ""} style={{height: `${Math.min(30, h)}px`, background: on ? "var(--ink)" : "var(--hairline-strong)", opacity: 1}}></span>;
              })}
            </div>
          </div>
          <div className="mono" style={{fontSize: 11, fontWeight: 700, color: "var(--muted)", textAlign: "end"}}>1:52 / 6m 12s</div>
        </div>
      </div>
    );
  }

  if (kind === "dashboard") {
    const stats = [
      {l: window.L("متوسط التقييم", "Avg rating"), v: "4.7", u: "/5", d: "+0.1"},
      {l: window.L("نسبة الحل", "Resolution"), v: "90", u: "%", d: "+2%"},
      {l: window.L("المكالمات المُعالجة", "Calls handled"), v: "552", u: "", d: "+48"},
      {l: window.L("متوسط المعالجة", "Avg handle"), v: "4:12", u: window.L("دق", "min"), d: "-18s"},
      {l: window.L("الفائتة", "Missed"), v: "3", u: "%", d: "-1%"},
    ];
    // Call-volume curve data (25 hourly points)
    const inc = [0.18,0.10,0.07,0.07,0.10,0.20,0.35,0.52,0.68,0.80,0.88,0.90,0.82,0.68,0.60,0.66,0.80,0.84,0.78,0.64,0.50,0.38,0.28,0.22,0.18];
    const ans = inc.map((v) => Math.max(0.04, v * 0.9 - 0.02));
    const W = 1000, BASE = 210, TOP = 28;
    const X = (i) => (i / (inc.length - 1)) * W;
    const Y = (v) => BASE - v * (BASE - TOP);
    const toPts = (arr) => arr.map((v, i) => [X(i), Y(v)]);
    const incPts = toPts(inc), ansPts = toPts(ans);
    const curve = (p) => {
      let d = "";
      for (let i = 0; i < p.length - 1; i++) {
        const p0 = p[i - 1] || p[i], p1 = p[i], p2 = p[i + 1], p3 = p[i + 2] || p[i + 1];
        const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
        const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
        d += `C${c1x},${c1y} ${c2x},${c2y} ${p2[0]},${p2[1]} `;
      }
      return d;
    };
    const incLine = `M${incPts[0][0]},${incPts[0][1]} ` + curve(incPts);
    const ansLine = `M${ansPts[0][0]},${ansPts[0][1]} ` + curve(ansPts);
    const ansRev = [...ansPts].reverse();
    const areaPath = incLine + `L${ansRev[0][0]},${ansRev[0][1]} ` + curve(ansRev) + "Z";
    return (
      <div className="feat-viz" style={{padding: 22, alignItems: "stretch", flexDirection: "column", gap: 14, minHeight: 180}}>
        <div style={{display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8}}>
          {stats.map((s) => (
            <div key={s.l} style={{padding: "10px 11px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10}}>
              <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", gap: 5}}>
                <span className="mono" style={{fontSize: 8.5, fontWeight: 700, letterSpacing: ".04em", color: "var(--muted)", textTransform: "uppercase", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>{s.l}</span>
                <span className="mono" style={{fontSize: 9.5, fontWeight: 700, color: "var(--muted)", flexShrink: 0}}>{s.d}</span>
              </div>
              <div style={{display: "flex", alignItems: "baseline", gap: 3, marginTop: 5}}>
                <span style={{fontSize: 21, fontWeight: 800, letterSpacing: "-.03em", lineHeight: 1}}>{s.v}</span>
                {s.u && <span className="mono" style={{fontSize: 11, color: "var(--muted)", fontWeight: 600}}>{s.u}</span>}
              </div>
            </div>
          ))}
        </div>
        {/* Call volume chart */}
        <div style={{padding: "18px 18px 14px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 12}}>
          <div style={{display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, flexWrap: "wrap"}}>
            <div style={{fontSize: 14, fontWeight: 800, letterSpacing: "-.01em"}}>{window.L("حجم المكالمات", "Call volume")}</div>
            <div style={{display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap"}}>
              <span style={{display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--muted)"}}>
                <span style={{width: 15, height: 2.5, borderRadius: 2, background: "var(--ink)"}}></span>
                {window.L("واردة", "Incoming")} <b style={{color: "var(--ink)"}}>(270)</b>
              </span>
              <span style={{display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--muted)"}}>
                <span style={{width: 15, height: 0, borderTop: "2.5px dashed var(--muted)"}}></span>
                {window.L("مُجابة", "Answered")} <b style={{color: "var(--ink)"}}>(242)</b>
              </span>
              <span style={{display: "inline-flex", alignItems: "center", gap: 6, fontSize: 11, color: "var(--muted)"}}>
                <span style={{width: 12, height: 11, borderRadius: 3, background: "color-mix(in srgb, var(--ink) 12%, transparent)"}}></span>
                {window.L("فائتة", "Missed")}
              </span>
            </div>
          </div>
          <svg viewBox="0 0 1000 250" preserveAspectRatio="none" style={{width: "100%", height: 150, display: "block", marginTop: 10, overflow: "visible"}}>
            <line x1="0" y1={BASE} x2={W} y2={BASE} stroke="var(--hairline-strong)" strokeWidth="1"/>
            <path d={areaPath} fill="color-mix(in srgb, var(--ink) 10%, transparent)" stroke="none"/>
            <path d={ansLine} fill="none" stroke="var(--muted)" strokeWidth="2.5" strokeDasharray="7 6" strokeLinecap="round" vectorEffect="non-scaling-stroke"/>
            <path d={incLine} fill="none" stroke="var(--ink)" strokeWidth="2.5" strokeLinecap="round" vectorEffect="non-scaling-stroke"/>
            {ansPts.map((p, i) => <circle key={"a" + i} cx={p[0]} cy={p[1]} r="3" fill="var(--muted)"/>)}
            {incPts.map((p, i) => <circle key={"i" + i} cx={p[0]} cy={p[1]} r="3.2" fill="var(--ink)"/>)}
          </svg>
        </div>
      </div>
    );
  }
  if (kind === "agentapp") {
    return (
      <div className="feat-viz" style={{padding: 18, flexDirection: "column", alignItems: "stretch", gap: 16, minHeight: 200, justifyContent: "center"}}>
        <div style={{display: "flex", alignItems: "center", gap: 12}}>
          <span style={{width: 44, height: 44, borderRadius: "50%", background: "var(--hairline-strong)", display: "grid", placeItems: "center", color: "var(--ink)"}}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6.5 3h3l1.5 4-2 1.5a11 11 0 0 0 4.5 4.5l1.5-2 4 1.5v3a2 2 0 0 1-2 2A14 14 0 0 1 4.5 5a2 2 0 0 1 2-2Z" fill="currentColor"/></svg>
          </span>
          <div style={{flex: 1, minWidth: 0}}>
            <div className="mono" style={{fontWeight: 700, fontSize: 16, letterSpacing: "-.01em"}}>+966 5•• ••27</div>
            <div style={{display: "flex", alignItems: "center", gap: 8, marginTop: 3}}>
              <span className="mono" style={{color: "var(--accent)", fontSize: 12, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 5}}>
                <span style={{width: 7, height: 7, borderRadius: 50, background: "var(--accent)", display: "inline-block"}}></span>
                {window.L("متصل · 02:14", "Connected · 02:14")}
              </span>
              <span style={{fontSize: 11, fontWeight: 700, padding: "2px 8px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--hairline)", color: "var(--muted)", display: "inline-flex", alignItems: "center", gap: 4}}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none"><path d="M4 4l16 16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/><path d="M9 4a3 3 0 0 1 6 0v4m0 4a3 3 0 0 1-5.5 1.7M7 11a5 5 0 0 0 8 4" stroke="currentColor" strokeWidth="2" fill="none"/></svg>
                {window.L("مكتوم", "Muted")}
              </span>
            </div>
          </div>
        </div>
        <div style={{display: "flex", gap: 8}}>
          <span style={{flex: 1, textAlign: "center", padding: "11px 0", borderRadius: 10, background: "var(--brand-gradient)", color: "#fff", fontSize: 12.5, fontWeight: 700}}>{window.L("إنهاء","End")}</span>
          <span style={{flex: 1, textAlign: "center", padding: "11px 0", borderRadius: 10, background: "var(--accent-soft)", border: "1px solid var(--accent)", color: "var(--accent)", fontSize: 12.5, fontWeight: 700}}>{window.L("كتم","Mute")}</span>
          <span style={{flex: 1, textAlign: "center", padding: "11px 0", borderRadius: 10, background: "var(--surface)", border: "1px solid var(--hairline)", fontSize: 12.5, fontWeight: 600}}>{window.L("تحويل","Transfer")}</span>
        </div>
      </div>
    );
  }

  if (kind === "calllog") {
    return (
      <div className="feat-viz" style={{padding: 16, flexDirection: "column", alignItems: "stretch", gap: 7, minHeight: 200}}>
        <div className="mono" style={{fontSize: 11, color: "var(--muted)", marginBottom: 2}}>CALL REGISTRY · {window.L("اليوم", "TODAY")}</div>
        {[
          {dir: "in", n: "055 •• ••67", d: "04:12", s: window.L("مكتملة","Done"), ok: true},
          {dir: "out", n: "059 •• ••32", d: "01:38", s: window.L("مكتملة","Done"), ok: true},
          {dir: "in", n: "053 •• ••88", d: "00:00", s: window.L("فائتة","Missed"), ok: false},
          {dir: "in", n: "054 •• ••11", d: "02:51", s: window.L("محوّلة","Routed"), ok: true},
        ].map((r, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 10, padding: "9px 12px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, fontSize: 13}}>
            <span className="mono" style={{color: r.dir === "in" ? "var(--accent)" : "var(--muted)", fontWeight: 700, fontSize: 13}}>{r.dir === "in" ? "↓" : "↑"}</span>
            <span className="mono" style={{flex: 1, fontWeight: 600}}>{r.n}</span>
            <span className="mono" style={{color: "var(--muted)", fontSize: 12}}>{r.d}</span>
            <span style={{fontSize: 11, padding: "3px 8px", borderRadius: 999, background: r.ok ? "var(--accent-soft)" : "var(--surface-2)", color: r.ok ? "var(--accent)" : "var(--muted)", fontWeight: 700, border: r.ok ? "none" : "1px solid var(--hairline)"}}>{r.s}</span>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "profiles") {
    return (
      <div className="feat-viz" style={{padding: 18, flexDirection: "column", alignItems: "stretch", gap: 12, minHeight: 200, justifyContent: "center"}}>
        <div style={{display: "flex", alignItems: "center", gap: 12}}>
          <span style={{width: 40, height: 40, borderRadius: "50%", background: "var(--accent)", color: "var(--accent-ink)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 15}}>س</span>
          <div style={{flex: 1, minWidth: 0}}>
            <div style={{fontWeight: 700, fontSize: 14}}>{window.L("سارة المطيري", "Sara Al-Mutairi")}</div>
            <div className="mono" style={{color: "var(--muted)", fontSize: 11}}>ID · CX-10482</div>
          </div>
          <span style={{fontSize: 10, padding: "3px 8px", borderRadius: 999, background: "var(--ink)", color: "var(--bg)", fontWeight: 700}}>VIP</span>
        </div>
        <div style={{display: "flex", gap: 6, flexWrap: "wrap"}}>
          {[window.L("عميل متكرر","Repeat"), window.L("الرياض","Riyadh"), window.L("تجزئة","Retail")].map((t) => (
            <span key={t} style={{fontSize: 11, padding: "4px 10px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--hairline)", color: "var(--muted)", fontWeight: 600}}>{t}</span>
          ))}
        </div>
        {[
          {l: window.L("آخر طلب","Last order"), v: "#48207"},
          {l: window.L("الرضا","Satisfaction"), v: "96%"},
          {l: window.L("تعبئة AI","AI-filled"), v: window.L("تلقائي","Auto")},
        ].map((f) => (
          <div key={f.l} style={{display: "flex", justifyContent: "space-between", fontSize: 12, padding: "7px 12px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 8}}>
            <span style={{color: "var(--muted)"}}>{f.l}</span>
            <span className="mono" style={{fontWeight: 700}}>{f.v}</span>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "presence") {
    const agents = [
      {i: "SA", n: window.L("سارة القحطاني", "Sara Al-Qahtani"), active: true},
      {i: "FA", n: window.L("فهد العتيبي", "Fahd Al-Otaibi"), active: true},
      {i: "ON", n: window.L("عمر ناصر", "Omar Nasser"), active: false},
    ];
    const nActive = agents.filter((a) => a.active).length;
    return (
      <div className="feat-viz" style={{padding: 0, flexDirection: "column", alignItems: "stretch", justifyContent: "flex-start", minHeight: 200}}>
        <div style={{padding: "16px 18px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8, flexWrap: "wrap"}}>
          <div style={{display: "flex", alignItems: "baseline", gap: 8}}>
            <span style={{fontSize: 17, fontWeight: 800, letterSpacing: "-.01em"}}>{window.L("الموظفون", "Agents")}</span>
            <span style={{fontSize: 14, fontWeight: 700, color: "var(--muted)"}}>{agents.length}</span>
          </div>
          <div style={{display: "flex", alignItems: "center", gap: 12, fontSize: 12, fontWeight: 700}}>
            <span style={{display: "inline-flex", alignItems: "center", gap: 5}}><span style={{width: 7, height: 7, borderRadius: 50, background: "var(--ink)"}}></span>{nActive} {window.L("نشط", "active")}</span>
            <span style={{display: "inline-flex", alignItems: "center", gap: 5, color: "var(--muted)"}}><span style={{width: 7, height: 7, borderRadius: 50, background: "var(--hairline-strong)"}}></span>{agents.length - nActive} {window.L("غير نشط", "inactive")}</span>
          </div>
        </div>
        <div style={{height: 1, background: "var(--hairline)"}}></div>
        {agents.map((a, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 12, padding: "13px 18px", borderBottom: i < agents.length - 1 ? "1px solid var(--hairline)" : "none"}}>
            <span className="mono" style={{width: 36, height: 36, borderRadius: "50%", background: a.active ? "var(--ink)" : "var(--hairline-strong)", color: a.active ? "var(--bg)" : "var(--muted)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 12, flexShrink: 0}}>{a.i}</span>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontWeight: 700, fontSize: 13.5}}>{a.n}</div>
              <div className="mono" style={{fontSize: 10, color: "var(--muted)", letterSpacing: ".06em"}}>{window.L("مكالمات", "CALLS")}</div>
            </div>
            <span style={{display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, fontWeight: 600, color: a.active ? "var(--ink)" : "var(--muted)", flexShrink: 0}}>
              <span style={{width: 7, height: 7, borderRadius: 50, background: a.active ? "var(--ink)" : "var(--hairline-strong)"}}></span>
              {a.active ? window.L("نشط", "Active") : window.L("غير نشط", "Inactive")}
            </span>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "agentperf") {
    const agents = [
      {i: "SA", n: window.L("سارة القحطاني", "Sara Al-Qahtani"), active: true, rating: "4.9", resolved: 96, vol: 212},
      {i: "FA", n: window.L("فهد العتيبي", "Fahd Al-Otaibi"), active: true, rating: "4.6", resolved: 90, vol: 198},
      {i: "ON", n: window.L("عمر ناصر", "Omar Nasser"), active: false, rating: "4.4", resolved: 84, vol: 142},
    ];
    return (
      <div className="feat-viz" style={{padding: 0, flexDirection: "column", alignItems: "stretch", justifyContent: "flex-start", minHeight: 200}}>
        <div style={{padding: "16px 18px", display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 8}}>
          <div style={{display: "flex", alignItems: "baseline", gap: 8}}>
            <span style={{fontSize: 17, fontWeight: 800, letterSpacing: "-.01em"}}>{window.L("الموظفون", "Agents")}</span>
            <span style={{fontSize: 14, fontWeight: 700, color: "var(--muted)"}}>{agents.length}</span>
          </div>
          <span className="mono" style={{fontSize: 11, color: "var(--muted)"}}>{window.L("هذا الأسبوع", "This week")}</span>
        </div>
        <div style={{height: 1, background: "var(--hairline)"}}></div>
        {agents.map((a, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 12, padding: "12px 18px", borderBottom: i < agents.length - 1 ? "1px solid var(--hairline)" : "none"}}>
            <span className="mono" style={{width: 36, height: 36, borderRadius: "50%", background: a.active ? "var(--ink)" : "var(--hairline-strong)", color: a.active ? "var(--bg)" : "var(--muted)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 12, flexShrink: 0}}>{a.i}</span>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontWeight: 700, fontSize: 13.5}}>{a.n}</div>
              <div className="mono" style={{fontSize: 11, color: "var(--muted)", marginTop: 1}}><b style={{color: "var(--ink)"}}>{a.resolved}</b> {window.L("محلولة", "resolved")} · <b style={{color: "var(--ink)"}}>{a.vol}</b> {window.L("مكالمة", "calls")}</div>
            </div>
            <div style={{width: 72, flexShrink: 0}}>
              <div className="mono" style={{fontSize: 14, fontWeight: 700, textAlign: "end", marginBottom: 4}}>{a.rating}</div>
              <div style={{height: 5, background: "var(--hairline)", borderRadius: 3, overflow: "hidden"}}>
                <div style={{height: "100%", width: `${(parseFloat(a.rating) / 5) * 100}%`, background: "var(--ink)", borderRadius: 3, marginInlineStart: "auto"}}></div>
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (kind === "routes") {
    return (
      <div className="feat-viz" style={{padding: 18, flexDirection: "column", alignItems: "stretch", gap: 9, minHeight: 200, justifyContent: "center"}}>
        {[
          {l: window.L("مسار الدوام الرسمي","Working-hours route"), active: true, tag: window.L("مفعّل","Active")},
          {l: window.L("مسار خارج الدوام","After-hours route"), active: false, tag: window.L("جاهز","Ready")},
          {l: window.L("مسار موسم الذروة","Peak-season route"), active: false, tag: window.L("جاهز","Ready")},
        ].map((r, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 10, padding: "11px 13px", borderRadius: 10, background: r.active ? "var(--accent-soft)" : "var(--surface)", border: `1px solid ${r.active ? "transparent" : "var(--hairline)"}`, fontSize: 13}}>
            <span className="mono" style={{width: 22, height: 22, borderRadius: 6, background: r.active ? "var(--accent)" : "var(--hairline-strong)", color: r.active ? "var(--accent-ink)" : "var(--ink)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11}}>{i+1}</span>
            <span style={{flex: 1, fontWeight: 600, color: r.active ? "var(--accent)" : "var(--ink)"}}>{r.l}</span>
            <span style={{fontSize: 11, fontWeight: 700, color: r.active ? "var(--accent)" : "var(--muted)"}}>{r.tag}</span>
          </div>
        ))}
        <div style={{display: "flex", alignItems: "center", gap: 8, paddingTop: 2, fontSize: 12, color: "var(--muted)"}}>
          <span className="mono">⤷</span>
          <span>{window.L("المبيعات ← الفرع ← الموظف المختص", "Sales → Branch → Assigned agent")}</span>
        </div>
      </div>
    );
  }

  if (kind === "escalation") {
    return (
      <div className="feat-viz" style={{padding: 20, flexDirection: "column", alignItems: "stretch", gap: 0, minHeight: 200, justifyContent: "center"}}>
        {[
          {h: window.L("مكالمة واردة","Incoming call"), s: window.L("الموظف الأول","First agent"), on: false},
          {h: window.L("بلا رد · 10 ثوانٍ","No answer · 10s"), s: window.L("انتهت المهلة","Timeout"), on: false, warn: true},
          {h: window.L("تصعيد للمشرف","Escalate to supervisor"), s: window.L("تم الرد","Answered"), on: true},
        ].map((step, i, arr) => (
          <React.Fragment key={i}>
            <div style={{display: "flex", alignItems: "center", gap: 12}}>
              <span style={{width: 12, height: 12, borderRadius: 50, flexShrink: 0, background: step.on ? "var(--accent)" : step.warn ? "var(--accent-soft)" : "var(--hairline-strong)", border: step.warn ? "2px solid var(--accent)" : "none"}}></span>
              <div style={{flex: 1, padding: "10px 14px", borderRadius: 10, background: step.on ? "var(--accent-soft)" : "var(--surface)", border: `1px solid ${step.on ? "transparent" : "var(--hairline)"}`}}>
                <div style={{fontWeight: 700, fontSize: 13, color: step.on ? "var(--accent)" : "var(--ink)"}}>{step.h}</div>
                <div style={{fontSize: 11, color: "var(--muted)"}}>{step.s}</div>
              </div>
            </div>
            {i < arr.length - 1 && <div style={{width: 2, height: 14, background: "var(--hairline-strong)", marginInlineStart: 5}}></div>}
          </React.Fragment>
        ))}
      </div>
    );
  }

  if (kind === "notes") {
    return (
      <div className="feat-viz" style={{padding: 16, flexDirection: "column", alignItems: "stretch", gap: 0, minHeight: 200, justifyContent: "center"}}>
        <div style={{border: "1px solid var(--hairline)", borderRadius: 14, background: "var(--surface)", overflow: "hidden"}}>
          <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 13px", borderBottom: "1px solid var(--hairline)"}}>
            <span style={{fontWeight: 700, fontSize: 12.5, color: "var(--ink)"}}>{window.L("محادثة العميل · خالد المطيري","Customer chat · Khalid")}</span>
            <span className="mono" style={{fontSize: 10.5, color: "var(--muted)"}}>{window.L("طلب ٤٨٢٠٧","#48207")}</span>
          </div>

          {/* Customer message */}
          <div style={{padding: "12px 13px 4px"}}>
            <div style={{display: "flex", gap: 9, alignItems: "flex-start"}}>
              <span style={{flexShrink: 0, width: 26, height: 26, borderRadius: 50, background: "var(--hairline-strong)", color: "var(--ink)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11}}>{window.L("خ","K")}</span>
              <div>
                <div style={{fontSize: 10, fontWeight: 700, color: "var(--muted)", marginBottom: 3}}>{window.L("العميل","Customer")}</div>
                <div style={{padding: "9px 12px", background: "var(--bg)", border: "1px solid var(--hairline)", borderRadius: "4px 12px 12px 12px", fontSize: 12.5, color: "var(--ink)"}}>{window.L("ودّي أأكد الطلب، وأبي خصم على الشحن.","I want to confirm my order — any discount on shipping?")}</div>
              </div>
            </div>
          </div>

          {/* Internal transfer thread */}
          <div style={{background: "var(--accent-soft)", borderBlock: "1px solid var(--hairline)", margin: "8px 0", padding: "11px 13px"}}>
            <div style={{display: "flex", alignItems: "center", gap: 7, marginBottom: 10}}>
              <span style={{fontSize: 10, fontWeight: 800, letterSpacing: ".03em", color: "var(--accent)"}}>{window.L("تحويل داخلي بين الموظفين","INTERNAL TRANSFER")}</span>
              <span style={{fontSize: 9.5, fontWeight: 700, color: "var(--accent)", background: "var(--surface)", padding: "2px 8px", borderRadius: 50, marginInlineStart: "auto"}}>{window.L("لا يراه العميل","Customer can't see this")}</span>
            </div>
            {/* Agent A asks Agent B */}
            <div style={{display: "flex", gap: 9, alignItems: "flex-start", marginBottom: 10}}>
              <span className="mono" style={{flexShrink: 0, width: 26, height: 26, borderRadius: 8, background: "var(--accent)", color: "var(--accent-ink)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11}}>{window.L("س","S")}</span>
              <div style={{flex: 1}}>
                <div style={{display: "flex", alignItems: "baseline", gap: 6, marginBottom: 2}}>
                  <span style={{fontSize: 11.5, fontWeight: 700, color: "var(--ink)"}}>{window.L("سعد · خدمة العملاء","Saad · Support")}</span>
                  <span style={{fontSize: 10, color: "var(--accent)", fontWeight: 700}}>{window.L("← حوّل إلى ناصر","→ to Nasser")}</span>
                  <span className="mono" style={{fontSize: 9.5, color: "var(--muted)", marginInlineStart: "auto"}}>10:42</span>
                </div>
                <div style={{fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5}}>{window.L("ناصر، أقدر أعطيه شحن مجاني؟","Nasser, can I give him free shipping?")}</div>
              </div>
            </div>
            {/* Agent B replies */}
            <div style={{display: "flex", gap: 9, alignItems: "flex-start"}}>
              <span className="mono" style={{flexShrink: 0, width: 26, height: 26, borderRadius: 8, background: "var(--accent)", color: "var(--accent-ink)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11}}>{window.L("ن","N")}</span>
              <div style={{flex: 1}}>
                <div style={{display: "flex", alignItems: "baseline", gap: 6, marginBottom: 2}}>
                  <span style={{fontSize: 11.5, fontWeight: 700, color: "var(--ink)"}}>{window.L("ناصر · مشرف المبيعات","Nasser · Sales lead")}</span>
                  <span className="mono" style={{fontSize: 9.5, color: "var(--muted)", marginInlineStart: "auto"}}>10:43</span>
                </div>
                <div style={{fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5}}>{window.L("إيه، عميل VIP. أعطه شحن مجاني.","Yes, he's VIP — give him free shipping.")}</div>
              </div>
            </div>
          </div>

          {/* Reply sent to customer */}
          <div style={{padding: "4px 13px 13px"}}>
            <div style={{display: "flex", gap: 9, alignItems: "flex-start", flexDirection: "row-reverse"}}>
              <span className="mono" style={{flexShrink: 0, width: 26, height: 26, borderRadius: 50, background: "var(--ink)", color: "var(--surface)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 11}}>{window.L("س","S")}</span>
              <div style={{textAlign: "start"}}>
                <div style={{fontSize: 10, fontWeight: 700, color: "var(--muted)", marginBottom: 3, textAlign: "end"}}>{window.L("رد سعد للعميل","Saad → customer")}</div>
                <div style={{padding: "9px 12px", background: "var(--brand-gradient)", color: "#fff", borderRadius: "12px 4px 12px 12px", fontSize: 12.5}}>{window.L("أكيد خالد، شحنك علينا مجاني ✓","Sure Khalid — your shipping is on us ✓")}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  return <div className="feat-viz mono" style={{color: "var(--muted)", fontSize: 12}}>// viz</div>;
}

// Sector visualization
function SectorViz({ id }) {
  if (id === "ecom") {
    return (
      <div className="sect-viz" style={{display: "flex", flexDirection: "column", gap: 10, padding: 18}}>
        <div className="mono" style={{fontSize: 11, color: "var(--muted)", marginBottom: 4}}>SALES PIPELINE · YOM</div>
        {[
          {l: window.L("محادثات نشطة", "Active chats"), v: 184, w: 100},
          {l: window.L("ليدز مؤهلة", "Qualified leads"), v: 92, w: 60},
          {l: window.L("في الدفع", "In checkout"), v: 41, w: 32},
          {l: window.L("صفقات مغلقة", "Closed deals"), v: 28, w: 22},
        ].map((s) => (
          <div key={s.l} style={{background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, padding: "10px 14px"}}>
            <div style={{display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 6}}>
              <span style={{fontWeight: 600}}>{s.l}</span>
              <span className="mono" style={{fontWeight: 700}}>{s.v}</span>
            </div>
            <div style={{height: 4, background: "var(--hairline)", borderRadius: 2, overflow: "hidden"}}>
              <div style={{height: "100%", width: `${s.w}%`, background: "var(--accent)"}}></div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (id === "health") {
    return (
      <div className="sect-viz" style={{display: "flex", flexDirection: "column", gap: 8, padding: 18}}>
        <div className="mono" style={{fontSize: 11, color: "var(--muted)", marginBottom: 4}}>{window.L("الخميس · 14 يونيو", "Thursday · June 14")}</div>
        {[
          {t: "09:00", n: window.L("د. عبدالله الحربي", "Dr. Abdullah Al-Harbi"), p: window.L("كشف عام", "General checkup"), ok: true},
          {t: "10:30", n: window.L("د. هند المطيري", "Dr. Hind Al-Mutairi"), p: window.L("متابعة", "Follow-up"), ok: true},
          {t: "11:15", n: window.L("د. خالد العتيبي", "Dr. Khalid Al-Otaibi"), p: window.L("أشعة", "X-ray"), ok: false},
          {t: "13:00", n: window.L("د. سارة القحطاني", "Dr. Sara Al-Qahtani"), p: window.L("أسنان", "Dental"), ok: true},
        ].map((a, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 12, padding: "10px 14px", background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, fontSize: 13}}>
            <span className="mono" style={{fontWeight: 700, color: "var(--accent)", fontSize: 13}}>{a.t}</span>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontWeight: 600, fontSize: 13}}>{a.n}</div>
              <div style={{color: "var(--muted)", fontSize: 11}}>{a.p}</div>
            </div>
            <span style={{fontSize: 11, padding: "3px 8px", borderRadius: 999, background: a.ok ? "var(--accent-soft)" : "var(--surface-2)", color: a.ok ? "var(--accent-ink)" : "var(--muted)", fontWeight: 700}}>{a.ok ? window.L("مؤكد", "Confirmed") : window.L("بانتظار", "Pending")}</span>
          </div>
        ))}
      </div>
    );
  }
  if (id === "realestate") {
    return (
      <div className="sect-viz" style={{display: "flex", flexDirection: "column", gap: 10, padding: 18}}>
        <div className="mono" style={{fontSize: 11, color: "var(--muted)", marginBottom: 4}}>LEAD QUALIFICATION · LIVE</div>
        {[
          {n: window.L("محمد السلمي", "Mohammed Al-Salmi"), b: "1.2M - 1.5M", a: window.L("شمال الرياض", "North Riyadh"), hi: true},
          {n: window.L("نوف الزهراني", "Nouf Al-Zahrani"), b: "800K - 1M", a: window.L("جدة - الشاطئ", "Jeddah - Corniche"), hi: false},
          {n: window.L("فهد القرني", "Fahad Al-Qarni"), b: "2M+", a: window.L("الخبر", "Khobar"), hi: true},
        ].map((l, i) => (
          <div key={i} style={{padding: 12, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 12}}>
            <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8}}>
              <span style={{fontWeight: 700, fontSize: 13}}>{l.n}</span>
              <span style={{fontSize: 10, padding: "3px 8px", borderRadius: 999, background: l.hi ? "var(--accent)" : "var(--surface-2)", color: l.hi ? "var(--accent-ink)" : "var(--muted)", fontWeight: 700, border: !l.hi ? "1px solid var(--hairline)" : "none"}}>{l.hi ? window.L("عالي", "High") : window.L("متوسط", "Medium")} {window.L("اهتمام", "intent")}</span>
            </div>
            <div style={{display: "flex", gap: 14, fontSize: 12, color: "var(--muted)"}}>
              <span><span className="mono" style={{color: "var(--ink)"}}>{l.b}</span></span>
              <span>· {l.a}</span>
            </div>
          </div>
        ))}
      </div>
    );
  }
  if (id === "edu") {
    return (
      <div className="sect-viz" style={{padding: 18, display: "flex", flexDirection: "column", gap: 12}}>
        <div className="mono" style={{fontSize: 11, color: "var(--muted)"}}>{window.L("ADMISSIONS · موسم التسجيل 2026", "ADMISSIONS · Enrollment season 2026")}</div>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8}}>
          {[
            {l: window.L("استفسارات اليوم", "Inquiries today"), v: "2,841"},
            {l: window.L("تم التسجيل", "Enrolled"), v: "612"},
            {l: window.L("بانتظار اختبار", "Awaiting test"), v: "184"},
            {l: window.L("بانتظار وثائق", "Awaiting docs"), v: "97"},
          ].map((s) => (
            <div key={s.l} style={{background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, padding: 12}}>
              <div style={{fontSize: 11, color: "var(--muted)"}}>{s.l}</div>
              <div className="mono" style={{fontSize: 22, fontWeight: 800, letterSpacing: "-.02em", marginTop: 4}}>{s.v}</div>
            </div>
          ))}
        </div>
        <div style={{background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, padding: "10px 14px", fontSize: 12, display: "flex", justifyContent: "space-between"}}>
          <span style={{color: "var(--muted)"}}>{window.L("متوسط وقت الرد", "Avg response time")}</span>
          <span className="mono" style={{fontWeight: 700, color: "var(--accent)"}}>0.8s</span>
        </div>
      </div>
    );
  }
  if (id === "hospitality") {
    return (
      <div className="sect-viz" style={{padding: 18, display: "flex", flexDirection: "column", gap: 10}}>
        <div className="mono" style={{fontSize: 11, color: "var(--muted)"}}>CONCIERGE INBOX</div>
        {[
          {r: "1204", req: window.L("مناشف إضافية", "Extra towels"), d: window.L("خدمة الغرف", "Room service"), s: "active"},
          {r: "0812", req: window.L("حجز سبا · 17:00", "Spa booking · 17:00"), d: window.L("السبا", "Spa"), s: "active"},
          {r: "1417", req: window.L("ترقية لجناح بحري", "Upgrade to sea suite"), d: window.L("الاستقبال", "Front desk"), s: "done"},
          {r: "0903", req: window.L("إفطار في الغرفة", "In-room breakfast"), d: window.L("المطبخ", "Kitchen"), s: "active"},
        ].map((t, i) => (
          <div key={i} style={{display: "flex", alignItems: "center", gap: 12, padding: 10, background: "var(--surface)", border: "1px solid var(--hairline)", borderRadius: 10, fontSize: 13}}>
            <span className="mono" style={{padding: "2px 8px", background: "var(--surface-2)", borderRadius: 6, fontWeight: 700, fontSize: 11}}>#{t.r}</span>
            <div style={{flex: 1, minWidth: 0}}>
              <div style={{fontWeight: 600, fontSize: 13}}>{t.req}</div>
              <div style={{color: "var(--muted)", fontSize: 11}}>→ {t.d}</div>
            </div>
            <span style={{width: 8, height: 8, borderRadius: 50, background: t.s === "active" ? "var(--accent)" : "var(--hairline-strong)"}}></span>
          </div>
        ))}
      </div>
    );
  }
  return null;
}

Object.assign(window, { FeatViz, SectorViz, Wave });