/* ─── TIMELINE + MATCHING ─── */
const { C: tC, FONTS: tF, TIMELINE: tTIMELINE } = window.LT;
const { useViewport: tUseViewport } = window.LTHooks;
const { Section: TSection, SectionTag: TTag, SectionTitle: TTitle, Lede: TLede } = window.LTUI;

function Timeline() {
  return (
    <TSection id="timeline" ariaLabel="Camino a la carrera">
      <TTag text="El camino a la carrera" />
      <TTitle>No empieza<br/>en la largada</TTitle>
      <TLede>
        Love Trail es una experiencia que arranca meses antes. Cada paso que das entrenando,
        cada persona que conocés en el camino, ya es parte de la carrera.
      </TLede>

      <ol style={{
        position: "relative", paddingLeft: 44, listStyle: "none",
        margin: "12px 0 0",
      }}>
        <div aria-hidden="true" style={{
          position: "absolute", left: 7, top: 8, bottom: 8, width: 2,
          background: `linear-gradient(180deg, ${tC.sunset} 0%, ${tC.sunset}55 70%, transparent 100%)`,
          borderRadius: 2,
        }} />
        {tTIMELINE.map((t, i) => {
          const isCurrent = i === 4;
          return (
            <li key={i} style={{
              display: "flex", gap: 24, marginBottom: 36, position: "relative",
              alignItems: "flex-start",
            }}>
              <span aria-hidden="true" style={{
                position: "absolute", left: -44, top: 4,
                width: 16, height: 16, borderRadius: "50%",
                border: `3px solid ${tC.sunset}`,
                background: isCurrent ? tC.sunset : tC.night,
                boxShadow: isCurrent ? `0 0 0 6px ${tC.sunset}33` : "none",
              }} />
              <div>
                <span style={{
                  fontSize: 11, fontWeight: 700, color: tC.sunsetSoft,
                  fontFamily: tF.mono, letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  display: "inline-block",
                  background: "rgba(245,155,60,0.12)",
                  padding: "3px 10px", borderRadius: 4,
                }}>{t.date}</span>
                <h3 style={{
                  fontFamily: tF.display, fontSize: 24, fontWeight: 600,
                  color: tC.text, margin: "10px 0 6px",
                  letterSpacing: "0.01em",
                }}>
                  {t.title}
                </h3>
                <p style={{ fontSize: 15, color: tC.textSoft, lineHeight: 1.65, maxWidth: 540 }}>
                  {t.desc}
                </p>
              </div>
            </li>
          );
        })}
      </ol>
    </TSection>
  );
}

