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

// ── Helpers ──────────────────────────────────────────────────────────────────
const TLDot = ({ kind }) => {
  const colors = {
    "clock-in": "var(--accent)",
    "clock-out": "var(--accent)",
    drive: "oklch(0.62 0.16 245)",
    stop: "oklch(0.72 0.18 145)",
    complaint: "oklch(0.72 0.18 50)",
    break: "oklch(0.72 0.04 240)",
    event: "oklch(0.72 0.18 30)",
    "clock": "var(--accent)",
  };
  return (
    <div style={{
      width: 11, height: 11, borderRadius: "50%",
      background: colors[kind] || "var(--mist)",
      flexShrink: 0, zIndex: 1,
    }} />
  );
};

function Timeline({ events }) {
  const [active, setActive] = useState(null);
  return (
    <div className="dap-timeline">
      {events.map((ev, i) => (
        <div
          key={i}
          className={`dap-tl-row dap-tl-${ev.kind}`}
          style={{ opacity: active !== null && active !== i ? 0.45 : 1, cursor: "pointer" }}
          onClick={() => setActive(active === i ? null : i)}
        >
          <div className="dap-tl-time mono">{ev.t}</div>
          <div className="dap-tl-dot-col">
            <TLDot kind={ev.kind} />
            {i < events.length - 1 && <div className="dap-tl-connector" />}
          </div>
          <div className="dap-tl-label">{ev.label}</div>
        </div>
      ))}
    </div>
  );
}

function ComplaintSteps({ steps }) {
  const [visible, setVisible] = useState(0);
  useEffect(() => {
    if (visible >= steps.length) return;
    const id = setTimeout(() => setVisible((v) => v + 1), 700);
    return () => clearTimeout(id);
  }, [visible, steps.length]);
  return (
    <div className="dap-complaint-steps">
      {steps.map((s, i) => (
        <div key={i} className="dap-c-step" style={{ opacity: i < visible ? 1 : 0.12, transition: "opacity .35s" }}>
          <div className="dap-c-code mono">{s.code}</div>
          <div className="dap-c-body">
            <div className="dap-c-title">{s.title}</div>
            <div className="dap-c-desc">{s.body}</div>
          </div>
          {i < steps.length - 1 && <div className="dap-c-arrow">↓</div>}
        </div>
      ))}
      {visible < steps.length ? (
        <button className="dap-replay-btn mono" onClick={() => setVisible(steps.length)}>
          SHOW ALL →
        </button>
      ) : (
        <button className="dap-replay-btn mono" onClick={() => setVisible(0)}>
          ↺ REPLAY
        </button>
      )}
    </div>
  );
}

function CommsChat({ messages, lang }) {
  const [shown, setShown] = useState(2);
  useEffect(() => {
    if (shown >= messages.length) return;
    const id = setTimeout(() => setShown((v) => v + 1), 900);
    return () => clearTimeout(id);
  }, [shown, messages.length]);
  return (
    <div className="dap-chat">
      <div className="dap-chat-head mono">
        <span>{lang === "es" ? "CANAL RUTA · MVD-04" : "ROUTE CHANNEL · MVD-04"}</span>
        <span className="dap-chat-live">{lang === "es" ? "en vivo" : "live"}</span>
      </div>
      <div className="dap-chat-body">
        {messages.slice(0, shown).map((m, i) => (
          <div key={i} className={`dap-msg dap-msg-${m.who}`}>
            {m.who === "system" ? (
              <div className="dap-msg-system mono">{m.txt} <span className="dap-msg-t">{m.t}</span></div>
            ) : (
              <>
                <div className="dap-msg-who mono">{m.who === "dispatch" ? "DESPACHO" : m.ptt ? "🎤 CHOFER" : "CHOFER"}</div>
                <div className="dap-msg-bubble">{m.txt} <span className="dap-msg-t">{m.t}</span></div>
              </>
            )}
          </div>
        ))}
        {shown < messages.length && <div className="dap-chat-typing mono">···</div>}
        {shown >= messages.length && (
          <button className="dap-replay-btn mono" style={{margin:"10px 0"}} onClick={() => setShown(2)}>↺ REPLAY</button>
        )}
      </div>
    </div>
  );
}

