// Coverage map + Trust + About + Footer

function Coverage() {
  // Stylized SVG-only map of Monterrey ZMM. Abstract, not georeferenced.
  return (
    <section className="section" id="cobertura">
      <div className="container">
        <div className="section-eyebrow">— 05 / Cobertura</div>
        <h2 className="section-title">Operación en toda<br />la zona metropolitana.</h2>
        <p className="section-sub">
          Servicio garantizado en los 9 municipios principales. Para destinos fuera de la ZMM, cotice por traslado especial.
        </p>

        <div className="coverage">
          <div className="coverage-map">
            <CoverageMap />
          </div>
          <div>
            <div className="divider-mono">Municipios cubiertos</div>
            <ul className="coverage-list">
              {[
                "Monterrey", "San Pedro Garza García",
                "San Nicolás de los Garza", "Guadalupe",
                "Apodaca", "Escobedo",
                "Santa Catarina", "García",
                "Juárez", "Cadereyta",
                "Pesquería", "Salinas Victoria",
              ].map((m, i) => (
                <li key={i}><span>{m}</span></li>
              ))}
            </ul>
            <div style={{ marginTop: 28, padding: 20, border: "1px dashed var(--line-strong)", borderRadius: "var(--radius)" }}>
              <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                <IconPin size={18} />
                <div>
                  <div style={{ fontWeight: 500, marginBottom: 4 }}>Aeropuerto Internacional de Monterrey</div>
                  <div style={{ fontSize: 14, color: "var(--fg-muted)" }}>
                    Cobertura 24/7 con monitoreo de vuelo y 30 min de cortesía incluidos.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CoverageMap() {
  const points = [
    { x: 50, y: 50, label: "MTY", primary: true },
    { x: 32, y: 42, label: "San Pedro" },
    { x: 56, y: 28, label: "Escobedo" },
    { x: 68, y: 38, label: "Apodaca" },
    { x: 70, y: 56, label: "Guadalupe" },
    { x: 80, y: 60, label: "Juárez" },
    { x: 24, y: 60, label: "Sta. Catarina" },
    { x: 14, y: 50, label: "García" },
    { x: 44, y: 28, label: "San Nicolás" },
    { x: 88, y: 44, label: "MTY · Aeropuerto", airport: true },
  ];
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: "100%", height: "100%", display: "block" }}>
      {/* grid */}
      <defs>
        <pattern id="grid" width="5" height="5" patternUnits="userSpaceOnUse">
          <path d="M 5 0 L 0 0 0 5" fill="none" stroke="currentColor" strokeOpacity="0.06" strokeWidth="0.2" />
        </pattern>
      </defs>
      <rect width="100" height="100" fill="url(#grid)" style={{ color: "var(--fg)" }} />

      {/* coverage area */}
      <path
        d="M 12 48 Q 18 28 38 22 Q 58 18 76 28 Q 92 38 88 56 Q 80 72 60 76 Q 32 80 18 68 Q 8 60 12 48 Z"
        fill="var(--accent-soft)"
        stroke="var(--accent)"
        strokeWidth="0.4"
        strokeDasharray="1 1"
      />

      {/* roads */}
      <g stroke="currentColor" strokeOpacity="0.18" strokeWidth="0.4" fill="none" style={{ color: "var(--fg)" }}>
        <path d="M 10 50 L 90 50" />
        <path d="M 50 12 L 50 88" />
        <path d="M 18 22 L 80 78" />
        <path d="M 82 22 L 20 78" />
      </g>

      {/* points */}
      {points.map((p, i) => (
        <g key={i} transform={`translate(${p.x} ${p.y})`}>
          {p.primary && <circle r="4" fill="var(--accent)" opacity="0.18" />}
          {p.primary && <circle r="2.5" fill="var(--accent)" opacity="0.35" />}
          <circle
            r={p.primary ? "1.2" : p.airport ? "1.4" : "0.9"}
            fill={p.primary ? "var(--fg)" : p.airport ? "var(--accent)" : "var(--fg)"}
          />
          <text
            x={p.x > 70 ? -2 : 2}
            y={-1.5}
            textAnchor={p.x > 70 ? "end" : "start"}
            fontSize="2.2"
            fontFamily="var(--font-mono)"
            fill="var(--fg-muted)"
            style={{ letterSpacing: "0.05em", textTransform: "uppercase" }}
          >
            {p.label}
          </text>
        </g>
      ))}
    </svg>
  );
}

