/* global React */
const { useState, useEffect, useRef } = React;

// ── Per-agent animated visuals ────────────────────────────────────────────────

function VizRouting({ isEs }) {
  const [tick, setTick] = useState(0);
  useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1600); return () => clearInterval(id); }, []);
  const stops = [[80,200],[160,130],[260,170],[340,100],[430,155],[510,90]];
  const phases = tick % 4;
  return (
    <svg viewBox="0 0 600 320" style={{ width:"100%", height:"100%", display:"block" }}>
      {/* grid */}
      {[60,120,180,240,300].map(y => <line key={y} x1={20} y1={y} x2={580} y2={y} stroke="oklch(0.28 0.04 250)" strokeWidth={0.5} />)}
      {[100,200,300,400,500].map(x => <line key={x} x1={x} y1={20} x2={x} y2={300} stroke="oklch(0.28 0.04 250)" strokeWidth={0.5} />)}

      {/* OLD route (faded) */}
      <polyline points={stops.map(([x,y]) => `${x},${y}`).join(" ")} fill="none" stroke="oklch(0.45 0.04 240)" strokeWidth={1.5} strokeDasharray="4 4" />

      {/* NEW optimized route */}
      {phases >= 1 && (
        <polyline
          points={[stops[0], stops[2], stops[1], stops[4], stops[3], stops[5]].map(([x,y]) => `${x},${y}`).join(" ")}
          fill="none" stroke="var(--accent)" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round"
          style={{ animation: phases >= 1 ? "agentDash 1.2s ease forwards" : "none" }}
        />
      )}
      <style>{`@keyframes agentDash{from{stroke-dashoffset:800;stroke-dasharray:800}to{stroke-dashoffset:0;stroke-dasharray:none}}`}</style>

      {/* stops */}
      {stops.map(([x, y], i) => (
        <g key={i}>
          <circle cx={x} cy={y} r={phases >= 2 && [1,3].includes(i) ? 10 : 8} fill={phases >= 2 && [1,3].includes(i) ? "oklch(0.62 0.18 145)" : "oklch(0.22 0.04 250)"} stroke={phases >= 2 && [1,3].includes(i) ? "oklch(0.62 0.18 145)" : "var(--accent)"} strokeWidth={1.5} style={{ transition:"all .5s" }} />
          <text x={x} y={y+4} textAnchor="middle" fontSize={9} fontFamily="var(--font-mono)" fill="var(--bone)">{i+1}</text>
        </g>
      ))}

      {/* moving vehicle */}
      <circle cx={80 + (tick % 24) * 20} cy={200 - (tick % 8) * 14} r={7} fill="var(--accent)">
        <animate attributeName="opacity" values="1;0.6;1" dur="1s" repeatCount="indefinite" />
      </circle>

      {/* status callout */}
      <rect x={340} y={220} width={220} height={68} rx={6} fill="oklch(0.16 0.04 250)" stroke="oklch(0.30 0.06 250)" strokeWidth={1} />
      <text x={352} y={240} fontSize={8.5} fontFamily="var(--font-mono)" fill="oklch(0.55 0.04 240)" letterSpacing="0.1em">{isEs ? "RESULTADO" : "RESULT"}</text>
      <text x={352} y={258} fontSize={12} fontFamily="var(--font-mono)" fill="oklch(0.62 0.18 145)">−{28 + (tick % 12)} km</text>
      <text x={352} y={276} fontSize={10} fontFamily="var(--font-mono)" fill="var(--bone)">{isEs ? `${14 + (tick % 5)} paradas reasignadas` : `${14 + (tick % 5)} stops reassigned`}</text>
    </svg>
  );
}

