/* ─── DISTANCES + ROUTE ─── */
const { C: dC, FONTS: dF, DISTANCES: dDISTANCES } = window.LT;
const { useViewport: dUseViewport } = window.LTHooks;
const { Section: DSection, SectionTag: DTag, SectionTitle: DTitle, Lede: DLede } = window.LTUI;

function Distances({ selected, setSelected }) {
  return (
    <DSection id="distancias" ariaLabel="Distancias disponibles">
      <DTag text="Elegí tu desafío" />
      <DTitle>Cuatro distancias,<br/>una misma pasión</DTitle>
      <DLede>
        No importa si es tu primera carrera o tu vigésima. En Love Trail hay un recorrido que te espera.
        Cada kilómetro por Las Bardas es una historia que te llevás.
      </DLede>

      <div role="radiogroup" aria-label="Seleccioná una distancia"
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
          gap: 18,
        }}>
        {dDISTANCES.map((d, i) => {
          const active = selected === i;
          return (
            <button
              key={i}
              role="radio"
              aria-checked={active}
              onClick={() => setSelected(i)}
              className="dist-card"
              style={{
                borderTop: `4px solid ${d.color}`,
                background: active ? dC.cardHover : dC.card,
                borderColor: active ? d.color + "88" : dC.border,
                boxShadow: active ? `0 12px 40px ${d.color}22` : "none",
                textAlign: "left",
                cursor: "pointer",
                color: dC.text,
                fontFamily: dF.body,
              }}
            >
              <div style={{
                fontFamily: dF.display, fontSize: 48, fontWeight: 700,
                color: d.color, lineHeight: 1, letterSpacing: "-0.02em",
              }}>{d.name}</div>
              <div style={{ display: "flex", gap: 18, margin: "16px 0", fontSize: 13, color: dC.textMuted, fontFamily: dF.mono }}>
                <span aria-label={`Desnivel ${d.elevation}`}>↗ {d.elevation}</span>
                <span aria-label={`Tiempo estimado ${d.time}`}>⏱ {d.time}</span>
              </div>
              <p style={{ fontSize: 14, color: dC.textSoft, lineHeight: 1.65, marginBottom: 22, textWrap: "pretty" }}>
                {d.desc}
              </p>
              <div style={{
                display: "flex", justifyContent: "space-between",
                alignItems: "flex-end", gap: 12, flexWrap: "wrap",
              }}>
                <div>
                  <div style={{ fontSize: 11, color: dC.textMuted, fontFamily: dF.mono, letterSpacing: "0.1em" }}>DESDE</div>
                  <div style={{ fontFamily: dF.display, fontSize: 28, fontWeight: 700, color: dC.text, lineHeight: 1.1 }}>
                    ${(d.price * 0.8).toLocaleString("es-AR")}
                  </div>
                  <div style={{ fontSize: 11, color: dC.textMuted, marginTop: 2 }}>
                    <span style={{ textDecoration: "line-through" }}>${d.price.toLocaleString("es-AR")}</span>
                    {" · transferencia"}
                  </div>
                </div>
                <span aria-hidden="true" style={{
                  width: 40, height: 40, borderRadius: "50%",
                  background: active ? d.color : "transparent",
                  border: `2px solid ${active ? d.color : dC.borderLight}`,
                  display: "grid", placeItems: "center",
                  color: active ? dC.night : d.color,
                  transition: "all 0.2s",
                }}>
                  {active ? "✓" : "→"}
                </span>
              </div>
            </button>
          );
        })}
      </div>
    </DSection>
  );
}

