/* global React */
// ============================================================
// OfficesSection — ubicaciones físicas, justo antes del FAQ.
//   Pill de título = SLIDER  «Oficinas» ⇄ «Promotorías».
//   IZQUIERDA  mapa de alta fidelidad de Norteamérica (EE.UU. +
//              México, contornos vectoriales reales, sin servicios
//              externos). El mapa NO cambia con el slider; solo
//              cambian los pins.
//   DERECHA    cards de cada ubicación.
//
// Los contornos provienen de GeoJSON real (Natural Earth, low-res)
// proyectado en equirectangular con paralelo de referencia 32°N
// sobre el bounding box lon[-125,-66.5] lat[14.5,49.5]. Los pins se
// colocan con la MISMA proyección a partir de lat/long real de cada
// ciudad → x/y en % del contenedor, por lo que caen en su lugar real.
// ============================================================
const NA_VIEWBOX = "0 0 49.61 35.00";

const USA_PATH = "M25.6 0.11 L25.75 0.66 L26.01 0.83 L26.6 0.89 L27.47 1.05 L28.29 1.36 L28.98 1.23 L30.02 1.49 L30.3 1.48 L31.06 1.2 L31.85 1.56 L32.68 1.95 L33.37 2.28 L34.03 2.6 L34.11 2.86 L34.31 2.96 L34.26 3.06 L34.48 3.09 L34.65 2.99 L34.69 3.22 L34.86 3.38 L35.1 3.38 L35.22 3.51 L35.12 3.68 L36 4.15 L36.18 5.06 L36.35 5.93 L36.1 6.52 L35.7 7.07 L35.52 7.42 L35.5 7.52 L35.59 7.67 L35.88 7.82 L36.09 7.82 L37.08 7.29 L37.95 7.13 L39.06 6.64 L39.08 6.53 L39 6.23 L38.86 6.03 L39.25 5.87 L40.08 5.87 L40.86 5.87 L41.13 5.48 L41.24 5.4 L42.13 4.68 L42.52 4.5 L43.8 4.49 L45.37 4.49 L45.45 4.24 L45.72 4.19 L46.08 4.04 L46.38 3.59 L46.64 2.81 L47.29 2.05 L47.57 2.31 L48.14 2.15 L48.52 2.43 L48.52 3.8 L49.07 4.36 L49.22 4.69 L48.31 5.17 L47.44 5.52 L46.54 5.82 L46.1 6.41 L45.95 6.63 L45.94 7.16 L46.22 7.7 L46.57 7.72 L46.49 7.35 L46.74 7.58 L46.67 7.86 L46.1 8.02 L45.69 8.01 L45.07 8.18 L44.7 8.23 L44.2 8.28 L43.5 8.57 L44.74 8.38 L44.99 8.57 L43.81 8.87 L43.27 8.87 L43.29 8.75 L43.03 9.03 L43.28 9.07 L43.1 9.79 L42.48 10.56 L42.42 10.3 L42.23 10.25 L41.95 10 L42.13 10.54 L42.34 10.72 L42.35 11.1 L42.08 11.48 L41.61 12.28 L41.53 12.24 L41.79 11.56 L41.36 11.18 L41.26 10.35 L41.09 10.78 L41.28 11.42 L40.71 11.26 L41.3 11.58 L41.33 12.53 L41.58 12.6 L41.67 12.95 L41.79 13.95 L41.25 14.69 L40.37 14.99 L39.81 15.57 L39.39 15.64 L38.96 16.01 L38.84 16.34 L37.91 16.99 L37.43 17.47 L37.03 18.06 L36.9 18.77 L37.05 19.46 L37.33 20.32 L37.71 21.03 L37.71 21.46 L38.11 22.62 L38.09 23.29 L38.05 23.68 L37.84 24.29 L37.59 24.42 L37.17 24.3 L37.03 23.86 L36.71 23.63 L36.26 22.77 L35.87 22 L35.74 21.61 L35.91 20.95 L35.68 20.4 L35.02 19.56 L34.69 19.41 L33.83 19.86 L33.68 19.81 L33.27 19.35 L32.73 19.1 L31.78 19.23 L31.02 19.12 L30.38 19.18 L30.03 19.34 L30.18 19.61 L30.17 20.01 L30.35 20.21 L30.18 20.34 L29.87 20.19 L29.55 20.38 L28.94 20.35 L28.3 19.82 L27.56 19.95 L26.95 19.72 L26.42 19.79 L25.7 20.02 L24.93 20.76 L24.09 21.19 L23.63 21.67 L23.43 22.12 L23.42 22.81 L23.47 23.29 L23.63 23.63 L23.3 23.66 L22.69 23.44 L22.03 23.13 L21.79 22.66 L21.61 21.96 L21.11 21.39 L20.81 20.8 L20.39 20.12 L19.79 19.72 L19.1 19.74 L18.56 20.53 L17.86 20.23 L17.42 19.93 L17.21 19.38 L16.93 18.86 L16.43 18.42 L15.99 18.1 L15.68 17.75 L14.21 17.75 L14.21 18.16 L13.54 18.16 L11.85 18.17 L9.92 17.46 L8.64 16.97 L8.72 16.78 L7.64 16.89 L6.68 16.96 L6.53 16.45 L5.98 15.88 L5.59 15.76 L5.5 15.47 L5.02 15.42 L4.72 15.15 L3.93 15.05 L3.71 14.89 L3.61 14.34 L2.79 13.34 L2.08 11.95 L2.11 11.72 L1.74 11.39 L1.08 10.55 L0.96 9.73 L0.51 9.19 L0.7 8.36 L0.67 7.5 L0.4 6.73 L0.73 5.79 L0.83 4.88 L0.93 3.98 L0.78 2.64 L0.51 1.78 L0.27 1.32 L0.37 1.12 L1.59 1.46 L2.05 2.4 L2.26 2.14 L2.12 1.32 L1.83 0.5 L4.24 0.5 L6.76 0.5 L7.59 0.5 L10.18 0.5 L12.68 0.5 L15.22 0.5 L17.77 0.5 L20.65 0.5 L23.55 0.5 L25.31 0.5 L25.31 0.12 L25.6 0.11 Z";