function VizCustomer({ isEs }) {
  const msgs = isEs ? [
    { who:"user", t:"10:14", txt:"Hola, ¿cuándo llega mi pedido?" },
    { who:"ai",   t:"10:14", txt:"Hola María — tu pedido llega entre 14:00 y 15:30. Te mando el link de seguimiento." },
    { who:"user", t:"10:15", txt:"¿Puedo cambiar la dirección?" },
    { who:"ai",   t:"10:15", txt:"Sí, lo cambio ahora. ¿Me confirmás la nueva dirección?" },
    { who:"user", t:"10:16", txt:"Bv. Artigas 1200, piso 3." },
    { who:"ai",   t:"10:16", txt:"Listo — actualicé la entrega. El repartidor fue notificado." },
  ] : [
    { who:"user", t:"10:14", txt:"Hi, when does my order arrive?" },
    { who:"ai",   t:"10:14", txt:"Hi María — your package arrives between 2:00–3:30 PM. Sending your tracking link now." },
    { who:"user", t:"10:15", txt:"Can I change the delivery address?" },
    { who:"ai",   t:"10:15", txt:"Sure, I can update that now. Can you confirm the new address?" },
    { who:"user", t:"10:16", txt:"Bv. Artigas 1200, floor 3." },
    { who:"ai",   t:"10:16", txt:"Done — delivery updated. The driver has been notified." },
  ];
  const [shown, setShown] = useState(2);
  useEffect(() => {
    if (shown >= msgs.length) { const t = setTimeout(() => setShown(2), 2200); return () => clearTimeout(t); }
    const id = setTimeout(() => setShown(v => v + 1), 900);
    return () => clearTimeout(id);
  }, [shown]);

  return (
    <div style={{ height:"100%", display:"flex", flexDirection:"column", padding:"24px 32px", gap:8, justifyContent:"center" }}>
      {/* header */}
      <div style={{ display:"flex", justifyContent:"space-between", marginBottom:8, fontFamily:"var(--font-mono)", fontSize:9, letterSpacing:"0.12em", color:"oklch(0.45 0.04 240)" }}>
        <span>WHATSAPP · GROPP CX AGENT</span>
        <span style={{ color:"oklch(0.62 0.18 145)", display:"flex", alignItems:"center", gap:5 }}>
          <span style={{ width:5, height:5, borderRadius:"50%", background:"oklch(0.62 0.18 145)", display:"inline-block", animation:"pulse 1.4s infinite" }} />
          {isEs ? "en vivo" : "live"}
        </span>
      </div>
      {/* messages */}
      <div style={{ display:"flex", flexDirection:"column", gap:8 }}>
        {msgs.slice(0, shown).map((m, i) => (
          <div key={i} style={{ display:"flex", flexDirection:"column", alignItems: m.who === "user" ? "flex-end" : "flex-start", animation:"agFadeUp .3s ease", gap:2 }}>
            {m.who === "ai" && <div style={{ fontFamily:"var(--font-mono)", fontSize:8, color:"var(--accent)", letterSpacing:"0.1em", paddingLeft:2 }}>GROPP AI</div>}
            <div style={{ maxWidth:"72%", background: m.who === "user" ? "oklch(0.24 0.04 250)" : "oklch(0.20 0.06 245)", border:`1px solid ${m.who === "ai" ? "color-mix(in oklch, var(--accent) 30%, transparent)" : "oklch(0.30 0.03 250)"}`, borderRadius:10, padding:"8px 12px", fontSize:12, color:"oklch(0.88 0.02 240)", lineHeight:1.4 }}>
              {m.txt}
              <span style={{ fontFamily:"var(--font-mono)", fontSize:8, color:"oklch(0.40 0.03 240)", marginLeft:8 }}>{m.t}</span>
            </div>
          </div>
        ))}
        {shown < msgs.length && <div style={{ fontFamily:"var(--font-mono)", fontSize:14, color:"oklch(0.40 0.03 240)", letterSpacing:4, animation:"pulse 1.2s infinite" }}>···</div>}
      </div>
      {/* stats bar */}
      <div style={{ marginTop:"auto", display:"flex", gap:24, padding:"12px 0", borderTop:"1px solid oklch(0.25 0.03 250)" }}>
        {[
          { label: isEs ? "hoy" : "today", val: "312" },
          { label: "CSAT", val: "4.8/5" },
          { label: isEs ? "tiempo resp." : "response", val: "<4s" },
        ].map((s, i) => (
          <div key={i} style={{ display:"flex", flexDirection:"column", gap:2 }}>
            <div style={{ fontFamily:"var(--font-mono)", fontSize:16, fontWeight:600, color:"var(--bone)" }}>{s.val}</div>
            <div style={{ fontFamily:"var(--font-mono)", fontSize:8, color:"oklch(0.45 0.04 240)", letterSpacing:"0.1em" }}>{s.label}</div>
          </div>
        ))}
      </div>
      <style>{`@keyframes agFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}`}</style>
    </div>
  );
}

