/* global React, useReveal */

const MX_STATES = [
  // [name, abbreviated tag, region]
  ['Aguascalientes','AGS','centro'],
  ['Baja California','BC','noroeste'],
  ['Baja California Sur','BCS','noroeste'],
  ['Campeche','CAM','sureste'],
  ['Chiapas','CHIS','sur'],
  ['Chihuahua','CHIH','norte'],
  ['Ciudad de México','CDMX','centro'],
  ['Coahuila','COAH','norte'],
  ['Colima','COL','occidente'],
  ['Durango','DGO','norte'],
  ['Estado de México','MEX','centro'],
  ['Guanajuato','GTO','bajío'],
  ['Guerrero','GRO','pacífico'],
  ['Hidalgo','HGO','centro'],
  ['Jalisco','JAL','occidente'],
  ['Michoacán','MICH','occidente'],
  ['Morelos','MOR','centro'],
  ['Nayarit','NAY','occidente'],
  ['Nuevo León','NL','norte'],
  ['Oaxaca','OAX','sur'],
  ['Puebla','PUE','centro'],
  ['Querétaro','QRO','bajío'],
  ['Quintana Roo','QROO','sureste'],
  ['San Luis Potosí','SLP','centro'],
  ['Sinaloa','SIN','noroeste'],
  ['Sonora','SON','noroeste'],
  ['Tabasco','TAB','sureste'],
  ['Tamaulipas','TAMPS','norte'],
  ['Tlaxcala','TLAX','centro'],
  ['Veracruz','VER','golfo'],
  ['Yucatán','YUC','sureste'],
  ['Zacatecas','ZAC','centro'],
];