const MEX_PATH = "M23.63 23.63 L23.3 24.51 L23.15 25.23 L23.09 26.57 L23.01 27.06 L23.15 27.6 L23.42 28.09 L23.58 28.86 L24.15 29.61 L24.35 30.18 L24.68 30.67 L25.58 30.94 L25.93 31.36 L26.67 31.08 L27.32 30.98 L27.95 30.8 L28.49 30.62 L29.03 30.22 L29.23 29.63 L29.3 28.79 L29.45 28.5 L30.02 28.24 L30.92 28.01 L31.67 28.04 L32.18 27.96 L32.39 28.17 L32.36 28.65 L31.9 29.24 L31.7 29.85 L31.86 30.03 L31.73 30.46 L31.52 31.24 L31.3 30.98 L31.12 31 L30.96 31.01 L30.66 31.62 L30.5 31.5 L30.4 31.54 L30.41 31.69 L29.62 31.68 L28.83 31.68 L28.83 32.25 L28.45 32.25 L28.76 32.58 L29.08 32.81 L29.17 33.03 L29.31 33.09 L29.29 33.43 L28.2 33.43 L27.79 34.25 L27.91 34.44 L27.81 34.67 L27.79 34.96 L26.83 33.88 L26.4 33.56 L25.7 33.3 L25.23 33.37 L24.55 33.75 L24.12 33.85 L23.52 33.58 L22.89 33.39 L22.09 32.93 L21.46 32.79 L20.5 32.33 L19.79 31.85 L19.57 31.58 L19.1 31.52 L18.23 31.21 L17.88 30.75 L16.97 30.18 L16.54 29.55 L16.34 29.07 L16.62 28.97 L16.54 28.68 L16.73 28.42 L16.74 28.08 L16.45 27.63 L16.37 27.23 L16.09 26.73 L15.34 25.73 L14.49 24.95 L14.08 24.33 L13.35 23.92 L13.19 23.68 L13.32 23.06 L12.89 22.82 L12.39 22.34 L12.18 21.64 L11.72 21.56 L11.23 21.03 L10.83 20.55 L10.79 20.23 L10.34 19.48 L10.04 18.71 L10.05 18.33 L9.44 17.93 L9.15 17.98 L8.67 17.7 L8.53 18.11 L8.67 18.59 L8.76 19.34 L9.05 19.75 L9.68 20.44 L9.82 20.67 L9.95 20.75 L10.06 21.09 L10.21 21.07 L10.38 21.72 L10.64 21.97 L10.82 22.33 L11.35 22.84 L11.63 23.77 L11.88 24.21 L12.12 24.67 L12.17 25.2 L12.57 25.23 L12.91 25.69 L13.22 26.14 L13.2 26.31 L12.84 26.68 L12.69 26.68 L12.47 26.07 L11.92 25.5 L11.3 25.02 L10.87 24.76 L10.9 24.03 L10.77 23.49 L10.37 23.18 L9.78 22.73 L9.67 22.86 L9.46 22.6 L8.93 22.36 L8.43 21.78 L8.5 21.7 L8.84 21.76 L9.16 21.38 L9.19 20.93 L8.54 20.22 L8.04 19.94 L7.73 19.32 L7.41 18.66 L7.02 17.86 L6.68 16.96 L7.64 16.89 L8.72 16.78 L8.64 16.97 L9.92 17.46 L11.85 18.17 L13.54 18.16 L14.21 18.16 L14.21 17.75 L15.68 17.75 L15.99 18.1 L16.43 18.42 L16.93 18.86 L17.21 19.38 L17.42 19.93 L17.86 20.23 L18.56 20.53 L19.1 19.74 L19.79 19.72 L20.39 20.12 L20.81 20.8 L21.11 21.39 L21.61 21.96 L21.79 22.66 L22.03 23.13 L22.69 23.44 L23.3 23.66 L23.63 23.63 Z";