function VizSafety({ isEs }) {
  const [tick, setTick] = useState(0);
  useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 800); return () => clearTimeout(id); }, []);
  const events = isEs
    ? ["Fatiga detectada — nudge enviado","Frenazo brusco · clip guardado","Uso de teléfono · alerta","Conducción OK · 12 min limpia"]
    : ["Fatigue detected — nudge sent","Hard brake · clip secured","Phone usage · alert sent","Clean driving · 12 min clear"];
  const evColors = ["oklch(0.65 0.18 35)","oklch(0.72 0.16 25)","oklch(0.72 0.18 50)","oklch(0.62 0.18 145)"];
  return (
    <div style={{ height:"100%", display:"grid", gridTemplateColumns:"1fr 200px", gap:0 }}>
      {/* cabin cam */}
      <div style={{ position:"relative", background:"oklch(0.14 0.03 250)", overflow:"hidden" }}>
        <img src="assets/driver-portrait.jpg?v=2" alt="Cabin" style={{ width:"100%", height:"100%", objectFit:"cover", filter:"brightness(0.75) contrast(1.1)" }} />
        <div style={{ position:"absolute", inset:0, background:"linear-gradient(to right, transparent 60%, oklch(0.13 0.03 250) 100%)" }} />
        <svg viewBox="0 0 400 320" style={{ position:"absolute", inset:0, width:"100%", height:"100%" }}>
          <rect x="100" y="28" width="200" height="240" fill="none" stroke="var(--accent)" strokeWidth={1.8} strokeDasharray="5 3">
            <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />
          </rect>
          {[[100,28,1,1],[300,28,-1,1],[100,268,1,-1],[300,268,-1,-1]].map(([cx,cy,dx,dy],i) => (
            <g key={i} stroke="var(--accent)" strokeWidth={2.2} fill="none">
              <line x1={cx} y1={cy} x2={cx+14*dx} y2={cy} />
              <line x1={cx} y1={cy} x2={cx} y2={cy+14*dy} />
            </g>
          ))}
          <text x={102} y={24} fontSize={8.5} fontFamily="var(--font-mono)" fill="var(--accent)">{isEs ? "ROSTRO · 0.97" : "FACE · 0.97"}</text>
          {/* eyes */}
          <circle cx={155} cy={140} r={4}><animate attributeName="opacity" values="1;1;0.05;1" keyTimes="0;0.42;0.5;1" dur="3.2s" repeatCount="indefinite" /></circle>
          <circle cx={245} cy={140} r={4}><animate attributeName="opacity" values="1;1;0.05;1" keyTimes="0;0.42;0.5;1" dur="3.2s" repeatCount="indefinite" /></circle>
          <circle cx={155} cy={140} r={4} fill="var(--accent)" opacity={0}><animate attributeName="opacity" values="1;1;0.05;1" keyTimes="0;0.42;0.5;1" dur="3.2s" repeatCount="indefinite" /></circle>
          <circle cx={245} cy={140} r={4} fill="var(--accent)" opacity={0}><animate attributeName="opacity" values="1;1;0.05;1" keyTimes="0;0.42;0.5;1" dur="3.2s" repeatCount="indefinite" /></circle>
          {/* scan line */}
          <rect x={100} y={28} width={200} height={2} fill="var(--accent)" opacity={0.5}>
            <animate attributeName="y" values="28;268;28" dur="3.5s" repeatCount="indefinite" />
          </rect>
          {/* HUD bottom */}
          <rect x={0} y={284} width={400} height={36} fill="oklch(0.12 0.03 250 / 0.88)" />
          <text x={12} y={298} fontSize={7.5} fontFamily="var(--font-mono)" fill="oklch(0.50 0.04 240)">{isEs ? "ATENCIÓN" : "ATTENTION"}</text>
          <text x={12} y={312} fontSize={12} fontFamily="var(--font-mono)" fill="oklch(0.62 0.18 145)" fontWeight={500}>94%</text>
          <text x={100} y={298} fontSize={7.5} fontFamily="var(--font-mono)" fill="oklch(0.50 0.04 240)">{isEs ? "FATIGA" : "FATIGUE"}</text>
          <text x={100} y={312} fontSize={12} fontFamily="var(--font-mono)" fill="oklch(0.62 0.18 145)" fontWeight={500}>{isEs ? "BAJA" : "LOW"}</text>
          <text x={188} y={298} fontSize={7.5} fontFamily="var(--font-mono)" fill="oklch(0.50 0.04 240)">VEL</text>
          <text x={188} y={312} fontSize={12} fontFamily="var(--font-mono)" fill="var(--bone)" fontWeight={500}>47 km/h</text>
        </svg>
      </div>
      {/* event log */}
      <div style={{ background:"oklch(0.14 0.03 250)", borderLeft:"1px solid oklch(0.22 0.03 250)", padding:"16px 12px", display:"flex", flexDirection:"column", gap:10 }}>
        <div style={{ fontFamily:"var(--font-mono)", fontSize:8, letterSpacing:"0.12em", color:"oklch(0.40 0.04 240)", marginBottom:4 }}>
          {isEs ? "EVENTOS HOY" : "EVENTS TODAY"}
        </div>
        {events.map((ev, i) => (
          <div key={i} style={{ display:"flex", gap:8, alignItems:"flex-start", opacity: i === (tick % 4) ? 1 : 0.4, transition:"opacity .4s" }}>
            <div style={{ width:6, height:6, borderRadius:"50%", background:evColors[i], flexShrink:0, marginTop:4 }} />
            <div style={{ fontSize:10, color:"oklch(0.80 0.02 240)", lineHeight:1.35 }}>{ev}</div>
          </div>
        ))}
        <div style={{ marginTop:"auto", borderTop:"1px solid oklch(0.22 0.03 250)", paddingTop:12 }}>
          <div style={{ fontFamily:"var(--font-mono)", fontSize:8, color:"oklch(0.40 0.04 240)", letterSpacing:"0.1em", marginBottom:4 }}>{isEs ? "CLIPS GUARDADOS" : "CLIPS SECURED"}</div>
          <div style={{ fontFamily:"var(--font-mono)", fontSize:20, fontWeight:600, color:"var(--bone)" }}>3</div>
        </div>
      </div>
    </div>
  );
}

