// Trazia · site part 2 — How it works, Modules, Stats, Product, Quote, CTA, Footer

const { useEffect: useEffect2, useRef: useRef2, useState: useState2 } = React;

/* ============================================================
   HOW IT WORKS — interactive 4-step
   ============================================================ */
function HowItWorks() {
  const [active, setActive] = useState2(0);

  // auto-advance
  useEffect2(() => {
    const t = setInterval(() => setActive(a => (a + 1) % 4), 6500);
    return () => clearInterval(t);
  }, []);

  const steps = [
    {
      num: "01",
      tab: "Activación",
      title: "Vinculación inmediata en campo.",
      body: "Al llegar al lugar, el ajustador escanea el dispositivo para enlazar físicamente el vehículo con su número de siniestro. Se registra la ubicación exacta y arranca la trazabilidad del servicio.",
      bullets: ["Activación segura por parte del ajustador asignado.", "Punto de origen blindado con alta precisión GPS.", "Proceso independiente al operador de la grúa."],
      visual: "sticker",
    },
    {
      num: "02",
      tab: "Checkpoints",
      title: "Monitoreo autónomo. Validación certera.",
      body: "El dispositivo aprovecha las redes globales de Apple y Google para registrar la ruta del vehículo siniestrado. Cada punto de control capturado es una ubicación real y verificable durante el arrastre, dándote certeza operativa sin los costos de un GPS tradicional.",
      bullets: ["Respaldado por la red de dispositivos de Apple y Google (BLE 5.0+).", "Cero fricción operativa: sin chips, sin cables y sin carga.", "Visibilidad en cualquier ruta o trayecto con tránsito vehicular."],
      visual: "checkpoints",
    },
    {
      num: "03",
      tab: "Verificación",
      title: "Validación de cada traslado, kilómetro a kilómetro.",
      body: "El sistema compara cada punto de control con el trayecto óptimo entre el lugar del siniestro y el taller asignado. Cualquier desviación, retraso inusual o cambio de custodia detona una alerta inmediata para el equipo antifraude de tu aseguradora.",
      bullets: ["Modelos de evaluación para proveedores de arrastre y rutas.", "Alertas paramétricas basadas en tus políticas de riesgo.", "Registro auditable inalterable, descargable en un clic."],
      visual: "verify",
    },
    {
      num: "04",
      tab: "Evidencia",
      title: "Ingreso confirmado. Expediente blindado.",
      body: "Al registrarse el arribo de la unidad al taller autorizado, el ciclo de traslado se cierra. Trazia genera un registro inalterable con la ruta y los tiempos exactos, enviando la información de manera automática al core de tu aseguradora.",
      bullets: ["Bitácora del traslado exportable para auditorías (PDF y JSON).", "Evidencia sellada criptográficamente para evitar alteraciones.", "Integración fluida vía API con los sistemas de la compañía."],
      visual: "evidence",
    },
  ];

  const step = steps[active];

  return (
    <section className="section how" id="como-funciona">
      <div className="container">
        <div className="how-head reveal">
          <div className="eyebrow">02 · Cómo funciona</div>
          <h2 className="display-xl" style={{ marginTop: 18 }}>
            Un dispositivo. Un trayecto. Cero puntos ciegos.
          </h2>
        </div>
        <div className="how-tabs">
          {steps.map((s, i) => (
            <button key={i}
              className={`how-tab ${i === active ? "active" : ""}`}
              onClick={() => setActive(i)}>
              <span className="num">{s.num}</span>{s.tab}
            </button>
          ))}
        </div>
        <div className="how-stage" key={active}>
          <div className="how-copy">
            <h3 className="reveal in">{step.title}</h3>
            <p className="reveal in">{step.body}</p>
            <ul>
              {step.bullets.map((b, i) => (
                <li key={i}><I.check/>{b}</li>
              ))}
            </ul>
          </div>
          <div className="how-canvas">
            {step.visual === "sticker" && <StepSticker/>}
            {step.visual === "checkpoints" && <StepCheckpoints/>}
            {step.visual === "verify" && <StepVerify/>}
            {step.visual === "evidence" && <StepEvidence/>}
          </div>
        </div>
      </div>
    </section>
  );
}

function StepSticker() {
  return (
    <div className="step-sticker-stage">
      <div className="step-sticker-glow"/>
      <div className="step-sticker">
        <div>
          <div className="step-sticker-brand">trazia</div>
          <div className="step-sticker-id">TRZ-A8-7Q42-K9X3</div>
          <div className="step-sticker-meta">BLE 5.0 · CR2032<br/>EXP 2027-04</div>
        </div>
        <div className="step-sticker-qr">
          <I.qr/>
          <div className="step-scan-line"/>
        </div>
      </div>
    </div>
  );
}