// Ubicaciones por modo. x/y = % real sobre el mapa (ver cabecera).
const LOCATIONS = {
  oficinas: [
    { city: "Middletown",       region: "Delaware · EE.UU.",       address: "[dirección pendiente]", x: 84.24, y: 28.71 },
    { city: "Ciudad de México", region: "CDMX · México",           address: "[dirección pendiente]", x: 44.22, y: 85.91 },
    { city: "Monterrey",        region: "Nuevo León · México",     address: "[dirección pendiente]", x: 42.19, y: 68.03 },
  ],
  promotorias: [
    { city: "Ciudad de México", region: "CDMX · México",           x: 44.22, y: 85.91 },
    { city: "Monterrey",        region: "Nuevo León · México",     x: 42.19, y: 68.03 },
    { city: "Guadalajara",      region: "Jalisco · México",        x: 37.01, y: 82.40 },
    { city: "Mérida",           region: "Yucatán · México",        x: 60.53, y: 81.51 },
    { city: "Tijuana",          region: "Baja California · México", x: 13.61, y: 48.54 },
  ],
};

const COPY = {
  oficinas:    { lede: "Nuestras oficinas en Estados Unidos y México acompañan a tu empresa de cerca." },
  promotorias: { lede: "Promotorías en las principales ciudades de México, listas para atenderte donde operas." },
};