function Trust() {
  const items = [
    {
      icon: <IconCard />,
      name: "Pago con tarjeta",
      desc: "Visa, MasterCard y AMEX. Cobro seguro vía terminal certificada al finalizar el servicio.",
    },
    {
      icon: <IconCash />,
      name: "Pago en efectivo",
      desc: "Aceptado al inicio o término del traslado. Recibo digital al instante.",
    },
    {
      icon: <IconReceipt />,
      name: "Factura electrónica",
      desc: "CFDI 4.0 emitido en menos de 24 hrs. Uso 'Gastos en general' o el que requiera.",
    },
    {
      icon: <IconShield />,
      name: "Pago anticipado",
      desc: "Transferencia o liga de pago para reservas corporativas y eventos privados.",
    },
  ];
  return (
    <section className="section" id="pagos">
      <div className="container">
        <div className="section-eyebrow">— 06 / Pagos & facturación</div>
        <h2 className="section-title">Cuatro formas de pago.<br />Factura siempre.</h2>
        <p className="section-sub">
          Operamos como prestador formal de servicios. Cada traslado se documenta y se factura conforme a sus requerimientos.
        </p>

        <div className="trust">
          {items.map((it, i) => (
            <div key={i} className="trust-cell">
              <div className="trust-icon">{it.icon}</div>
              <div className="trust-name">{it.name}</div>
              <div className="trust-desc">{it.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Nosotros() {
  return (
    <section className="section" id="nosotros">
      <div className="container">
        <div className="section-eyebrow">— 07 / Nosotros</div>
        <h2 className="section-title">Una operación pensada<br />para ejecutivos exigentes.</h2>

        <div className="about-grid">
          <div className="about-copy">
            <p>
              Servicio Ejecutivo Deluxe nace en Monterrey con un objetivo claro: ofrecer un estándar de transporte
              ejecutivo a la altura de los profesionales que mueven la economía del noreste.
            </p>
            <p>
              Cada chofer pasa por un proceso de selección que incluye verificación de antecedentes,
              evaluación de manejo defensivo y entrenamiento en protocolo ejecutivo. Las unidades se
              someten a inspección semanal y se sanitizan entre servicios.
            </p>
            <p>
              No somos una aplicación de viajes ni un agregador. Somos un equipo dedicado que opera con la
              misma seriedad con la que usted opera su negocio.
            </p>
          </div>
          <div className="about-stats">
            <div className="about-stat">
              <div className="about-stat-num">8+</div>
              <div className="about-stat-label">Años en operación</div>
            </div>
            <div className="about-stat">
              <div className="about-stat-num">42</div>
              <div className="about-stat-label">Unidades activas</div>
            </div>
            <div className="about-stat">
              <div className="about-stat-num">98.7%</div>
              <div className="about-stat-label">Puntualidad 2025</div>
            </div>
            <div className="about-stat">
              <div className="about-stat-num">4.9</div>
              <div className="about-stat-label">Calificación cliente</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-col">
            <div className="brand" style={{ marginBottom: 4 }}>
              <span className="brand-mark">D</span>
              <span>Servicio Ejecutivo Deluxe</span>
            </div>
            <p className="footer-brand-tagline">
              Transporte ejecutivo en Monterrey y zona metropolitana. Operación 24/7.
            </p>
          </div>
          <div className="footer-col">
            <h5>Servicios</h5>
            <a href="#servicios">Ejecutivo</a>
            <a href="#servicios">Aeropuerto</a>
            <a href="#servicios">After / Nocturno</a>
            <a href="#servicios">Eventos corporativos</a>
          </div>
          <div className="footer-col">
            <h5>Empresa</h5>
            <a href="#nosotros">Nosotros</a>
            <a href="#tarifas">Tarifas</a>
            <a href="#cobertura">Cobertura</a>
            <a href="#reserva">Reserva</a>
          </div>
          <div className="footer-col">
            <h5>Contacto</h5>
            <a href="tel:+528143189337">81 4318 9337</a>
            <a href="mailto:ejecutivofacturacionlux@gmail.com">ejecutivofacturacionlux@gmail.com</a>
            <a href="https://wa.me/528143189337" target="_blank" rel="noopener noreferrer">WhatsApp 24/7</a>
            <p style={{ marginTop: 12, fontSize: 12 }}>Monterrey, N.L., México</p>
          </div>
        </div>

        <div className="footer-bottom">
          <span>© 2026 Servicio Ejecutivo Deluxe</span>
          <span>RFC: SED260101XX0 · Aviso de privacidad</span>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFab() {
  const message = encodeURIComponent("Quiero cotizar un viaje.");
  return (
    <a className="wa" href={`https://wa.me/528143189337?text=${message}`} target="_blank" rel="noopener noreferrer" title="Escríbanos por WhatsApp">
      <span className="wa-icon"><IconWhatsappOutline size={22} /></span>
      <span>WhatsApp</span>
    </a>
  );
}

Object.assign(window, { Coverage, Trust, Nosotros, Footer, WhatsAppFab });