function Matching() {
  const { isTablet } = tUseViewport();
  const [form, setForm] = React.useState({ pace: "", zone: "", schedule: "", consent: false });
  const [submitted, setSubmitted] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    if (!form.consent || !form.pace || !form.zone || !form.schedule) return;
    setSubmitted(true);
  };

  return (
    <TSection id="matching" dark ariaLabel="Matching de corredores">
      <div style={{
        display: "grid",
        gridTemplateColumns: isTablet ? "1fr" : "1fr 1.05fr",
        gap: isTablet ? 40 : 64,
        alignItems: "center",
      }}>
        <div>
          <TTag text="Comunidad" color={tC.skySoft} />
          <TTitle>Encontrá tu<br/>grupo de<br/>entrenamiento</TTitle>
          <p style={{ color: tC.textSoft, fontSize: 16, lineHeight: 1.7, marginBottom: 24, textWrap: "pretty" }}>
            No tenés que entrenar solo/a. Contanos tu ritmo, tu zona y tus horarios,
            y te conectamos con otros corredores que se preparan para Love Trail.
          </p>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            {[
              { ic: "🏃", t: "Ritmo similar" },
              { ic: "📍", t: "Misma zona" },
              { ic: "⏰", t: "Horario compatible" },
            ].map((tag, i) => (
              <span key={i} style={{
                display: "inline-flex", alignItems: "center", gap: 8,
                background: "rgba(125,211,252,0.12)",
                color: tC.skySoft, fontSize: 14, fontWeight: 600,
                padding: "10px 16px", borderRadius: 99,
                border: `1px solid ${tC.skyGlow}`,
              }}>
                <span aria-hidden="true">{tag.ic}</span>{tag.t}
              </span>
            ))}
          </div>
        </div>

        <form onSubmit={submit} aria-labelledby="match-form-heading"
          style={{
            background: tC.card, border: `1px solid ${tC.border}`, borderRadius: 20,
            padding: "clamp(24px, 3vw, 36px)",
          }}>
          <h3 id="match-form-heading" style={{
            fontFamily: tF.display, fontSize: 22, fontWeight: 600,
            color: tC.text, marginBottom: 6, letterSpacing: "0.01em",
          }}>
            Matching de corredores
          </h3>
          <p style={{ fontSize: 14, color: tC.textSoft, marginBottom: 26, lineHeight: 1.6 }}>
            Completá tus datos y te contactamos con corredores compatibles.
            Tu información se comparte solo con tu consentimiento.
          </p>

          {submitted ? (
            <div role="status" style={{
              padding: "32px 20px", textAlign: "center",
              border: `1.5px solid ${tC.green}`, borderRadius: 14,
              background: "rgba(134,239,172,0.08)",
            }}>
              <div aria-hidden="true" style={{ fontSize: 40, marginBottom: 12 }}>🎉</div>
              <div style={{ fontFamily: tF.display, fontSize: 20, color: tC.text, marginBottom: 8 }}>
                ¡Listo! Te buscamos compañeros.
              </div>
              <p style={{ color: tC.textSoft, fontSize: 14, lineHeight: 1.6 }}>
                Te enviamos un email cuando encontremos al menos 3 corredores compatibles.
              </p>
            </div>
          ) : (
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <Field label="Tu ritmo promedio (min/km)" id="m-pace">
                <select id="m-pace" required value={form.pace}
                  onChange={e => setForm({ ...form, pace: e.target.value })}>
                  <option value="">Seleccioná tu ritmo</option>
                  <option value="4-5">4:00 — 5:00 min/km (rápido)</option>
                  <option value="5-6">5:00 — 6:00 min/km (intermedio)</option>
                  <option value="6-7">6:00 — 7:00 min/km (cómodo)</option>
                  <option value="7+">7:00+ min/km (tranqui)</option>
                </select>
              </Field>
              <Field label="¿Dónde entrenás?" id="m-zone">
                <input id="m-zone" required type="text"
                  placeholder="Ej: Neuquén Capital, Cipolletti, Plottier…"
                  value={form.zone}
                  onChange={e => setForm({ ...form, zone: e.target.value })} />
              </Field>
              <Field label="¿Cuándo preferís entrenar?" id="m-sched">
                <select id="m-sched" required value={form.schedule}
                  onChange={e => setForm({ ...form, schedule: e.target.value })}>
                  <option value="">Seleccioná tu horario</option>
                  <option value="manana">Mañanas (antes de las 9)</option>
                  <option value="mediodia">Mediodía (12 a 14)</option>
                  <option value="tarde">Tardes (17 a 20)</option>
                  <option value="finde">Solo fines de semana</option>
                </select>
              </Field>
              <label htmlFor="m-consent" style={{
                display: "flex", gap: 10, alignItems: "flex-start", cursor: "pointer",
                fontSize: 13, color: tC.textSoft, lineHeight: 1.5,
                padding: "8px 0",
              }}>
                <input id="m-consent" type="checkbox" required
                  checked={form.consent}
                  onChange={e => setForm({ ...form, consent: e.target.checked })}
                  style={{ width: 20, height: 20, marginTop: 1, accentColor: tC.sunset, flexShrink: 0 }} />
                <span>
                  Acepto compartir mi zona, ritmo y horario con otros corredores inscriptos.
                  Puedo desactivar mi participación en cualquier momento.
                </span>
              </label>
              <button type="submit" className="cta-btn"
                style={{ width: "100%", justifyContent: "center", marginTop: 6 }}>
                Encontrar compañeros
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
                  <line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>
                </svg>
              </button>
            </div>
          )}
        </form>
      </div>
    </TSection>
  );
}

function Field({ label, id, children }) {
  return (
    <div>
      <label htmlFor={id} style={{
        fontSize: 12, color: tC.textSoft, fontWeight: 700,
        marginBottom: 8, display: "block",
        letterSpacing: "0.06em", textTransform: "uppercase",
        fontFamily: tF.mono,
      }}>{label}</label>
      {children}
    </div>
  );
}

window.LTTimeline = Timeline;
window.LTMatching = Matching;