/* global React, Heading, WAButton, waLink, ORIGIN, CITIES, SHIP_TIERS, TAKEN, DYN_WINNERS, project, MX_OUTLINE, MAP_W, MAP_H */
const { useState: useStateE } = React;

/* ===================== MAPA DE ENVÍOS ===================== */
const TIER_COLOR = { priority: "#D2A34A", air: "#C7A978", review: "#8a6a3a" };

function ShipMap() {
  const [hover, setHover] = useStateE(null);
  const outlinePath = MX_OUTLINE.map((p, i) => (i ? "L" : "M") + project(p[0], p[1]).map((n) => n.toFixed(1)).join(" ")).join(" ") + " Z";
  const [ox, oy] = project(ORIGIN.ll[0], ORIGIN.ll[1]);
  const pts = CITIES.map((c) => ({ ...c, p: project(c.ll[0], c.ll[1]) }));
  const hc = pts.find((c) => c.city === hover);

  return (
    <section className="section-pad wood" id="envios">
      <div className="wrap">
        <Heading kicker="Logística" title="Mapa de envíos" />
        <p className="sec-intro reveal">
          Rancho La Vega puede coordinar entregas y envíos según disponibilidad, destino, ruta,
          condiciones del ejemplar y opciones logísticas vigentes. El envío no está incluido en el
          precio y se cotiza por separado antes de confirmar cualquier operación.
        </p>

        <div className="ship-wrap reveal">
          <div className="ship-map">
            <span className="ship-compass">N</span>
            <span className="ship-maptitle">Rutas desde Tempoal, Veracruz</span>
            <svg className="ship-svg" viewBox={"0 0 " + MAP_W + " " + MAP_H} preserveAspectRatio="xMidYMid meet" role="img" aria-label="Mapa de cobertura de envíos en México">
              <defs>
                <linearGradient id="mxfill" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0" stopColor="#3a2613" stopOpacity="0.9" />
                  <stop offset="1" stopColor="#1a1009" stopOpacity="0.95" />
                </linearGradient>
              </defs>
              {/* México */}
              <path d={outlinePath} className="mx-land" />
              {/* routes */}
              {pts.map((c) => (
                <line key={"r" + c.city} x1={ox} y1={oy} x2={c.p[0]} y2={c.p[1]}
                  className={"route route-" + c.tier + (hover === c.city ? " hot" : "")} vectorEffect="non-scaling-stroke" />
              ))}
              {/* city dots */}
              {pts.map((c) => (
                <g key={c.city} className={"cdot tier-" + c.tier} transform={"translate(" + c.p[0] + "," + c.p[1] + ")"}
                  onMouseEnter={() => setHover(c.city)} onMouseLeave={() => setHover(null)} tabIndex="0"
                  onFocus={() => setHover(c.city)} onBlur={() => setHover(null)} aria-label={c.city}>
                  <circle r="11" className="cdot-hit" />
                  <circle r="6" className="cdot-core" />
                </g>
              ))}
              {/* origin */}
              <g transform={"translate(" + ox + "," + oy + ")"} className="origin-g">
                <circle r="13" className="origin-halo" />
                <circle r="7.5" className="origin-core" />
                <text y="-16" className="origin-text">Tempoal, Ver.</text>
              </g>
              {/* hover label */}
              {hc && (
                <g transform={"translate(" + hc.p[0] + "," + hc.p[1] + ")"} className="cdot-label">
                  <rect x={-(hc.city.length * 4.6 + 12)} y="-40" width={hc.city.length * 9.2 + 24} height="26" rx="5" />
                  <text y="-22" textAnchor="middle">{hc.city}</text>
                </g>
              )}
            </svg>

            <div className="ship-legend">
              <span><i style={{ background: TIER_COLOR.priority }} />Prioritaria</span>
              <span><i style={{ background: TIER_COLOR.air }} />Conexión aérea</span>
              <span><i style={{ background: TIER_COLOR.review }} />Sujeta a revisión</span>
            </div>
          </div>

          <div className="ship-tiers">
            {SHIP_TIERS.map((t) => (
              <div className={"tier-card tier-" + t.key} key={t.key}>
                <h4><span className="tier-bullet" />{t.label}</h4>
                <p>{t.desc}</p>
                <div className="tier-chips">
                  {t.items.map((it) => <span key={it}>{it}</span>)}
                </div>
              </div>
            ))}
          </div>
        </div>

        <p className="aviso reveal">Los envíos están sujetos a confirmación. No todos los destinos aplican. El costo de envío se cotiza por separado.</p>
        <div className="reveal center-cta">
          <WAButton msg="Hola, soy de [CIUDAD / ESTADO]. Quiero consultar si hay envío disponible para Rancho La Vega y cuánto costaría.">Consultar envío a mi ciudad</WAButton>
        </div>
        <p className="ship-fine reveal">
          La información del mapa es orientativa. Las rutas, costos, tiempos y disponibilidad pueden cambiar.
          El envío se confirma únicamente por los canales oficiales de Rancho La Vega antes de concretar cualquier operación.
        </p>
      </div>
    </section>
  );
}

