// Wasabil — Página de contacto
function ContactoPage() {
  const channels = [
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/>
          <path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
      ),
      label: "Agenda una demo",
      desc: "30 minutos con el equipo. Te mostramos la plataforma y respondemos todo.",
      cta: "Elegir horario →",
      href: "/agenda/",
      external: false,
      accent: true,
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" fill="currentColor"/>
          <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.974-1.304A9.96 9.96 0 0012 22c5.523 0 10-4.477 10-10S17.523 2 12 2z" stroke="currentColor" strokeWidth="1.8" fill="none"/>
        </svg>
      ),
      label: "WhatsApp Business",
      desc: "Respuesta rápida en horario hábil. Ideal para consultas puntuales.",
      cta: "Abrir WhatsApp →",
      href: "https://api.whatsapp.com/send/?phone=15557901156&text=Hola&type=phone_number&app_absent=0",
      external: true,
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" strokeWidth="1.8"/>
          <path d="M2 8l10 6 10-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
      ),
      label: "Email",
      desc: "Para consultas formales, partnerships o temas que necesitan detalle.",
      cta: "hola@wasabil.com →",
      href: "mailto:hola@wasabil.com",
      external: false,
    },
    {
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <rect x="2" y="2" width="20" height="20" rx="4" stroke="currentColor" strokeWidth="1.8"/>
          <path d="M7 17V10M7 7v.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <path d="M11.5 17v-4c0-1.5 1-2.5 2.5-2.5s2.5 1 2.5 2.5v4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
          <path d="M11.5 13h5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
        </svg>
      ),
      label: "LinkedIn",
      desc: "Síguenos para noticias del producto, artículos y novedades del equipo.",
      cta: "Ver perfil →",
      href: "https://www.linkedin.com/company/wasabil/",
      external: true,
    },
  ];

  return (
    <>
      <Nav current="contacto" />
      <main>
        <section style={{ padding: "120px 0 72px", textAlign: "center" }}>
          <div className="container">
            <p className="eyebrow"><span className="dot"/>Contacto</p>
            <h1
              className="display-1 serif"
              style={{ marginTop: 16, marginBottom: 20 }}
            >
              Hablemos
            </h1>
            <p style={{ fontSize: 18, color: "var(--ink-3)", maxWidth: 460, margin: "0 auto" }}>
              Elige el canal que prefieras. Estamos disponibles para ayudarte con tu facturación y finanzas.
            </p>
          </div>
        </section>

        <section style={{ padding: "0 0 120px" }}>
          <div className="container">
            <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
              gap: 16,
              maxWidth: 960,
              margin: "0 auto",
            }}>
              {channels.map((ch) => (
                <a
                  key={ch.label}
                  href={ch.href}
                  target={ch.external ? "_blank" : undefined}
                  rel={ch.external ? "noopener noreferrer" : undefined}
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    gap: 16,
                    padding: "28px 28px 24px",
                    background: ch.accent ? "var(--accent-wash)" : "var(--panel)",
                    border: `1px solid ${ch.accent ? "var(--accent)" : "var(--rule)"}`,
                    borderRadius: "var(--radius-lg)",
                    textDecoration: "none",
                    transition: "border-color .15s, background .15s",
                    cursor: "pointer",
                  }}
                  onMouseEnter={e => {
                    e.currentTarget.style.borderColor = ch.accent ? "var(--accent-2)" : "var(--rule-2)";
                    e.currentTarget.style.background = ch.accent ? "oklch(0.35 0.09 135)" : "var(--bg-3)";
                  }}
                  onMouseLeave={e => {
                    e.currentTarget.style.borderColor = ch.accent ? "var(--accent)" : "var(--rule)";
                    e.currentTarget.style.background = ch.accent ? "var(--accent-wash)" : "var(--panel)";
                  }}
                >
                  <div style={{ color: ch.accent ? "var(--accent)" : "var(--ink-3)" }}>
                    {ch.icon}
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 16, color: "var(--ink)", marginBottom: 6 }}>
                      {ch.label}
                    </div>
                    <div style={{ fontSize: 14, color: "var(--ink-3)", lineHeight: 1.55 }}>
                      {ch.desc}
                    </div>
                  </div>
                  <div style={{
                    marginTop: "auto",
                    fontSize: 13,
                    fontWeight: 500,
                    color: ch.accent ? "var(--accent)" : "var(--muted)",
                  }}>
                    {ch.cta}
                  </div>
                </a>
              ))}
            </div>

            <div style={{
              maxWidth: 960,
              margin: "48px auto 0",
              padding: "28px 32px",
              background: "var(--panel)",
              border: "1px solid var(--rule)",
              borderRadius: "var(--radius-lg)",
              display: "flex",
              alignItems: "center",
              gap: 20,
              flexWrap: "wrap",
            }}>
              <div style={{ flex: 1, minWidth: 200 }}>
                <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 4 }}>Horario de atención</div>
                <div style={{ fontSize: 14, color: "var(--ink-3)" }}>
                  Lunes a viernes · 9:00 – 18:00 (Chile, GMT-3)
                </div>
              </div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a
                  href="/agenda/"
                  className="btn btn-primary btn-sm"
                >
                  Agenda demo
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </a>
                <a
                  href="https://app.wasabil.com/register"
                  className="btn btn-ghost btn-sm"
                >
                  Prueba gratis
                </a>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}