function Coverage() {
  const [ref, visible] = useReveal();

  return (
    <section className="section" id="cobertura">
      <div className="container">
        <div className="cov-grid">
          <div ref={ref} className={'cov-left reveal' + (visible ? ' is-visible' : '')}>
            <span className="eyebrow">Cobertura nacional</span>
            <h2 className="display cov-title">
              Instalación en toda<br/>
              <em>la República Mexicana.</em>
            </h2>
            <p className="cov-sub">
              Llegamos donde tu vehículo trabaja. De Tijuana a Cancún, instalamos, configuramos y monitoreamos en sitio.
            </p>

            <div className="cov-bigstat">
              <div className="cov-bigstat-num display">32<span className="cov-slash">/32</span></div>
              <div className="cov-bigstat-cap mono">
                Estados con servicio<br/>
                <span className="cov-bigstat-sub">Cobertura nacional · México</span>
              </div>
            </div>
          </div>

          <div className="cov-right">
            <div className="cov-board">
              <div className="cov-board-head">
                <span className="mono">Estados · México</span>
                <span className="cov-board-status">
                  <span className="cov-board-dot" /> EN LÍNEA · 32/32
                </span>
              </div>
              <div className="cov-states">
                {MX_STATES.map(([name, abbr, region], i) => (
                  <div
                    key={abbr}
                    className="cov-state"
                    style={{ animationDelay: `${(i % 12) * 60}ms` }}>
                    <span className="cov-state-dot" />
                    <span className="cov-state-name">{name}</span>
                    <span className="cov-state-abbr mono">{abbr}</span>
                  </div>
                ))}
              </div>
              <div className="cov-board-foot mono">
                Servicio activo · monitoreo 24/7 · respuesta nacional
              </div>
            </div>
          </div>
        </div>

        {/* Payment methods */}
        <div className="pay-block">
          <span className="eyebrow">Métodos de pago</span>
          <div className="pay-row">
            {['Transferencia','Depósito','Tarjeta de crédito','Pago referenciado'].map((p, i) => (
              <div key={i} className="pay-card">
                <span className="pay-num mono">0{i + 1}</span>
                <span className="pay-name">{p}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        .cov-grid {
          display: grid;
          grid-template-columns: 0.8fr 1fr;
          gap: 60px;
          align-items: center;
          margin-bottom: 80px;
        }
        @media (max-width: 1000px) {
          .cov-grid { grid-template-columns: 1fr; gap: 40px; }
        }
        .cov-title {
          font-size: clamp(36px, 4.6vw, 64px);
          margin: 14px 0 16px;
          font-weight: 500;
          line-height: 1;
        }
        .cov-title em { color: var(--petrol); font-style: italic; font-weight: 400; }
        .cov-sub {
          color: var(--ink-2);
          font-size: 16px;
          line-height: 1.55;
          margin: 0 0 24px;
          max-width: 38ch;
        }
        .cov-bigstat {
          display: flex;
          align-items: center;
          gap: 18px;
          margin-top: 36px;
          padding-top: 28px;
          border-top: 1px solid var(--line);
        }
        .cov-bigstat-num {
          font-size: clamp(64px, 8vw, 112px);
          font-weight: 600;
          letter-spacing: -0.04em;
          line-height: 0.9;
          color: var(--ink);
        }
        .cov-slash {
          color: var(--ink-mute);
          font-size: 0.45em;
          font-weight: 400;
          letter-spacing: -0.02em;
          margin-left: 4px;
        }
        .cov-bigstat-cap {
          color: var(--petrol);
          font-size: 11px;
          line-height: 1.6;
        }
        .cov-bigstat-sub {
          color: var(--ink-mute);
        }

        .cov-board {
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          overflow: hidden;
          box-shadow: var(--shadow-lg);
        }
        .cov-board-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          border-bottom: 1px solid var(--line);
          background: linear-gradient(180deg,
            color-mix(in oklab, var(--petrol) 6%, transparent),
            transparent);
        }
        .cov-board-head .mono {
          color: var(--ink-2);
          font-size: 10px;
          letter-spacing: 0.18em;
        }
        .cov-board-status {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.16em;
          color: var(--petrol-bright);
        }
        .cov-board-dot {
          width: 7px; height: 7px;
          border-radius: 50%;
          background: var(--petrol-bright);
          box-shadow: 0 0 10px var(--petrol-bright);
          animation: pulse 1.6s infinite;
        }
        .cov-states {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--line);
        }
        @media (max-width: 1100px) { .cov-states { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 600px)  { .cov-states { grid-template-columns: repeat(2, 1fr); } }
        .cov-state {
          background: var(--bg-3);
          padding: 12px 14px;
          display: flex;
          align-items: center;
          gap: 10px;
          opacity: 0;
          transform: translateY(6px);
          animation: covFadeIn .5s ease forwards;
          transition: background .2s ease;
        }
        .cov-state:hover {
          background: color-mix(in oklab, var(--petrol) 8%, var(--bg-3));
        }
        @keyframes covFadeIn {
          to { opacity: 1; transform: translateY(0); }
        }
        .cov-state-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
          background: var(--petrol-bright);
          box-shadow: 0 0 8px color-mix(in oklab, var(--petrol-bright) 60%, transparent);
          flex-shrink: 0;
        }
        .cov-state-name {
          font-family: var(--font-display);
          font-size: 13px;
          color: var(--ink);
          font-weight: 500;
          letter-spacing: -0.01em;
          flex: 1;
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .cov-state-abbr {
          font-size: 9px;
          color: var(--ink-mute);
          letter-spacing: 0.12em;
        }
        .cov-board-foot {
          padding: 14px 20px;
          border-top: 1px solid var(--line);
          color: var(--ink-mute);
          font-size: 10px;
          letter-spacing: 0.16em;
          text-align: center;
        }

        .pay-block {
          padding-top: 60px;
          border-top: 1px solid var(--line);
        }
        .pay-row {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
          margin-top: 20px;
        }
        @media (max-width: 700px) { .pay-row { grid-template-columns: repeat(2, 1fr); } }
        .pay-card {
          padding: 22px;
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: var(--radius-md);
          display: flex;
          flex-direction: column;
          gap: 10px;
          transition: transform .25s ease, border-color .25s ease;
        }
        .pay-card:hover { transform: translateY(-3px); border-color: var(--petrol); }
        .pay-num { color: var(--peach-deep); font-size: 10px; }
        .pay-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 18px;
          letter-spacing: -0.015em;
        }
      `}</style>
    </section>
  );
}

window.Coverage = Coverage;