function Route({ selected, setSelected }) {
  const { isMobile } = dUseViewport();
  const d = dDISTANCES[selected];

  return (
    <DSection id="recorrido" dark ariaLabel="El recorrido">
      <DTag text="El recorrido" color={dC.skySoft} />
      <DTitle>Las Bardas<br/>te espera</DTitle>
      <DLede>
        Senderos que serpentean entre bardas milenarias, con vistas al Valle del Río Negro
        y la cordillera de fondo. Un terreno que desafía y enamora a partes iguales.
      </DLede>

      {/* Elevation profile card */}
      <div style={{
        background: dC.card, border: `1px solid ${dC.border}`, borderRadius: 20,
        padding: "clamp(20px, 3vw, 32px)", marginBottom: 20,
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: isMobile ? "flex-start" : "center",
          marginBottom: 24, gap: 16, flexDirection: isMobile ? "column" : "row",
        }}>
          <div>
            <div style={{ fontFamily: dF.display, fontSize: 22, fontWeight: 600, color: dC.text }}>
              Perfil de Elevación · {d.name}
            </div>
            <div style={{ fontSize: 13, color: dC.textMuted, marginTop: 6, fontFamily: dF.mono }}>
              Desnivel acumulado: {d.elevation}
            </div>
          </div>
          <div role="tablist" aria-label="Seleccionar distancia para el perfil"
            style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {dDISTANCES.slice(0, 3).map((dd, i) => (
              <button key={i}
                role="tab"
                aria-selected={selected === i}
                onClick={() => setSelected(i)}
                style={{
                  background: selected === i ? dd.color + "26" : "transparent",
                  border: `1.5px solid ${selected === i ? dd.color : dC.borderLight}`,
                  color: selected === i ? dd.color : dC.textSoft,
                  borderRadius: 8, padding: "8px 16px", fontSize: 13, fontWeight: 700,
                  cursor: "pointer", fontFamily: dF.mono, letterSpacing: "0.05em",
                  transition: "all 0.2s",
                }}>{dd.name}</button>
            ))}
          </div>
        </div>

        <svg viewBox="0 0 800 220" role="img" aria-label={`Perfil de elevación de la carrera de ${d.name}`}
          style={{ width: "100%", height: "auto", display: "block" }}>
          <defs>
            <linearGradient id="elev-grad" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor={d.color} stopOpacity="0.4" />
              <stop offset="100%" stopColor={d.color} stopOpacity="0" />
            </linearGradient>
          </defs>
          {/* Grid */}
          {[0,1,2,3,4].map(i => (
            <line key={i} x1="0" y1={40 + i * 35} x2="800" y2={40 + i * 35}
              stroke={dC.border} strokeWidth="0.5" />
          ))}
          {/* Y labels */}
          {[0,1,2,3,4].map(i => (
            <text key={i} x="6" y={36 + i * 35}
              fill={dC.textMuted} fontSize="9" fontFamily={dF.mono}>
              {Math.round(800 - i * 200)}m
            </text>
          ))}

          <path d={selected === 0
            ? "M0,180 Q50,168 100,148 Q150,108 200,82 Q250,50 300,68 Q350,90 380,55 Q420,30 460,48 Q500,72 540,62 Q580,40 620,52 Q680,82 720,108 Q760,140 800,180"
            : selected === 1
            ? "M0,180 Q80,158 160,128 Q240,82 320,94 Q400,62 480,78 Q560,104 640,128 Q720,158 800,180"
            : "M0,180 Q100,158 200,138 Q300,108 400,118 Q500,128 600,148 Q700,168 800,180"
          } fill="url(#elev-grad)" />
          <path d={selected === 0
            ? "M0,180 Q50,168 100,148 Q150,108 200,82 Q250,50 300,68 Q350,90 380,55 Q420,30 460,48 Q500,72 540,62 Q580,40 620,52 Q680,82 720,108 Q760,140 800,180"
            : selected === 1
            ? "M0,180 Q80,158 160,128 Q240,82 320,94 Q400,62 480,78 Q560,104 640,128 Q720,158 800,180"
            : "M0,180 Q100,158 200,138 Q300,108 400,118 Q500,128 600,148 Q700,168 800,180"
          } fill="none" stroke={d.color} strokeWidth="2.8" strokeLinejoin="round" />

          {selected === 0 && <React.Fragment>
            <circle cx="0" cy="180" r="5" fill={dC.green} />
            <text x="6" y="200" fill={dC.textSoft} fontSize="10" fontFamily={dF.mono} fontWeight="600">LARGADA</text>
            <circle cx="300" cy="68" r="5" fill={dC.sunset} />
            <text x="280" y="56" fill={dC.textSoft} fontSize="10" fontFamily={dF.mono} fontWeight="600">HIDRATACIÓN</text>
            <circle cx="460" cy="48" r="5" fill={dC.sunset} />
            <text x="440" y="36" fill={dC.textSoft} fontSize="10" fontFamily={dF.mono} fontWeight="600">MIRADOR</text>
            <circle cx="800" cy="180" r="5" fill={dC.red} />
            <text x="746" y="200" fill={dC.textSoft} fontSize="10" fontFamily={dF.mono} fontWeight="600">META</text>
          </React.Fragment>}
        </svg>
      </div>

      {/* Route info cards */}
      <div style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
        gap: 16,
      }}>
        {[
          { ic: "💧", title: "Hidratación", desc: "Puestos cada 5 km con agua, isotónico y frutas. Llevá tu propio vaso." },
          { ic: "🏥", title: "Asistencia médica", desc: "Ambulancia, paramédicos y voluntarios capacitados en todo el recorrido." },
          { ic: "📍", title: "Señalización", desc: "Cintas, estacas y marcas reflectivas. Charla técnica obligatoria." },
        ].map((c, i) => (
          <div key={i} style={{
            background: dC.card, border: `1px solid ${dC.border}`, borderRadius: 14,
            padding: "26px 22px",
          }}>
            <div aria-hidden="true" style={{ fontSize: 30, marginBottom: 12 }}>{c.ic}</div>
            <h3 style={{ fontFamily: dF.display, fontSize: 18, fontWeight: 600, color: dC.text, marginBottom: 8, letterSpacing: "0.02em" }}>
              {c.title}
            </h3>
            <p style={{ fontSize: 14, color: dC.textSoft, lineHeight: 1.6 }}>{c.desc}</p>
          </div>
        ))}
      </div>
    </DSection>
  );
}

window.LTDistances = Distances;
window.LTRoute = Route;