/* global React, Logo, EdomexMap */
const { useState, useEffect } = React;

// ─── HERO ─────────────────────────────────────────
function Hero() {
  const SVC_QUICK = [
    ['01', 'Internet Dedicado', 'Fibra simétrica desde 100 Mbps, SLA 99.9%, IP fija incluida.'],
    ['02', 'Backhaul / Enlace', 'Transporte punto-a-punto para ISPs, hasta 100 Gbps.'],
    ['03', 'IP Transit', 'Upstream multi-carrier con BGP y peering IXMex.'],
    ['04', 'MPLS / SD-WAN', 'Red privada convergente para organizaciones multi-sede.'],
    ['05', 'Consultoría IFT', 'Trámites regulatorios y permisos municipales — único en Edoméx.'],
    ['06', 'Diseño de red', 'Llave en mano: planta externa, fusión, certificación y AS-BUILT.'],
  ];
  return (
    <section className="hero" id="top">
      <div className="hero-inner">
        <div className="hero-left">
          <div className="hero-meta">
            <span>MC · CONECTIVIDAD</span>
            <span>EST. 2011 · TOLUCA, MX</span>
            <span className="live">BACKBONE EN VIVO</span>
          </div>
          <h1 className="display">
            Infraestructura <em>crítica</em> de conectividad<br/>
            <span className="outline">para</span> <span className="sage">quienes conectan</span> al Estado de México.
          </h1>
          <p className="hero-desc">
            Fibra óptica propia, SLA con penalización real, asesoría regulatoria IFT
            y monitoreo 24/7. Para ISPs, grandes empresas e instituciones que
            tratan la red como infraestructura, no como commodity.
          </p>
          <div className="hero-ctas">
            <a href="#contacto" className="btn btn-red btn-lg">Solicitar cotización <span className="btn-arrow">↗</span></a>
            <a href="#servicios" className="btn btn-ghost btn-lg">Explorar servicios <span className="btn-arrow">→</span></a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat"><div className="label">Capacidad base</div><div className="val">100<span className="u"> Mbps</span></div></div>
            <div className="hero-stat"><div className="label">SLA</div><div className="val">99.<span className="u">9%</span></div></div>
            <div className="hero-stat"><div className="label">Operando</div><div className="val">15<span className="u">+ años</span></div></div>
            <div className="hero-stat"><div className="label">Soporte</div><div className="val">24<span className="u">/7</span></div></div>
          </div>
        </div>

        <div className="hero-right">
          <div className="hero-svc-card">
            <div className="hero-svc-head">
              <span className="hero-svc-kicker">◆ NUESTROS SERVICIOS</span>
              <span className="hero-svc-count">06 LÍNEAS</span>
            </div>
            <div className="hero-svc-list">
              {SVC_QUICK.map(s => (
                <a href="#servicios" className="hero-svc-item" key={s[0]}>
                  <span className="hs-n">{s[0]}</span>
                  <div className="hs-body">
                    <div className="hs-t">{s[1]}</div>
                    <div className="hs-d">{s[2]}</div>
                  </div>
                  <span className="hs-arr">→</span>
                </a>
              ))}
            </div>
            <div className="hero-badge-row">
              <div className="hero-badge"><strong>IFT</strong> vigente</div>
              <div className="hero-badge"><strong>Fibra</strong> propia</div>
              <div className="hero-badge"><strong>Somnet</strong> grupo</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── SERVICES ─────────────────────────────────────
const SERVICES = [
  {
    id: 'internet',
    num: '01',
    label: 'Internet Dedicado',
    tag: 'Producto insignia',
    title: 'Ancho simétrico y <em>garantizado</em> desde 100 Mbps.',
    desc: 'Fibra óptica punto-a-nube con IP pública fija, SLA 99.9% y sin ratio de compartición. Diseñado para empresas que tratan la conectividad como infraestructura crítica, no como commodity.',
    features: [
      ['100M → 10G', 'Capacidad simétrica'],
      ['IP /29', 'Fijas incluidas'],
      ['SLA 99.9%', 'Con créditos escalonados'],
      ['<12 h', 'Tiempo de respuesta'],
      ['BGP opcional', 'Multihoming'],
    ],
    metric: { val: '99.9', unit: '%', sub: 'SLA disponibilidad anualizada, con créditos automáticos por incumplimiento.' },
    specs: [
      ['Latencia MX', '≤ 5 ms'],
      ['Jitter', '< 1 ms'],
      ['Packet loss', '< 0.01%'],
      ['Entrega', 'Fibra monomodo'],
      ['Monitoreo', 'Zabbix 24/7'],
    ]
  },
  {
    id: 'backhaul',
    num: '02',
    label: 'Backhaul / Enlace',
    tag: 'Mayorista',
    title: 'Transporte <em>punto a punto</em> para ISPs que escalan.',
    desc: 'Enlace dedicado de alta capacidad entre tus nodos. Precio por capacidad reservada, ventanas de mantenimiento negociables y opción de redundancia por rutas diversas.',
    features: [
      ['1G → 100G', 'Capacidad L2 o IP'],
      ['Rutas diversas', 'Diversidad física'],
      ['Jumbo frames', '9000 bytes MTU'],
      ['VLAN a medida', 'Trunking 802.1Q'],
      ['CIR = PIR', 'Sin oversubscription'],
    ],
    metric: { val: '100', unit: 'G', sub: 'Capacidad máxima punto-a-punto disponible entre nodos del backbone metropolitano.' },
    specs: [
      ['Protocolo', 'L2 / L3 MPLS'],
      ['SLA', '99.95% premium'],
      ['Redundancia', 'Anillo opcional'],
      ['Reporting', 'Portal + NetFlow'],
      ['Plazo', '12–36 meses'],
    ]
  },
  {
    id: 'transit',
    num: '03',
    label: 'IP Transit',
    tag: 'Para operadores',
    title: 'Upstream <em>multi-carrier</em> con control BGP.',
    desc: 'Tránsito IPv4/IPv6 a través de múltiples carriers internacionales. Política de ruteo ajustable, comunidades BGP documentadas y reportes de tráfico por AS origen.',
    features: [
      ['IPv4 + IPv6', 'Full table'],
      ['Peering IX', 'IXMex, NAP Miami'],
      ['BGP communities', 'Prepend granular'],
      ['DDoS scrubbing', 'Opcional'],
      ['Facturación 95th', 'Percentil estándar'],
    ],
    metric: { val: '4', unit: '×', sub: 'Upstreams tier-1 redundantes con diversidad de caminos hacia NAP Miami y Dallas.' },
    specs: [
      ['Prefijos propios', 'ASN disponible'],
      ['Announcements', 'Hasta /24'],
      ['Flood protection', '10 Gbps base'],
      ['SLA', '100% puerto'],
      ['Activación', '48–72 h'],
    ]
  },
  {
    id: 'mpls',
    num: '04',
    label: 'MPLS / SD-WAN',
    tag: 'Multi-sede',
    title: 'Red privada <em>convergente</em> entre tus oficinas.',
    desc: 'VPN MPLS o SD-WAN gestionado con QoS por clase, control centralizado y orquestación desde un solo portal. Para organizaciones con sucursales que mueven voz, datos y video.',
    features: [
      ['QoS por clase', 'Voz/Video/Datos'],
      ['SD-WAN zero-touch', 'Provisionamiento'],
      ['Hub-and-spoke', 'o full-mesh'],
      ['Integración cloud', 'AWS, Azure, GCP'],
      ['Firewall opcional', 'NGFW gestionado'],
    ],
    metric: { val: '50+', unit: '', sub: 'Sedes soportadas en una sola red privada, con políticas por grupo y aplicación.' },
    specs: [
      ['Topología', 'Hub/Spoke/Mesh'],
      ['Clases QoS', '4 niveles'],
      ['Cifrado', 'IPsec AES-256'],
      ['Visibilidad', 'Per-app'],
      ['Gestión', 'Portal + API'],
    ]
  },
  {
    id: 'ift',
    num: '05',
    label: 'Consultoría IFT',
    tag: 'Diferenciador único',
    title: 'Asesoría regulatoria <em>exclusiva</em> en Edoméx.',
    desc: 'Somos los únicos que acompañamos a ISPs y operadores en todo el ciclo regulatorio: concesiones, autorizaciones municipales, permisos de uso del espectro y cumplimiento con el IFT.',
    features: [
      ['Concesión IFT', 'Único o comercial'],
      ['Permisos municipales', 'Tendido de fibra'],
      ['Derechos de vía', 'CFE, federales'],
      ['Auditoría regulatoria', 'Revisión integral'],
      ['Cumplimiento', 'Reportes anuales'],
    ],
    metric: { val: '1', unit: '/1', sub: 'Único proveedor que integra conectividad mayorista y asesoría regulatoria en el Estado de México.' },
    specs: [
      ['IFT', 'Expedientes activos'],
      ['Municipios', '15+ Edoméx'],
      ['Tiempo típico', '90–180 días'],
      ['Abogado regulatorio', 'Dedicado'],
      ['Acompañamiento', 'Llave en mano'],
    ]
  },
  {
    id: 'design',
    num: '06',
    label: 'Diseño e implementación',
    tag: 'Llave en mano',
    title: 'Diseñamos, tendemos y <em>encendemos</em> tu red.',
    desc: 'Proyectos llave en mano: levantamiento, diseño de planta externa, obra civil, fusión, certificación OTDR y puesta en marcha. Con documentación AS-BUILT completa.',
    features: [
      ['Levantamiento', 'LIDAR + GIS'],
      ['Diseño', 'AutoCAD + Bluebeam'],
      ['Fusión', 'Fujikura 90S'],
      ['Certificación', 'OTDR Tier 1/2'],
      ['AS-BUILT', 'Entregables completos'],
    ],
    metric: { val: '30', unit: 'd', sub: 'Tiempo típico de implementación para un enlace metropolitano estándar, sin obra civil mayor.' },
    specs: [
      ['Alcance', 'Planta externa'],
      ['Topología', 'Anillo / ramal'],
      ['Fibra', 'SM G.652.D / G.657'],
      ['Certificación', 'OTDR + IL/RL'],
      ['Garantía', '5 años planta'],
    ]
  },
];

function Services() {
  const [active, setActive] = useState('internet');
  const svc = SERVICES.find(s => s.id === active);
  return (
    <section className="services" id="servicios">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 01 · SERVICIOS</div>
          <h2 className="section-title">
            Seis productos. <em>Una</em> sola<br/>
            <span className="outline">infraestructura</span> debajo.
          </h2>
          <p className="section-kicker">
            Cada línea de producto comparte la misma planta de fibra, el mismo
            monitoreo y el mismo equipo de guardia. Sin capas opacas entre tú y
            la red.
          </p>
        </div>
        <div className="services-body">
          <div className="svc-tabs">
            {SERVICES.map(s => (
              <button key={s.id}
                      className={`svc-tab ${s.id === active ? 'active' : ''}`}
                      onClick={() => setActive(s.id)}>
                <span className="t-num">{s.num}</span>
                <span>{s.label}</span>
                <span className="t-arrow">→</span>
              </button>
            ))}
          </div>
          <div className="svc-panel" key={svc.id}>
            <div className="svc-panel-l">
              <div className="tag">● {svc.tag}</div>
              <h3 dangerouslySetInnerHTML={{ __html: svc.title }}/>
              <p>{svc.desc}</p>
              <ul className="svc-features">
                {svc.features.map((f, i) => (
                  <li key={i}>
                    <span className="i">✓</span>
                    <span>{f[1]}</span>
                    <span className="num">{f[0]}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="svc-panel-r">
              <div className="svc-stat-card">
                <h4>{svc.label} · Métrica clave</h4>
                <div className="big">{svc.metric.val}<span className="u">{svc.metric.unit}</span></div>
                <div className="sub">{svc.metric.sub}</div>
                <div className="svc-specs">
                  {svc.specs.map((sp, i) => (
                    <div className="svc-spec" key={i}>
                      <span className="l">{sp[0]}</span>
                      <span className="v">{sp[1]}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── MARQUEE ──────────────────────────────────────
function Marquee() {
  const words = ['INTERNET DEDICADO', 'BACKHAUL', 'IP TRANSIT', 'MPLS', 'CONSULTORÍA IFT', 'DISEÑO DE RED'];
  const row = [...words, ...words];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row.map((w, i) => (
          <span className="marquee-item" key={i}>
            <span className={i % 2 ? 'muted' : ''}>{w}</span>
            <span className="sep"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── KPIs ─────────────────────────────────────────
function Kpis() {
  return (
    <section className="kpis" id="red">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 02 · LA RED</div>
          <h2 className="section-title">
            La red que <em>no duerme.</em>
          </h2>
          <p className="section-kicker">
            Cifras vigentes del backbone MexiCarrier al cierre del trimestre.
            Todas verificables con auditoría operativa.
          </p>
        </div>
        <div className="kpi-grid">
          <div className="kpi">
            <div className="kpi-lbl">Nodos activos</div>
            <div className="kpi-num accent">42</div>
            <div className="kpi-desc">POPs y hubs metropolitanos en operación continua dentro del Estado de México.</div>
          </div>
          <div className="kpi">
            <div className="kpi-lbl">Capacidad agregada</div>
            <div className="kpi-num">186<span className="u"> Gbps</span></div>
            <div className="kpi-desc">Suma de la capacidad entre nodos del backbone. Crece 40% año contra año.</div>
          </div>
          <div className="kpi">
            <div className="kpi-lbl">Uptime 12 meses</div>
            <div className="kpi-num sage">99.<span style={{fontSize:'.55em'}}>987</span>%</div>
            <div className="kpi-desc">Disponibilidad real medida sobre toda la base de clientes de servicio dedicado.</div>
          </div>
          <div className="kpi">
            <div className="kpi-lbl">Clientes activos</div>
            <div className="kpi-num">120<span className="u">+</span></div>
            <div className="kpi-desc">ISPs, grandes empresas e instituciones públicas con contrato vigente.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── MAP ──────────────────────────────────────────
// 14 municipios con servicio activo MexiCarrier hoy.
// El nombre debe coincidir EXACTO con data-municipio del SVG (sin acentos).
const CITIES = [
  { name: 'Toluca', hub: true,
    desc: 'Sede corporativa de MexiCarrier. Nodo de cobertura activa con servicios de fibra óptica dedicada en el Valle de Toluca.' },
  { name: 'Lerma', hub: false,
    desc: 'Corredor industrial. Nodo de cobertura activa con servicios de fibra óptica dedicada para manufactura y logística.' },
  { name: 'Zinacantepec', hub: false,
    desc: 'Nodo de cobertura activa al poniente del Valle de Toluca con servicios de fibra óptica dedicada.' },
  { name: 'Almoloya de Juarez', hub: false,
    desc: 'Nodo de cobertura activa en el noroeste del Valle de Toluca con servicios de fibra óptica dedicada.' },
  { name: 'Santiago Tianguistenco', hub: false,
    desc: 'Nodo de cobertura activa en el corredor sureste con servicios de fibra óptica dedicada.' },
  { name: 'Ixtlahuaca', hub: false,
    desc: 'Nodo de cobertura activa en el tránsito hacia el norte del Estado con servicios de fibra óptica dedicada.' },
  { name: 'Atlacomulco', hub: true,
    desc: 'Hub regional del norte del Estado. Nodo de cobertura activa con servicios de fibra óptica dedicada.' },
  { name: 'San Andres Timilpan', hub: false,
    desc: 'Nodo de cobertura activa en el extremo norte del Estado con servicios de fibra óptica dedicada.' },
  { name: 'San Felipe del Progreso', hub: false,
    desc: 'Nodo de cobertura activa en el noroeste del Estado con servicios de fibra óptica dedicada.' },
  { name: 'Villa Victoria', hub: false,
    desc: 'Nodo de cobertura activa en el corredor poniente con servicios de fibra óptica dedicada.' },
  { name: 'Temascaltepec', hub: false,
    desc: 'Nodo de cobertura activa en el suroeste del Estado con servicios de fibra óptica dedicada.' },
  { name: 'Texcaltitlan', hub: false,
    desc: 'Nodo de cobertura activa al sur del Valle de Toluca con servicios de fibra óptica dedicada.' },
  { name: 'Sultepec', hub: false,
    desc: 'Nodo de cobertura activa en la zona sur del Estado con servicios de fibra óptica dedicada.' },
  { name: 'Tejupilco', hub: false,
    desc: 'Nodo de cobertura activa en el extremo suroeste del Estado con servicios de fibra óptica dedicada.' },
];

const COMMON_SPECS = [
  ['Estatus', 'Operando'],
  ['Servicios', 'Internet Dedicado · Backhaul · IP Transit · MPLS'],
  ['SLA', '99.9% con penalización'],
  ['Soporte', 'NOC 24/7'],
];

function MapSection() {
  const [activeName, setActiveName] = useState('Toluca');
  const active = CITIES.find(c => c.name === activeName) || CITIES[0];

  return (
    <section className="map-section" id="cobertura">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 03 · COBERTURA</div>
          <h2 className="section-title">
            <span className="outline">Donde</span> hay <em>fibra</em>,<br/>
            hay operación.
          </h2>
          <p className="section-kicker">
            14 municipios con servicio activo a lo largo del Valle de Toluca y corredor norte–sur
            del Estado de México. Toca cualquier zona en rojo para su ficha técnica.
          </p>
        </div>
        <div className="map-body">
          <div className="map-canvas">
            <EdomexMap activeName={activeName} onSelect={setActiveName}/>
            <div className="map-legend">
              <div className="lr"><span className="d hub"/><span>Hub regional</span></div>
              <div className="lr"><span className="d pop"/><span>Municipio con cobertura</span></div>
              <div className="lr"><span className="d off"/><span>Resto del Estado</span></div>
            </div>
          </div>
          <div className="map-info">
            <h3>Nodo seleccionado · Ficha técnica</h3>
            <div className="mcity">{active.name}</div>
            <div className="mtype">● OPERANDO {active.hub ? ' · Hub regional' : ''}</div>
            <div className="mdesc">{active.desc}</div>
            <div className="mspecs">
              {COMMON_SPECS.map((s, i) => (
                <div className="mspec" key={i}>
                  <span className="l">{s[0]}</span>
                  <span className="v">{s[1]}</span>
                </div>
              ))}
            </div>
            <div className="mcity-list">
              {CITIES.map(c => (
                <button key={c.name}
                        className={`mpill ${activeName === c.name ? 'active' : ''}`}
                        onMouseEnter={() => setActiveName(c.name)}
                        onClick={() => setActiveName(c.name)}>
                  {c.name}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── PROCESS ──────────────────────────────────────
const STEPS = [
  { n: '01', dur: '1–3 DÍAS', t: 'Diagnóstico', d: 'Levantamos requerimientos, volumetría, SLA objetivo y ubicaciones. Visita técnica si aplica.', del: 'Informe de viabilidad' },
  { n: '02', dur: '5 DÍAS', t: 'Propuesta', d: 'Entregamos propuesta técnica + comercial con capacidades, tiempos, dependencias y precio firme.', del: 'Cotización firme' },
  { n: '03', dur: '15–60 DÍAS', t: 'Trámites', d: 'Gestionamos permisos municipales, derechos de vía y cualquier trámite IFT necesario.', del: 'Permisos aprobados' },
  { n: '04', dur: '10–30 DÍAS', t: 'Instalación', d: 'Obra civil si aplica, tendido de fibra, fusión y certificación OTDR Tier 1 y Tier 2.', del: 'AS-BUILT firmado' },
  { n: '05', dur: 'CONTINUO', t: 'Monitoreo', d: 'Enlace bajo Zabbix 24/7, alertas proactivas, portal de cliente y guardia técnica dedicada.', del: 'Cliente en marcha' },
];

function Process() {
  return (
    <section className="process" id="proceso">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 04 · PROCESO</div>
          <h2 className="section-title">
            Del <em>handshake</em><br/>
            al primer <span className="sage">paquete.</span>
          </h2>
          <p className="section-kicker">
            Cinco fases, cero letra chica. Siempre sabes dónde vas y cuándo
            llega tu enlace.
          </p>
        </div>
        <div className="process-grid">
          {STEPS.map(s => (
            <div className="pstep" key={s.n}>
              <div className="pstep-h">
                <div className="pstep-num">{s.n}</div>
                <div className="pstep-dur">{s.dur}</div>
              </div>
              <div className="pstep-title">{s.t}</div>
              <div className="pstep-desc">{s.d}</div>
              <div className="pstep-deliv">→ {s.del}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CLIENTS / QUOTE ──────────────────────────────
function Clients() {
  const [q, setQ] = useState(0);
  const quotes = [
    { t: '"Migramos el backhaul de tres POPs a MexiCarrier y la latencia bajó un 42%. El trámite IFT que llevábamos cuatro meses en pausa, ellos lo cerraron en seis semanas."', name: 'Adrián V.', role: 'CTO · ISP regional', init: 'AV' },
    { t: '"Es el único proveedor al que le puedo llamar a las 3 AM y me contesta un ingeniero, no un bot. La diferencia entre perder clientes o no es esa llamada."', name: 'Sara M.', role: 'Dir. Operaciones · Retail', init: 'SM' },
    { t: '"Diseñaron nuestra red municipal, tendieron la fibra y se quedaron monitoreando. Cuatro años después, cero tickets por fallas de planta."', name: 'Ricardo P.', role: 'CIO · Gobierno municipal', init: 'RP' },
  ];
  const quote = quotes[q];
  const logos = [
    ['ISP MAYORISTA', 'Fibra Centro', 'Cliente desde 2018'],
    ['MANUFACTURA', 'Metales del Valle', 'Multi-sede · 4 plantas'],
    ['EDUCACIÓN', 'Tec. de Toluca', '8,000 usuarios'],
    ['GOBIERNO', 'Municipio Lerma', 'Red municipal'],
    ['FINANCIERO', 'Caja Popular MX', 'SD-WAN · 12 sucursales'],
    ['LOGÍSTICA', 'Transportes Norte', 'Backhaul dedicado'],
  ];
  return (
    <section className="clients" id="clientes">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 05 · CLIENTES</div>
          <h2 className="section-title">
            Quien está <em>encendido</em><br/>
            con nosotros.
          </h2>
          <p className="section-kicker">
            Una muestra de los perfiles que operan sobre nuestra infraestructura.
          </p>
        </div>
        <div className="client-body">
          <div className="client-quote">
            <div>
              <div className="quote-mark">"</div>
              <div className="quote-text">{quote.t.replace(/^"|"$/g, '')}</div>
            </div>
            <div>
              <div className="quote-by">
                <div className="quote-av">{quote.init}</div>
                <div>
                  <div className="quote-name">{quote.name}</div>
                  <div className="quote-role">{quote.role}</div>
                </div>
                <div style={{marginLeft:'auto', display:'flex', gap:6}}>
                  {quotes.map((_, i) => (
                    <button key={i} onClick={() => setQ(i)}
                      style={{width:32,height:4,background:i===q?'var(--accent)':'var(--rule-soft)',border:'none',cursor:'pointer'}}/>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="client-logos">
            {logos.map((l, i) => (
              <div className="client-logo" key={i}>
                <div className="ctype">{l[0]}</div>
                <div className="cname">{l[1]}</div>
                <div className="cdot">{l[2]}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ──────────────────────────────────────────
const FAQS = [
  ['¿Cuánto tarda la activación de un enlace dedicado?', 'Para ubicaciones dentro de nuestra cobertura actual, el tiempo típico es de 10 a 30 días hábiles desde la firma del contrato. Ubicaciones que requieren extensión de planta pueden tomar 60-90 días. Siempre entregamos cronograma firme en la propuesta.'],
  ['¿Qué significa que la fibra sea "propia"?', 'Significa que el cable, los registros, los ductos y el equipo activo son de MexiCarrier (a través de Somnet). No revendemos última milla de terceros: controlamos la calidad extremo a extremo y los tiempos de atención en caso de falla.'],
  ['¿Firman SLA con penalizaciones reales?', 'Sí. Cada contrato tiene un SLA con créditos automáticos escalonados: si el enlace baja de 99.9% en el mes, aplicamos descuento proporcional sobre el cargo recurrente. Sin reclamos, sin trámites.'],
  ['¿Qué incluye la asesoría regulatoria IFT?', 'Es un acompañamiento integral: revisión del caso, preparación de expedientes, representación técnica ante el IFT, gestión de permisos municipales y seguimiento hasta obtener la autorización. Somos el único proveedor en Edoméx que ofrece esto como parte del servicio.'],
  ['¿Manejan redundancia y diversidad de rutas?', 'Sí. Podemos entregar enlaces con rutas físicamente diversas (entrando por dos puntos distintos al inmueble) y uplinks redundantes hacia múltiples carriers. Se diseña a la medida según criticidad.'],
  ['¿Atienden proyectos fuera del Estado de México?', 'Nuestra cobertura de fibra propia es Edoméx. Para sedes fuera del estado (CDMX, Puebla, Querétaro, Hidalgo) operamos con carriers socios bajo nuestro mismo contrato y SLA. Tú firmas una sola vez con nosotros.'],
];

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 06 · FAQ</div>
          <h2 className="section-title">
            Preguntas <em>directas.</em><br/>
            Respuestas cortas.
          </h2>
          <p className="section-kicker">
            Lo que más nos preguntan antes de cerrar. Si no está aquí,
            escríbenos — responde un humano.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div className={`faq-item ${i === open ? 'open' : ''}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="n">{String(i+1).padStart(2,'0')}</span>
                <span className="t">{f[0]}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{f[1]}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA BAND ─────────────────────────────────────
function CtaBand() {
  return (
    <div className="cta">
      <div className="wrap-wide cta-inner">
        <div>
          <h2>
            Conecta <em>en serio.</em><br/>
            <span className="outline">Llámanos hoy.</span>
          </h2>
          <p className="cta-desc">
            Un ingeniero — no un vendedor — toma la primera llamada. Cotización
            técnica en 5 días, sin letras chicas.
          </p>
          <div className="cta-meta">
            <span>MC—END / BACKBONE · EDOMÉX</span>
            <span>IFT · SOMNET</span>
            <span>© 2026</span>
          </div>
        </div>
        <div className="cta-actions">
          <a href="tel:7221675865" className="btn">Llamar 722 167 5865 <span>↗</span></a>
          <a href="mailto:contacto@mexicarrier.mx" className="btn line">contacto@mexicarrier.mx <span>↗</span></a>
          <a href="#contacto" className="btn line">Agendar diagnóstico <span>→</span></a>
        </div>
      </div>
    </div>
  );
}

// ─── CONTACT FORM ─────────────────────────────────
function Contact() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({ service: 'Internet Dedicado', capacity: '500 Mbps' });
  const [submitted, setSubmitted] = useState(false);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const SERVICES_OPT = ['Internet Dedicado', 'Backhaul / Enlace', 'IP Transit', 'MPLS / SD-WAN', 'Consultoría IFT', 'Diseño de red'];
  const CAPACITIES = ['100 Mbps', '500 Mbps', '1 Gbps', '10 Gbps', 'Otro'];

  return (
    <section className="contact-section" id="contacto">
      <div className="wrap-wide">
        <div className="section-head">
          <div className="section-num">SEC / 07 · CONTACTO</div>
          <h2 className="section-title">
            Cuéntanos tu <em>proyecto.</em>
          </h2>
          <p className="section-kicker">
            Formato corto. Te contactamos en menos de 24 horas hábiles con
            diagnóstico inicial.
          </p>
        </div>
        <div className="contact-body">
          <div className="contact-left">
            <h3>Ya hablaste con<br/>un ingeniero hoy?</h3>
            <div className="cinfo">
              <div className="l">Línea directa</div>
              <div className="v"><a href="tel:7221675865">722 167 5865</a></div>
            </div>
            <div className="cinfo">
              <div className="l">Correo</div>
              <div className="v"><a href="mailto:contacto@mexicarrier.mx">contacto@mexicarrier.mx</a></div>
            </div>
            <div className="cinfo">
              <div className="l">Sede principal</div>
              <div className="v">Toluca, Estado de México</div>
            </div>
            <div className="cinfo">
              <div className="l">Horario comercial</div>
              <div className="v">Lun–Vie 9:00–18:00</div>
            </div>
            <div className="cinfo">
              <div className="l">Soporte técnico</div>
              <div className="v">24 / 7 · 365 días</div>
            </div>
            <div className="cinfo">
              <div className="l">Identificadores</div>
              <div className="v" style={{fontFamily:'var(--f-mono)', fontSize:12}}>IFT · AS265xxx<br/>Una empresa del Grupo Somnet</div>
            </div>
          </div>
          <div className="contact-form">
            {submitted ? (
              <div className="form-success">
                <div className="check">✓</div>
                <h5>Solicitud enviada</h5>
                <p>Un ingeniero te contactará en las próximas 24 horas hábiles. Gracias por considerar MexiCarrier.</p>
              </div>
            ) : <>
              <div className="form-steps">
                {[1,2,3].map(n => (
                  <div key={n} className={`form-step ${step === n ? 'active' : step > n ? 'done' : ''}`}>
                    <span className="form-step-label">{n === 1 ? '01 · Contacto' : n === 2 ? '02 · Servicio' : '03 · Detalles'}</span>
                  </div>
                ))}
              </div>
              <div className="form-head">
                <h4>
                  {step === 1 ? 'Tus datos' : step === 2 ? '¿Qué necesitas?' : 'Último paso'}
                </h4>
                <span className="n">{String(step).padStart(2,'0')} / 03</span>
              </div>

              {step === 1 && <>
                <div className="form-row">
                  <div className="field">
                    <label>Nombre</label>
                    <input value={form.name || ''} onChange={e => set('name', e.target.value)} placeholder="Ana Pérez"/>
                  </div>
                  <div className="field">
                    <label>Empresa</label>
                    <input value={form.company || ''} onChange={e => set('company', e.target.value)} placeholder="Tu empresa"/>
                  </div>
                </div>
                <div className="form-row">
                  <div className="field">
                    <label>Correo</label>
                    <input type="email" value={form.email || ''} onChange={e => set('email', e.target.value)} placeholder="ana@empresa.com"/>
                  </div>
                  <div className="field">
                    <label>Teléfono</label>
                    <input value={form.phone || ''} onChange={e => set('phone', e.target.value)} placeholder="722 000 0000"/>
                  </div>
                </div>
              </>}

              {step === 2 && <>
                <div className="field">
                  <label>Servicio de interés</label>
                  <div className="chip-group">
                    {SERVICES_OPT.map(s => (
                      <button key={s} type="button"
                              className={`chip ${form.service === s ? 'active' : ''}`}
                              onClick={() => set('service', s)}>{s}</button>
                    ))}
                  </div>
                </div>
                <div className="field" style={{marginTop:20}}>
                  <label>Capacidad estimada</label>
                  <div className="chip-group">
                    {CAPACITIES.map(s => (
                      <button key={s} type="button"
                              className={`chip ${form.capacity === s ? 'active' : ''}`}
                              onClick={() => set('capacity', s)}>{s}</button>
                    ))}
                  </div>
                </div>
                <div className="form-row" style={{marginTop:20}}>
                  <div className="field">
                    <label>Municipio</label>
                    <input value={form.city || ''} onChange={e => set('city', e.target.value)} placeholder="Toluca, Metepec, …"/>
                  </div>
                  <div className="field">
                    <label>Sedes</label>
                    <input value={form.sites || ''} onChange={e => set('sites', e.target.value)} placeholder="1"/>
                  </div>
                </div>
              </>}

              {step === 3 && <>
                <div className="field">
                  <label>Contexto del proyecto (opcional)</label>
                  <textarea value={form.notes || ''} onChange={e => set('notes', e.target.value)}
                            placeholder="Cuéntanos brevemente qué necesitas, tiempos objetivo y si tienes proveedor actual..."/>
                </div>
                <div style={{marginTop:16, padding:16, background:'var(--bg-soft)', fontFamily:'var(--f-mono)', fontSize:12, lineHeight:1.7}}>
                  <div style={{color:'var(--ink-mute)', marginBottom:6}}>RESUMEN</div>
                  <div><strong>{form.name || '—'}</strong> · {form.company || '—'}</div>
                  <div>{form.service} · {form.capacity}</div>
                  <div>{form.city || '—'} · {form.sites || '—'} sede(s)</div>
                </div>
              </>}

              <div className="form-actions">
                <button className="btn btn-ghost"
                        onClick={() => step > 1 ? setStep(step - 1) : null}
                        disabled={step === 1}>
                  ← Atrás
                </button>
                {step < 3
                  ? <button className="btn-submit" onClick={() => setStep(step + 1)}>Continuar →</button>
                  : <button className="btn-submit" onClick={() => setSubmitted(true)}>Enviar solicitud ↗</button>}
              </div>
            </>}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ───────────────────────────────────────
function Footer() {
  return (
    <footer>
      <div className="wrap-wide">
        <div className="foot-top">
          <div className="foot-brand">
            <Logo size={42}/>
            <p>Infraestructura de conectividad dedicada para ISPs, grandes empresas e instituciones en el Estado de México. Una empresa del Grupo Somnet.</p>
          </div>
          <div className="foot-col">
            <h4>Servicios</h4>
            <a href="#servicios">Internet Dedicado</a>
            <a href="#servicios">Backhaul / Enlace</a>
            <a href="#servicios">IP Transit</a>
            <a href="#servicios">MPLS / SD-WAN</a>
            <a href="#servicios">Consultoría IFT</a>
            <a href="#servicios">Diseño de red</a>
          </div>
          <div className="foot-col">
            <h4>La empresa</h4>
            <a href="#red">La red</a>
            <a href="#cobertura">Cobertura</a>
            <a href="#proceso">Proceso</a>
            <a href="#clientes">Clientes</a>
            <a href="#">Aviso de privacidad</a>
            <a href="#">Términos</a>
          </div>
          <div className="foot-col">
            <h4>Grupo Somnet</h4>
            <a href="https://somnet.com.mx" target="_blank" rel="noopener">somnet.com.mx ↗</a>
            <a href="#">Área de clientes</a>
            <a href="#">Soporte técnico 24/7</a>
            <a href="tel:7221675865">722 167 5865</a>
            <a href="mailto:contacto@mexicarrier.mx">contacto@mexicarrier.mx</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 MexiCarrier de México</span>
          <span>Una empresa del Grupo Somnet</span>
          <span>Diseño editorial · MC—26</span>
        </div>
        <div className="mega-wordmark" style={{display:'flex', justifyContent:'center', marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--rule-soft)'}}>
          <Logo size={56} variant="color"/>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Hero, Services, Marquee, Kpis, MapSection, Process,
  Clients, Faq, CtaBand, Contact, Footer,
});