/* ===================== DINÁMICAS OFICIALES ===================== */
function Dynamics() {
  const taken = new Set(TAKEN);
  const nums = Array.from({ length: 100 }, (_, i) => i);
  return (
    <section className="section-pad wood-dark" id="dinamicas">
      <div className="wrap">
        <Heading kicker="Comunidad" title="Dinámicas oficiales" />
        <p className="sec-intro reveal">
          En algunas ocasiones, Rancho La Vega realiza dinámicas de agradecimiento para clientes y
          seguidores. Se comunican únicamente por canales oficiales y cuentan con reglas claras,
          números asignados y fecha de referencia previamente anunciada.
        </p>

        <div className="dyn-grid-layout reveal">
          <div className="dyn-info">
            <div className="dyn-card gold-frame corners">
              <i className="tl" /><i className="tr" /><i className="bl" /><i className="br" />
              <image-slot id="dyn-prize" class="dyn-slot" shape="rect" placeholder="Ejemplar de la dinámica"></image-slot>
              <div className="dyn-card-body">
                <span className="raffle-tag">Dinámica de referencia</span>
                <h3 className="gold-text">Pollo en línea — agradecimiento</h3>
                <p className="dyn-date">Fecha de referencia: por anunciar en canales oficiales</p>
                <div className="dyn-stat">
                  <span><b>{100 - taken.size}</b>Disponibles</span>
                  <span><b>{taken.size}</b>Ocupados</span>
                </div>
              </div>
            </div>

            <h4 className="winners-h gold-text">Ganadores anteriores</h4>
            <div className="dyn-winners">
              {DYN_WINNERS.map((w) => (
                <div className="dyn-winner" key={w.n}>
                  <span className="dyn-winner-n">{w.n}</span>
                  <span><strong>{w.name}</strong><em>{w.prize}</em></span>
                </div>
              ))}
            </div>
          </div>

          <div className="dyn-board-wrap">
            <div className="dyn-board">
              {nums.map((n) => {
                const t = taken.has(n);
                const label = String(n).padStart(2, "0");
                return t ? (
                  <span key={n} className="dyn-cell taken" aria-label={"Número " + label + " ocupado"}>{label}</span>
                ) : (
                  <a key={n} className="dyn-cell free" target="_blank" rel="noopener noreferrer"
                    href={waLink("Hola, quiero apartar el número " + label + " en la dinámica de Rancho La Vega.")}
                    aria-label={"Apartar número " + label}>{label}</a>
                );
              })}
            </div>
            <div className="dyn-legend">
              <span className="lg-free">Disponible</span>
              <span className="lg-taken">Ocupado</span>
            </div>
          </div>
        </div>

        <p className="aviso reveal">
          Las dinámicas oficiales de Rancho La Vega son comunicadas únicamente por nuestros canales verificados.
          Antes de participar, revisa fecha, reglas, número asignado y canal de confirmación.
        </p>
        <div className="reveal center-cta">
          <WAButton msg="Hola, quiero participar en la dinámica oficial de Rancho La Vega.">Ver dinámicas activas</WAButton>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ShipMap, Dynamics });