/* ─── CTA + FOOTER + APP ─── */
const { C: aC, FONTS: aF } = window.LT;

function Inscription() {
  return (
    <section id="inscripcion" aria-labelledby="ins-title" style={{
      padding: "clamp(64px, 9vw, 112px) clamp(20px, 4vw, 32px)",
      background: `
        radial-gradient(ellipse 70% 50% at 50% 50%, rgba(245,155,60,0.10) 0%, transparent 65%),
        ${aC.night}
      `,
      textAlign: "center", position: "relative",
    }}>
      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <span style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          fontSize: 12, fontWeight: 700, letterSpacing: "0.18em",
          textTransform: "uppercase", color: aC.sunsetSoft, fontFamily: aF.mono,
          marginBottom: 16, background: "rgba(245,155,60,0.12)",
          padding: "6px 14px", borderRadius: 99,
          border: "1px solid rgba(245,155,60,0.25)",
        }}>
          <span aria-hidden="true" style={{ width: 6, height: 6, borderRadius: "50%", background: aC.sunset }} />
          Tu lugar te espera
        </span>
        <h2 id="ins-title" style={{
          fontFamily: aF.display, fontSize: "clamp(44px, 7.5vw, 80px)", fontWeight: 700,
          color: aC.text, lineHeight: 0.92, margin: "0 0 22px", textTransform: "uppercase",
          letterSpacing: "-0.025em",
        }}>
          Inscribite<br/>
          <span style={{
            background: `linear-gradient(135deg, ${aC.sunset}, ${aC.ember} 60%, ${aC.sunsetSoft})`,
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          }}>ahora</span>
        </h2>
        <p style={{ color: aC.textSoft, fontSize: 17, lineHeight: 1.7, maxWidth: 520, margin: "0 auto 28px", textWrap: "pretty" }}>
          Elegí tu distancia, completá tus datos y asegurá tu lugar en la 5ª edición de Love Trail.
        </p>

        <div style={{
          display: "inline-grid",
          gridTemplateColumns: "1fr auto 1fr",
          gap: 24, alignItems: "center",
          background: aC.card, border: `1px solid ${aC.border}`,
          borderRadius: 18, padding: "24px 32px", margin: "20px auto",
          textAlign: "center", maxWidth: 540,
        }}>
          <div>
            <div aria-hidden="true" style={{ fontSize: 22, marginBottom: 4 }}>💳</div>
            <div style={{ fontSize: 11, color: aC.textSoft, fontFamily: aF.mono, letterSpacing: "0.1em", marginBottom: 6 }}>
              MERCADO PAGO
            </div>
            <div style={{ fontFamily: aF.display, fontSize: 22, fontWeight: 700, color: aC.text }}>Precio full</div>
            <div style={{ fontSize: 12, color: aC.textMuted, marginTop: 2 }}>Confirmación inmediata</div>
          </div>
          <div aria-hidden="true" style={{ width: 1, height: 60, background: aC.border }} />
          <div>
            <div aria-hidden="true" style={{ fontSize: 22, marginBottom: 4 }}>🏦</div>
            <div style={{ fontSize: 11, color: aC.green, fontFamily: aF.mono, letterSpacing: "0.1em", marginBottom: 6 }}>
              TRANSFERENCIA
            </div>
            <div style={{ fontFamily: aF.display, fontSize: 22, fontWeight: 700, color: aC.green }}>20% OFF</div>
            <div style={{ fontSize: 12, color: aC.textMuted, marginTop: 2 }}>Verificación 72 hs</div>
          </div>
        </div>

        <div style={{ marginTop: 28, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <button className="cta-btn" style={{ fontSize: 17, padding: "18px 44px" }}>
            Inscribite ahora
            <svg width="18" height="18" 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>

        <p style={{ fontSize: 12, color: aC.textSoft, marginTop: 24, lineHeight: 1.6, maxWidth: 520, margin: "24px auto 0" }}>
          Al inscribirte aceptás los{" "}
          <a href="#" style={{ color: aC.sunsetSoft, textDecoration: "underline" }}>Términos</a>,
          el <a href="#" style={{ color: aC.sunsetSoft, textDecoration: "underline" }}>Deslinde</a> y
          la <a href="#" style={{ color: aC.sunsetSoft, textDecoration: "underline" }}>Política de Privacidad</a>.
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      background: aC.night, borderTop: `1px solid ${aC.border}`,
      padding: "clamp(48px, 6vw, 72px) clamp(20px, 4vw, 32px) 32px",
    }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
          gap: 40, marginBottom: 48,
        }}>
          <div style={{ gridColumn: "span 1", minWidth: 220 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <span aria-hidden="true" style={{
                width: 32, height: 32, borderRadius: 8,
                background: `linear-gradient(135deg, ${aC.sunset}, ${aC.ember})`,
                display: "grid", placeItems: "center",
                fontFamily: aF.display, fontSize: 18, fontWeight: 700, color: aC.night,
              }}>L</span>
              <span style={{
                fontFamily: aF.display, fontSize: 22, fontWeight: 700, color: aC.text,
                letterSpacing: "0.06em", textTransform: "uppercase",
              }}>
                Love<span style={{ color: aC.sunset, marginLeft: 2 }}>Trail</span>
              </span>
            </div>
            <p style={{ fontSize: 14, color: aC.textSoft, lineHeight: 1.7, maxWidth: 280 }}>
              Una carrera de trail running que nació del amor por Las Bardas
              y la comunidad de corredores de la Patagonia.
            </p>
          </div>
          {[
            { h: "Carrera",    items: ["Distancias", "Recorrido", "Reglamento", "Resultados 2025"] },
            { h: "Comunidad",  items: ["Matching", "Galería 2025", "Playlist", "Grupos"] },
            { h: "Legal",      items: ["Términos y Condiciones", "Política de Privacidad", "Deslinde", "Botón de Arrepentimiento"] },
          ].map((col, i) => (
            <div key={i}>
              <h4 style={{
                fontFamily: aF.mono, fontSize: 12, fontWeight: 700,
                color: aC.sunsetSoft, letterSpacing: "0.18em",
                marginBottom: 18, textTransform: "uppercase",
              }}>{col.h}</h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {col.items.map(l => (
                  <li key={l} style={{ marginBottom: 12 }}>
                    <a href="#" style={{
                      fontSize: 14, color: aC.textSoft, textDecoration: "none",
                      transition: "color 0.2s",
                    }}
                    onMouseEnter={e => e.target.style.color = aC.sunsetSoft}
                    onMouseLeave={e => e.target.style.color = aC.textSoft}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          borderTop: `1px solid ${aC.border}`, paddingTop: 24,
          display: "flex", justifyContent: "space-between",
          alignItems: "center", flexWrap: "wrap", gap: 16,
        }}>
          <span style={{ fontSize: 12, color: aC.textSoft }}>
            © 2026 Love Trail · Las Bardas, Plottier · Neuquén, Argentina
          </span>
          <div style={{ display: "flex", gap: 20 }}>
            {["Instagram", "Facebook", "YouTube", "Strava"].map(s => (
              <a key={s} href="#" aria-label={s}
                style={{
                  fontSize: 12, color: aC.textSoft,
                  textDecoration: "none", transition: "color 0.2s",
                  fontFamily: aF.mono, letterSpacing: "0.08em",
                }}
                onMouseEnter={e => e.target.style.color = aC.sunsetSoft}
                onMouseLeave={e => e.target.style.color = aC.textSoft}>{s}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ── APP ── */
function App() {
  const [selectedDist, setSelectedDist] = React.useState(0);
  const Navbar = window.LTNavbar;
  const Hero = window.LTHero;
  const Distances = window.LTDistances;
  const Route = window.LTRoute;
  const Timeline = window.LTTimeline;
  const Matching = window.LTMatching;
  const Testimonials = window.LTTestimonials;
  const Sponsors = window.LTSponsors;
  const FAQ = window.LTFAQ;

  return (
    <div style={{ background: aC.night, color: aC.text, fontFamily: aF.body, overflowX: "hidden" }}>
      <Navbar />
      <main id="main">
        <Hero />
        <Distances selected={selectedDist} setSelected={setSelectedDist} />
        <Route selected={selectedDist} setSelected={setSelectedDist} />
        <Timeline />
        <Matching />
        <Testimonials />
        <Sponsors />
        <FAQ />
        <Inscription />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);