function VizAnalytics({ isEs }) {
  const [tick, setTick] = useState(0);
  useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1400); return () => clearInterval(id); }, []);
  const bars = [
    { label: isEs ? "Lun" : "Mon", v: 88 }, { label: isEs ? "Mar" : "Tue", v: 92 },
    { label: isEs ? "Mié" : "Wed", v: 79 }, { label: isEs ? "Jue" : "Thu", v: 95 },
    { label: isEs ? "Vie" : "Fri", v: 84 }, { label: isEs ? "Sáb" : "Sat", v: 91 },
  ];
  const kpis = [
    { label: isEs ? "entregas a tiempo" : "on-time deliveries", val: "96.3%", delta: "+1.2%" },
    { label: isEs ? "km por ruta" : "km per route", val: "84.2", delta: "−3.1%" },
    { label: isEs ? "costo por parada" : "cost per stop", val: "$2.18", delta: "−8%" },
  ];
  return (
    <div style={{ height:"100%", padding:"28px 32px", display:"flex", flexDirection:"column", gap:20 }}>
      {/* KPIs */}
      <div style={{ display:"flex", gap:20 }}>
        {kpis.map((k, i) => (
          <div key={i} style={{ flex:1, background:"oklch(0.18 0.04 250)", border:"1px solid oklch(0.26 0.04 250)", borderRadius:8, padding:"12px 14px" }}>
            <div style={{ fontFamily:"var(--font-mono)", fontSize:20, fontWeight:600, color:"var(--bone)", marginBottom:2 }}>{k.val}</div>
            <div style={{ fontFamily:"var(--font-mono)", fontSize:8, color:"oklch(0.45 0.04 240)", letterSpacing:"0.08em", marginBottom:6 }}>{k.label}</div>
            <div style={{ fontFamily:"var(--font-mono)", fontSize:10, color: k.delta.startsWith("+") ? "oklch(0.62 0.18 145)" : "oklch(0.72 0.16 75)" }}>{k.delta} {isEs ? "vs sem. ant." : "vs last wk"}</div>
          </div>
        ))}
      </div>
      {/* bar chart */}
      <div style={{ flex:1, background:"oklch(0.17 0.04 250)", border:"1px solid oklch(0.24 0.04 250)", borderRadius:8, padding:"16px 20px" }}>
        <div style={{ fontFamily:"var(--font-mono)", fontSize:8, letterSpacing:"0.12em", color:"oklch(0.45 0.04 240)", marginBottom:14 }}>
          {isEs ? "TASA DE ÉXITO POR DÍA · %" : "SUCCESS RATE BY DAY · %"}
        </div>
        <div style={{ display:"flex", alignItems:"flex-end", gap:8, height:80 }}>
          {bars.map((b, i) => (
            <div key={i} style={{ flex:1, display:"flex", flexDirection:"column", alignItems:"center", gap:4, height:"100%" }}>
              <div style={{ flex:1, width:"100%", background:"oklch(0.24 0.04 250)", borderRadius:3, position:"relative", overflow:"hidden" }}>
                <div style={{ position:"absolute", bottom:0, left:0, right:0, borderRadius:3, background: i === tick % 6 ? "oklch(0.82 0.18 130)" : "var(--accent)", height:`${b.v}%`, transition:"height .6s cubic-bezier(.4,0,.2,1), background .3s" }} />
              </div>
              <div style={{ fontFamily:"var(--font-mono)", fontSize:8, color:"oklch(0.45 0.04 240)" }}>{b.label}</div>
            </div>
          ))}
        </div>
      </div>
      {/* insight */}
      <div style={{ background:"oklch(0.18 0.04 250)", border:"1px solid oklch(0.26 0.04 250)", borderRadius:8, padding:"12px 16px", display:"flex", gap:12, alignItems:"flex-start" }}>
        <div style={{ fontFamily:"var(--font-mono)", fontSize:8, background:"color-mix(in oklch, oklch(0.82 0.18 130) 20%, transparent)", color:"oklch(0.82 0.18 130)", padding:"2px 6px", borderRadius:2, flexShrink:0, marginTop:2 }}>AI</div>
        <div style={{ fontSize:12, color:"oklch(0.75 0.02 240)", lineHeight:1.45 }}>
          {isEs ? "Zona 4: tasa de entrega ↓ 3.1% — probable causa: semáforo Bv. 18 de Julio. Recomendación: rutear por Ejido hasta nuevo aviso." : "Zone 4: delivery rate ↓ 3.1% — likely cause: traffic light Bv. 18 de Julio. Recommendation: route via Ejido until further notice."}
        </div>
      </div>
    </div>
  );
}

