// ============================================================
// Velio Tech — Página Inicio
// ============================================================

function HeroVisual() {
  return (
    <div className="hero-visual">
      <div className="hero-phone">
        <div className="wa-bar">
          <div className="wa-bar-left">
            <span className="wa-bar-back">‹</span>
            <div className="wa-bar-avatar">
              <img src="assets/velio-mark.png" alt="Asistente" />
            </div>
            <div>
              <div className="wa-bar-name">Asistente</div>
              <div className="wa-bar-status"><span className="wa-dot"></span> en línea</div>
            </div>
          </div>
          <div className="wa-bar-right">
            <span>{Icon.phone(18)}</span>
            <span style={{ fontSize: 20, lineHeight: 1, letterSpacing: 1 }}>⋮</span>
          </div>
        </div>

        <div className="wa-chat">
          <div className="wa-date-chip">HOY</div>

          <div className="wa-msg wa-out">
            <div className="wa-text">Buenos días. Resúmeme los correos de hoy 🙏</div>
            <div className="wa-meta">8:42 <span className="wa-check">✓✓</span></div>
          </div>

          <div className="wa-msg wa-in">
            <div className="wa-text">
              ¡Buenos días, Jorge! Tienes <b>7 correos nuevos</b>. 3 importantes:
              <div className="wa-summary">
                <div className="wa-summary-item">
                  <span className="wa-summary-dot"></span>
                  <div><b>Mike (Coral Gables)</b> — confirma cotización del techo, quiere agendar viernes.</div>
                </div>
                <div className="wa-summary-item">
                  <span className="wa-summary-dot" style={{ background: '#F59E0B' }}></span>
                  <div><b>Sarah (Brickell)</b> — pide foto del trabajo terminado en su casa.</div>
                </div>
                <div className="wa-summary-item">
                  <span className="wa-summary-dot" style={{ background: '#1FAD5C' }}></span>
                  <div><b>Home Depot Pro</b> — factura del material listo para recoger.</div>
                </div>
              </div>
            </div>
            <div className="wa-meta">8:42</div>
          </div>

          <div className="wa-msg wa-out">
            <div className="wa-text">Mándale uno a Mike confirmando el viernes 9am 👍</div>
            <div className="wa-meta">8:43 <span className="wa-check">✓✓</span></div>
          </div>

          <div className="wa-msg wa-in wa-in-card">
            <div className="wa-mini-card">
              <div className="wa-mini-card-head">
                <span style={{ color: '#1FAD5C' }}>{Icon.check(16)}</span>
                <span>Correo enviado a Mike</span>
                <span className="wa-mini-card-en">EN</span>
              </div>
              <div className="wa-mini-card-body">
                "Hi Mike — confirmed for Friday at 9am. We'll bring all materials. See you then."
              </div>
            </div>
            <div className="wa-text" style={{ marginTop: 8 }}>
              Listo. Te aviso cuando Mike responda 👌
            </div>
            <div className="wa-meta">8:43</div>
          </div>
        </div>

        <div className="wa-input">
          <span className="wa-input-emoji">☺</span>
          <div className="wa-input-field">Escribe un mensaje</div>
          <span className="wa-input-mic">{Icon.voice(20)}</span>
        </div>
      </div>

      <style>{`
        .hero-visual { max-width: 460px; margin: 0 auto; }
        .hero-phone {
          background: #ECE5DD;
          border-radius: 32px;
          color: var(--ink);
          box-shadow: 0 50px 90px -45px rgba(3,37,108,0.55), 0 20px 40px -20px rgba(3,37,108,0.25);
          position: relative; overflow: hidden;
          border: 1px solid rgba(0,0,0,0.06);
        }
        .hero-phone::before {
          content: "";
          position: absolute; inset: 0;
          background-image:
            radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 1px, transparent 1.5px),
            radial-gradient(circle at 70% 60%, rgba(0,0,0,0.025) 1px, transparent 1.5px),
            radial-gradient(circle at 40% 80%, rgba(0,0,0,0.025) 1px, transparent 1.5px);
          background-size: 80px 80px;
          pointer-events: none; opacity: 0.8;
        }
        .wa-bar {
          background: #075E54;
          padding: 14px 16px;
          display: flex; justify-content: space-between; align-items: center;
          position: relative; z-index: 1;
        }
        .wa-bar-left { display: flex; align-items: center; gap: 10px; }
        .wa-bar-back { color: #fff; font-size: 22px; opacity: 0.9; margin-right: 2px; }
        .wa-bar-avatar {
          width: 40px; height: 40px; border-radius: 50%;
          background: #fff;
          display: flex; align-items: center; justify-content: center;
          overflow: hidden; padding: 6px;
        }
        .wa-bar-avatar img { width: 100%; height: 100%; object-fit: contain; }
        .wa-bar-name { font-weight: 600; font-size: 15px; color: #fff; letter-spacing: -0.005em; }
        .wa-bar-status {
          font-size: 11.5px; color: rgba(255,255,255,0.75);
          display: flex; align-items: center; gap: 6px; margin-top: 1px;
        }
        .wa-dot { width: 6px; height: 6px; border-radius: 50%; background: #25D366; display: inline-block; }
        .wa-bar-right { display: flex; align-items: center; gap: 16px; color: #fff; opacity: 0.85; }
        .wa-chat {
          padding: 14px 12px 12px;
          display: flex; flex-direction: column; gap: 6px;
          position: relative; z-index: 1;
        }
        .wa-date-chip {
          align-self: center;
          background: #E1F2FB; color: #3B5560;
          font-size: 10.5px; letter-spacing: 0.08em; font-weight: 600;
          padding: 4px 12px; border-radius: 8px; margin-bottom: 4px;
          box-shadow: 0 1px 1px rgba(0,0,0,0.06);
        }
        .wa-msg {
          max-width: 86%;
          padding: 7px 10px 6px 10px;
          border-radius: 8px;
          font-size: 14px; line-height: 1.4;
          color: #111B21; position: relative;
          box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
        }
        .wa-in { background: #fff; align-self: flex-start; border-top-left-radius: 0; }
        .wa-in::before {
          content: ''; position: absolute; top: 0; left: -7px;
          width: 0; height: 0;
          border-right: 8px solid #fff;
          border-top: 8px solid transparent;
        }
        .wa-out { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 0; }
        .wa-out::before {
          content: ''; position: absolute; top: 0; right: -7px;
          width: 0; height: 0;
          border-left: 8px solid #DCF8C6;
          border-top: 8px solid transparent;
        }
        .wa-text { font-size: 14px; color: #111B21; padding-right: 56px; }
        .wa-text b { font-weight: 600; }
        .wa-meta {
          font-size: 10.5px; color: #667781; text-align: right; margin-top: 2px;
          display: flex; gap: 4px; justify-content: flex-end; align-items: center;
        }
        .wa-check { color: #53BDEB; font-weight: 700; font-size: 12px; }
        .wa-summary {
          margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
          background: #F4FCE3; padding: 10px 12px; border-radius: 8px;
          border-left: 3px solid #1FAD5C;
        }
        .wa-summary-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; }
        .wa-summary-dot {
          width: 8px; height: 8px; border-radius: 50%;
          background: #DC2626; margin-top: 6px; flex-shrink: 0;
        }
        .wa-mini-card {
          background: #F7FBFC; border: 1px solid #D6E4E8;
          border-radius: 8px; padding: 10px 12px; margin-top: 2px; font-size: 13px;
        }
        .wa-mini-card-head {
          display: flex; align-items: center; gap: 8px;
          font-weight: 600; color: #075E54; margin-bottom: 6px; font-size: 12.5px;
        }
        .wa-mini-card-en {
          background: #E1F2FB; color: #1768AC;
          font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
          padding: 1px 6px; border-radius: 4px; margin-left: auto;
        }
        .wa-mini-card-body { font-style: italic; color: #4A5560; font-size: 12.5px; line-height: 1.4; }
        .wa-input {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 10px 12px;
          background: transparent; position: relative; z-index: 1;
        }
        .wa-input-emoji {
          width: 32px; height: 32px;
          display: flex; align-items: center; justify-content: center;
          color: #8696A0; font-size: 22px;
          background: #fff; border-radius: 50%;
        }
        .wa-input-field {
          flex: 1; background: #fff; padding: 9px 14px;
          border-radius: 22px; color: #8696A0; font-size: 13px;
        }
        .wa-input-mic {
          width: 38px; height: 38px;
          display: flex; align-items: center; justify-content: center;
          background: #075E54; color: #fff; border-radius: 50%;
        }
      `}</style>
    </div>
  );
}

