/* === Zebra Insurtech sections — Vortik redesign === */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* ---- NAV ---- */
function Nav() {
  const [solid, setSolid] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setSolid(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${solid ? "solid" : ""}`} data-screen-label="01 Nav">
      <div className="wrap nav-inner">
        <a href="#top" className="brand">
          <BrandMark size={26} />
          <span>Zebra</span>
          <span style={{ fontFamily: "JetBrains Mono", fontSize: 10, color: "rgba(255,255,255,0.4)", marginLeft: 4, letterSpacing: "0.08em" }}>INSURTECH</span>
        </a>
        <div className="nav-links">
          <a href="#producto">Producto</a>
          <a href="#fintech">Para Fintechs</a>
          <a href="#asegu">Para Aseguradoras</a>
          <a href="#casos">Casos</a>
          <a href="#blog">Blog</a>
        </div>
        <a href="#cta" className="btn btn-primary"><span>Agenda demo</span><IconArrow /></a>
      </div>
    </nav>
  );
}

/* ---- HERO ---- */
function Hero() {
  return (
    <section className="hero" id="top" data-screen-label="02 Hero">
      <div className="hero-mesh" aria-hidden="true"></div>
      <div className="hero-stripes" aria-hidden="true"></div>
      <div className="hero-vignette" aria-hidden="true"></div>
      <div className="wrap">
        <Reveal className="hero-eyebrow"><span className="dot"></span><span>API embebida · 12 fintechs en vivo · sandbox en 10 min</span></Reveal>
        <Reveal delay={80}>
          <h1>
            Tus clientes ya están en tu app.{" "}
            <span className="accent">Véndeles seguros.</span>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="hero-sub">
            Ztech embebe pólizas dentro de tu fintech con una sola API.
            Tú cobras comisión, tus clientes ganan cashback si no se siniestran. Sin redirects, sin volverte aseguradora.
          </p>
        </Reveal>
        <Reveal delay={240} className="hero-ctas">
          <a href="#cta" className="btn btn-primary btn-lg"><span>Agenda demo de 20 min</span><IconArrow /></a>
          <a href="#how" className="btn btn-ghost btn-lg"><span>Ver cómo funciona</span><span>↓</span></a>
        </Reveal>
        <Reveal delay={320} className="hero-trust">
          <span className="label">Respaldados por</span>
          <span className="logo-pl">ZURICH</span>
          <span className="logo-pl">GMX SEGUROS</span>
          <span style={{ fontFamily: 'JetBrains Mono', fontSize: 10, color: 'rgba(255,180,131,0.6)' }}>[real logos · Zebra reemplaza]</span>
        </Reveal>
        <Reveal delay={400} className="hero-counters">
          <div className="counter">
            <div className="val"><CountUp to={12} /></div>
            <div className="lbl">fintechs integradas en producción</div>
          </div>
          <div className="counter">
            <div className="val"><span className="pre">$</span><CountUp to={4.2} decimals={1} /><span>M</span></div>
            <div className="lbl">pólizas emitidas YTD</div>
          </div>
          <div className="counter">
            <div className="val"><CountUp to={18} /><span>%</span></div>
            <div className="lbl">cashback promedio devuelto</div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- LOGO BAR ---- */
function LogoBar() {
  const logos = ["Klar", "Stori", "Albo", "Hey Banco", "Kueski", "Konfío", "Mercado Pago", "Nelo"];
  const items = [...logos, ...logos];
  return (
    <section className="logobar" data-screen-label="03 Logos">
      <div className="lbl">Seguros embebidos detrás de</div>
      <div className="marquee-mask">
        <div className="marquee">
          {items.map((l, i) => <div key={i} className="logo-card">{l}</div>)}
        </div>
      </div>
    </section>
  );
}

/* ---- PROBLEMA ---- */
function Problema() {
  const items = [
    { emj: "😩", h: "Cada usuario que va fuera, lo pierdes", p: <>El <span className="stat">85%</span> no regresa después de buscar seguro en otra app.</> },
    { emj: "💸", h: "Dejas 8-12% de revenue en la mesa", p: <>Tu <span className="stat">mejor revenue stream</span> sigue sin explotar mientras tus competidores lo activan.</> },
    { emj: "🐌", h: "Integrarte directo = 6 meses + legal", p: <>Ztech te conecta en <span className="stat">menos de 1 semana</span>. Sin equipo regulatorio nuevo.</> },
  ];
  return (
    <section className="section-dark" id="problema" data-screen-label="04 Problema">
      <div className="wrap">
        <Reveal><div className="section-eyebrow">El problema</div></Reveal>
        <Reveal delay={80}>
          <h2 className="h2">
            Tus usuarios pagan, transfieren y ahorran en tu app. <span style={{ color: "rgba(255,255,255,0.42)" }}>¿Por qué los mandas a otra para asegurarse?</span>
          </h2>
        </Reveal>
        <div className="prob-grid">
          {items.map((it, i) => (
            <Reveal key={i} delay={i*100} className="prob-card">
              <span className="emj">{it.emj}</span>
              <h3 className="h">{it.h}</h3>
              <p className="p">{it.p}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- SOLUCIÓN ---- */
function Solucion() {
  const rows = [
    {
      icon: <IconAPI />, title: "API plug & play", lead: "Una integración, todos los productos.",
      bullets: ["Integras en 1 semana, no en 6 meses", "1 endpoint para auto, vida, salud, mascotas", "SDKs nativos JS, iOS y Android"]
    },
    {
      icon: <IconDash />, title: "Dashboard self-service", lead: "Tus números sin pedirle reportes a nadie.",
      bullets: ["Ventas en tiempo real, sin delay batch", "Rentabilidad por producto y por cohorte", "Siniestralidad y loss-ratio en vivo"]
    },
    {
      icon: <IconCash />, title: "Cashback Premium Optimization", lead: "Tus clientes ganan si no se siniestran.",
      bullets: ["+30% retención promedio comprobada", "Algoritmo propietario de pricing dinámico", "Reduce churn sin sacrificar margen"]
    },
  ];
  return (
    <section className="section-light" id="producto" data-screen-label="05 Solucion">
      <div className="wrap">
        <Reveal><div className="section-eyebrow">La solución · Ztech</div></Reveal>
        <Reveal delay={80}>
          <h2 className="h2" style={{ color: "var(--ink)" }}>
            Ztech es <span style={{ color: "var(--orange)" }}>3 cosas</span> en un solo plug &amp; play.
          </h2>
        </Reveal>
        <Reveal delay={160}><p className="h-sub">Una API, un dashboard, un motor de cashback. Diseñado para que tu equipo de producto y tu CFO duerman tranquilos.</p></Reveal>
        <div className="sol-stack">
          {rows.map((r, i) => (
            <Reveal key={i} delay={i*100} className="sol-row">
              <div className="sol-icn">{r.icon}</div>
              <div>
                <h3 className="h">{r.title}</h3>
                <p className="lead">{r.lead}</p>
              </div>
              <ul className="sol-bullets">
                {r.bullets.map((b, j) => (
                  <li key={j}><Check /> <span>{b}</span></li>
                ))}
              </ul>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CÓMO FUNCIONA ---- */
function ComoFunciona() {
  const sectionRef = useRefS(null);
  const [progress, setProgress] = useStateS(0);
  useEffectS(() => {
    const el = sectionRef.current;
    if (!el) return;
    const onScroll = () => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh * 0.4;
      const seen = vh - r.top;
      const p = Math.max(0, Math.min(1, seen / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const steps = [
    { n: "01", meta: "Día 1", h: "Conectas Ztech", p: "Un endpoint REST, sandbox listo en 10 minutos. Tu equipo de eng. ya sabe hacerlo." },
    { n: "02", meta: "Día 7", h: "Tu cliente compra en tu app", p: "Sin redirects, sin webview rara. Cotiza, contrata y paga sin salir de tu producto." },
    { n: "03", meta: "Día 30", h: "Cobras comisión, nosotros operamos", p: "Siniestros, soporte WhatsApp, ajustadores, reaseguro. Tú vendes, nosotros respondemos." },
  ];
  return (
    <section className="section-dark" id="how" ref={sectionRef} data-screen-label="06 Como Funciona">
      <div className="wrap">
        <Reveal><div className="section-eyebrow">Cómo funciona</div></Reveal>
        <Reveal delay={80}>
          <h2 className="h2">De integración a primera póliza en <span style={{ color: "var(--orange)" }}>7 días</span>.</h2>
        </Reveal>
        <Reveal delay={160}><p className="h-sub">Tres pasos, cero proyectos de 6 meses. Tu único trabajo es decidir qué productos lanzar primero.</p></Reveal>
        <div className="timeline" style={{ '--vfill': `${progress * 100}%` }}>
          <div className="timeline-track">
            <div className="timeline-fill" style={{ width: `${progress * 100}%` }}></div>
          </div>
          <div className="timeline-steps">
            {steps.map((s, i) => (
              <Reveal key={i} delay={i*150} className="tl-step">
                <div className="num">{s.n}</div>
                <div className="meta">{s.meta}</div>
                <h3 className="h">{s.h}</h3>
                <p className="p">{s.p}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- DASHBOARD ---- */
function DashboardDemo() {
  const cardRef = useRefS(null);
  const onMove = (e) => {
    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;
    const el = cardRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `rotateY(${x * 8}deg) rotateX(${-y * 8}deg)`;
  };
  const onLeave = () => { if (cardRef.current) cardRef.current.style.transform = ""; };

  const lineData = [22, 28, 24, 33, 41, 38, 48, 55, 49, 60, 68, 75];
  const barData = [18, 24, 22, 31, 28, 36, 42];

  return (
    <section className="section-dark" id="dash" data-screen-label="07 Dashboard">
      <div className="wrap">
        <Reveal><div className="section-eyebrow">Dashboard Ztech</div></Reveal>
        <Reveal delay={80}>
          <h2 className="h2">Tus números en tiempo real, <span style={{ color: "rgba(255,255,255,0.42)" }}>sin pedirle reportes a nadie.</span></h2>
        </Reveal>
        <Reveal delay={160}><p className="h-sub">Pólizas, rentabilidad, siniestralidad. Todo desde un solo lugar — y desde el primer día.</p></Reveal>

        <Reveal className="dash-wrap" delay={240}>
          <div className="dash" ref={cardRef} onMouseMove={onMove} onMouseLeave={onLeave}>
            <span className="placeholder-tag">Ejemplo · Zebra reemplaza con captura real</span>
            <div className="dash-chrome">
              <span className="dot" style={{ background: "#ff5f57" }}></span>
              <span className="dot" style={{ background: "#febc2e" }}></span>
              <span className="dot" style={{ background: "#28c840" }}></span>
              <span className="url">app.ztech.mx / overview</span>
            </div>
            <div className="dash-body">
              <aside className="dash-side">
                <div className="brand-mini"><BrandMark size={18} color="var(--orange)" /><span>Ztech</span></div>
                <ul>
                  <li className="active"><span className="ico"></span>Overview</li>
                  <li><span className="ico"></span>Pólizas</li>
                  <li><span className="ico"></span>Productos</li>
                  <li><span className="ico"></span>Siniestros</li>
                  <li><span className="ico"></span>Cashback</li>
                  <li><span className="ico"></span>Integraciones</li>
                  <li><span className="ico"></span>Reportes</li>
                </ul>
              </aside>
              <div className="dash-main">
                <div className="dash-head">
                  <div>
                    <div className="ttl">Overview · Últimos 30 días</div>
                    <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", marginTop: 2 }}>Klar · MX</div>
                  </div>
                  <div className="pill">● LIVE</div>
                </div>
                <div className="kpi-grid">
                  <div className="kpi">
                    <div className="l">Pólizas activas</div>
                    <div className="v">14,238</div>
                    <div className="d up">↑ 12.4% vs mes anterior</div>
                  </div>
                  <div className="kpi">
                    <div className="l">Revenue comisión</div>
                    <div className="v">$1.82M</div>
                    <div className="d up">↑ 8.1% vs mes anterior</div>
                  </div>
                  <div className="kpi">
                    <div className="l">Loss ratio</div>
                    <div className="v">42.3%</div>
                    <div className="d dn">↓ 2.1pp vs mes anterior</div>
                  </div>
                </div>
                <div className="chart-grid">
                  <div className="chart-card">
                    <div className="h"><span>Pólizas emitidas / mes</span><span className="leg">● 2025  ○ 2024</span></div>
                    <AreaChart data={lineData} />
                  </div>
                  <div className="chart-card">
                    <div className="h"><span>Retención cohort</span></div>
                    <div style={{ display: 'grid', placeItems: 'center', padding: '8px 0' }}><DonutChart value={78} /></div>
                  </div>
                </div>
                <div className="chart-card">
                  <div className="h"><span>Siniestralidad por producto</span><span className="leg">últimos 7 productos</span></div>
                  <BarChart data={barData} />
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        <div className="dash-feats">
          {[
            "Webhooks de cada póliza y siniestro en tiempo real",
            "Export CSV, BigQuery sync, integración con tu data warehouse",
            "Multi-fintech: tus subsidiarias en una sola vista",
          ].map((f, i) => (
            <Reveal key={i} delay={i*100} className="dash-feat">
              <div className="chk"><Check color="var(--green)" /></div>
              <span>{f}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- PARA QUIÉN ---- */
function ParaQuien() {
  const tabs = [
    {
      id: "fintech", tag: "Para Fintechs", h: "Nuevo revenue stream sin volverte aseguradora.",
      lead: "Embebe seguros en tu app sin licencia, sin reaseguro, sin equipo regulatorio nuevo. Tu marca, tu UX, nuestra operación.",
      bullets: ["8-12% de comisión por póliza emitida", "White-label completo, tu marca en pantalla", "Compliance CNSF cubierto por Ztech"],
      cta: "Soy fintech", visual: "phone"
    },
    {
      id: "asegu", tag: "Para Aseguradoras", h: "Distribución 100% digital sin invertir millones.",
      lead: "Llega a millones de usuarios fintech sin construir canal propio. Nosotros traemos la demanda, ustedes ponen el papel.",
      bullets: ["Acceso a 12+ fintechs ya integradas", "Productos lanzables en semanas, no años", "Datos de cohorte y siniestralidad granular"],
      cta: "Soy aseguradora", visual: "api"
    },
    {
      id: "broker", tag: "Para Brokers", h: "Vende más con canales digitales nuevos.",
      lead: "Conecta tu cartera a nuestras fintechs partner y descubre líneas de negocio que estaban fuera de tu alcance.",
      bullets: ["Lead-flow constante desde fintechs aliadas", "Dashboard de comisiones y renovaciones", "Cero fricción operativa, todo digital"],
      cta: "Soy broker", visual: "broker"
    },
  ];
  const [active, setActive] = useStateS(0);
  const cur = tabs[active];
  return (
    <section className="section-paper" id="audience" data-screen-label="08 Para Quien">
      <div className="wrap">
        <Reveal><div className="section-eyebrow">Para quién</div></Reveal>
        <Reveal delay={80}>
          <h2 className="h2" style={{ color: "var(--ink)" }}>
            Construido para <span style={{ color: "var(--orange)" }}>3 jugadores</span> del ecosistema.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <div className="tabs" role="tablist">
            {tabs.map((t, i) => (
              <button key={t.id} className={`tab ${i === active ? "active" : ""}`} onClick={() => setActive(i)} role="tab" aria-selected={i === active}>
                {t.tag}
              </button>
            ))}
          </div>
        </Reveal>
        <Reveal delay={240}>
          <div className="audience-grid">
            <div className="aud-content">
              <div>
                <div className="l">{cur.tag}</div>
                <h3>{cur.h}</h3>
                <p className="lead">{cur.lead}</p>
                <ul className="aud-bullets">
                  {cur.bullets.map((b, i) => <li key={i}>{b}</li>)}
                </ul>
              </div>
              <a href="#cta" className="btn btn-dark btn-lg" style={{ alignSelf: "flex-start" }}>
                <span>{cur.cta}</span><IconArrow />
              </a>
            </div>
            <div className="aud-visual" id={cur.id}>
              {cur.visual === "phone" && <PhoneMock />}
              {cur.visual === "api" && <div className="api-vis"><ApiIso /></div>}
              {cur.visual === "broker" && <BrokerVis />}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PhoneMock() {
  return (
    <div className="phone-mock">
      <div className="notch"></div>
      <div className="topbar"><span>9:41</span><span>● ●●●</span></div>
      <div className="card-h">Mi protección</div>
      <div className="seguro-card">
        <div className="l">Seguro de auto · Klar</div>
        <div className="v">Civic 2022</div>
        <div className="row">
          <span>$ 489 / mes</span>
          <span className="status">ACTIVO</span>
        </div>
      </div>
      <div className="card-h" style={{ marginTop: 4 }}>Más coberturas</div>
      <div className="quick-list">
        <div className="ql"><span className="ic"></span>Vida — desde $89/mes</div>
        <div className="ql"><span className="ic"></span>Mascota — Lola</div>
        <div className="ql"><span className="ic"></span>Celular — Pixel 8</div>
      </div>
    </div>
  );
}

function BrokerVis() {
  return (
    <div className="broker-vis">
      <div className="broker-row"><span>Klar · Auto</span><span className="gain">+ $124K</span></div>
      <div className="broker-row"><span>Stori · Vida</span><span className="gain">+ $86K</span></div>
      <div className="broker-row"><span>Albo · Mascota</span><span className="gain">+ $42K</span></div>
      <div className="broker-row"><span>Hey Banco · Salud</span><span className="gain">+ $210K</span></div>
      <div className="broker-row" style={{ borderColor: "var(--orange)", background: "rgba(255,107,26,0.08)" }}>
        <span style={{ color: "var(--orange)", fontWeight: 600 }}>Comisión mensual</span>
        <span className="gain" style={{ color: "var(--orange)" }}>$462,000</span>
      </div>
    </div>
  );
}

/* ---- TESTIMONIOS ---- */
function Testimonios() {
  const list = [
    {
      quote: "Lanzamos seguro de auto en 6 semanas y ya es nuestra tercera línea de revenue. El dashboard nos quitó de encima reportes manuales.",
      name: "María Fernanda López", role: "VP Producto, Klar", company: "KLAR", metric: "+340% pólizas en 6 meses",
    },
    {
      quote: "Lo más fuerte: el cashback. Nuestros usuarios entienden el incentivo, no se siniestran, y se quedan con nosotros más tiempo.",
      name: "Diego Rivera", role: "Head of Growth, Stori", company: "STORI", metric: "+22pp retención anual",
    },
  ];
  return (
    <section className="section-dark" id="casos" data-screen-label="09 Testimonios">
      <div className="wrap">
        <Reveal><div className="section-eyebrow">Casos</div></Reveal>
        <Reveal delay={80}>
          <h2 className="h2">Lo que dicen las fintechs que ya <span style={{ color: "var(--orange)" }}>venden seguros</span> con Ztech.</h2>
        </Reveal>
        <Reveal delay={160}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,107,26,0.12)', border: '1px dashed rgba(255,107,26,0.4)', color: '#FFB683', fontFamily: 'JetBrains Mono', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 12 }}>
            ⚠ Placeholder · Zebra reemplaza con testimonios reales
          </div>
        </Reveal>
        <div className="testi-grid">
          {list.map((t, i) => (
            <Reveal key={i} delay={i*120} className="testi">
              <p className="quote">{t.quote}</p>
              <div className="testi-foot">
                <div className="testi-id">
                  <div className="avatar">{t.name.split(" ").map(s=>s[0]).slice(0,2).join("")}</div>
                  <div>
                    <div className="nm">{t.name}</div>
                    <div className="ro">{t.role}</div>
                  </div>
                </div>
                <div className="metric">{t.metric}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA FINAL ---- */
function CtaFinal() {
  return (
    <section className="cta-final" id="cta" data-screen-label="10 CTA Final">
      <div className="wrap cta-final-inner">
        <Reveal>
          <h2>Lanza seguros embebidos en <span style={{ textDecoration: 'underline', textDecorationThickness: 3, textUnderlineOffset: 6 }}>menos de 30 días</span>.</h2>
        </Reveal>
        <Reveal delay={100}>
          <p>Demo de 20 min con un product lead. Sin compromiso, te llevas el deck de integración y un sandbox listo para tu equipo de eng.</p>
        </Reveal>
        <Reveal delay={180}>
          <a href="#calendly" className="btn btn-dark btn-lg" style={{ background: '#0A0A0A', color: '#fff' }}>
            <span>Agenda demo</span><IconArrow />
          </a>
        </Reveal>
        <Reveal delay={260}>
          <div className="cta-trust-line">Atendemos en &lt; 24h hábiles · CDMX, México</div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- FOOTER ---- */
function Footer() {
  return (
    <footer data-screen-label="11 Footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col" style={{ gridColumn: 'span 1' }}>
            <a href="#top" className="brand" style={{ marginBottom: 18 }}>
              <BrandMark size={26} />
              <span>Zebra</span>
            </a>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', lineHeight: 1.55, margin: '12px 0 0', maxWidth: 280 }}>
              Insurance as a Service para fintechs en México. Embebe pólizas con una API, opera tranquilo.
            </p>
            <div className="foot-newsletter">
              <h4 style={{ marginTop: 20 }}>Newsletter mensual</h4>
              <form onSubmit={(e) => { e.preventDefault(); alert('¡Listo! Te suscribiste a las novedades de Ztech.'); }}>
                <input type="email" placeholder="tu@empresa.mx" required />
                <button type="submit" className="btn btn-primary" style={{ padding: '10px 14px' }}><IconArrow /></button>
              </form>
            </div>
            <div className="foot-socials" aria-label="Redes sociales">
              <a href="#" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="3.5" stroke="currentColor" strokeWidth="1.4"/><circle cx="8" cy="8" r="2.6" stroke="currentColor" strokeWidth="1.4"/><circle cx="11.5" cy="4.5" r="0.7" fill="currentColor"/></svg></a>
              <a href="#" aria-label="LinkedIn"><svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M3 6h2v8H3zm1-3.5a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4zM7 6h2v1.2c.3-.6 1.1-1.4 2.4-1.4C13.4 5.8 14 7 14 9v5h-2V9.3c0-1-.4-1.7-1.3-1.7-1 0-1.7.7-1.7 1.8V14H7V6z"/></svg></a>
              <a href="#" aria-label="Crunchbase"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.4"/><path d="M6.5 7.2c.4-.4.9-.7 1.6-.7.9 0 1.6.5 1.9 1.2M6.5 8.8c.4.4.9.7 1.6.7.9 0 1.6-.5 1.9-1.2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg></a>
            </div>
          </div>
          <div className="foot-col">
            <h4>Producto</h4>
            <ul>
              <li><a href="#">API Ztech</a></li>
              <li><a href="#">Dashboard</a></li>
              <li><a href="#">Cashback engine</a></li>
              <li><a href="#">Docs &amp; SDK</a></li>
              <li><a href="#">Status</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Compañía</h4>
            <ul>
              <li><a href="#">Nosotros</a></li>
              <li><a href="#">Casos de éxito</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Carreras</a></li>
              <li><a href="#">Prensa</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Legal</h4>
            <ul>
              <li><a href="#">Términos</a></li>
              <li><a href="#">Privacidad</a></li>
              <li><a href="#">Aviso CNSF</a></li>
              <li><a href="#">Seguridad</a></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Contacto</h4>
            <ul>
              <li><a href="mailto:hola@zebrainsurtech.com">hola@zebrainsurtech.com</a></li>
              <li>+52 (55) 0000 0000</li>
              <li style={{ color: 'rgba(255,255,255,0.55)', fontSize: 13 }}>Lago Alberto 369<br/>Anáhuac I, CDMX</li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Zebra Insurtech S.A.P.I. de C.V. · Todos los derechos reservados</div>
          <div className="foot-backed">
            <span>Respaldados por</span>
            <span className="logo-pl" style={{ fontSize: 11, padding: '3px 8px' }}>ZURICH</span>
            <span className="logo-pl" style={{ fontSize: 11, padding: '3px 8px' }}>GMX</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, LogoBar, Problema, Solucion, ComoFunciona, DashboardDemo, ParaQuien, Testimonios, CtaFinal, Footer });