function VoiceQA({ examples, lang }) {
  const [active, setActive] = useState(0);
  return (
    <div className="dap-voice">
      <div className="dap-voice-waveform">
        {[3,6,11,8,14,11,18,14,9,16,12,8,14,10,6].map((h, i) => (
          <div key={i} style={{
            width: 3, height: h + 4, borderRadius: 2, background: "var(--accent-2)",
            animation: `dapBar ${0.55 + (i % 4) * 0.18}s ease-in-out infinite alternate`,
            animationDelay: `${(i * 0.07) % 0.55}s`,
          }} />
        ))}
        <style>{`@keyframes dapBar{from{transform:scaleY(.2);opacity:.35}to{transform:scaleY(1);opacity:1}}`}</style>
      </div>
      <div className="dap-voice-tabs">
        {examples.map((ex, i) => (
          <button key={i} className={`dap-voice-tab ${i === active ? "on" : ""}`} onClick={() => setActive(i)}>
            {i + 1}
          </button>
        ))}
      </div>
      {examples[active] && (
        <div className="dap-voice-qa">
          <div className="dap-voice-q"><span className="dap-voice-icon">🎙</span> {examples[active].q}</div>
          <div className="dap-voice-a"><span className="dap-voice-icon dap-voice-icon-ai">AI</span> {examples[active].a}</div>
        </div>
      )}
    </div>
  );
}