function VizDataIntegrity({ isEs }) {
  const issues = isEs ? [
    { type:"warn", msg:"Dirección duplicada · Ruta 12", fix:"Fusionado" },
    { type:"error", msg:"Sensor de velocidad · drift +8km/h", fix:"Calibrando" },
    { type:"warn", msg:"47 direcciones malformadas", fix:"Corregidas" },
    { type:"ok", msg:"Base de datos limpia · 1.284 paradas", fix:"OK" },
  ] : [
    { type:"warn", msg:"Duplicate address · Route 12", fix:"Merged" },
    { type:"error", msg:"Speed sensor drift +8km/h", fix:"Recalibrating" },
    { type:"warn", msg:"47 malformed addresses", fix:"Corrected" },
    { type:"ok", msg:"Clean dataset · 1,284 stops", fix:"OK" },
  ];
  const [tick, setTick] = useState(0);
  useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 1200); return () => clearInterval(id); }, []);
  const typeColor = { warn:"oklch(0.72 0.18 50)", error:"oklch(0.65 0.18 25)", ok:"oklch(0.62 0.18 145)" };
  const typeBg = { warn:"oklch(0.96 0.06 50)", error:"oklch(0.96 0.06 25)", ok:"oklch(0.94 0.06 145)" };
  return (
    <div style={{ height:"100%", padding:"32px", display:"flex", flexDirection:"column", gap:16, justifyContent:"center" }}>
      <div style={{ fontFamily:"var(--font-mono)", fontSize:8.5, letterSpacing:"0.12em", color:"oklch(0.40 0.04 240)", marginBottom:4 }}>
        {isEs ? "AUDITORÍA EN CURSO" : "AUDIT IN PROGRESS"} · {isEs ? "turno" : "shift"} 14:00
      </div>
      {issues.map((iss, i) => (
        <div key={i} style={{ display:"flex", alignItems:"center", gap:12, padding:"14px 16px", background:"oklch(0.18 0.04 250)", border:`1px solid oklch(0.26 0.04 250)`, borderRadius:8, opacity: i <= tick % 5 ? 1 : 0.25, transition:"opacity .5s", animation: i === tick % 4 ? "agFadeUp .4s ease" : "none" }}>
          <div style={{ width:8, height:8, borderRadius:"50%", background:typeColor[iss.type], flexShrink:0 }} />
          <div style={{ flex:1, fontSize:12, color:"oklch(0.82 0.02 240)" }}>{iss.msg}</div>
          <div style={{ fontFamily:"var(--font-mono)", fontSize:9, padding:"3px 8px", borderRadius:999, background:typeBg[iss.type], color:typeColor[iss.type] }}>{iss.fix}</div>
        </div>
      ))}
      <div style={{ marginTop:8, padding:"12px 16px", background:"oklch(0.15 0.04 250)", border:"1px solid oklch(0.22 0.04 250)", borderRadius:8, fontFamily:"var(--font-mono)", fontSize:10, color:"oklch(0.45 0.04 240)", display:"flex", justifyContent:"space-between" }}>
        <span>{isEs ? "errores encontrados" : "issues found"}: <span style={{ color:"var(--bone)" }}>50</span></span>
        <span>{isEs ? "corregidos" : "fixed"}: <span style={{ color:"oklch(0.62 0.18 145)" }}>50</span></span>
        <span>{isEs ? "pendientes" : "pending"}: <span style={{ color:"oklch(0.72 0.18 50)" }}>0</span></span>
      </div>
    </div>
  );
}

