/* global React */
// ============================================================
// OfficesSection — physical locations, right before the FAQ.
//   Section-title pill = SLIDER  «Offices» ⇄ «Promoter offices».
//   LEFT   high-fidelity map of North America (USA + Mexico, real
//          vector outlines, no external services). The map does NOT
//          change with the slider; only the pins do.
//   RIGHT  cards for each location.
//
// Outlines come from real GeoJSON (Natural Earth, low-res) projected
// equirectangular with a 32°N reference parallel over the bounding
// box lon[-125,-66.5] lat[14.5,49.5]. Pins are placed with the SAME
// projection from each city's real lat/long → x/y in % of the
// container, so they land in their real spot.
// ============================================================
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";

// Locations per mode. x/y = real % over the map (see header).
const LOCATIONS = {
  offices: [
    { city: "Middletown",  region: "Delaware · USA",            address: "[address pending]", x: 84.24, y: 28.71 },
    { city: "Mexico City", region: "CDMX · Mexico",             address: "[address pending]", x: 44.22, y: 85.91 },
    { city: "Monterrey",   region: "Nuevo León · Mexico",       address: "[address pending]", x: 42.19, y: 68.03 },
  ],
  promoters: [
    { city: "Mexico City", region: "CDMX · Mexico",             x: 44.22, y: 85.91 },
    { city: "Monterrey",   region: "Nuevo León · Mexico",       x: 42.19, y: 68.03 },
    { city: "Guadalajara", region: "Jalisco · Mexico",          x: 37.01, y: 82.40 },
    { city: "Mérida",      region: "Yucatán · Mexico",          x: 60.53, y: 81.51 },
    { city: "Tijuana",     region: "Baja California · Mexico",   x: 13.61, y: 48.54 },
  ],
};

const COPY = {
  offices:   { lede: "Our offices in the United States and Mexico support your company up close." },
  promoters: { lede: "Promoter offices in Mexico's major cities, ready to assist you where you operate." },
};

function OfficesSection() {
  const [mode, setMode] = React.useState("offices");
  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="Offices" id="offices">
      <div className="wrap">
        <header className="off-header reveal">
          {/* Segmented control glassmorphism — Offices ⇄ Promoter offices */}
          <div className="off-segtab" role="radiogroup" aria-label="Location type">
            <div className="off-segtab-track">
              <div className="off-segtab-ink" data-mode={mode} />
              <button
                type="button" role="radio" aria-checked={mode === "offices"}
                className={"off-segtab-opt" + (mode === "offices" ? " is-active" : "")}
                onClick={() => setMode("offices")}>
                Offices
              </button>
              <button
                type="button" role="radio" aria-checked={mode === "promoters"}
                className={"off-segtab-opt" + (mode === "promoters" ? " is-active" : "")}
                onClick={() => setMode("promoters")}>
                Promoter offices
              </button>
            </div>
          </div>
          <h2 className="off-title">Close to your operation.</h2>
          <p className="off-lede">{COPY[mode].lede}</p>
        </header>

        <div className="off-grid reveal">
          {/* ── LEFT — North America map ── */}
          <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>

          {/* ── RIGHT — location list in a column ── */}
          <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 = `
/* Light section — alternates with the Compliance (dark) before it and the
   FAQ (dark) after it. Same language as the light sections. */
.off-section{ position:relative; overflow:hidden; color:var(--fg-1);
  background:
    radial-gradient(900px 600px at 18% 28%, rgba(5,48,206,.055), transparent 64%),
    radial-gradient(700px 500px at 86% 78%, rgba(90,116,236,.05), transparent 60%),
    var(--bg-2); }
.off-header{ max-width:680px; margin:0 auto 52px; text-align:center; }

/* ── Segmented control glassmorphism — Offices / Promoter offices ── */
.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(255,255,255,.82); border:1px solid var(--border);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 24px -12px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.9); }
.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, var(--accent), var(--blue-600));
  border:1px solid rgba(5,48,206,.4);
  box-shadow:0 6px 18px -6px rgba(5,48,206,.5), inset 0 1px 0 rgba(255,255,255,.25);
  transition:left .28s cubic-bezier(.34,1.18,.64,1);
  pointer-events:none; }
.off-segtab-ink[data-mode="promoters"]{ 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:var(--fg-3); 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:var(--fg-1); }
.off-lede{ margin:0 auto; max-width:540px; font-size:17px; line-height:1.6; color:var(--fg-2); }

/* ── Two columns: floating map (left) + list column (right) ── */
.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:#D3DBF9; stroke:rgba(5,48,206,.34); stroke-width:0.12; stroke-linejoin:round; }
.off-map-land{ filter:drop-shadow(0 16px 30px rgba(5,48,206,.18)); 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(--fg-1);
  background:#FFFFFF; border:1px solid var(--border); padding:2px 8px; border-radius:9999px;
  white-space:nowrap; box-shadow:0 8px 18px -8px rgba(15,23,42,.28); 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; }
/* glow halo, visible only when the pin is active (card or pin hover) */
.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(5,48,206,.3)); 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(90,116,236,.8)) drop-shadow(0 5px 8px rgba(5,48,206,.4)); }

/* ── Location list in a column, dark glass cards ── */
/* min-height = 5 cards × 72px + 4 gaps × 12px — prevents section height jump on toggle */
.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 var(--border); border-radius:16px;
  background:var(--bg-1);
  box-shadow:var(--shadow-card);
  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(5,48,206,.38); transform:translateY(-2px);
  box-shadow:var(--shadow-card-hover), 0 0 30px -12px rgba(5,48,206,.32); }
.off-card-icon{ width:38px; height:38px; flex:0 0 38px; border-radius:12px; color:var(--accent);
  background:var(--accent-soft); border:1px solid rgba(5,48,206,.12);
  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(5,48,206,.14); color:var(--accent); }
.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:var(--fg-1); letter-spacing:-.01em; }
.off-card-region{ font-size:12px; color:var(--fg-2); }
.off-card-chevron{ margin-left:auto; color:var(--fg-3); 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:var(--accent); }

@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;