function CabinViz({ lang }) {
  const isEs = lang === "es";
  return (
    <div className="dap-cabin-viz">
      <img src="assets/driver-portrait.jpg?v=2" alt="Driver" className="dap-cabin-photo" />
      <div className="dap-cabin-tint" />
      <svg viewBox="0 0 700 460" className="dap-cabin-svg" preserveAspectRatio="xMidYMid slice">
        {/* Main face bounding box */}
        <rect x="252" y="38" width="196" height="248" fill="none" stroke="var(--accent)" strokeWidth="2" strokeDasharray="5 3">
          <animate attributeName="opacity" values="1;0.4;1" dur="1.8s" repeatCount="indefinite" />
        </rect>
        {[[252,38,1,1],[448,38,-1,1],[252,286,1,-1],[448,286,-1,-1]].map(([cx,cy,dx,dy],i) => (
          <g key={i} stroke="var(--accent)" strokeWidth="2.8" 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="252" y="33" fontSize="11" fontFamily="var(--font-mono)" fill="var(--accent)">{isEs ? "ROSTRO · 0.97" : "FACE · 0.97"}</text>
        {/* Eye tracking */}
        <circle cx="303" cy="155" r="4" fill="var(--accent)"><animate attributeName="opacity" values="1;1;0.1;1" keyTimes="0;0.43;0.5;1" dur="3s" repeatCount="indefinite" /></circle>
        <circle cx="396" cy="155" r="4" fill="var(--accent)"><animate attributeName="opacity" values="1;1;0.1;1" keyTimes="0;0.43;0.5;1" dur="3s" repeatCount="indefinite" /></circle>
        {/* Scanline */}
        <rect x="252" y="38" width="196" height="1.5" fill="var(--accent)" opacity="0.6">
          <animate attributeName="y" values="38;286;38" dur="3.5s" repeatCount="indefinite" />
        </rect>
        {/* Telemetry bottom */}
        <rect x="12" y="400" width="676" height="50" fill="oklch(0.14 0.03 240 / 0.82)" />
        {[
          { x: 50, label: isEs ? "CHOFER" : "DRIVER", val: "Pérez" },
          { x: 200, label: isEs ? "ATENCIÓN" : "ATTENTION", val: "94%", ok: true },
          { x: 350, label: isEs ? "FATIGA" : "FATIGUE", val: isEs ? "BAJA" : "LOW", ok: true },
          { x: 480, label: isEs ? "POSE" : "HEAD POSE", val: "+3°" },
          { x: 600, label: "VEL", val: "47 km/h" },
        ].map(({ x, label, val, ok }) => (
          <g key={x}>
            <text x={x} y="419" fontSize="8" fontFamily="var(--font-mono)" fill="oklch(0.55 0.04 240)">{label}</text>
            <text x={x} y="437" fontSize="13" fontFamily="var(--font-mono)" fill={ok ? "oklch(0.72 0.18 145)" : "var(--bone)"} fontWeight="500">{val}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

// ── Attention Gauge ───────────────────────────────────────────────────────────
function AttentionGauge({ lang }) {
  const [val, setVal] = useState(94);
  useEffect(() => {
    const id = setInterval(() => {
      setVal(v => {
        const next = v + (Math.random() - 0.45) * 4;
        return Math.max(78, Math.min(99, Math.round(next)));
      });
    }, 1800);
    return () => clearInterval(id);
  }, []);

  const r = 28, cx = 40, cy = 44, strokeW = 5;
  const circ = Math.PI * r; // half circle
  const pct = val / 100;
  const dash = circ * pct;
  const color = val > 88 ? "oklch(0.62 0.18 145)" : val > 75 ? "oklch(0.73 0.18 80)" : "oklch(0.65 0.18 25)";
  const isEs = lang === "es";

  return (
    <div style={{
      position:"absolute", top:12, left:12,
      background:"oklch(0.12 0.03 250 / 0.88)", backdropFilter:"blur(10px)",
      border:"1px solid oklch(0.28 0.04 250)", borderRadius:8,
      padding:"10px 14px 8px", display:"flex", flexDirection:"column", alignItems:"center",
      minWidth:80,
    }}>
      <svg width="80" height="50" viewBox="0 0 80 50">
        {/* Track */}
        <path d={`M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}`}
          fill="none" stroke="oklch(0.22 0.03 250)" strokeWidth={strokeW} strokeLinecap="round" />
        {/* Value arc */}
        <path d={`M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}`}
          fill="none" stroke={color} strokeWidth={strokeW} strokeLinecap="round"
          strokeDasharray={`${dash} ${circ}`}
          style={{ transition:"stroke-dasharray 0.8s ease, stroke 0.8s ease" }}
        />
        {/* Value text */}
        <text x={cx} y={cy-4} textAnchor="middle" fontSize="16" fontWeight="600"
          fontFamily="var(--font-mono)" fill={color}>{val}%</text>
      </svg>
      <div style={{ fontFamily:"var(--font-mono)", fontSize:8, letterSpacing:"0.1em",
        color:"oklch(0.55 0.04 240)", marginTop:-4 }}>
        {isEs ? "ATENCIÓN" : "ATTENTION"}
      </div>
      <div style={{ fontFamily:"var(--font-mono)", fontSize:7, color: color, marginTop:3,
        background:`color-mix(in oklch, ${color} 14%, transparent)`,
        padding:"2px 7px", borderRadius:3 }}>
        {val > 88 ? (isEs ? "ÓPTIMA" : "OPTIMAL") : val > 75 ? (isEs ? "MEDIA" : "MEDIUM") : (isEs ? "BAJA" : "LOW")}
      </div>
    </div>
  );
}

// ── Floating Alerts ───────────────────────────────────────────────────────────
function FloatingAlerts({ lang }) {
  const isEs = lang === "es";
  const alerts = isEs ? [
    { kind:"ok",   icon:"✓", msg:"Semáforo · chofer cumple", t:"14:42:01" },
    { kind:"warn", icon:"⚠", msg:"Bostezo detectado · aviso enviado", t:"14:39:11" },
    { kind:"ok",   icon:"✓", msg:"Celular guardado · 3s", t:"14:35:44" },
    { kind:"ok",   icon:"📍", msg:"Parada #7 completada", t:"14:31:22" },
    { kind:"warn", icon:"⚠", msg:"Exceso de velocidad · −8 km/h", t:"14:28:05" },
  ] : [
    { kind:"ok",   icon:"✓", msg:"Stop sign · driver compliant", t:"14:42:01" },
    { kind:"warn", icon:"⚠", msg:"Yawn detected · nudge sent", t:"14:39:11" },
    { kind:"ok",   icon:"✓", msg:"Phone put down · 3s", t:"14:35:44" },
    { kind:"ok",   icon:"📍", msg:"Stop #7 completed", t:"14:31:22" },
    { kind:"warn", icon:"⚠", msg:"Speed alert · −8 km/h", t:"14:28:05" },
  ];
  const [visible, setVisible] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setVisible(v => (v + 1) % alerts.length), 2600);
    return () => clearInterval(id);
  }, []);

  const a = alerts[visible];
  const isWarn = a.kind === "warn";

  return (
    <div style={{
      position:"absolute", top:12, right:12,
      background: isWarn ? "oklch(0.18 0.08 50 / 0.92)" : "oklch(0.12 0.03 250 / 0.92)",
      backdropFilter:"blur(10px)",
      border:`1px solid ${isWarn ? "oklch(0.50 0.14 50)" : "oklch(0.28 0.04 250)"}`,
      borderRadius:8, padding:"8px 12px", minWidth:200, maxWidth:240,
      transition:"all 0.4s ease",
    }}>
      <div style={{ display:"flex", alignItems:"center", gap:7, marginBottom:4 }}>
        <span style={{
          fontSize:10,
          color: isWarn ? "oklch(0.73 0.18 50)" : "oklch(0.62 0.18 145)",
        }}>{a.icon}</span>
        <span style={{ fontFamily:"var(--font-mono)", fontSize:8,
          color: isWarn ? "oklch(0.73 0.18 50)" : "oklch(0.62 0.18 145)",
          letterSpacing:"0.1em" }}>
          {isWarn ? (isEs ? "ALERTA" : "ALERT") : "OK"}
        </span>
        <span style={{ fontFamily:"var(--font-mono)", fontSize:7,
          color:"oklch(0.45 0.03 240)", marginLeft:"auto" }}>{a.t}</span>
      </div>
      <div style={{ fontSize:11, color:"oklch(0.88 0.02 240)", lineHeight:1.4 }}>{a.msg}</div>
      {/* Progress dots */}
      <div style={{ display:"flex", gap:3, marginTop:7 }}>
        {alerts.map((_,i) => (
          <div key={i} style={{ height:2, flex:1, borderRadius:1,
            background: i === visible ? (isWarn ? "oklch(0.73 0.18 50)" : "oklch(0.62 0.18 145)") : "oklch(0.28 0.03 250)",
            transition:"background 0.3s" }} />
        ))}
      </div>
    </div>
  );
}

// ── Live Event Stream ─────────────────────────────────────────────────────────
function LiveEventStream({ lang }) {
  const isEs = lang === "es";
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 3000);
    return () => clearInterval(id);
  }, []);

  const events = isEs ? [
    { t:"14:42", c:"oklch(0.62 0.18 145)", label:"ADAS · carril OK" },
    { t:"14:39", c:"oklch(0.73 0.18 50)",  label:"Fatiga · aviso" },
    { t:"14:35", c:"oklch(0.62 0.18 145)", label:"Celular · guardado" },
    { t:"14:31", c:"oklch(0.62 0.18 145)", label:"Parada #7 · OK" },
    { t:"14:28", c:"oklch(0.73 0.18 50)",  label:"Velocidad · alerta" },
  ] : [
    { t:"14:42", c:"oklch(0.62 0.18 145)", label:"ADAS · lane OK" },
    { t:"14:39", c:"oklch(0.73 0.18 50)",  label:"Fatigue · nudge" },
    { t:"14:35", c:"oklch(0.62 0.18 145)", label:"Phone · down" },
    { t:"14:31", c:"oklch(0.62 0.18 145)", label:"Stop #7 · done" },
    { t:"14:28", c:"oklch(0.73 0.18 50)",  label:"Speed · alert" },
  ];

  return (
    <div style={{
      position:"absolute", bottom:90, left:12,
      background:"oklch(0.10 0.03 250 / 0.88)", backdropFilter:"blur(10px)",
      border:"1px solid oklch(0.22 0.04 250)", borderRadius:8,
      padding:"8px 0", minWidth:186,
    }}>
      <div style={{ fontFamily:"var(--font-mono)", fontSize:7.5, letterSpacing:"0.1em",
        color:"var(--accent)", padding:"0 12px 6px", borderBottom:"1px solid oklch(0.18 0.03 250)" }}>
        ● {isEs ? "EVENTOS · EN VIVO" : "EVENTS · LIVE"}
      </div>
      {events.map((e, i) => (
        <div key={i} style={{
          display:"flex", alignItems:"center", gap:7, padding:"4px 12px",
          opacity: i === 0 ? 1 : i === 1 ? 0.75 : i === 2 ? 0.55 : 0.35,
          background: i === tick % events.length ? "oklch(0.16 0.04 250 / 0.5)" : "transparent",
          transition:"background 0.4s",
        }}>
          <div style={{ width:5, height:5, borderRadius:"50%", background:e.c, flexShrink:0 }} />
          <span style={{ fontFamily:"var(--font-mono)", fontSize:7, color:"oklch(0.45 0.03 240)" }}>{e.t}</span>
          <span style={{ fontSize:9.5, color:"oklch(0.82 0.02 240)" }}>{e.label}</span>
        </div>
      ))}
    </div>
  );
}

// ── Main DriverAiPage component ───────────────────────────────────────────────
function DriverAiPage({ copy, lang }) {
  const pillarColors = [
    "var(--accent)",
    "oklch(0.72 0.18 50)",
    "oklch(0.65 0.18 145)",
    "oklch(0.6 0.12 280)",
    "oklch(0.82 0.18 130)",
  ];

  return (
    <div className="dap-page">
      <style>{`
        .dap-page { background: var(--bone); min-height: 100vh; }

        /* HERO */
        .dap-hero { padding: 80px 0 100px; position: relative; overflow: hidden; border-bottom: 1px solid var(--line-soft); }
        .dap-hero-bg { position: absolute; inset: 0; background: radial-gradient(60% 60% at 75% 45%, color-mix(in oklch, var(--accent) 8%, transparent), transparent 70%); pointer-events: none; }
        .dap-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.35; pointer-events: none; mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
        .dap-hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
        .dap-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
        .dap-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); }
        .dap-hero h1 { font-size: clamp(44px, 5.2vw, 84px); line-height: 0.97; letter-spacing: -0.03em; font-weight: 500; text-wrap: balance; margin-bottom: 20px; }
        .dap-hero h1 .accent { color: var(--accent); }
        .dap-hero-sub { font-size: 17px; line-height: 1.55; color: var(--fog); max-width: 540px; margin-bottom: 30px; }
        .dap-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
        .dap-kpis { display: flex; gap: 36px; flex-wrap: wrap; }
        .dap-kpi { display: flex; flex-direction: column; gap: 6px; }
        .dap-kpi-num { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; display: flex; align-items: center; gap: 4px; }
        .dap-kpi-num .unit { color: var(--accent); }
        .dap-kpi-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: oklch(0.32 0.10 245); background: oklch(0.94 0.04 230); border: 1px solid oklch(0.85 0.08 230); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; white-space: nowrap; }

        /* Hero photo */
        .dap-hero-photo { position: relative; aspect-ratio: 1 / 1.1; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px oklch(0.45 0.18 245 / 0.2); }
        .dap-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .dap-hero-photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.18 0.04 250 / 0.7) 0%, transparent 50%); }
        .dap-hero-photo-hud { position: absolute; bottom: 16px; left: 16px; right: 16px; background: oklch(0.14 0.03 250 / 0.85); backdrop-filter: blur(8px); border: 1px solid oklch(0.3 0.04 250); border-radius: 6px; padding: 10px 16px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
        .dap-hero-photo-stat { display: flex; flex-direction: column; gap: 3px; }
        .dap-hps-label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.12em; color: oklch(0.55 0.04 240); text-transform: uppercase; }
        .dap-hps-val { font-size: 12px; font-weight: 500; font-family: var(--font-mono); color: var(--bone); }
        .dap-hps-val.ok { color: oklch(0.72 0.18 145); }
        .dap-hero-bb { position: absolute; top: 16%; left: 25%; width: 50%; height: 46%; border: 1.8px solid var(--accent); border-radius: 2px; }
        .dap-hero-bb-label { position: absolute; top: 13%; left: 25%; font-family: var(--font-mono); font-size: 9px; color: var(--accent); }

        /* SECTIONS */
        .dap-section { padding: 100px 0; border-bottom: 1px solid var(--line-soft); }
        .dap-section.gray { background: oklch(0.965 0.006 240); }
        .dap-section.dark { background: oklch(0.20 0.05 250); color: var(--bone); }
        .dap-2col { display: grid; grid-template-columns: 1fr 1.2fr; gap: 72px; align-items: start; }
        .dap-2col.flip { direction: rtl; }
        .dap-2col.flip > * { direction: ltr; }
        .dap-section-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); border: 1px solid var(--accent); padding: 4px 10px; border-radius: 999px; display: inline-block; margin-bottom: 14px; }
        .dark .dap-section-tag { color: oklch(0.82 0.18 130); background: color-mix(in oklch, oklch(0.82 0.18 130) 14%, transparent); border-color: oklch(0.82 0.18 130); }
        .dap-section h2 { font-size: clamp(30px, 3.6vw, 54px); letter-spacing: -0.025em; font-weight: 500; line-height: 1.05; text-wrap: balance; margin-bottom: 16px; }
        .dap-section h2 .accent { color: var(--accent); }
        .dark .dap-section h2 .accent { color: oklch(0.82 0.18 130); }
        .dap-section-sub { font-size: 16px; line-height: 1.6; color: var(--fog); margin-bottom: 28px; }
        .dark .dap-section-sub { color: oklch(0.72 0.025 240); }
        .dap-bullets { list-style: none; display: flex; flex-direction: column; gap: 20px; }
        .dap-bullet { display: flex; flex-direction: column; gap: 4px; padding-left: 0; position: relative; }
        .dap-bullet::before { display: none; }
        .dark .dap-bullet::before { background: oklch(0.82 0.18 130); }
        .dap-bullet-title { font-weight: 500; font-size: 15px; }
        .dap-bullet-body { font-size: 14px; color: var(--fog); line-height: 1.5; }
        .dark .dap-bullet-body { color: oklch(0.72 0.025 240); }

        /* PILLARS */
        .dap-pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
        .dap-pillar { background: var(--bone); padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; min-height: 300px; }
        .dap-pillar:hover { background: var(--ink-2); }
        .dap-pillar-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; font-weight: 500; }
        .dap-pillar-title { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
        .dap-pillar-body { font-size: 13.5px; color: var(--fog); line-height: 1.5; }
        .dap-pillar-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
        .dap-chip { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.07em; padding: 3px 7px; border-radius: 999px; background: var(--ink-3); color: var(--mist); }

        /* CABIN */
        .dap-cabin-viz { position: relative; aspect-ratio: 700/460; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
        .dap-cabin-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
        .dap-cabin-tint { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.14 0.03 250 / 0.65) 0%, transparent 50%); }
        .dap-cabin-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

        /* TIMELINE */
        .dap-timeline { display: flex; flex-direction: column; gap: 0; background: var(--bone); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; }
        .dap-tl-row { display: grid; grid-template-columns: 48px 16px 1fr; gap: 10px; align-items: flex-start; padding: 7px 0; }
        .dap-tl-time { font-family: var(--font-mono); font-size: 10px; color: var(--mist); letter-spacing: 0.06em; padding-top: 2px; }
        .dap-tl-dot-col { display: flex; flex-direction: column; align-items: center; }
        .dap-tl-connector { width: 1.5px; background: var(--line-soft); flex: 1; min-height: 18px; margin-top: 2px; }
        .dap-tl-label { font-size: 13px; color: var(--ink); padding-top: 1px; }
        .dap-tl-complaint .dap-tl-label { color: oklch(0.6 0.16 50); font-weight: 500; }
        .dap-tl-event .dap-tl-label { color: oklch(0.6 0.16 30); font-weight: 500; }

        /* COMPLAINT STEPS */
        .dap-complaint-steps { display: flex; flex-direction: column; gap: 0; }
        .dap-c-step { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; padding: 16px 20px; background: var(--bone); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px; position: relative; }
        .dap-c-code { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--accent); padding-top: 2px; }
        .dap-c-title { font-size: 15px; font-weight: 500; margin-bottom: 4px; }
        .dap-c-desc { font-size: 13px; color: var(--fog); line-height: 1.45; }
        .dap-c-arrow { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--mist); z-index: 2; }
        .dap-replay-btn { margin-top: 8px; background: none; border: 1px solid var(--line); border-radius: 4px; padding: 7px 14px; font-family: var(--font-mono); font-size: 10px; color: var(--mist); cursor: pointer; letter-spacing: 0.1em; transition: border-color .2s, color .2s; }
        .dap-replay-btn:hover { border-color: var(--accent); color: var(--accent); }

        /* CHAT */
        .dap-chat { background: oklch(0.15 0.025 250); border: 1px solid oklch(0.26 0.03 250); border-radius: 10px; overflow: hidden; }
        .dap-chat-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: oklch(0.5 0.03 240); border-bottom: 1px solid oklch(0.24 0.03 250); background: oklch(0.17 0.03 250); }
        .dap-chat-live { color: oklch(0.72 0.18 130); display: flex; align-items: center; gap: 5px; }
        .dap-chat-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: oklch(0.72 0.18 130); animation: pulse 1.4s infinite; }
        .dap-chat-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
        .dap-msg { display: flex; flex-direction: column; gap: 3px; }
        .dap-msg-who { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; }
        .dap-msg-dispatch .dap-msg-who { color: var(--accent); }
        .dap-msg-driver .dap-msg-who { color: oklch(0.82 0.18 130); text-align: right; }
        .dap-msg-bubble { font-size: 13px; line-height: 1.4; max-width: 85%; padding: 8px 11px; border-radius: 8px; }
        .dap-msg-dispatch .dap-msg-bubble { background: oklch(0.22 0.04 250); color: var(--bone); }
        .dap-msg-driver { align-items: flex-end; }
        .dap-msg-driver .dap-msg-bubble { background: oklch(0.26 0.10 130 / 0.45); color: oklch(0.9 0.02 240); }
        .dap-msg-system .dap-msg-system { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.07em; color: oklch(0.55 0.04 240); text-align: center; background: oklch(0.20 0.025 250); padding: 5px 10px; border-radius: 4px; }
        .dap-msg-t { font-size: 9px; font-family: var(--font-mono); color: oklch(0.45 0.03 240); margin-left: 6px; }
        .dap-chat-typing { font-family: var(--font-mono); font-size: 13px; color: oklch(0.45 0.03 240); letter-spacing: 4px; animation: pulse 1.2s infinite; }

        /* VOICE */
        .dap-voice { background: oklch(0.18 0.04 250); border: 1px solid oklch(0.28 0.04 250); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
        .dap-voice-waveform { display: flex; align-items: center; gap: 3px; height: 44px; justify-content: center; }
        .dap-voice-tabs { display: flex; gap: 8px; }
        .dap-voice-tab { background: oklch(0.24 0.04 250); border: 1px solid oklch(0.32 0.04 250); border-radius: 4px; padding: 5px 12px; font-family: var(--font-mono); font-size: 12px; color: oklch(0.6 0.04 240); cursor: pointer; transition: all .2s; }
        .dap-voice-tab.on { background: oklch(0.28 0.10 245); border-color: var(--accent); color: var(--accent); }
        .dap-voice-qa { display: flex; flex-direction: column; gap: 12px; }
        .dap-voice-q { font-size: 14px; color: oklch(0.85 0.02 240); display: flex; gap: 10px; align-items: flex-start; }
        .dap-voice-a { font-size: 14px; color: oklch(0.72 0.025 240); display: flex; gap: 10px; align-items: flex-start; }
        .dap-voice-icon { font-size: 16px; flex-shrink: 0; padding-top: 1px; }
        .dap-voice-icon-ai { font-family: var(--font-mono); font-size: 10px; background: color-mix(in oklch, oklch(0.82 0.18 130) 22%, transparent); color: oklch(0.82 0.18 130); padding: 2px 6px; border-radius: 2px; margin-top: 3px; }

        /* CTA */
        .dap-cta { background: var(--ink); color: var(--bone); padding: 100px 0; }
        .dap-cta-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: end; }
        .dap-cta h2 { font-size: clamp(40px, 5vw, 80px); letter-spacing: -0.03em; line-height: 0.97; font-weight: 500; margin-bottom: 12px; }
        .dap-cta h2 .accent { color: var(--accent); }
        .dap-cta p { color: oklch(0.72 0.02 250); font-size: 16px; line-height: 1.55; margin-bottom: 22px; }
        .dap-cta .btn-ghost { border-color: oklch(0.4 0.03 250); color: var(--bone); }

        @media (max-width: 900px) {
          .dap-hero-inner, .dap-2col, .dap-cta-inner { grid-template-columns: 1fr !important; gap: 36px; }
          .dap-pillars { grid-template-columns: 1fr !important; }
          .dap-section { padding: 64px 0; }
          .dap-hero { padding: 56px 0 72px; }
        }
        @media (max-width: 700px) {
          .dap-pillars { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>

      {/* HERO */}
      <section className="dap-hero">
        <div className="dap-hero-bg" />
        <div className="dap-hero-grid" />
        <div className="container dap-hero-inner">
          <div>
            <h1>{copy.hero.title_a}<span className="accent">{copy.hero.title_b}</span>{copy.hero.title_c}</h1>
            <p className="dap-hero-sub">{copy.hero.sub}</p>
            <div className="dap-hero-cta">
              <a className="btn btn-primary" href="#dap-cta">{copy.hero.cta_a} →</a>
              <a className="btn btn-ghost" href="#dap-pillars">{copy.hero.cta_b}</a>
            </div>
            <div className="dap-kpis">
              {copy.hero.kpis.map((k, i) => (
                <div key={i} className="dap-kpi">
                  <div className="dap-kpi-num">{k.num}<span className="unit">{k.unit}</span></div>
                  <div className="dap-kpi-label">{k.label}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Hero photo */}
          <div className="dap-hero-photo">
            <img src="assets/driver-portrait.jpg?v=2" alt="Driver" />
            <div className="dap-hero-photo-overlay" />
            <div className="dap-hero-bb" style={{animation:"none", border:"1.8px solid var(--accent)"}} />
            <span className="dap-hero-bb-label mono">{lang === "es" ? "ROSTRO · 0.97" : "FACE · 0.97"}</span>

            {/* Attention gauge — top left */}
            <AttentionGauge lang={lang} />

            {/* Floating alerts — top right */}
            <FloatingAlerts lang={lang} />

            {/* Live event stream — right edge */}
            <LiveEventStream lang={lang} />

            <div className="dap-hero-photo-hud">
              {[
                {label: lang === "es" ? "CHOFER" : "DRIVER",   val: "J. Pérez"},
                {label: lang === "es" ? "HORA" : "TIME",        val: "14:42"},
                {label: lang === "es" ? "VEL" : "SPEED",        val: "52 km/h"},
                {label: lang === "es" ? "ATENCIÓN" : "ATTENTION", val: "94%", ok: true},
                {label: lang === "es" ? "FATIGA" : "FATIGUE",   val: lang === "es" ? "BAJA" : "LOW", ok: true},
                {label: "SCORE",                                 val: "91/100"},
                {label: lang === "es" ? "EVENTOS" : "EVENTS",   val: lang === "es" ? "2 hoy" : "2 today"},
                {label: lang === "es" ? "TURNO" : "SHIFT",      val: "5h 12m"},
              ].map((s, i) => (
                <div key={i} className="dap-hero-photo-stat">
                  <div className="dap-hps-label">{s.label}</div>
                  <div className={`dap-hps-val${s.ok ? " ok" : ""}`}>{s.val}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PILLARS */}
      <section className="dap-section gray" id="dap-pillars">
        <div className="container">
          <div style={{marginBottom: 44}}>
            <h2 className="dap-section-head" style={{fontSize:"clamp(30px,3.6vw,52px)", letterSpacing:"-0.025em", fontWeight:500}}>
              {copy.pillars.title_a}<span style={{color:"var(--accent)"}}>{copy.pillars.title_b}</span>{copy.pillars.title_c}
            </h2>
            <p style={{marginTop:12, color:"var(--fog)", fontSize:16, maxWidth:600}}>{copy.pillars.sub}</p>
          </div>
          <div className="dap-pillars">
            {copy.pillars.items.map((p, i) => (
              <div key={i} className="dap-pillar">
                <div className="dap-pillar-code mono" style={{color: pillarColors[i]}}>{p.code}</div>
                <div className="dap-pillar-title">{p.title}</div>
                <div className="dap-pillar-body">{p.body}</div>
                <div className="dap-pillar-chips">
                  {p.chips.map((c, j) => (
                    <span key={j} className="dap-chip" style={{color: pillarColors[i], background: `color-mix(in oklch, ${pillarColors[i]} 12%, transparent)`}}>{c}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CABIN VISION */}
      <section className="dap-section" id="dap-cabin">
        <div className="container dap-2col">
          <div>
            <span className="dap-section-tag mono">{copy.pillars.items[0].code} · {copy.pillars.items[0].title.toUpperCase()}</span>
            <h2>{copy.cabin.title_a}<span className="accent">{copy.cabin.title_b}</span>{copy.cabin.title_c}</h2>
            <p className="dap-section-sub">{copy.cabin.sub}</p>
            <ul className="dap-bullets">
              {copy.cabin.bullets.map((b, i) => {
                const icons = [
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="8" r="4"/><path d="M6 20v-2a6 6 0 0112 0v2"/></svg>,
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg>,
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>,
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/><line x1="1" y1="1" x2="23" y2="23"/></svg>,
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M23 7l-7 5 7 5V7z"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>,
                ];
                return (
                  <li key={i} className="dap-bullet">
                    <div className="dap-bullet-title" style={{display:"flex",alignItems:"center",gap:8}}>
                      <span style={{color:"var(--accent)",flexShrink:0,display:"flex"}}>{icons[i]}</span>
                      {b.title}
                    </div>
                    <div className="dap-bullet-body">{b.body}</div>
                  </li>
                );
              })}
            </ul>
          </div>
          <CabinViz lang={lang} />
        </div>
      </section>

      {/* TIMELINE */}
      <section className="dap-section gray">
        <div className="container dap-2col flip">
          <div>
            <span className="dap-section-tag mono">{copy.pillars.items[2].code} · {copy.pillars.items[2].title.toUpperCase()}</span>
            <h2>{copy.timeline.title_a}<span className="accent">{copy.timeline.title_b}</span>{copy.timeline.title_c}</h2>
            <p className="dap-section-sub">{copy.timeline.sub}</p>
          </div>
          <Timeline events={copy.timeline.events} />
        </div>
      </section>

      {/* COMPLAINTS */}
      <section className="dap-section">
        <div className="container dap-2col">
          <div>
            <span className="dap-section-tag mono">{copy.pillars.items[1].code} · {copy.pillars.items[1].title.toUpperCase()}</span>
            <h2>{copy.complaints.title_a}<span className="accent">{copy.complaints.title_b}</span>{copy.complaints.title_c}</h2>
            <p className="dap-section-sub">{copy.complaints.sub}</p>
          </div>
          <ComplaintSteps steps={copy.complaints.steps} />
        </div>
      </section>

      {/* COMMS */}
      <section className="dap-section dark">
        <div className="container dap-2col flip">
          <div>
            <span className="dap-section-tag mono">{copy.pillars.items[3].code} · {copy.pillars.items[3].title.toUpperCase()}</span>
            <h2>{copy.comms.title_a}<span className="accent">{copy.comms.title_b}</span>{copy.comms.title_c}</h2>
            <p className="dap-section-sub">{copy.comms.sub}</p>
          </div>
          <CommsChat messages={copy.comms.messages} lang={lang} />
        </div>
      </section>

      {/* VOICE */}
      <section className="dap-section gray">
        <div className="container dap-2col">
          <div>
            <span className="dap-section-tag mono">{copy.pillars.items[4].code} · {copy.pillars.items[4].title.toUpperCase()}</span>
            <h2>{copy.voice.title_a}<span className="accent">{copy.voice.title_b}</span>{copy.voice.title_c}</h2>
            <p className="dap-section-sub">{copy.voice.sub}</p>
          </div>
          <VoiceQA examples={copy.voice.examples} lang={lang} />
        </div>
      </section>

      {/* CTA */}
      <section className="dap-cta" id="dap-cta">
        <div className="container dap-cta-inner">
          <h2>{copy.cta.title_a}<span className="accent">{copy.cta.title_b}</span>{copy.cta.title_c}</h2>
          <div>
            <p>{copy.cta.sub}</p>
            <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
              <a className="btn btn-primary" href="#">{copy.cta.cta_a} →</a>
              <a className="btn btn-ghost" href="#">{copy.cta.cta_b}</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.DriverAiPage = DriverAiPage;