const VIZ_COMPONENTS = [VizRouting, VizCustomer, VizSafety, VizAnalytics, VizDataIntegrity];

// ── Main AgentsSection ────────────────────────────────────────────────────────
function AgentsSection({ copy, lang }) {
  const [active, setActive] = useState(0);
  const [autoPlay, setAutoPlay] = useState(true);
  const isEs = lang === "es";

  useEffect(() => {
    if (!autoPlay) return;
    const id = setInterval(() => setActive(a => (a + 1) % copy.items.length), 5000);
    return () => clearInterval(id);
  }, [autoPlay, copy.items.length]);

  const VizComp = VIZ_COMPONENTS[active] || VizRouting;
  const statusColor = { Live: "oklch(0.62 0.18 145)", Beta: "oklch(0.72 0.18 50)", "Soon": "oklch(0.55 0.04 240)" };
  const statusLabel = { Live: isEs ? "EN VIVO" : "LIVE", Beta: "BETA", "Soon": isEs ? "PRÓXIMO" : "SOON" };

  return (
    <section className="ags-section" id="agents">
      <style>{`
        .ags-section { background: oklch(0.13 0.03 250); padding: 100px 0; color: var(--bone); }

        .ags-head { margin-bottom: 56px; }
        .ags-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
        .ags-eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.4s infinite; box-shadow:0 0 8px var(--accent); }
        .ags-head h2 { font-size: clamp(30px, 3.8vw, 56px); letter-spacing: -0.025em; font-weight: 500; line-height: 1.04; margin-bottom: 12px; }
        .ags-head h2 .accent { color: var(--accent); }
        .ags-head-sub { font-size: 16px; line-height: 1.6; color: oklch(0.60 0.025 240); max-width: 640px; }

        .ags-body { display: grid; grid-template-columns: 1fr 380px; gap: 2px; border-radius: 12px; overflow: hidden; border: 1px solid oklch(0.22 0.04 250); min-height: 380px; }

        /* visual panel */
        .ags-visual { background: oklch(0.16 0.04 250); overflow: hidden; position: relative; }
        .ags-visual-inner { width: 100%; height: 100%; min-height: 380px; }

        /* agent list */
        .ags-list { background: oklch(0.15 0.03 250); display: flex; flex-direction: column; border-left: 1px solid oklch(0.20 0.04 250); }
        .ags-list-head { padding: 14px 18px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.14em; color: oklch(0.38 0.04 240); border-bottom: 1px solid oklch(0.20 0.04 250); display: flex; justify-content: space-between; }

        .ags-agent { padding: 16px 18px; cursor: pointer; border-bottom: 1px solid oklch(0.18 0.03 250); transition: background .2s; position: relative; overflow: hidden; }
        .ags-agent:hover { background: oklch(0.18 0.04 250); }
        .ags-agent.active { background: oklch(0.20 0.05 250); }
        .ags-agent.active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--accent); }

        .ags-agent-top { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
        .ags-agent-code { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--accent); width: 28px; flex-shrink: 0; }
        .ags-agent-name { font-size: 13px; font-weight: 500; color: var(--bone); flex: 1; }
        .ags-agent-tag { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
        .ags-agent-desc { font-size: 11.5px; color: oklch(0.50 0.025 240); line-height: 1.45; padding-left: 38px; }
        .active .ags-agent-desc { color: oklch(0.65 0.025 240); }

        /* progress bar for autoplay */
        .ags-agent-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent); opacity: 0.6; transition: width 0.1s linear; }

        @media (max-width: 900px) {
          .ags-body { grid-template-columns: 1fr !important; }
          .ags-list { border-left: none; border-top: 1px solid oklch(0.20 0.04 250); }
          .ags-visual-inner { min-height: 280px; }
        }
      `}</style>

      <div className="container">
        <div className="ags-head">
          <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:14 }}>
            <span style={{ fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.14em", background:"oklch(0.72 0.16 75 / 0.15)", color:"oklch(0.72 0.16 75)", border:"1px solid oklch(0.72 0.16 75 / 0.35)", borderRadius:999, padding:"3px 10px" }}>BETA</span>
            <span style={{ fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em", color:"oklch(0.45 0.03 240)" }}>PREVIEW · {lang === "es" ? "acceso anticipado" : "early access"}</span>
          </div>
          <h2>{copy.title_a}<span className="accent">{copy.title_b}</span>{copy.title_c}</h2>
          <p className="ags-head-sub">{copy.sub}</p>
        </div>

        <div className="ags-body">
          {/* Visual */}
          <div className="ags-visual">
            <div className="ags-visual-inner" key={active} style={{ animation:"agFadeUp .4s ease" }}>
              <VizComp isEs={isEs} />
            </div>
          </div>

          {/* Agent list */}
          <div className="ags-list">
            <div className="ags-list-head">
              <span>GROPP · AGENT MESH</span>
              <span style={{ color:"oklch(0.62 0.18 145)" }}>{copy.items.length} {isEs ? "agentes" : "agents"}</span>
            </div>
            {copy.items.map((agent, i) => {
              const tag = (agent.tag === "Live" || agent.tag === "Activo") ? "Live" : agent.tag === "Beta" ? "Beta" : "Soon";
              return (
                <div
                  key={i}
                  className={`ags-agent ${i === active ? "active" : ""}`}
                  onClick={() => { setActive(i); setAutoPlay(false); }}
                >
                  <div className="ags-agent-top">
                    <span className="ags-agent-code">{agent.code}</span>
                    <span className="ags-agent-name">{agent.name}</span>
                    <span className="ags-agent-tag" style={{ color:statusColor[tag], background:`color-mix(in oklch, ${statusColor[tag]} 14%, transparent)`, border:`1px solid color-mix(in oklch, ${statusColor[tag]} 35%, transparent)` }}>
                      {statusLabel[tag]}
                    </span>
                  </div>
                  <div className="ags-agent-desc">{agent.desc.split(".")[0]}.</div>
                </div>
              );
            })}

            {/* callout */}
            <div style={{ marginTop:"auto", padding:"14px 18px", borderTop:"1px solid oklch(0.18 0.03 250)", fontSize:11, color:"oklch(0.42 0.025 240)", lineHeight:1.5 }}>
              <span style={{ fontFamily:"var(--font-mono)", fontSize:9, color:var_accent, letterSpacing:"0.1em" }}>[ NOTE ] </span>
              {copy.callout}
            </div>
          </div>
        </div>

        {/* CTA */}
        <div style={{ marginTop:32, display:"flex", gap:12, alignItems:"center" }}>
          <a className="btn btn-primary" href="#cta">{copy.cta}</a>
          <span style={{ fontFamily:"var(--font-mono)", fontSize:10, color:"oklch(0.38 0.04 240)", letterSpacing:"0.08em" }}>
            {isEs ? "← click un agente para explorar" : "← click an agent to explore"}
          </span>
        </div>
      </div>
    </section>
  );
}

// fix: var_accent is not valid JS
const var_accent = "var(--accent)";

window.AgentsSection = AgentsSection;