// ============================================================
// Velio Tech — Contacto (WhatsApp como opción principal)
// ============================================================

function ContactoHero() {
  return (
    <section style={{ paddingTop: 70, paddingBottom: 40 }}>
      <div className="shell" style={{ textAlign: 'center' }}>
        <span className="tag tag-sky" style={{ marginBottom: 24 }}>
          <span className="dot"></span> Estamos en línea ahora
        </span>
        <h1 style={{ marginBottom: 22 }}>
          Hablemos de <span className="serif" style={{ color: 'var(--persian)' }}>tu negocio</span>.
        </h1>
        <p style={{ fontSize: 20, maxWidth: 580, margin: '0 auto' }}>
          Escríbenos por WhatsApp y te respondemos en menos de 1 hora. En español, claro.
        </p>
      </div>
    </section>
  );
}

function CanalesContacto() {
  return (
    <section style={{ paddingTop: 30, paddingBottom: 60 }}>
      <div className="shell">hh
        <div className="canales-grid">
          <div className="canal-card canal-wa">
            <div className="canal-tag">Mejor opción</div>

            <div className="canal-icon">{Icon.whatsapp(40)}</div>

            <h3 style={{ color: '#fff', marginBottom: 10 }}>WhatsApp</h3>

            <div className="canal-value">+1 (786) 803 0809</div>

            <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 15, marginBottom: 28 }}>
              La forma más rápida. Mándanos mensajes, fotos, notas de voz — lo que te quede más fácil.
            </p>

            <a
              href="https://wa.me/17868030809?text=Hola%20quiero%20información%20sobre%20el%20asistente%20AI"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-sky"
              style={{
                background: '#fff',
                color: '#1FAD5C',
                width: '100%',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                gap: 8,
                textDecoration: 'none'
              }}
            >
              {Icon.whatsapp(18)} Abrir WhatsApp
            </a>
          </div>

          <div className="canal-stack">
            <div className="canal-card-mini">
              <div className="icon-box">{Icon.phone(22)}</div>
              <div>
                <div className="canal-mini-label">Llámanos</div>
                <div className="canal-mini-value">+1 (786) 803 0809</div>
              </div>
              <span className="canal-mini-time">Lun–Sáb · 8am–8pm</span>
            </div>

            <div className="canal-card-mini">
              <div className="icon-box">{Icon.mail(22)}</div>
              <div>
                <div className="canal-mini-label">Correo</div>
                <div className="canal-mini-value">heidy@veliotech.com</div>
              </div>
              <span className="canal-mini-time">Respondemos en 24h</span>
            </div>

            <div className="canal-card-mini">
              <div className="icon-box">{Icon.ig(22)}</div>
              <div>
                <div className="canal-mini-label">Instagram</div>
                <div className="canal-mini-value">@VelioTechLLC</div>
              </div>
              <span className="canal-mini-time">DM abierto</span>
            </div>

            <div className="canal-card-mini">
              <div className="icon-box">{Icon.pin(22)}</div>
              <div>
                <div className="canal-mini-label">Dónde estamos</div>
                <div className="canal-mini-value">Miami, FL · South Florida</div>
              </div>
              <span className="canal-mini-time">Visita con cita</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .canales-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 22px; }
        @media (max-width: 900px) { .canales-grid { grid-template-columns: 1fr; } }
        .canal-card { padding: 40px 36px; border-radius: 28px; position: relative; }
        .canal-wa {
          background: linear-gradient(160deg, #25D366 0%, #1FAD5C 100%);
          color: #fff;
          box-shadow: 0 50px 80px -40px rgba(31,173,92,0.5);
        }
        .canal-tag {
          position: absolute; top: 24px; right: 24px;
          background: rgba(255,255,255,0.18); color: #fff;
          font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
          padding: 6px 12px; border-radius: 999px;
        }
        .canal-icon {
          width: 76px; height: 76px; border-radius: 22px;
          background: rgba(255,255,255,0.18);
          display: flex; align-items: center; justify-content: center;
          color: #fff; margin-bottom: 22px;
        }
        .canal-value { font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: -0.01em; }
        .canal-stack { display: flex; flex-direction: column; gap: 14px; }
        .canal-card-mini {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 20px; padding: 22px 24px;
          display: grid; grid-template-columns: auto 1fr auto;
          align-items: center; gap: 18px;
          transition: border-color .2s var(--ease);
        }
        .canal-card-mini:hover { border-color: var(--hairline-strong); }
        .canal-mini-label {
          font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
          color: var(--muted); font-weight: 600;
        }
        .canal-mini-value { font-size: 18px; font-weight: 600; color: var(--imperial); margin-top: 2px; }
        .canal-mini-time { font-size: 12.5px; color: var(--muted); }
        @media (max-width: 480px) {
          .canal-card-mini { grid-template-columns: auto 1fr; }
          .canal-mini-time { grid-column: 1 / -1; padding-top: 4px; }
        }
      `}</style>
    </section>
  );
}

function MapaSeccion() {
  return (
    <section>
      <div className="shell">
        <div className="map-card">
          <div className="map-info">
            <span className="eyebrow" style={{ marginBottom: 16 }}>Donde nos encuentras</span>
            <h3 style={{ marginBottom: 14, fontSize: 28 }}>Miami · South Florida</h3>
            <p style={{ marginBottom: 18 }}>
              Atendemos a negocios en Miami-Dade, Broward y Palm Beach. Visitas con cita previa.
            </p>
            <div style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.7 }}>
              <div><strong style={{ color: 'var(--imperial)' }}>Ubicación:</strong> Miami, FL · South Florida</div>
              <div><strong style={{ color: 'var(--imperial)' }}>Horario:</strong> Lun–Sáb · 8am–8pm</div>
              <div><strong style={{ color: 'var(--imperial)' }}>Domingos:</strong> Solo emergencias por WhatsApp</div>
            </div>
          </div>

          <div className="map-visual">
            <div className="map-grid"></div>
            <div className="map-pin">
              <div className="map-pin-pulse"></div>
              <div className="map-pin-dot">{Icon.pin(22)}</div>
            </div>
            <div className="map-tag">
              <div style={{ fontWeight: 700, color: 'var(--imperial)', fontSize: 14 }}>Velio Tech</div>
              <div style={{ fontSize: 12, color: 'var(--muted)' }}>Miami, FL</div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .map-card {
          background: #fff; border: 1px solid var(--hairline);
          border-radius: 32px; overflow: hidden;
          display: grid; grid-template-columns: 1fr 1.2fr;
        }
        @media (max-width: 900px) { .map-card { grid-template-columns: 1fr; } }
        .map-info { padding: 50px 44px; }
        @media (max-width: 600px) { .map-info { padding: 36px 28px; } }
        .map-visual {
          background: linear-gradient(135deg, #03256C 0%, #1768AC 100%);
          min-height: 360px; position: relative; overflow: hidden;
        }
        .map-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
          background-size: 36px 36px;
        }
        .map-pin {
          position: absolute; top: 45%; left: 50%;
          transform: translate(-50%, -50%);
        }
        .map-pin-pulse {
          position: absolute; inset: -20px; border-radius: 50%;
          background: rgba(6,190,225,0.3);
          animation: pinPulse 2s var(--ease) infinite;
        }
        @keyframes pinPulse {
          0% { transform: scale(.6); opacity: .8; }
          100% { transform: scale(1.6); opacity: 0; }
        }
        .map-pin-dot {
          position: relative; z-index: 2;
          width: 54px; height: 54px; border-radius: 50%;
          background: var(--sky); color: var(--imperial);
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 14px 30px -10px rgba(6,190,225,0.6);
        }
        .map-tag {
          position: absolute; top: 28%; left: 50%;
          transform: translate(-50%, -100%);
          background: #fff; padding: 10px 14px; border-radius: 12px;
          box-shadow: 0 12px 30px -10px rgba(0,0,0,0.3); white-space: nowrap;
        }
        .map-tag::after {
          content: ''; position: absolute; bottom: -6px; left: 50%;
          transform: translateX(-50%) rotate(45deg);
          width: 12px; height: 12px; background: #fff;
        }
      `}</style>
    </section>
  );
}