function Hero({ go }) {
  return (
    <section style={{ paddingTop: 70, paddingBottom: 60 }}>
      <div className="shell">
        <div className="hero-grid">
          <div>
            <span className="tag tag-cream" style={{ marginBottom: 24 }}>
              <span className="dot" style={{ background: '#1FAD5C' }}></span>
              Creado por hispanos, para hispanos.
            </span>
            <h1 style={{ marginBottom: 24 }}>
              Tú trabajas en <span className="serif" style={{ color: 'var(--persian)' }}>español</span>.<br />
              Tus clientes reciben <span className="serif" style={{ color: 'var(--sky)' }}>inglés profesional</span>.
            </h1>
            <p style={{ fontSize: 20, color: 'var(--ink-2)', maxWidth: 520, marginBottom: 36 }}>
              Velio es tu asistente bilingüe. Traduce tus emails, organiza cotizaciones y mantiene a tus clientes felices — sin que el idioma te detenga.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 30 }}>
              <button className="btn btn-primary btn-lg" onClick={() => go('demo')}>
                {Icon.play(18)} Ver Demo
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => go('contacto')}>
                Hablar con nosotros {Icon.arrowRight(18)}
              </button>
            </div>
            <div className="hero-trust">
              <div className="hero-trust-avatars">
                {['JR', 'CM', 'AS', 'LV'].map((i, idx) => (
                  <div key={idx} className="hero-trust-avatar" style={{ background: ['#06BEE1', '#2541B2', '#1768AC', '#03256C'][idx] }}>
                    {i}
                  </div>
                ))}
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--imperial)' }}>
                  + 40 negocios de oficios ya lo usan
                </div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>
                  Roofing · HVAC · Electricidad · Construcción · Soldadura
                </div>
              </div>
            </div>
          </div>
          <div>
            <HeroVisual />
          </div>
        </div>
      </div>
      <style>{`
        .hero-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 80px;
          align-items: center;
        }
        @media (max-width: 1080px) {
          .hero-grid { grid-template-columns: 1fr; gap: 60px; }
        }
        .hero-trust { display: flex; align-items: center; gap: 16px; }
        .hero-trust-avatars { display: flex; }
        .hero-trust-avatar {
          width: 40px; height: 40px; border-radius: 50%;
          color: #fff; font-weight: 700; font-size: 13px;
          display: flex; align-items: center; justify-content: center;
          border: 3px solid var(--paper);
          margin-left: -10px;
        }
        .hero-trust-avatar:first-child { margin-left: 0; }
      `}</style>
    </section>
  );
}