function OfficesSection() {
  const [mode, setMode] = React.useState("oficinas");
  const [active, setActive] = React.useState(null);
  const list = LOCATIONS[mode];

  const Pin = (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z"/><circle cx="12" cy="10" r="2.4"/>
    </svg>
  );

  return (
    <section className="off-section" data-screen-label="Oficinas" id="oficinas">
      <div className="wrap">
        <header className="off-header reveal">
          {/* Segmented control glassmorphism — Oficinas ⇄ Promotorías */}
          <div className="off-segtab" role="radiogroup" aria-label="Tipo de ubicación">
            <div className="off-segtab-track">
              <div className="off-segtab-ink" data-mode={mode} />
              <button
                type="button" role="radio" aria-checked={mode === "oficinas"}
                className={"off-segtab-opt" + (mode === "oficinas" ? " is-active" : "")}
                onClick={() => setMode("oficinas")}>
                Oficinas
              </button>
              <button
                type="button" role="radio" aria-checked={mode === "promotorias"}
                className={"off-segtab-opt" + (mode === "promotorias" ? " is-active" : "")}
                onClick={() => setMode("promotorias")}>
                Promotorías
              </button>
            </div>
          </div>
          <h2 className="off-title">Cerca de tu operación.</h2>
          <p className="off-lede">{COPY[mode].lede}</p>
        </header>

        <div className="off-grid reveal">
          {/* ── IZQUIERDA — mapa de Norteamérica ── */}
          <div className="off-map">
            <svg className="off-map-bg" viewBox={NA_VIEWBOX} preserveAspectRatio="xMidYMid meet" aria-hidden="true">
              <g className="off-map-land">
                <path d={USA_PATH} />
                <path d={MEX_PATH} />
              </g>
            </svg>

            <div className="off-pins" key={mode}>
              {list.map((o) => (
                <span
                  key={o.city}
                  className={"off-pin" + (active === o.city ? " is-active" : "")}
                  style={{ left: `${o.x}%`, top: `${o.y}%` }}
                  onMouseEnter={() => setActive(o.city)}
                  onMouseLeave={() => setActive(null)}>
                  <span className="off-pin-label">{o.city}</span>
                  <span className="off-pin-mark">
                    <span className="off-pin-glow" />
                    <span className="off-pin-pulse" />
                    <svg className="off-pin-svg" viewBox="0 0 24 26" width="30" height="35">
                      <path d="M12 25 C12 25 3 15 3 9 A9 9 0 0 1 21 9 C21 15 12 25 12 25 Z" fill="var(--accent)"/>
                      <circle cx="12" cy="9" r="3.3" fill="#fff"/>
                    </svg>
                  </span>
                </span>
              ))}
            </div>
          </div>

          {/* ── DERECHA — lista de ubicaciones en columna ── */}
          <div className="off-list" key={mode}>
            {list.map((o) => (
              <div
                key={o.city}
                className={"off-card" + (active === o.city ? " is-active" : "")}
                onMouseEnter={() => setActive(o.city)}
                onMouseLeave={() => setActive(null)}>
                <span className="off-card-icon"><Pin /></span>
                <div className="off-card-body">
                  <span className="off-card-city">{o.city}</span>
                  <span className="off-card-region">{o.region}</span>
                </div>
                <span className="off-card-chevron" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{OFF_CSS}</style>
    </section>
  );
}

const OFF_CSS = `
/* Sección azul oscuro — mismo lenguaje que Clientes/Transparencia */
.off-section{ position:relative; overflow:hidden; color:#EAF0FB;
  background:
    radial-gradient(900px 600px at 18% 28%, rgba(5,48,206,.16), transparent 64%),
    radial-gradient(700px 500px at 86% 78%, rgba(90,116,236,.12), transparent 60%),
    var(--blue-950); }
.off-header{ max-width:680px; margin:0 auto 52px; text-align:center; }

/* ── Segmented control glassmorphism — Oficinas / Promotorías ── */
.off-segtab{ display:flex; justify-content:center; margin-bottom:28px; }
.off-segtab-track{
  position:relative; display:inline-grid; grid-template-columns:1fr 1fr;
  padding:4px; border-radius:9999px;
  background:rgba(8,22,72,.60); border:1px solid rgba(140,160,246,.30);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 6px 28px rgba(2,6,28,.55), inset 0 1px 0 rgba(255,255,255,.07); }
.off-segtab-ink{
  position:absolute; top:4px; left:4px; box-sizing:border-box;
  width:calc(50% - 4px); height:calc(100% - 8px); border-radius:9999px;
  background:linear-gradient(135deg, rgba(90,116,236,.52), rgba(55,80,210,.42));
  border:1px solid rgba(140,160,246,.52);
  box-shadow:0 0 22px rgba(90,116,236,.38), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  transition:left .28s cubic-bezier(.34,1.18,.64,1);
  pointer-events:none; }
.off-segtab-ink[data-mode="promotorias"]{ left:calc(50%); }
.off-segtab-opt{
  position:relative; z-index:1; padding:10px 28px; text-align:center;
  border:none; background:none; cursor:pointer;
  font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(183,204,251,.48); transition:color .22s ease; white-space:nowrap;
  user-select:none; }
.off-segtab-opt.is-active{ color:#fff; }

.off-title{ margin:0 0 12px; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.9rem,2.4vw + 1rem,2.9rem); line-height:1.08; letter-spacing:-.03em; color:#FFFFFF; }
.off-lede{ margin:0 auto; max-width:540px; font-size:17px; line-height:1.6; color:rgba(234,240,251,.72); }

/* ── Dos columnas: mapa flotando (izq) + lista en columna (der) ── */
.off-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.78fr);
  gap:56px; align-items:center; }

.off-map{ position:relative; width:100%; }
.off-map-bg{ display:block; width:100%; height:auto; overflow:visible; }
.off-map-land path{ fill:#c9d2f6; stroke:rgba(140,160,246,.45); stroke-width:0.1; stroke-linejoin:round; }
.off-map-land{ filter:drop-shadow(0 18px 34px rgba(5,48,206,.5)); transition:filter var(--duration-base) var(--ease-smooth); }

.off-pins{ position:absolute; inset:0; animation:off-fade var(--duration-slow) var(--ease-out-soft); }
.off-pin{ position:absolute; transform:translate(-50%,-100%); display:flex; flex-direction:column;
  align-items:center; z-index:2; cursor:pointer; }
.off-pin.is-active{ z-index:5; }
.off-pin-label{ margin-bottom:6px; font-size:11px; font-weight:600; color:var(--blue-950);
  background:#EAF0FB; border:1px solid rgba(140,160,246,.4); padding:2px 8px; border-radius:9999px;
  white-space:nowrap; box-shadow:0 6px 16px -6px rgba(2,6,28,.8); opacity:0; transform:translateY(4px);
  pointer-events:none; transition:opacity var(--duration-base) var(--ease-smooth),
  transform var(--duration-base) var(--ease-smooth); }
.off-pin:hover .off-pin-label,
.off-pin.is-active .off-pin-label{ opacity:1; transform:translateY(0); }
.off-pin-mark{ position:relative; width:30px; height:35px; }
.off-pin-pulse{ position:absolute; left:50%; bottom:2px; width:11px; height:11px; border-radius:9999px;
  transform:translate(-50%,50%); background:rgba(90,116,236,.5);
  animation:pulse-dot var(--pulse-cycle) var(--ease-smooth) infinite; }
/* halo de brillo, visible solo cuando el pin está activo (hover en card o pin) */
.off-pin-glow{ position:absolute; left:50%; top:9px; width:36px; height:36px; border-radius:9999px;
  transform:translate(-50%,-50%) scale(.4); background:radial-gradient(circle, rgba(90,116,236,.7), rgba(90,116,236,0) 70%);
  opacity:0; transition:opacity var(--duration-base) var(--ease-smooth), transform var(--duration-base) var(--ease-out-soft); }
.off-pin.is-active .off-pin-glow{ opacity:1; transform:translate(-50%,-50%) scale(1.55); }
.off-pin-svg{ position:absolute; left:50%; top:0; transform:translateX(-50%);
  filter:drop-shadow(0 3px 5px rgba(2,6,28,.6)); transition:transform var(--duration-base) var(--ease-out-soft),
  filter var(--duration-base) var(--ease-smooth); }
.off-pin.is-active .off-pin-svg{ transform:translateX(-50%) scale(1.22) translateY(-1px);
  filter:drop-shadow(0 0 6px rgba(140,160,246,.9)) drop-shadow(0 5px 8px rgba(5,48,206,.6)); }

/* ── Lista de ubicaciones en columna, cards de vidrio oscuro ── */
/* min-height = 5 cards × 72px + 4 gaps × 12px — evita que la sección cambie de alto al alternar */
.off-list{ display:flex; flex-direction:column; gap:12px; min-height:408px;
  animation:off-fade var(--duration-slow) var(--ease-out-soft); }
.off-card{ display:flex; align-items:center; gap:14px; padding:16px 16px 16px 18px;
  border:1px solid rgba(140,160,246,.22); border-radius:16px;
  background:linear-gradient(165deg, rgba(20,50,125,.5), rgba(4,10,34,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px -24px rgba(2,6,28,.8);
  cursor:pointer; transition:box-shadow var(--duration-base) var(--ease-smooth),
  transform var(--duration-base) var(--ease-out-soft), border-color var(--duration-base) var(--ease-smooth); }
.off-card.is-active{ border-color:rgba(140,160,246,.55); transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 22px 50px -22px rgba(2,6,28,.85),
  0 0 36px -10px rgba(90,116,236,.4); }
.off-card-icon{ width:38px; height:38px; flex:0 0 38px; border-radius:12px; color:#8CA0F6;
  background:rgba(90,116,236,.12); border:1px solid rgba(140,160,246,.22);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--duration-base) var(--ease-smooth), color var(--duration-base) var(--ease-smooth); }
.off-card.is-active .off-card-icon{ background:rgba(90,116,236,.22); color:#B7CCFB; }
.off-card-body{ display:flex; flex-direction:column; gap:2px; text-align:left; min-width:0; }
.off-card-city{ font-family:var(--font-display); font-weight:500; font-size:16px; color:#FFFFFF; letter-spacing:-.01em; }
.off-card-region{ font-size:12px; color:rgba(234,240,251,.55); }
.off-card-chevron{ margin-left:auto; color:rgba(234,240,251,.4); flex:0 0 auto; opacity:0;
  transform:translateX(-4px); transition:opacity var(--duration-base) var(--ease-smooth),
  transform var(--duration-base) var(--ease-out-soft); }
.off-card.is-active .off-card-chevron{ opacity:1; transform:translateX(0); color:#8CA0F6; }

@keyframes off-fade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width:900px){
  .off-grid{ grid-template-columns:1fr; gap:36px; }
  .off-map{ max-width:540px; margin:0 auto; }
  .off-list{ max-width:540px; margin:0 auto; width:100%; min-height:0; }
  .off-card-chevron{ opacity:1; transform:none; }
}
`;

window.OfficesSection = OfficesSection;