function ConfianzaSec() {
  const items = [
    { icon: Icon.shield, t: 'Sin compromiso', d: 'Hablar con nosotros es gratis. Sin presión, sin venderte de más.' },
    { icon: Icon.heart, t: 'En español, siempre', d: 'Cada conversación, cada llamada, cada explicación. En tu idioma.' },
    { icon: Icon.clock, t: 'Te respondemos rápido', d: 'En menos de 1 hora durante horario de trabajo. Casi siempre menos.' },
  ];

  return (
    <section style={{ paddingBottom: 120 }}>
      <div className="shell">
        <div className="confianza-grid">
          {items.map((it, i) => (
            <div className="confianza-item" key={i}>
              <div className="icon-box" style={{ background: 'rgba(6,190,225,0.15)' }}>{it.icon(24)}</div>
              <div>
                <h4 style={{ marginBottom: 6, color: 'var(--imperial)', fontSize: 17 }}>{it.t}</h4>
                <p style={{ fontSize: 15 }}>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .confianza-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
        @media (max-width: 860px) { .confianza-grid { grid-template-columns: 1fr; } }
        .confianza-item { display: flex; gap: 18px; align-items: flex-start; }
      `}</style>
    </section>
  );
}

function Contacto({ go }) {
  return (
    <div className="page-enter">
      <ContactoHero />
      <CanalesContacto />
      <MapaSeccion />
      <ConfianzaSec />
    </div>
  );
}

window.Contacto = Contacto;