function CapabilitiesStrip() {
  const items = [
    { icon: Icon.whatsapp, label: 'WhatsApp bilingüe' },
    { icon: Icon.mail, label: 'Correos en inglés' },
    { icon: Icon.invoice, label: 'Cotizaciones' },
    { icon: Icon.doc, label: 'Facturas' },
    { icon: Icon.translate, label: 'Traducciones' },
    { icon: Icon.voice, label: 'Notas de voz' },
    { icon: Icon.list, label: 'Resúmenes' },
    { icon: Icon.user, label: 'Seguimiento' },
  ];

  return (
    <section style={{ padding: '40px 0 0', position: 'relative' }}>
      <div className="shell">
        <div className="caps-row">
          {items.map((it, idx) => (
            <div className="caps-item" key={idx}>
              <span style={{ color: 'var(--ocean)' }}>{it.icon(20)}</span>
              <span>{it.label}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .caps-row {
          display: flex; flex-wrap: wrap; gap: 10px 14px;
          justify-content: center; padding: 28px 0;
          border-top: 1px solid var(--hairline);
          border-bottom: 1px solid var(--hairline);
        }
        .caps-item {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 10px 18px; border-radius: var(--r-pill);
          background: rgba(255,255,255,0.7);
          font-size: 14px; font-weight: 500; color: var(--ink-2);
        }
      `}</style>
    </section>
  );
}

function Mission() {
  return (
    <section className="mission-section">
      <div className="shell">
        <div className="mission-grid">
          <div className="mission-photo">
            <div className="mission-photo-frame">
              <img
                  src="assets/heidyanddad.png"
                  alt="Heidy Veliz y su papá"
                  className="mission-real-image"
              />
            </div>

            <div className="mission-photo-tag">
              <div style={{ fontWeight: 700, color: 'var(--imperial)', fontSize: 15 }}>
                Heidy Veliz
              </div>
              <div style={{ fontSize: 13, color: 'var(--muted)' }}>
                Fundadora · hija de inmigrantes
              </div>
            </div>
          </div>

          <div>
            <span className="eyebrow" style={{ marginBottom: 28 }}>
              Nuestra historia
            </span>

            <h2 style={{ marginBottom: 28 }}>
              Haz crecer tu negocio{' '}
              <span className="serif" style={{ color: 'var(--sky)' }}>
                sin barreras
              </span>{' '}
              de idioma.
            </h2>

            <p style={{ fontSize: 19, color: 'var(--ink-2)', marginBottom: 18 }}>
              Vi cuántos clientes se perdían por un correo en inglés sin contestar.
              Cuántas cotizaciones se quedaban en una nota arrugada. Cuántas noches
              se iban llenas de papeleo en vez de descanso con la familia.
            </p>

            <p style={{ fontSize: 19, color: 'var(--ink-2)', marginBottom: 32 }}>
              Velio Tech existe para que{' '}
              <strong style={{ color: 'var(--imperial)' }}>dueños como mi papá</strong>{' '}
              puedan crecer su negocio sin que el idioma o el papeleo los detenga.
              Hablamos tu idioma. Entendemos tu realidad. Y te quitamos el estrés
              administrativo de encima.
            </p>

            <div className="mission-quote">
              <div style={{ fontSize: 38, color: 'var(--sky)', lineHeight: 1, marginBottom: 8 }}>
                "
              </div>
              <div style={{ fontSize: 17, color: 'var(--ink)', fontStyle: 'italic', lineHeight: 1.5 }}>
                No es caridad. Es entender que tú ya trabajas suficiente. Lo demás lo
                hacemos nosotros.
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .mission-section {
          background: var(--cream);
          padding: 110px 0;
        }

        .mission-grid {
          display: grid;
          grid-template-columns: 0.9fr 1.1fr;
          gap: 80px;
          align-items: center;
        }

        .mission-photo {
          position: relative;
          max-width: 430px;
        }

        .mission-photo-frame {
          aspect-ratio: 4 / 5;
          border-radius: 32px;
          overflow: hidden;
          background: #fff;
          border: 1px solid var(--hairline-strong);
          box-shadow: 0 40px 80px -50px rgba(3, 37, 108, 0.45);
        }

        .mission-real-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
          display: block;
          transition: transform 0.6s ease;
        }

        .mission-photo-frame:hover .mission-real-image {
          transform: scale(1.03);
        }

        .mission-photo-tag {
          position: absolute;
          left: 18px;
          bottom: -22px;
          background: #fff;
          padding: 14px 18px;
          border-radius: 16px;
          box-shadow: 0 20px 40px -20px rgba(3, 37, 108, 0.3);
          border: 1px solid var(--hairline);
        }

        .mission-quote {
          background: #fff;
          padding: 22px 26px;
          border-radius: 20px;
          border-left: 4px solid var(--sky);
          box-shadow: 0 18px 40px -35px rgba(3, 37, 108, 0.35);
        }

        @media (max-width: 1000px) {
          .mission-grid {
            grid-template-columns: 1fr;
            gap: 58px;
          }

          .mission-photo {
            max-width: 460px;
            margin: 0 auto;
          }
        }

        @media (max-width: 600px) {
          .mission-section {
            padding: 80px 0;
          }

          .mission-photo-frame {
            border-radius: 24px;
          }

          .mission-photo-tag {
            left: 14px;
            right: 14px;
            bottom: -24px;
          }
        }
      `}</style>
    </section>
  );
}

function QueHacemos() {
  const services = [
    { icon: Icon.whatsapp, title: 'WhatsApp bilingüe', desc: 'Tus clientes te escriben en inglés. Tú recibes y respondes en español. Automático.' },
    { icon: Icon.mail, title: 'Correos automáticos', desc: 'Confirmaciones, seguimientos y recordatorios — todos en inglés profesional.' },
    { icon: Icon.invoice, title: 'Cotizaciones rápidas', desc: 'Le dictas el trabajo, Velio arma la cotización lista para enviar al cliente.' },
    { icon: Icon.doc, title: 'Facturas y contratos', desc: 'Plantillas listas en inglés. Tú llenas en español, el cliente recibe en inglés.' },
    { icon: Icon.translate, title: 'Traducciones al instante', desc: 'Documentos, mensajes, contratos. Todo traducido sin que muevas un dedo.' },
    { icon: Icon.list, title: 'Resúmenes en español', desc: 'Cada mañana sabes qué pasó ayer: clientes nuevos, pagos pendientes, citas.' },
    { icon: Icon.user, title: 'Seguimiento de clientes', desc: 'Nadie se te pierde. Velio te avisa a quién le falta una respuesta.' },
    { icon: Icon.folder, title: 'Organización del negocio', desc: 'Todo en un solo lugar. Mensajes, papeles, clientes. Ordenado por ti.' },
  ];

  return (
    <section>
      <div className="shell">
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <span className="eyebrow" style={{ marginBottom: 22 }}>Qué hacemos</span>
          <h2 style={{ marginBottom: 20 }}>
            Te quitamos el <span className="serif" style={{ color: 'var(--persian)' }}>papeleo</span> y el inglés de encima.
          </h2>
          <p style={{ fontSize: 19 }}>
            Cosas sencillas, hechas por ti, sin que tengas que aprender programas complicados.
          </p>
        </div>
        <div className="services-grid">
          {services.map((s, i) => (
            <div className="service-card" key={i}>
              <div className="icon-box" style={{ marginBottom: 22 }}>{s.icon(26)}</div>
              <h3 style={{ marginBottom: 10 }}>{s.title}</h3>
              <p style={{ fontSize: 15.5 }}>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .services-grid {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
        }
        @media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
        .service-card {
          background: #fff; border-radius: 24px; padding: 32px 28px;
          border: 1px solid var(--hairline);
          transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
        }
        .service-card:hover {
          transform: translateY(-4px);
          border-color: rgba(6,190,225,0.4);
          box-shadow: 0 28px 50px -30px rgba(3,37,108,0.25);
        }
      `}</style>
    </section>
  );
}

function PorQue() {
  const values = [
    { icon: Icon.heart, title: 'Hablamos como tú', desc: 'Sin jerga técnica, sin inglés forzado. Te explicamos en confianza, como un primo que sabe del tema.' },
    { icon: Icon.shield, title: 'Tu información, segura', desc: 'No vendemos datos. No compartimos tus mensajes. Punto.' },
    { icon: Icon.clock, title: 'Te ahorramos horas', desc: 'Lo que antes te tomaba una noche entera, ahora se hace mientras tú trabajas.' },
    { icon: Icon.sparkle, title: 'Nada complicado', desc: 'Si sabes usar WhatsApp, sabes usar Velio. Así de simple.' },
  ];

  return (
    <section>
      <div className="shell">
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <span className="eyebrow" style={{ marginBottom: 22 }}>Por qué nosotros</span>
          <h2 style={{ marginBottom: 18 }}>
            No es otra aplicación <span className="serif" style={{ color: 'var(--persian)' }}>rara</span>. Es alguien que entiende.
          </h2>
          <p style={{ fontSize: 19 }}>Construido aquí en South Florida, para negocios como el tuyo.</p>
        </div>
        <div className="porque-grid">
          {values.map((v, i) => (
            <div className="porque-card" key={i}>
              <div className="icon-box" style={{ marginBottom: 22 }}>{v.icon(26)}</div>
              <h3 style={{ marginBottom: 12 }}>{v.title}</h3>
              <p style={{ fontSize: 15.5 }}>{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .porque-grid {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
        }
        @media (max-width: 1000px) { .porque-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px) { .porque-grid { grid-template-columns: 1fr; } }
        .porque-card {
          padding: 32px 26px; border-radius: 24px;
          background: #fff; border: 1px solid var(--hairline);
        }
      `}</style>
    </section>
  );
}

function Testimonios() {
  const items = [
    {
      quote: 'Antes perdía trabajos por no contestar a tiempo en inglés. Ahora todos mis clientes piensan que tengo asistente. Ya no estoy en el celular toda la noche.',
      name: 'Jorge Ramírez', biz: 'Ramírez Roofing · Hialeah', tag: 'Roofing',
    },
    {
      quote: 'Las cotizaciones que antes me tomaban una hora, ahora salen en 2 minutos. Y se ven profesionales. Mi esposa está feliz porque ya ceno con ella.',
      name: 'Carlos Mendoza', biz: 'CM HVAC Services · Doral', tag: 'HVAC',
    },
    {
      quote: 'Yo no soy bueno con computadoras. Velio se siente como WhatsApp normal. Esa es la diferencia.',
      name: 'Andrés Sosa', biz: 'Sosa Electric · Homestead', tag: 'Electricidad',
    },
  ];

  return (
    <section>
      <div className="shell">
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <span className="eyebrow" style={{ marginBottom: 22 }}>Lo que dicen</span>
          <h2 style={{ marginBottom: 18 }}>
            <span className="serif" style={{ color: 'var(--persian)' }}>Dueños reales</span>, resultados reales.
          </h2>
        </div>
        <div className="testimonios-grid">
          {items.map((t, i) => (
            <div className="testimonio-card" key={i}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22 }}>
                <div className="row gap-8" style={{ alignItems: 'center' }}>
                  {[...Array(5)].map((_, idx) => (
                    <span key={idx} style={{ color: '#FFC857' }}>{Icon.star(16)}</span>
                  ))}
                </div>
                <span className="tag tag-sky">{t.tag}</span>
              </div>
              <p style={{ fontSize: 17, color: 'var(--ink)', lineHeight: 1.5, marginBottom: 24, fontStyle: 'italic' }}>
                "{t.quote}"
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 18, borderTop: '1px solid var(--hairline)' }}>
                <div className="hero-trust-avatar" style={{ background: 'var(--imperial)', margin: 0, border: 'none' }}>
                  {t.name.split(' ').map((n) => n[0]).slice(0, 2).join('')}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 15, color: 'var(--imperial)' }}>{t.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted)' }}>{t.biz}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .testimonios-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
        }
        @media (max-width: 980px) { .testimonios-grid { grid-template-columns: 1fr; } }
        .testimonio-card {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 28px; padding: 34px 30px;
        }
      `}</style>
    </section>
  );
}

function CTAFinal({ go }) {
  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="shell">
        <div className="cta-final">
          <div className="cta-final-bg-mark">
            <img src="assets/velio-mark.png" alt="" />
          </div>
          <div style={{ position: 'relative', zIndex: 2 }}>
            <h2 style={{ color: '#fff', marginBottom: 18 }}>
              ¿Listo para dejar de pelear con el <span className="serif" style={{ color: '#06BEE1' }}>papeleo</span>?
            </h2>
            <p style={{ color: '#B6C6F0', fontSize: 18, marginBottom: 32, margin: '0 auto 32px' }}>
              Hablemos 15 minutos. Te enseñamos cómo funciona con tu negocio, sin compromiso. En español, claro.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
              <button className="btn btn-wa btn-lg" onClick={() => go('contacto')}>
                {Icon.whatsapp(20)} Escríbenos por WhatsApp
              </button>
              <button className="btn btn-sky btn-lg" onClick={() => go('demo')}>
                Ver Demo {Icon.arrowRight(18)}
              </button>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cta-final {
          background: linear-gradient(135deg, #03256C 0%, #1768AC 100%);
          border-radius: 32px; padding: 56px 48px;
          position: relative; overflow: hidden;
          max-width: 760px; margin: 0 auto; text-align: center;
        }
        @media (max-width: 720px) { .cta-final { padding: 44px 28px; } }
        .cta-final-bg-mark {
          position: absolute; right: -70px; top: 50%;
          transform: translateY(-50%);
          opacity: 0.10; pointer-events: none;
        }
        .cta-final-bg-mark img { height: 340px; filter: brightness(0) invert(1); }
      `}</style>
    </section>
  );
}

function Inicio({ go }) {
  return (
    <div className="page-enter">
      <Hero go={go} />
      <CapabilitiesStrip />
      <Mission />
      <QueHacemos />
      <PorQue />
      <Testimonios />
      <CTAFinal go={go} />
    </div>
  );
}
window.Inicio = Inicio;