function StepCheckpoints() {
  return (
    <div className="step-checkpoints">
      <svg className="step-checkpoint-svg" viewBox="0 0 480 380" preserveAspectRatio="none">
        <defs>
          <radialGradient id="ping2" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(0,194,184,0.5)"/>
            <stop offset="100%" stopColor="rgba(0,194,184,0)"/>
          </radialGradient>
        </defs>
        <path d="M50 320 Q 100 280 160 280 T 280 220 T 380 140 T 430 60"
          fill="none" stroke="rgba(0,194,184,0.3)" strokeWidth="2" strokeDasharray="4 6"/>
        <path d="M50 320 Q 100 280 160 280 T 280 220"
          fill="none" stroke="var(--trazia-teal)" strokeWidth="2.5" strokeLinecap="round"
          style={{ filter: "drop-shadow(0 0 6px rgba(0,194,184,0.6))" }}/>
        {[
          { x: 50, y: 320, r: true },
          { x: 160, y: 280, r: true },
          { x: 280, y: 220, r: true, active: true },
          { x: 380, y: 140, r: false },
          { x: 430, y: 60, r: false },
        ].map((c, i) => (
          <g key={i}>
            {c.active && <circle cx={c.x} cy={c.y} r="20" fill="url(#ping2)">
              <animate attributeName="r" values="8;28;8" dur="2s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite"/>
            </circle>}
            <circle cx={c.x} cy={c.y} r={c.active ? 7 : 5}
              fill={c.r ? "var(--trazia-teal)" : "rgba(255,255,255,0.2)"}
              stroke={c.r ? "none" : "rgba(255,255,255,0.4)"}
              strokeWidth="1"
              style={c.r ? { filter: "drop-shadow(0 0 6px rgba(0,194,184,0.5))" } : {}}/>
          </g>
        ))}
      </svg>
      <div className="label" style={{ left: "8%", bottom: "12%" }}>ORIGEN · 14:22</div>
      <div className="label" style={{ left: "32%", top: "50%" }}>CP-01 · 14:38</div>
      <div className="label" style={{ left: "56%", top: "30%" }}>CP-02 · LIVE</div>
      <div className="label" style={{ left: "76%", top: "10%", opacity: 0.5 }}>TALLER · ETA 16:10</div>
    </div>
  );
}

function StepVerify() {
  const rows = [
    { id: "TRZ-A8-7Q42-K9X3", label: "Activación · 19.4326°N, 99.1332°W", meta: "Verificado", flag: false },
    { id: "CP-01 · BLE-CROWD", label: "Checkpoint vía Apple Find My", meta: "+0:16", flag: false },
    { id: "CP-02 · BLE-CROWD", label: "Checkpoint vía Google FMD", meta: "+0:34", flag: false },
    { id: "ANOMALY · ROUTE-DEV", label: "Desvío de corredor lógico detectado", meta: "Revisar", flag: true },
  ];
  return (
    <div className="step-verify">
      <div className="step-verify-rows">
        {rows.map((r, i) => (
          <div key={i} className={`step-verify-row ${r.flag ? "flag" : ""}`}>
            <div className="step-verify-check">{r.flag ? "!" : <I.check/>}</div>
            <div>
              <div style={{ color: "rgba(255,255,255,0.45)", fontSize: 9, letterSpacing: 0.06 }}>{r.id}</div>
              <div>{r.label}</div>
            </div>
            <div className="step-verify-meta">{r.meta}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function StepEvidence() {
  return (
    <div className="step-evidence">
      <div className="step-evidence-doc">
        <div className="step-evidence-doc-hd">
          <div className="title">Custodia digital · CLM-2026-00084</div>
          <div className="step-evidence-doc-seal"><I.check/>SELLADO</div>
        </div>
        <div className="step-evidence-doc-rows">
          <div className="step-evidence-doc-row"><span className="k">Carrier</span><span className="v">Quálitas MX</span></div>
          <div className="step-evidence-doc-row"><span className="k">Dispositivo</span><span className="v">TRZ-A8-7Q42-K9X3</span></div>
          <div className="step-evidence-doc-row"><span className="k">Origen → Taller</span><span className="v">CDMX → Naucalpan</span></div>
          <div className="step-evidence-doc-row"><span className="k">Checkpoints</span><span className="v">4 / 4</span></div>
          <div className="step-evidence-doc-row"><span className="k">Custodia</span><span className="v" style={{ color: "var(--trazia-teal-deep)" }}>INTEGRA</span></div>
          <div className="step-evidence-doc-row"><span className="k">Sellado</span><span className="v">2026-05-14T16:22:18Z</span></div>
        </div>
        <div className="step-evidence-doc-hash">
          sha256: 7f3a9e2c81b4d6f5a0c8e9d1b2a3f4e5c6d7b8a9f0e1c2d3b4a5e6f7c8d9b0a1
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   MODULES — Track / Intel / Shield / Connect
   ============================================================ */
function Modules() {
  const modules = [
    { name: "TRACK", title: "Monitoreo base", body: "Plataforma central y dispositivos físicos para iniciar la cadena de custodia desde el lugar del accidente.", list: ["Visibilidad web en tiempo real", "Aplicación para el ajustador", "Enlace físico de unidades (BLE 5.0)", "Gestión de stock de dispositivos"], icon: <I.layers/> },
    { name: "INTEL", title: "Prevención de fraude", body: "Modelos de riesgo que evalúan el comportamiento de las rutas y los operadores de grúa en cada servicio.", list: ["Identificación de anomalías (ML)", "Scoring de servicios de arrastre", "Alertas automáticas de desviación", "Informes operativos mensuales"], icon: <I.brain/> },
    { name: "SHIELD", title: "Respaldo y auditoría", body: "Bitácora legal completa y paquetes probatorios exportables para auditorías, juicios civiles y requerimientos de compliance.", list: ["Sellado criptográfico por evento", "Exportación de bitácoras (PDF + JSON)", "Validación de integridad del expediente", "Resguardo legal tras el cierre del siniestro"], icon: <I.shieldLg/> },
    { name: "CONNECT", title: "Sincronización corporativa", body: "APIs y herramientas para enviar los datos de cada traslado directamente a tu software de gestión.", list: ["APIs REST y Webhooks", "Compatible con estándar ACORD", "Autenticación corporativa (SSO SAML)", "SDK para tu app de ajustadores"], icon: <I.plug/> },
  ];
  return (
    <section className="section modules" id="modulos">
      <div className="container">
        <div className="modules-head reveal">
          <div className="eyebrow" style={{ color: "var(--trazia-teal)" }}>03 · Arquitectura modular</div>
          <h2 className="display-xl" style={{ marginTop: 18 }}>
            Cuatro módulos. Un ecosistema centralizado.
          </h2>
          <p className="lede" style={{ marginTop: 18, maxWidth: 640 }}>
            Implementa Trazia a tu ritmo. Arranca con Track para controlar los arrastres. Activa Intel para frenar fraudes. Suma Shield si requieres evidencia legal. Añade Connect para automatizar tu core.
          </p>
        </div>
        <div className="modules-grid">
          {modules.map((m, i) => (
            <div key={m.name} className="module reveal" style={{ "--reveal-delay": `${i * 80}ms` }}>
              <div className="module-arrow"><I.arrow/></div>
              <div className="module-name">Trazia {m.name}</div>
              <div className="module-icon" style={{ color: "var(--trazia-teal)" }}>{m.icon}</div>
              <h3>{m.title}</h3>
              <p>{m.body}</p>
              <ul className="module-list">
                {m.list.map(x => <li key={x}>{x}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   STATS — animated counters
   ============================================================ */
function Stat({ eyebrow, value, unit, prefix, label, sub, decimals = 0 }) {
  const ref = useRef2(null);
  const [seen, setSeen] = useState2(false);
  useEffect2(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const n = useCountUp(value, { duration: 2000, decimals, start: seen });
  return (
    <div className="stat-card" ref={ref}>
      <div className="stat-eyebrow">{eyebrow}</div>
      <div className="stat-value">
        {prefix}{n}<span className="unit">{unit}</span>
      </div>
      <div className="stat-label">{label}</div>
      <div className="stat-sub">{sub}</div>
    </div>
  );
}

function Stats() {
  return (
    <section className="section stats" id="resultados">
      <div className="container">
        <div className="stats-head reveal">
          <div className="eyebrow">04 · Resultados</div>
          <h2 className="display-xl" style={{ marginTop: 18 }}>
            Control absoluto, respaldado por datos.
          </h2>
        </div>
        <div className="stats-grid">
          <Stat eyebrow="Volumen de siniestros" prefix="+" value={150000} unit="" label="Unidades monitoreadas al año" sub="Expansión operativa en LATAM"/>
          <Stat eyebrow="Certeza operativa" value={98.4} decimals={1} unit="%" label="SLA garantizado en el traslado" sub="Monitoreo continuo"/>
          <Stat eyebrow="Agilidad de respuesta" prefix="−" value={14} unit="%" label="Reducción en tiempo de ingreso al taller" sub="Comparado con el promedio base"/>
          <Stat eyebrow="Impacto antifraude" value={87} unit="%" label="Anomalías capturadas a tiempo" sub="Intervención antes de cerrar el expediente"/>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PRODUCT — parallax window stack
   ============================================================ */
function Product() {
  const stageRef = useRef2(null);
  const [parallax, setParallax] = useState2(0);

  useEffect2(() => {
    if (!stageRef.current) return;
    const onScroll = () => {
      const r = stageRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      // -1..1 as element passes through viewport
      const t = Math.max(-1, Math.min(1, (vh / 2 - r.top - r.height / 2) / vh));
      setParallax(t);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="section product">
      <div className="container">
        <div className="product-head">
          <div className="reveal">
            <div className="eyebrow">05 · Plataforma</div>
            <h2 className="display-xl" style={{ marginTop: 18 }}>
              Visibilidad total para tus áreas de siniestros y antifraude.
            </h2>
          </div>
          <p className="lede reveal" style={{ "--reveal-delay": "120ms", maxWidth: 460 }}>
            Una interfaz ágil que prioriza los datos críticos de cada traslado sin saturar la pantalla. Diseñada para facilitar la toma de decisiones, generar evidencia exportable y cumplir con los más estrictos estándares de auditoría de tu aseguradora.
          </p>
        </div>
        <div className="product-stage" ref={stageRef}>
          {/* Window 1 — main map */}
          <div className="product-window pw-map parallax"
            style={{ transform: `translateY(${parallax * -16}px)` }}>
            <div className="product-window-titlebar">
              <div className="dot"/><div className="dot"/><div className="dot"/>
              <div className="product-window-title">trazia.io / live-ops</div>
            </div>
            <div className="pw-map-canvas">
              <ProductMap/>
            </div>
          </div>

          {/* Window 2 — claim drawer */}
          <div className="product-window pw-claim parallax"
            style={{ transform: `translateY(${parallax * 22}px)` }}>
            <div className="product-window-titlebar">
              <div className="dot"/><div className="dot"/><div className="dot"/>
              <div className="product-window-title">claim · CLM-2026-00084</div>
            </div>
            <div className="pw-claim-body">
              <div className="pw-claim-id">CLM-2026-00084 · QLT</div>
              <div className="pw-claim-title">Audi A4 · Periférico Sur</div>
              <div className="pw-claim-status"><span className="dot" style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }}/>CUSTODIA ACTIVA</div>
              <div className="pw-claim-rows">
                <div className="pw-claim-row"><span className="pw-dot"/><span>Activación · CDMX</span><span className="meta">14:22</span></div>
                <div className="pw-claim-row"><span className="pw-dot"/><span>CP-01 · Apple FM</span><span className="meta">+0:16</span></div>
                <div className="pw-claim-row"><span className="pw-dot"/><span>CP-02 · Google FMD</span><span className="meta">+0:34</span></div>
                <div className="pw-claim-row pending"><span className="pw-dot"/><span>CP-03 esperado</span><span className="meta">ETA +0:48</span></div>
                <div className="pw-claim-row pending"><span className="pw-dot"/><span>Taller · Naucalpan</span><span className="meta">ETA 16:10</span></div>
              </div>
            </div>
          </div>

          {/* Window 3 — kpi */}
          <div className="product-window pw-kpi parallax"
            style={{ transform: `translateY(${parallax * -10}px)` }}>
            <div className="product-window-titlebar">
              <div className="dot"/><div className="dot"/><div className="dot"/>
              <div className="product-window-title">kpi · live</div>
            </div>
            <div className="pw-kpi-body">
              <div className="pw-kpi-cell">
                <div className="label">Activos hoy</div>
                <div className="val">142</div>
              </div>
              <div className="pw-kpi-cell">
                <div className="label">Custodia</div>
                <div className="val"><span className="accent">98.4</span><span style={{ fontSize: 13, color: "rgba(255,255,255,0.5)" }}>%</span></div>
              </div>
              <div className="pw-kpi-cell">
                <div className="label">Anomalías</div>
                <div className="val">3</div>
              </div>
            </div>
          </div>
          <div className="product-meta">build 1.0.84 · realtime · MX-CENTRAL-1</div>
        </div>
      </div>
    </section>
  );
}

function ProductMap() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 700 460" preserveAspectRatio="xMidYMid slice">
      <defs>
        <radialGradient id="ping3" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="rgba(0,194,184,0.5)"/>
          <stop offset="100%" stopColor="rgba(0,194,184,0)"/>
        </radialGradient>
      </defs>
      {/* multiple routes */}
      <g opacity="0.6">
        <path d="M40 380 Q 120 340 200 320 T 360 240 T 520 160 T 660 60"
          stroke="rgba(0,194,184,0.35)" strokeWidth="1.6" fill="none" strokeDasharray="3 5"/>
        <path d="M80 80 Q 160 120 240 140 T 380 200 T 520 280 T 660 380"
          stroke="rgba(0,194,184,0.25)" strokeWidth="1.6" fill="none" strokeDasharray="3 5"/>
        <path d="M40 220 Q 140 200 240 220 T 420 260 T 600 280"
          stroke="rgba(0,194,184,0.18)" strokeWidth="1.6" fill="none" strokeDasharray="3 5"/>
      </g>
      {/* solid trail */}
      <path d="M40 380 Q 120 340 200 320 T 360 240"
        stroke="var(--trazia-teal)" strokeWidth="2.2" fill="none" strokeLinecap="round"
        style={{ filter: "drop-shadow(0 0 4px rgba(0,194,184,0.5))" }}/>
      {/* checkpoints */}
      {[
        [40, 380, true, true],
        [200, 320, true, false],
        [360, 240, true, true],
        [520, 160, false, false],
        [660, 60, false, false],
        [80, 80, true, false],
        [240, 140, true, false],
        [380, 200, false, false],
        [600, 280, false, false],
      ].map(([x, y, reached, ping], i) => (
        <g key={i}>
          {ping && <circle cx={x} cy={y} r="14" fill="url(#ping3)">
            <animate attributeName="r" values="8;22;8" dur="2.4s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.8;0;0.8" dur="2.4s" repeatCount="indefinite"/>
          </circle>}
          <circle cx={x} cy={y} r={reached ? 4 : 3}
            fill={reached ? "var(--trazia-teal)" : "rgba(255,255,255,0.3)"}/>
        </g>
      ))}
    </svg>
  );
}

/* ============================================================
   USES
   ============================================================ */
function Uses() {
  const cases = [
    { eyebrow: "Caso de uso 01", title: "Prevención de fraude operativo", body: "Detecta desvíos de ruta, sustracción de autopartes durante el arrastre, doble facturación de grúas e ingresos a talleres no autorizados.", visual: <UseVisAnomaly/> },
    { eyebrow: "Caso de uso 02", title: "Control de proveedores (SLA)", body: "Mide objetivamente los tiempos de traslado, identifica servicios deficientes y obtén datos reales para respaldar la renegociación de contratos.", visual: <UseVisSLA/> },
    { eyebrow: "Caso de uso 03", title: "Experiencia del asegurado", body: "Otorga trazabilidad en tiempo real del traslado de su unidad. Reduce las llamadas a la cabina de siniestros y eleva tu NPS sin modificar los sistemas de la compañía.", visual: <UseVisNPS/> },
  ];
  return (
    <section className="section uses" id="uses">
      <div className="container">
        <div className="uses-head">
          <div className="reveal">
            <div className="eyebrow">06 · Casos de uso</div>
            <h2 className="display-xl" style={{ marginTop: 18 }}>
              Tres frentes de impacto. Resultados medibles.
            </h2>
          </div>
          <p className="lede reveal" style={{ "--reveal-delay": "120ms", maxWidth: 460 }}>
            Trazia se adapta a los objetivos de tu aseguradora, generando ahorros y eficiencias en las áreas que más te importan desde el día uno.
          </p>
        </div>
        <div className="uses-grid">
          {cases.map((c, i) => (
            <div key={i} className="use-card reveal" style={{ "--reveal-delay": `${i * 100}ms` }}>
              <div className="use-vis">{c.visual}</div>
              <div className="use-body">
                <div className="use-eyebrow">{c.eyebrow}</div>
                <h4>{c.title}</h4>
                <p>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseVisAnomaly() {
  return (
    <svg width="100%" height="100%" viewBox="0 0 360 200" preserveAspectRatio="xMidYMid slice">
      <path d="M20 160 Q 80 120 140 110 T 240 90 T 340 30"
        stroke="rgba(255,255,255,0.2)" strokeWidth="1.4" fill="none" strokeDasharray="3 5"/>
      <path d="M20 160 Q 80 140 140 130 L 200 180 L 240 110 T 340 30"
        stroke="#F2A93B" strokeWidth="2" fill="none" strokeLinecap="round"
        style={{ filter: "drop-shadow(0 0 6px rgba(242,169,59,0.6))" }}/>
      <circle cx="200" cy="180" r="20" fill="rgba(242,169,59,0.2)">
        <animate attributeName="r" values="14;26;14" dur="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="1;0;1" dur="2s" repeatCount="indefinite"/>
      </circle>
      <circle cx="200" cy="180" r="6" fill="#F2A93B"/>
      <text x="210" y="175" fill="#F2A93B" fontSize="10" fontFamily="JetBrains Mono">DESVÍO</text>
      <circle cx="20" cy="160" r="4" fill="var(--trazia-teal)"/>
      <circle cx="340" cy="30" r="4" fill="rgba(255,255,255,0.4)"/>
    </svg>
  );
}

function UseVisSLA() {
  const bars = [60, 90, 70, 110, 85, 130, 95, 160, 140, 180, 155];
  return (
    <svg width="100%" height="100%" viewBox="0 0 360 200" preserveAspectRatio="xMidYMid slice">
      {bars.map((h, i) => (
        <rect key={i} x={20 + i * 30} y={200 - h - 10} width="18" height={h}
          rx="2" fill="var(--trazia-teal)" opacity={0.3 + (i / bars.length) * 0.7}>
          <animate attributeName="height" from="0" to={h} dur="0.8s" begin={`${i * 0.08}s`} fill="freeze"/>
          <animate attributeName="y" from="190" to={200 - h - 10} dur="0.8s" begin={`${i * 0.08}s`} fill="freeze"/>
        </rect>
      ))}
      <line x1="0" y1="80" x2="360" y2="80" stroke="rgba(255,255,255,0.2)" strokeWidth="1" strokeDasharray="3 4"/>
      <text x="340" y="76" fill="rgba(255,255,255,0.5)" fontSize="9" fontFamily="JetBrains Mono" textAnchor="end">SLA · 60min</text>
    </svg>
  );
}

function UseVisNPS() {
  return (
    <div style={{ width: "100%", height: "100%", display: "grid", placeItems: "center", padding: 20 }}>
      <div style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 12, padding: 16, width: "85%", color: "#fff" }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "rgba(255,255,255,0.5)", letterSpacing: 0.06, marginBottom: 6 }}>NOTIFICACIÓN · 14:22</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 600, marginBottom: 4 }}>Tu vehículo está en trayecto</div>
        <div style={{ fontSize: 11, color: "rgba(255,255,255,0.7)", lineHeight: 1.4 }}>Recogido en CDMX. Estimado de llegada al taller: 16:10.</div>
        <div style={{ marginTop: 10, height: 4, borderRadius: 2, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
          <div className="nps-bar" style={{ width: "62%", height: "100%", background: "var(--trazia-teal)", borderRadius: 2 }}/>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   QUOTE
   ============================================================ */
function Quote() {
  return (
    <section className="section quote" id="acerca">
      <div className="quote-card reveal">
        <div className="quote-mark">"</div>
        <p className="quote-text">
          Nuestra promesa no es llenar un mapa de puntos, es entregar <span style={{ color: "var(--trazia-teal-deep)" }}>certeza operativa</span>. Cada registro de ubicación es real, cada desvío genera una alerta accionable y el traslado se cierra con evidencia inalterable. Eso es lo que un área antifraude realmente necesita para sustentar sus decisiones ante un comité.
        </p>
        <div className="quote-foot">
          <div className="quote-avatar">JM</div>
          <div>
            <div className="quote-author">Equipo Trazia</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CTA
   ============================================================ */
function CTA() {
  return (
    <section className="section cta" id="demo">
      <div className="container">
        <div className="cta-card reveal">
          <div>
            <h2 className="display-xl">Visibilidad total para tus expedientes.</h2>
            <p className="lede" style={{ marginTop: 16 }}>
              Agenda una llamada de 30 minutos con nuestros especialistas. Una sesión 100% técnica para revisar la arquitectura, el despliegue en campo y los indicadores antifraude que realmente le importan a tu compañía.
            </p>
            <div className="cta-actions">
              <a href="#contacto" onClick={openDemoModal('demo')} className="btn btn-on-dark">Agendar sesión ejecutiva <I.arrow className="arrow"/></a>
              <a href="#contacto" onClick={openDemoModal('brief')} className="btn btn-ghost-dark">Descargar brief técnico</a>
            </div>
          </div>
          <div className="cta-side">
            <img src="assets/logo/trazia_mark_reverse.svg" alt=""/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/logo/trazia_logo_horizontal_reverse_dark.svg" alt="Trazia"/>
            <p>Chain-of-custody intelligence para aseguradoras del ramo automotriz en LATAM. Independiente. Multi-carrier. Honesta sobre sus límites técnicos.</p>
            <div className="footer-social">
              <a href="https://www.linkedin.com/company/trazia" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn"><svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M2.5 5h2v7.5h-2V5zm1-3a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zM6 5h1.9v1c.3-.5 1-1.2 2.1-1.2 2.2 0 2.6 1.4 2.6 3.3v4.4h-2V8.5c0-.9 0-2-1.3-2s-1.4 1-1.4 2v4h-2V5z"/></svg></a>
              <a href="mailto:hola@trazia.io" aria-label="Email"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="2" y="3.5" width="10" height="7" rx="1"/><path d="M2 4l5 4 5-4"/></svg></a>
            </div>
          </div>
          <div className="footer-col">
            <h5>Producto</h5>
            <a href="#modulos">Trazia Track</a>
            <a href="#modulos">Trazia Intel</a>
            <a href="#modulos">Trazia Shield</a>
            <a href="#modulos">Trazia Connect</a>
          </div>
          <div className="footer-col">
            <h5>Carriers</h5>
            <a href="#como-funciona">Implementación</a>
            <a href="#uses">Casos de éxito</a>
            <a href="#contacto" onClick={openDemoModal('compliance')}>Cumplimiento</a>
            <a href="#contacto" onClick={openDemoModal('support')}>Soporte 24/7</a>
          </div>
          <div className="footer-col">
            <h5>Compañía</h5>
            <a href="#acerca">Acerca de Trazia</a>
            <a href="#contacto" onClick={openDemoModal('contact')}>Contacto</a>
            <a href="presentacion.html" target="_blank" rel="noopener">Presentación corporativa</a>
            <a href="privacidad.html">Privacidad · LFPDPPP</a>
          </div>
        </div>
        <div className="footer-meta">
          <span>© 2026 TRAZIA · CDMX</span>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   MODAL — demo / contact / support / brief / compliance
   ============================================================ */

/* Open the modal from any onClick handler:
     onClick={openDemoModal('demo')}
   Variants:
     'demo'       → form, "Solicitar demo ejecutiva"
     'contact'    → form, "Contacto"
     'support'    → form, "Soporte 24/7"
     'brief'      → form, "Brief técnico" — sends brief on submit
     'compliance' → static info, compliance commitments
*/
function openDemoModal(variant = 'demo') {
  return function (e) {
    if (e && e.preventDefault) e.preventDefault();
    window.dispatchEvent(new CustomEvent('trazia:openModal', {
      detail: { variant: variant }
    }));
  };
}

const MODAL_COPY = {
  demo: {
    eyebrow: 'Demo ejecutiva',
    title: 'Sesión técnica de 30 minutos.',
    sub: 'El equipo de operaciones de Trazia te muestra el modelo, las limitaciones declaradas y los números que importan. Sin pitch.',
    submit: 'Agendar demo',
    success: { title: 'Solicitud recibida.', body: 'Un miembro del equipo de Trazia te contacta en menos de 24 horas hábiles para coordinar la sesión.' },
  },
  contact: {
    eyebrow: 'Contacto',
    title: 'Conversemos.',
    sub: 'Cuéntanos qué necesitas y el equipo correcto te responde en menos de 24 horas hábiles.',
    submit: 'Enviar mensaje',
    success: { title: 'Mensaje recibido.', body: 'Te responderemos al correo que dejaste en menos de 24 horas hábiles.' },
  },
  support: {
    eyebrow: 'Soporte 24/7',
    title: 'Soporte para clientes activos.',
    sub: 'El soporte 24/7 está disponible para carriers con custodia en operación. Si todavía no eres cliente, déjanos tus datos y un equipo te explica cómo se contrata.',
    submit: 'Solicitar soporte',
    success: { title: 'Tu solicitud entró a la cola.', body: 'Para incidentes con custodia activa, el equipo de operaciones responde en menos de 1 hora.' },
  },
  brief: {
    eyebrow: 'Brief técnico',
    title: 'Te enviamos el brief al correo.',
    sub: 'Dossier técnico de 12 páginas: arquitectura, modelo de datos, política de retención, integraciones soportadas y limitaciones declaradas.',
    submit: 'Enviar brief',
    success: { title: 'Brief en camino.', body: 'En unos minutos llega a tu bandeja un correo con el brief técnico y el dataroom.' },
  },
  compliance: {
    eyebrow: 'Cumplimiento',
    title: 'Compromisos de seguridad y privacidad.',
    sub: 'Trazia opera bajo los siguientes estándares y compromisos para con los carriers y los asegurados.',
  },
};

function TraziaModal() {
  const { useState, useEffect, useRef } = React;
  const [open, setOpen] = useState(false);
  const [variant, setVariant] = useState('demo');
  const [status, setStatus] = useState('idle'); // idle | submitting | success | error
  const [errorMsg, setErrorMsg] = useState('');
  const [form, setForm] = useState({
    name: '', email: '', company: '', role: '', volume: '', message: '', _honey: ''
  });
  const dialogRef = useRef(null);
  const firstFieldRef = useRef(null);
  const closeBtnRef = useRef(null);
  const lastFocusedRef = useRef(null);

  useEffect(() => {
    const onOpen = (e) => {
      const v = (e && e.detail && e.detail.variant) || 'demo';
      lastFocusedRef.current = document.activeElement;
      setVariant(v);
      setStatus('idle');
      setErrorMsg('');
      setForm({ name: '', email: '', company: '', role: '', volume: '', message: '', _honey: '' });
      setOpen(true);
    };
    window.addEventListener('trazia:openModal', onOpen);
    return () => window.removeEventListener('trazia:openModal', onOpen);
  }, []);

  useEffect(() => {
    if (!open) return;
    document.body.classList.add('modal-open');
    const onKey = (e) => {
      if (e.key === 'Escape') { setOpen(false); return; }
      if (e.key === 'Tab') {
        // Focus trap
        const root = dialogRef.current;
        if (!root) return;
        const focusables = root.querySelectorAll(
          'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
        );
        if (!focusables.length) return;
        const first = focusables[0];
        const last = focusables[focusables.length - 1];
        if (e.shiftKey && document.activeElement === first) {
          e.preventDefault(); last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
          e.preventDefault(); first.focus();
        }
      }
    };
    window.addEventListener('keydown', onKey);
    // Initial focus — first form field for forms, close button for info
    setTimeout(() => {
      if (firstFieldRef.current) firstFieldRef.current.focus();
      else if (closeBtnRef.current) closeBtnRef.current.focus();
    }, 60);
    return () => {
      document.body.classList.remove('modal-open');
      window.removeEventListener('keydown', onKey);
      const last = lastFocusedRef.current;
      if (last && last.focus) {
        try { last.focus({ preventScroll: true }); } catch (_) {}
      }
    };
  }, [open]);

  function update(field) {
    return function (e) { setForm(f => ({ ...f, [field]: e.target.value })); };
  }

  async function submit(e) {
    e.preventDefault();
    if (status === 'submitting') return;
    setStatus('submitting');
    setErrorMsg('');
    const payload = { ...form, variant, ts: new Date().toISOString(),
                      ua: navigator.userAgent, page: location.pathname };
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) {
        const j = await res.json().catch(() => ({}));
        throw new Error(j.error || ('HTTP ' + res.status));
      }
      setStatus('success');
    } catch (err) {
      // Keep a local copy as a safety net so nothing is ever lost.
      try {
        const q = JSON.parse(localStorage.getItem('trazia.demo.queue') || '[]');
        q.push(payload);
        localStorage.setItem('trazia.demo.queue', JSON.stringify(q));
      } catch (_) {}
      setStatus('error');
      setErrorMsg(err && err.message ? err.message : 'Error de red');
    }
  }

  if (!open) return null;

  const copy = MODAL_COPY[variant] || MODAL_COPY.demo;
  const isInfo = variant === 'compliance';
  const titleId = 'trazia-modal-title';

  function backdropClick(e) {
    if (e.target === e.currentTarget) setOpen(false);
  }

  // mailto fallback for users that hit a network error
  const mailtoBody = encodeURIComponent(
    'Empresa: ' + form.company + '\n' +
    'Cargo: ' + form.role + '\n' +
    'Volumen estimado / mes: ' + form.volume + '\n\n' +
    'Mensaje:\n' + form.message
  );
  const mailto = 'mailto:hola@trazia.io?subject=' +
    encodeURIComponent('[Trazia] ' + copy.eyebrow + ' · ' + form.company) +
    '&body=' + mailtoBody;

  return (
    <div className="modal-backdrop" role="presentation" onClick={backdropClick}>
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby={titleId} ref={dialogRef}>
        {/* Header */}
        <div className="modal-hd">
          <div className="modal-eyebrow">{copy.eyebrow}</div>
          <h2 className="modal-title" id={titleId}>{copy.title}</h2>
          {copy.sub && <p className="modal-sub">{copy.sub}</p>}
          <button type="button" className="modal-close" ref={closeBtnRef}
                  aria-label="Cerrar" onClick={() => setOpen(false)}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </button>
        </div>

        {/* Body */}
        {status === 'success' ? (
          <div className="modal-success">
            <div className="modal-success-icon">
              <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
                <path d="M6 14.5l5 5 11-12" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <h3>{copy.success.title}</h3>
            <p>{copy.success.body}</p>
            <div className="modal-success-meta">REF · {Math.random().toString(36).slice(2,6).toUpperCase()}-{Date.now().toString(36).slice(-4).toUpperCase()}</div>
          </div>
        ) : isInfo ? (
          <div className="modal-info">
            <ul>
              <li>
                <span className="check"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <div><strong>SOC 2 Type II en curso</strong><span>Auditoría de controles de seguridad y disponibilidad iniciada con tercero independiente.</span></div>
              </li>
              <li>
                <span className="check"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <div><strong>LFPDPPP compliant</strong><span>Tratamiento de datos personales conforme a la Ley Federal de Protección de Datos Personales en Posesión de los Particulares (México).</span></div>
              </li>
              <li>
                <span className="check"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <div><strong>Hash SHA-256 por evento</strong><span>Cada checkpoint, cada custodia y cada anomalía queda firmada con timestamp y hash verificable.</span></div>
              </li>
              <li>
                <span className="check"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <div><strong>Audit trail exportable</strong><span>Paquete probatorio en PDF + JSON, firmado y exportable a procesos legales y antifraude.</span></div>
              </li>
              <li>
                <span className="check"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <div><strong>Retención de 90 días</strong><span>Posterior al cierre de la custodia, los datos del claim se purgan salvo orden contractual del carrier.</span></div>
              </li>
              <li>
                <span className="check"><svg width="12" height="12" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg></span>
                <div><strong>SLA 99.5% uptime</strong><span>Compromiso operativo medido sobre la disponibilidad de la plataforma de checkpoints y dashboard.</span></div>
              </li>
            </ul>
          </div>
        ) : (
          <form className="modal-body" onSubmit={submit} noValidate>
            <div className="modal-form">
              {status === 'error' && (
                <div className="modal-error-banner" role="alert">
                  No pudimos enviar el mensaje ({errorMsg || 'sin detalle'}). Tus datos quedaron guardados localmente; puedes <a href={mailto}>escribirnos directo a hola@trazia.io</a> o reintentar.
                </div>
              )}
              <div className="modal-grid-2">
                <div className="modal-field">
                  <label htmlFor="m-name">Nombre<span className="req">*</span></label>
                  <input id="m-name" name="name" type="text" autoComplete="name" required
                         placeholder="Ana Hernández" value={form.name}
                         onChange={update('name')} ref={firstFieldRef}/>
                </div>
                <div className="modal-field">
                  <label htmlFor="m-email">Correo corporativo<span className="req">*</span></label>
                  <input id="m-email" name="email" type="email" autoComplete="email" required
                         placeholder="ana@carrier.com" value={form.email} onChange={update('email')}/>
                </div>
              </div>
              <div className="modal-grid-2">
                <div className="modal-field">
                  <label htmlFor="m-company">Empresa / carrier<span className="req">*</span></label>
                  <input id="m-company" name="company" type="text" autoComplete="organization" required
                         placeholder="Quálitas" value={form.company} onChange={update('company')}/>
                </div>
                <div className="modal-field">
                  <label htmlFor="m-role">Cargo</label>
                  <input id="m-role" name="role" type="text" autoComplete="organization-title"
                         placeholder="Director de Antifraude" value={form.role} onChange={update('role')}/>
                </div>
              </div>
              {(variant === 'demo' || variant === 'brief') && (
                <div className="modal-field">
                  <label htmlFor="m-volume">Volumen estimado de eventos / mes</label>
                  <select id="m-volume" name="volume" value={form.volume} onChange={update('volume')}>
                    <option value="">Seleccionar…</option>
                    <option value="<500">Menos de 500</option>
                    <option value="500-2k">500 — 2,000</option>
                    <option value="2k-10k">2,000 — 10,000</option>
                    <option value="10k+">Más de 10,000</option>
                    <option value="evaluando">Aún estoy evaluando</option>
                  </select>
                </div>
              )}
              <div className="modal-field">
                <label htmlFor="m-message">
                  {variant === 'support' ? 'Describe el incidente' : 'Mensaje'}
                  {variant === 'support' && <span className="req">*</span>}
                </label>
                <textarea id="m-message" name="message" rows="3" required={variant === 'support'}
                  placeholder={
                    variant === 'support' ? 'Carrier · ID de claim · qué está pasando…' :
                    variant === 'brief'   ? 'Áreas del brief en las que tienes interés (opcional)' :
                                            'Cuéntanos un poco del contexto (opcional)'
                  }
                  value={form.message} onChange={update('message')}/>
              </div>
              {/* Honeypot — bots fill this; humans don't see it */}
              <input className="modal-honey" type="text" name="company_url" tabIndex="-1" autoComplete="off"
                     value={form._honey} onChange={update('_honey')}/>
            </div>
            <div className="modal-foot">
              <div className="modal-foot-note">
                Al enviar aceptas nuestra <a href="privacidad.html" target="_blank" rel="noopener">política de privacidad</a> (LFPDPPP).
              </div>
              <button type="submit" className="modal-submit" disabled={status === 'submitting'}>
                {status === 'submitting' ? <><span className="modal-spin" aria-hidden="true"/> Enviando…</> : <>{copy.submit} <I.arrow/></>}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

window.HowItWorks = HowItWorks;
window.Modules = Modules;
window.Stats = Stats;
window.Product = Product;
window.Uses = Uses;
window.Quote = Quote;
window.CTA = CTA;
window.Footer = Footer;
window.TraziaModal = TraziaModal;
window.openDemoModal = openDemoModal;