// ═══════════════════════════════════════════════════════════
// Sponsors / Allies sections: Metrics, Tiers, By-Mod,
// By-Surface, Contact
// ═══════════════════════════════════════════════════════════

// ──────────────────── Metrics · Reach ────────────────────
function MetricsSection({ item, num }) {
  const { lang, tx } = useLang();
  const R = D.REACH;

  const platforms = [
    {
      p: "Instagram",
      h: R.instagram.handle,
      n: R.instagram.followers,
      l: lang === "es" ? "Seguidores" : "Followers",
      sub: `${(R.instagram.reach30d / 1000).toFixed(0)}K ${lang === "es" ? "alcance / mes" : "reach / mo"}`,
      color: "#ec4899",
    },
    {
      p: "TikTok",
      h: R.tiktok.handle,
      n: R.tiktok.followers,
      l: lang === "es" ? "Seguidores" : "Followers",
      sub: `${(R.tiktok.views60d / 1000).toFixed(0)}K ${lang === "es" ? "views 60d" : "views 60d"}`,
      color: "#22c55e",
    },
    {
      p: "Facebook",
      h: R.facebook.handle,
      n: R.facebook.followers,
      l: lang === "es" ? "Seguidores" : "Followers",
      sub: `${(R.facebook.reach30d / 1000).toFixed(0)}K ${lang === "es" ? "alcance / mes" : "reach / mo"}`,
      color: "#3b82f6",
    },
    {
      p: "YouTube",
      h: R.youtube.handle,
      n: R.youtube.followers,
      l: lang === "es" ? "Suscriptores" : "Subscribers",
      sub: `${(R.youtube.totalViews / 1000000).toFixed(1)}M ${lang === "es" ? "views totales" : "total views"}`,
      color: "#ef4444",
    },
    {
      p: "Spotify",
      h: R.spotify.handle,
      n: R.spotify.listeners,
      l: lang === "es" ? "Oyentes / mes" : "Listeners / mo",
      sub: lang === "es" ? "Podcast oficial" : "Official podcast",
      color: "#22c55e",
    },
    {
      p: "Web",
      h: R.web.handle,
      n: R.web.visits30d,
      l: lang === "es" ? "Visitas 30d" : "Visits 30d",
      sub: "rideandconquer.com",
      color: "#c6ff1e",
    },
  ];

  return (
    <SectionShell
      id={item.id}
      num={num}
      kicker={lang === "es" ? "Aliados · Métricas" : "Allies · Metrics"}
      title={lang === "es" ? "Lo que mueve <em>Ride & Conquer</em>" : "What <em>Ride & Conquer</em> moves"}
      pitch={
        lang === "es"
          ? "Tu marca, frente a una comunidad real, segmentada y comprometida. Datos del Media Kit 2025 oficial."
          : "Your brand, in front of a real, segmented, engaged community. Numbers from the official 2025 Media Kit."
      }
      status="active"
    >
      {/* Total followers banner */}
      <div
        style={{
          textAlign: "center",
          padding: "40px 24px",
          background:
            "linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, var(--bg-card)) 0%, var(--bg-card) 100%)",
          border: "1px solid var(--accent)",
          borderRadius: 14,
          marginBottom: 24,
        }}
      >
        <div className="mono" style={{ color: "var(--accent)", marginBottom: 10 }}>
          {lang === "es" ? "ALCANCE TOTAL ACUMULADO" : "TOTAL CUMULATIVE REACH"}
        </div>
        <div
          style={{
            fontFamily: "var(--f-display)",
            fontWeight: 900,
            fontStyle: "italic",
            fontSize: "clamp(60px, 9vw, 132px)",
            lineHeight: 0.9,
            letterSpacing: "-0.02em",
            color: "var(--text)",
          }}
        >
          <CountUp to={R.totalFollowers} suffix="+" />
        </div>
        <div
          style={{
            fontFamily: "var(--f-mono)",
            fontSize: 12,
            color: "var(--text-mute)",
            letterSpacing: ".2em",
            marginTop: 10,
            textTransform: "uppercase",
          }}
        >
          {lang === "es"
            ? "Seguidores en Instagram + TikTok + Facebook + YouTube"
            : "Followers across Instagram + TikTok + Facebook + YouTube"}
        </div>
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
          borderRadius: 14,
          overflow: "hidden",
          marginBottom: 24,
        }}
      >
        {platforms.map((p) => (
          <div
            key={p.p}
            style={{
              background: "var(--bg-card)",
              padding: "24px 22px",
              display: "flex",
              flexDirection: "column",
              gap: 6,
            }}
          >
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span
                style={{
                  fontFamily: "var(--f-mono)",
                  fontSize: 11,
                  letterSpacing: ".2em",
                  color: p.color,
                  textTransform: "uppercase",
                }}
              >
                {p.p}
              </span>
              <span style={{ fontFamily: "var(--f-mono)", fontSize: 10, color: "var(--text-mute)" }}>{p.h}</span>
            </div>
            <div
              style={{
                fontFamily: "var(--f-display)",
                fontWeight: 900,
                fontStyle: "italic",
                fontSize: 48,
                lineHeight: 0.95,
                color: "var(--text)",
              }}
            >
              <CountUp to={p.n} />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span
                style={{
                  fontFamily: "var(--f-mono)",
                  fontSize: 10,
                  letterSpacing: ".15em",
                  color: "var(--text-mute)",
                  textTransform: "uppercase",
                }}
              >
                {p.l}
              </span>
              <span style={{ fontSize: 11, color: "var(--text-dim)" }}>{p.sub}</span>
            </div>
          </div>
        ))}
      </div>

      {/* Audience breakdown */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14, marginBottom: 18 }}>
        <div className="card">
          <div className="mono" style={{ color: "var(--accent)", marginBottom: 14 }}>
            {lang === "es" ? "GÉNERO" : "GENDER"}
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 10 }}>
            <div
              style={{
                fontFamily: "var(--f-display)",
                fontWeight: 900,
                fontStyle: "italic",
                fontSize: 60,
                color: "var(--accent)",
                lineHeight: 1,
              }}
            >
              {R.audience.genderMen}%
            </div>
            <div style={{ fontSize: 13, color: "var(--text-dim)" }}>{lang === "es" ? "hombres" : "men"}</div>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <div
              style={{
                fontFamily: "var(--f-display)",
                fontWeight: 900,
                fontStyle: "italic",
                fontSize: 30,
                color: "var(--text)",
                lineHeight: 1,
              }}
            >
              {R.audience.genderWomen}%
            </div>
            <div style={{ fontSize: 13, color: "var(--text-dim)" }}>{lang === "es" ? "mujeres" : "women"}</div>
          </div>
        </div>
        <div className="card">
          <div className="mono" style={{ color: "var(--accent)", marginBottom: 14 }}>
            {lang === "es" ? "EDAD PRINCIPAL" : "MAIN AGE"}
          </div>
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontStyle: "italic",
              fontSize: 42,
              color: "var(--accent)",
              lineHeight: 1,
            }}
          >
            {R.audience.ageTop}
          </div>
          <div style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 8, lineHeight: 1.4 }}>
            {lang === "es"
              ? "El piloto offroad activo: con poder adquisitivo, estable, dispuesto a invertir en su pasión."
              : "The active offroad rider: with purchasing power, stable, willing to invest in their passion."}
          </div>
        </div>
        <div className="card">
          <div className="mono" style={{ color: "var(--accent)", marginBottom: 14 }}>
            {lang === "es" ? "AÑOS ACTIVOS" : "YEARS ACTIVE"}
          </div>
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontStyle: "italic",
              fontSize: 60,
              color: "var(--accent)",
              lineHeight: 1,
            }}
          >
            {R.classes.years}+
          </div>
          <div style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 8 }}>
            {lang === "es" ? "Operación continua, base de datos sólida." : "Continuous operation, solid customer base."}
          </div>
        </div>
      </div>

      {/* Geographic split */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginBottom: 18 }}>
        <div className="card">
          <div className="mono" style={{ color: "var(--accent)", marginBottom: 14 }}>
            {lang === "es" ? "TOP PAÍSES · ONLINE" : "TOP COUNTRIES · ONLINE"}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {R.audience.topCountries.map((c, i) => (
              <div key={c.c} style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ minWidth: 80, fontSize: 13, color: "var(--text)" }}>{c.c}</div>
                <div style={{ flex: 1, height: 8, background: "var(--bg-2)", borderRadius: 4, overflow: "hidden" }}>
                  <div
                    style={{
                      height: "100%",
                      width: `${(c.pct / 46) * 100}%`,
                      background: "var(--accent)",
                      borderRadius: 4,
                    }}
                  />
                </div>
                <div
                  style={{
                    minWidth: 36,
                    fontFamily: "var(--f-mono)",
                    fontSize: 12,
                    color: "var(--accent)",
                    textAlign: "right",
                  }}
                >
                  {c.pct}%
                </div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="mono" style={{ color: "var(--accent)", marginBottom: 14 }}>
            {lang === "es" ? "ESCUELA PRESENCIAL · UBICACIÓN" : "IN-PERSON SCHOOL · LOCATION"}
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            {R.audience.inPerson.map((l) => (
              <div
                key={l}
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 10,
                  padding: "8px 12px",
                  background: "var(--bg-2)",
                  borderRadius: 6,
                }}
              >
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }} />
                <span style={{ fontSize: 13, color: "var(--text)" }}>{l}</span>
              </div>
            ))}
          </div>
          <div
            style={{
              marginTop: 14,
              fontSize: 11,
              color: "var(--text-mute)",
              fontFamily: "var(--f-mono)",
              letterSpacing: ".15em",
            }}
          >
            {lang === "es" ? "BASE EN MONTERREY · NUEVO LEÓN" : "HQ IN MONTERREY · NUEVO LEÓN"}
          </div>
        </div>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 14 }}>
        <div className="card">
          <div className="mono">{lang === "es" ? "RIDERS FORMADOS" : "RIDERS TRAINED"}</div>
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontStyle: "italic",
              fontSize: 60,
              color: "var(--accent)",
              lineHeight: 1,
              marginTop: 6,
            }}
          >
            <CountUp to={R.classes.ridersTrained} suffix="+" />
          </div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            {lang === "es" ? "Cada uno ha pisado el ecosistema." : "Every one has stepped into the ecosystem."}
          </div>
        </div>
        <div className="card">
          <div className="mono">{lang === "es" ? "HORAS DE CLASE" : "CLASS HOURS"}</div>
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontStyle: "italic",
              fontSize: 60,
              color: "var(--accent)",
              lineHeight: 1,
              marginTop: 6,
            }}
          >
            <CountUp to={R.classes.hoursTaught} />
          </div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            {lang === "es" ? "Tiempo real frente a la comunidad." : "Real time in front of the community."}
          </div>
        </div>
        <div className="card">
          <div className="mono">{lang === "es" ? "MIEMBROS DIGITALES" : "DIGITAL MEMBERS"}</div>
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontStyle: "italic",
              fontSize: 60,
              color: "var(--accent)",
              lineHeight: 1,
              marginTop: 6,
            }}
          >
            {R.community.members}
          </div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            {R.community.active} {lang === "es" ? "activos · " : "active · "}
            {R.community.retention} {lang === "es" ? "retención" : "retention"}
          </div>
        </div>
      </div>

      <div
        style={{
          marginTop: 24,
          padding: "20px 24px",
          background: "var(--bg-card)",
          border: "1px dashed var(--accent)",
          borderRadius: 10,
        }}
      >
        <div
          style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 18, flexWrap: "wrap" }}
        >
          <div>
            <div className="mono" style={{ color: "var(--accent)" }}>
              {lang === "es" ? "PARA SPONSORS" : "FOR SPONSORS"}
            </div>
            <div style={{ fontFamily: "var(--f-display)", fontWeight: 800, fontSize: 20, marginTop: 2 }}>
              {lang === "es"
                ? "Recibe el media kit completo con segmentación por modalidad, geo y nivel."
                : "Get the full media kit with segmentation by discipline, geo and level."}
            </div>
          </div>
          <a className="btn btn-primary" href="presentaciones/Media-Kit.html">
            {lang === "es" ? "Ver media kit" : "View media kit"} →
          </a>
        </div>
      </div>
    </SectionShell>
  );
}

// ──────────────────── Sponsor Tiers ────────────────────
function TiersSection({ item, num }) {
  const { lang, tx } = useLang();
  return (
    <SectionShell
      id={item.id}
      num={num}
      kicker={lang === "es" ? "Aliados · Paquetes" : "Allies · Packages"}
      title={lang === "es" ? "Únete a la <em>manada</em>" : "Join the <em>pack</em>"}
      pitch={
        lang === "es"
          ? "Cuatro niveles. Todo el ecosistema. Activación cruzada en cada superficie del universo."
          : "Four levels. The whole ecosystem. Cross-activation on every surface of the universe."
      }
      status="active"
    >
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 14 }}>
        {D.SPONSOR_TIERS.map((t) => (
          <div
            key={t.id}
            style={{
              padding: "24px 22px 24px",
              border: t.featured ? "2px solid var(--accent)" : "1px solid var(--line)",
              borderRadius: 12,
              background: t.featured
                ? `linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, var(--bg-card)) 0%, var(--bg-card) 100%)`
                : "var(--bg-card)",
              position: "relative",
              boxShadow: t.featured ? "0 30px 80px -30px var(--accent-glow)" : "none",
            }}
          >
            {t.featured && (
              <div
                style={{
                  position: "absolute",
                  top: -12,
                  left: 22,
                  padding: "4px 10px",
                  background: "var(--accent)",
                  color: "#000",
                  fontFamily: "var(--f-display)",
                  fontWeight: 900,
                  fontSize: 10,
                  letterSpacing: ".2em",
                }}
              >
                ★ {lang === "es" ? "RECOMENDADO" : "RECOMMENDED"}
              </div>
            )}
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
              <div style={{ width: 14, height: 14, borderRadius: 3, background: t.color }} />
              <div
                style={{
                  fontFamily: "var(--f-mono)",
                  fontSize: 10,
                  color: "var(--text-mute)",
                  letterSpacing: ".2em",
                  textTransform: "uppercase",
                }}
              >
                TIER {t.id.toUpperCase()}
              </div>
            </div>
            <div
              style={{
                fontFamily: "var(--f-display)",
                fontWeight: 900,
                fontStyle: "italic",
                fontSize: 36,
                lineHeight: 1,
                textTransform: "uppercase",
                color: t.color,
              }}
            >
              {tx(t.name)}
            </div>
            <div style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 6, lineHeight: 1.4 }}>{tx(t.tagline)}</div>

            <div style={{ marginTop: 18, marginBottom: 14, paddingTop: 14, borderTop: "1px solid var(--line)" }}>
              <div
                style={{
                  fontFamily: "var(--f-display)",
                  fontWeight: 900,
                  fontStyle: "italic",
                  fontSize: t.price ? 42 : 26,
                  color: "var(--text)",
                  lineHeight: 1,
                }}
              >
                {t.price ? `$${(t.price / 1000).toFixed(0)}K` : lang === "es" ? "A definir" : "TBD"}
                {t.price && (
                  <small style={{ fontSize: 12, color: "var(--text-dim)", fontWeight: 600, marginLeft: 6 }}>
                    mxn / {lang === "es" ? "año" : "year"}
                  </small>
                )}
              </div>
            </div>

            <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
              {tx(t.perks).map((p, i) => (
                <li
                  key={i}
                  style={{
                    fontSize: 13,
                    color: "var(--text-dim)",
                    paddingLeft: 18,
                    position: "relative",
                    lineHeight: 1.5,
                  }}
                >
                  <span style={{ position: "absolute", left: 0, color: t.color, fontWeight: 900 }}>▸</span>
                  {p}
                </li>
              ))}
            </ul>

            <a
              href="#contact"
              className="btn btn-sm"
              style={{
                marginTop: 18,
                display: "flex",
                justifyContent: "center",
                background: t.featured ? "var(--accent)" : "transparent",
                color: t.featured ? "#000" : "var(--text)",
                border: `1px solid ${t.featured ? "var(--accent)" : "var(--line-2)"}`,
              }}
            >
              {lang === "es" ? "Activar este tier" : "Activate this tier"} →
            </a>
          </div>
        ))}
      </div>
    </SectionShell>
  );
}

// ──────────────────── By Modality ────────────────────
function ByModSection({ item, num }) {
  const { lang, tx } = useLang();
  return (
    <SectionShell
      id={item.id}
      num={num}
      kicker={lang === "es" ? "Aliados · Por modalidad" : "Allies · Per discipline"}
      title={lang === "es" ? "Patrocina <em>una modalidad</em>" : "Sponsor <em>one discipline</em>"}
      pitch={
        lang === "es"
          ? "Tu moto, tu marca, tu gear — en cada video, cada drill, cada lección de la modalidad que elijas. Naming completo del curso. 'Curso de Enduro presentado por [Marca]'."
          : "Your bike, your brand, your gear — in every video, drill and lesson of the discipline you pick. Full course naming: 'Enduro course presented by [Brand]'."
      }
      status="active"
    >
      <div className="grid-3">
        {D.MODS.filter((m) => !["FP", "PA"].includes(m.code)).map((m) => (
          <div
            key={m.id}
            className="card"
            style={{
              borderLeft: `4px solid ${m.color}`,
              position: "relative",
              overflow: "hidden",
            }}
          >
            {/* Available stamp */}
            <div
              style={{
                position: "absolute",
                top: 14,
                right: 14,
                fontFamily: "var(--f-mono)",
                fontSize: 9,
                color: "#22c55e",
                letterSpacing: ".2em",
              }}
            >
              ● {lang === "es" ? "DISPONIBLE" : "AVAILABLE"}
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <div
                className="card-icon"
                style={{ background: `color-mix(in oklab, ${m.color} 16%, transparent)`, color: m.color }}
              >
                {m.icon}
              </div>
              <div>
                <div className="mono" style={{ color: m.color }}>
                  {m.code}
                </div>
                <div className="card-title" style={{ fontSize: 18, marginBottom: 0 }}>
                  {tx(m.name)}
                </div>
              </div>
            </div>

            <div style={{ padding: "12px 14px", background: "var(--bg-2)", borderRadius: 6, marginBottom: 14 }}>
              <div className="mono" style={{ fontSize: 9, color: "var(--text-mute)", marginBottom: 4 }}>
                {lang === "es" ? "INCLUYE" : "INCLUDES"}
              </div>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 4 }}>
                <li style={{ fontSize: 12, color: "var(--text-dim)" }}>
                  ▸ {lang === "es" ? "Naming del curso completo" : "Full course naming"}
                </li>
                <li style={{ fontSize: 12, color: "var(--text-dim)" }}>
                  ▸ {lang === "es" ? `Tu moto en ${m.skills} videos` : `Your bike in ${m.skills} videos`}
                </li>
                <li style={{ fontSize: 12, color: "var(--text-dim)" }}>
                  ▸ {lang === "es" ? "Branding en skill tree" : "Branding on skill tree"}
                </li>
                <li style={{ fontSize: 12, color: "var(--text-dim)" }}>
                  ▸ {lang === "es" ? "Demo days exclusivos" : "Exclusive demo days"}
                </li>
                <li style={{ fontSize: 12, color: "var(--text-dim)" }}>
                  ▸ {lang === "es" ? "Activación en clínicas" : "Activation in clinics"}
                </li>
              </ul>
            </div>

            <div style={{ padding: "10px 12px", border: "1px dashed var(--line-2)", borderRadius: 6 }}>
              <div className="mono" style={{ fontSize: 9, color: "var(--text-mute)", marginBottom: 2 }}>
                {lang === "es" ? "MARCAS IDEALES" : "IDEAL BRANDS"}
              </div>
              <div style={{ fontSize: 12, color: "var(--text)" }}>{tx(m.sponsorIdea)}</div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 14 }}>
              <div
                style={{
                  fontFamily: "var(--f-display)",
                  fontWeight: 900,
                  fontStyle: "italic",
                  fontSize: 22,
                  color: m.color,
                }}
              >
                $180K{" "}
                <small style={{ fontSize: 11, color: "var(--text-dim)" }}>mxn / {lang === "es" ? "año" : "year"}</small>
              </div>
              <a href="#contact" className="btn btn-sm btn-outline" style={{ borderColor: m.color, color: m.color }}>
                →
              </a>
            </div>
          </div>
        ))}
      </div>
    </SectionShell>
  );
}

// ──────────────────── By Surface ────────────────────
function BySurfaceSection({ item, num }) {
  const { lang, tx } = useLang();
  const surfaces = D.UNIVERSE.filter((u) => u.sponsor && u.group !== "aliados");
  return (
    <SectionShell
      id={item.id}
      num={num}
      kicker={lang === "es" ? "Aliados · Por superficie" : "Allies · Per surface"}
      title={lang === "es" ? "<em>29 superficies</em>. Elige la tuya." : "<em>29 surfaces</em>. Pick yours."}
      pitch={
        lang === "es"
          ? "Cada pieza del universo tiene un sponsor ideal. Algunas se pueden combinar. Otras son exclusivas. Todas son negociables."
          : "Every piece of the universe has an ideal sponsor. Some combine. Others are exclusive. All are negotiable."
      }
      status="active"
    >
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px,1fr))", gap: 12 }}>
        {surfaces.map((s) => (
          <div key={s.id} className="surface-card">
            <div className="available">● {lang === "es" ? "ABIERTO" : "OPEN"}</div>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div className="ico">{s.icon}</div>
              <div className="nm">{tx(s.title)}</div>
            </div>
            <div className="sp">{tx(s.sponsor)}</div>
            <a
              href={`#${s.id}`}
              style={{
                fontFamily: "var(--f-mono)",
                fontSize: 10,
                letterSpacing: ".15em",
                color: "var(--accent)",
                marginTop: 4,
              }}
            >
              {lang === "es" ? "VER LA SUPERFICIE" : "SEE THE SURFACE"} →
            </a>
          </div>
        ))}
      </div>
    </SectionShell>
  );
}

// ──────────────────── Contact ────────────────────
function ContactSection({ item, num }) {
  const { lang, tx } = useLang();
  return (
    <SectionShell
      id={item.id}
      num={num}
      kicker={lang === "es" ? "Contacto · Siguiente paso" : "Contact · Next step"}
      title={lang === "es" ? "<em>Vamos.</em>" : "<em>Let's go.</em>"}
      pitch={
        lang === "es"
          ? "Si llegaste hasta acá, ya entendiste de qué va Ride & Conquer. Ahora elige cómo quieres entrar al ecosistema."
          : "If you made it this far, you already get Ride & Conquer. Now pick how you want to enter the ecosystem."
      }
      status="active"
    >
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px,1fr))", gap: 14 }}>
        <a
          href="https://wa.me/528130776983"
          target="_blank"
          className="card interactive"
          style={{ textDecoration: "none" }}
        >
          <div className="card-icon" style={{ background: "#22c55e22", color: "#22c55e" }}>
            💬
          </div>
          <div className="card-title">WhatsApp</div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>+52 81 3077 6983</div>
          <div
            style={{
              fontFamily: "var(--f-mono)",
              fontSize: 11,
              color: "var(--accent)",
              letterSpacing: ".15em",
              marginTop: 14,
            }}
          >
            {lang === "es" ? "RESPUESTA EN 24H" : "REPLY WITHIN 24H"} →
          </div>
        </a>
        <a href="#" className="card interactive">
          <div className="card-icon">📞</div>
          <div className="card-title">{lang === "es" ? "Agendar llamada" : "Book a call"}</div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            {lang === "es" ? "30 minutos. Pitch + Q&A." : "30 minutes. Pitch + Q&A."}
          </div>
          <div
            style={{
              fontFamily: "var(--f-mono)",
              fontSize: 11,
              color: "var(--accent)",
              letterSpacing: ".15em",
              marginTop: 14,
            }}
          >
            {lang === "es" ? "CALENDLY / GOOGLE MEET" : "CALENDLY / GOOGLE MEET"} →
          </div>
        </a>
        <a href="#membership" className="card interactive">
          <div className="card-icon">🎫</div>
          <div className="card-title">{lang === "es" ? "Unirme a la membresía" : "Join the membership"}</div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            {lang === "es" ? "Si eres piloto y quieres entrar a la manada." : "If you're a rider and want in."}
          </div>
          <div
            style={{
              fontFamily: "var(--f-mono)",
              fontSize: 11,
              color: "var(--accent)",
              letterSpacing: ".15em",
              marginTop: 14,
            }}
          >
            $349 / {lang === "es" ? "MES" : "MO"} →
          </div>
        </a>
        <a href="#tiers" className="card interactive" style={{ borderColor: "var(--accent)" }}>
          <div className="card-icon">★</div>
          <div className="card-title">{lang === "es" ? "Patrocinar el universo" : "Sponsor the universe"}</div>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            {lang === "es" ? "Marcas, distribuidores, inversionistas." : "Brands, distributors, investors."}
          </div>
          <div
            style={{
              fontFamily: "var(--f-mono)",
              fontSize: 11,
              color: "var(--accent)",
              letterSpacing: ".15em",
              marginTop: 14,
            }}
          >
            {lang === "es" ? "VER TIERS" : "SEE TIERS"} →
          </div>
        </a>
      </div>

      <div
        style={{
          marginTop: 30,
          padding: "24px 28px",
          background: "var(--bg-card)",
          border: "1px solid var(--line)",
          borderRadius: 10,
        }}
      >
        <div
          style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap", justifyContent: "space-between" }}
        >
          <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
            <SafeImg
              src="assets/heroes/portrait-89.jpg"
              alt=""
              style={{
                width: 80,
                height: 80,
                borderRadius: "50%",
                objectFit: "cover",
                border: "2px solid var(--accent)",
              }}
            />
            <div>
              <div className="mono" style={{ color: "var(--accent)" }}>
                {lang === "es" ? "FUNDADOR & COACH PRINCIPAL" : "FOUNDER & HEAD COACH"}
              </div>
              <div
                style={{
                  fontFamily: "var(--f-display)",
                  fontWeight: 900,
                  fontStyle: "italic",
                  fontSize: 28,
                  lineHeight: 1,
                  marginTop: 4,
                }}
              >
                TOÑO GONZÁLEZ
              </div>
              <div style={{ fontSize: 13, color: "var(--text-dim)", marginTop: 4 }}>
                Nuevo León, México ·{" "}
                {lang === "es"
                  ? "Disponible para reuniones presenciales y virtuales."
                  : "Available for in-person and virtual meetings."}
              </div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="https://wa.me/528130776983">
              WhatsApp →
            </a>
            <a className="btn btn-ghost" href="https://rideandconquer.com">
              rideandconquer.com
            </a>
          </div>
        </div>
      </div>

      {/* Final tape */}
      <div style={{ marginTop: 40 }}>
        <Tape
          items={[
            lang === "es" ? "RIDE YOUR FEAR" : "RIDE YOUR FEAR",
            lang === "es" ? "CONQUER YOUR LIMITS" : "CONQUER YOUR LIMITS",
            "®",
            lang === "es" ? "RIDE AND CONQUER" : "RIDE AND CONQUER",
            "🐺",
          ]}
        />
      </div>
    </SectionShell>
  );
}

// ──────────────────── Tech Stack & Build Status ────────────────────
function TechStackSection({ num = 6 }) {
  const { lang } = useLang();

  const stack = [
    {
      cat: "Frontend",
      items: [
        {
          n: "Next.js",
          v: "14 · App Router",
          d:
            lang === "es" ? "Framework React production-grade · SSR/ISR" : "Production-grade React framework · SSR/ISR",
        },
        {
          n: "TypeScript",
          v: "5.x",
          d: lang === "es" ? "Tipado estricto en todo el código" : "Strict typing across the codebase",
        },
        {
          n: "Tailwind CSS",
          v: "4.x",
          d: lang === "es" ? "Sistema de diseño tokenizado, mobile-first" : "Tokenized design system, mobile-first",
        },
      ],
      color: "#22c55e",
    },
    {
      cat: "Backend & Data",
      items: [
        { n: "Node.js", v: "20 LTS", d: lang === "es" ? "API + workers" : "API + workers" },
        {
          n: "PostgreSQL",
          v: "16",
          d: lang === "es" ? "Datos de usuarios, paquetes, RNCP, skill tree" : "User data, packs, RNCP, skill tree",
        },
        {
          n: "Stripe",
          v: "API 2024",
          d: lang === "es" ? "Suscripciones + pagos one-off" : "Subscriptions + one-off payments",
        },
      ],
      color: "#06b6d4",
    },
    {
      cat: "Mobile (Beta)",
      items: [
        {
          n: "React Native + Expo",
          v: "SDK 50",
          d: lang === "es" ? "App iOS/Android · GPS + métricas" : "iOS/Android app · GPS + metrics",
        },
        { n: "MapLibre GL", v: "5.x", d: lang === "es" ? "Mapas con tracks GPX" : "GPX track maps" },
        {
          n: "HealthKit / Google Fit",
          v: "",
          d: lang === "es" ? "Wearables: Apple Watch, Garmin, Wahoo" : "Wearables: Apple Watch, Garmin, Wahoo",
        },
      ],
      color: "#ec4899",
    },
    {
      cat: "Infra & DX",
      items: [
        { n: "Vercel", v: "Pro", d: lang === "es" ? "Edge + analytics" : "Edge + analytics" },
        { n: "Cloudflare R2", v: "", d: lang === "es" ? "Video storage + CDN" : "Video storage + CDN" },
        {
          n: "Mux",
          v: "Video API",
          d: lang === "es" ? "Streaming HLS · DRM opcional" : "HLS streaming · optional DRM",
        },
        {
          n: "Sentry · PostHog",
          v: "",
          d: lang === "es" ? "Observabilidad + product analytics" : "Observability + product analytics",
        },
      ],
      color: "#f59e0b",
    },
  ];

  return (
    <SectionShell
      id="techstack"
      num={num}
      kicker={lang === "es" ? "Inversionistas · Stack" : "Investors · Stack"}
      title={lang === "es" ? "Stack <em>técnico</em>" : "Tech <em>stack</em>"}
      pitch={
        lang === "es"
          ? "Construido con herramientas modernas, escalables y serias. El ecosistema corre sobre una base profesional, no sobre un Wix."
          : "Built with modern, scalable, serious tools. The ecosystem runs on a professional base, not on Wix."
      }
      status="active"
    >
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 14,
          marginBottom: 20,
        }}
      >
        {stack.map((s) => (
          <div key={s.cat} className="card" style={{ borderTop: `3px solid ${s.color}` }}>
            <div className="mono" style={{ color: s.color, marginBottom: 14 }}>
              {s.cat}
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {s.items.map((it) => (
                <div key={it.n}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 8 }}>
                    <span
                      style={{
                        fontFamily: "var(--f-display)",
                        fontWeight: 800,
                        fontSize: 15,
                        textTransform: "uppercase",
                        letterSpacing: ".01em",
                      }}
                    >
                      {it.n}
                    </span>
                    {it.v && (
                      <span
                        style={{
                          fontFamily: "var(--f-mono)",
                          fontSize: 10,
                          color: "var(--text-mute)",
                          letterSpacing: ".1em",
                        }}
                      >
                        {it.v}
                      </span>
                    )}
                  </div>
                  <div style={{ fontSize: 12, color: "var(--text-dim)", marginTop: 2, lineHeight: 1.45 }}>{it.d}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div
        className="card"
        style={{ borderColor: "var(--accent)", background: `color-mix(in oklab, var(--accent) 6%, var(--bg-card))` }}
      >
        <div className="mono" style={{ color: "var(--accent)", marginBottom: 8 }}>
          {lang === "es" ? "POR QUÉ ESTE STACK" : "WHY THIS STACK"}
        </div>
        <p style={{ fontSize: 13, color: "var(--text-dim)", lineHeight: 1.6 }}>
          {lang === "es"
            ? "Next.js + TypeScript + Tailwind es el stack más usado en producto digital serio en 2026. Escala a millones de usuarios, integra fácilmente con CMSs, sistemas de pago y video. Permite contratar talento sin reentrenar y vender o adquirir la plataforma sin penalización técnica."
            : "Next.js + TypeScript + Tailwind is the most-used serious product stack in 2026. Scales to millions of users, integrates easily with CMS, payments and video. Lets us hire talent without retraining and sell or acquire the platform without technical penalty."}
        </p>
      </div>
    </SectionShell>
  );
}

// ──────────────────── Current Sponsors & Collaborations ────────────────────
function CurrentSponsorsSection({ num = 5 }) {
  const { lang } = useLang();

  const blocks = [
    {
      tag: lang === "es" ? "COLABORACIÓN OFICIAL" : "OFFICIAL COLLABORATION",
      title: "Matsuri Honda",
      sub: lang === "es" ? "Moto Oficial Ride & Conquer" : "Official Ride & Conquer Bike",
      copy:
        lang === "es"
          ? "Apoyo en competencias de enduro, desarrollo deportivo y exposición de marca en condiciones reales de alto rendimiento."
          : "Support in enduro competitions, athletic development and brand exposure under real high-performance conditions.",
      brands: ["Matsuri Honda"],
      color: "#e60012", // honda red
      accent: "#fff",
      featured: true,
    },
    {
      tag: lang === "es" ? "COMPONENTES PARA LA MOTO" : "BIKE COMPONENTS",
      title: lang === "es" ? "Performance & Mantenimiento" : "Performance & Maintenance",
      sub: lang === "es" ? "Tracción · Lubricación · Protección" : "Traction · Lubrication · Protection",
      copy:
        lang === "es"
          ? "El rendimiento no es suerte. Es preparación, tracción y mantenimiento inteligente."
          : "Performance isn't luck. It's preparation, traction and smart maintenance.",
      brands: ["Plews Tyres", "Michelin", "Mitas", "Motul", "No Toil"],
      color: "#c6ff1e",
      accent: "#0a0a0a",
    },
    {
      tag: lang === "es" ? "EQUIPAMIENTO & ACCESORIOS" : "GEAR & ACCESSORIES",
      title: lang === "es" ? "Seguridad · Imagen · Performance" : "Safety · Image · Performance",
      sub: lang === "es" ? "El piloto es rendimiento, pero también imagen." : "The rider is performance — and image.",
      copy:
        lang === "es"
          ? "Desde protección hasta identidad visual y equipaje técnico, cada elemento forma parte de la experiencia profesional RNC."
          : "From protection to visual identity and technical luggage — every element is part of the professional RNC experience.",
      brands: ["ElevenNine Goggles", "Alpinestars · RaceStars", "BNG Graphics", "OGIO"],
      color: "#ffd700",
      accent: "#0a0a0a",
    },
    {
      tag: lang === "es" ? "SOPORTE TÉCNICO & TALLERES" : "TECHNICAL SUPPORT & WORKSHOPS",
      title: lang === "es" ? "Preparación de competencia" : "Race-grade preparation",
      sub: lang === "es" ? "Multimarca · Custom · Suspensiones" : "Multibrand · Custom · Suspensions",
      copy:
        lang === "es"
          ? "Detrás de cada piloto competitivo hay soporte técnico especializado: preparación, ajustes finos y optimización."
          : "Behind every competitive rider there's specialized technical support: prep, fine-tuning and optimization.",
      brands: ["RavenCo Multimarca", "Full Throttle Customs MTY", "WP · PG Racing Suspension"],
      color: "#22a3d8",
      accent: "#fff",
    },
    {
      tag: lang === "es" ? "NUTRICIÓN DEPORTIVA" : "SPORTS NUTRITION",
      title: "Runner Power",
      sub: lang === "es" ? "Energía · Recuperación · Rendimiento" : "Energy · Recovery · Performance",
      copy:
        lang === "es"
          ? "Socio oficial de nutrición. Porque la nutrición deportiva importa — let's do it together."
          : "Official nutrition partner. Because sports nutrition matters — let's do it together.",
      brands: ["Runner Power · est. 2013"],
      color: "#d63384",
      accent: "#fff",
    },
    {
      tag: lang === "es" ? "SOCIO ESTRATÉGICO" : "STRATEGIC PARTNER",
      title: "MotoTrack",
      sub: lang === "es" ? "Especialistas en pavimento" : "Pavement specialists",
      copy:
        lang === "es"
          ? "Ride & Conquer domina la tierra. MotoTrack domina el asfalto. Alianza estratégica para formación integral en cualquier superficie."
          : "Ride & Conquer dominates dirt. MotoTrack dominates asphalt. Strategic alliance for full-surface rider training.",
      brands: ["MotoTrack · Pista · Calle · Carretera · Doble Propósito"],
      color: "#ffd700",
      accent: "#0a0a0a",
    },
  ];

  return (
    <SectionShell
      id="current-sponsors"
      num={num}
      kicker={lang === "es" ? "Patrocinadores · Colaboraciones activas" : "Sponsors · Active collaborations"}
      title={lang === "es" ? "Marcas que ya <em>ruedan</em> con nosotros" : "Brands already <em>riding</em> with us"}
      pitch={
        lang === "es"
          ? "No empezamos de cero. Estas son las colaboraciones que ya respaldan el proyecto día a día — y la prueba de que las marcas serias confían en Ride & Conquer."
          : "We're not starting from zero. These are the collaborations that back the project day to day — proof that serious brands trust Ride & Conquer."
      }
      status="active"
    >
      {/* Featured collaboration: Matsuri Honda */}
      <div
        style={{
          marginBottom: 20,
          padding: "26px 30px",
          borderRadius: 14,
          background: "linear-gradient(135deg, #1a0000 0%, #2a0808 100%)",
          border: `2px solid ${blocks[0].color}`,
          boxShadow: `0 30px 80px -30px ${blocks[0].color}40`,
          display: "grid",
          gridTemplateColumns: "1fr 1.8fr",
          gap: 26,
          alignItems: "center",
        }}
      >
        <div
          style={{
            background: "#fff",
            padding: 24,
            borderRadius: 10,
            textAlign: "center",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            minHeight: 140,
          }}
        >
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontSize: 38,
              fontStyle: "italic",
              color: blocks[0].color,
              letterSpacing: "-.01em",
            }}
          >
            MATSURI
          </div>
        </div>
        <div>
          <div className="mono" style={{ color: blocks[0].color, marginBottom: 6, letterSpacing: ".15em" }}>
            ★ {blocks[0].tag}
          </div>
          <div
            style={{
              fontFamily: "var(--f-display)",
              fontWeight: 900,
              fontStyle: "italic",
              fontSize: 32,
              lineHeight: 1,
              marginBottom: 8,
              textTransform: "uppercase",
            }}
          >
            {blocks[0].title}
          </div>
          <div style={{ color: "var(--text-dim)", fontSize: 14, marginBottom: 12, fontStyle: "italic" }}>
            {blocks[0].sub}
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.55 }}>{blocks[0].copy}</p>
        </div>
      </div>

      {/* Other collaboration blocks */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
        {blocks.slice(1).map((b) => (
          <div
            key={b.title}
            className="card"
            style={{ borderTop: `3px solid ${b.color}`, display: "flex", flexDirection: "column", gap: 10 }}
          >
            <div className="mono" style={{ color: b.color, letterSpacing: ".12em" }}>
              {b.tag}
            </div>
            <div
              style={{
                fontFamily: "var(--f-display)",
                fontWeight: 800,
                fontStyle: "italic",
                fontSize: 22,
                lineHeight: 1.1,
                textTransform: "uppercase",
              }}
            >
              {b.title}
            </div>
            <div style={{ color: "var(--text-mute)", fontSize: 12, fontStyle: "italic", marginTop: -4 }}>{b.sub}</div>
            <p style={{ color: "var(--text-dim)", fontSize: 13, lineHeight: 1.5 }}>{b.copy}</p>
            <div
              style={{
                display: "flex",
                flexWrap: "wrap",
                gap: 6,
                marginTop: "auto",
                paddingTop: 8,
                borderTop: "1px solid var(--border)",
              }}
            >
              {b.brands.map((name) => (
                <span
                  key={name}
                  style={{
                    fontFamily: "var(--f-mono)",
                    fontSize: 10,
                    letterSpacing: ".05em",
                    padding: "4px 10px",
                    borderRadius: 4,
                    background: `color-mix(in oklab, ${b.color} 15%, var(--bg-card))`,
                    border: `1px solid ${b.color}40`,
                    color: b.color,
                  }}
                >
                  {name}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>

      <div
        style={{
          marginTop: 22,
          padding: "18px 22px",
          borderRadius: 10,
          background: "var(--bg-card)",
          border: "1px dashed var(--accent)",
          display: "flex",
          gap: 18,
          alignItems: "center",
          flexWrap: "wrap",
        }}
      >
        <div style={{ flex: "1 1 280px" }}>
          <div className="mono" style={{ color: "var(--accent)", marginBottom: 4 }}>
            {lang === "es" ? "¿NO ESTÁS EN ESTA LISTA?" : "NOT ON THIS LIST?"}
          </div>
          <p style={{ fontSize: 13, color: "var(--text-dim)", margin: 0 }}>
            {lang === "es"
              ? "Únete a las marcas que ya respaldan al proyecto. Hay espacio para tu sponsor en la modalidad, plataforma o evento que mejor encaje con tu marca."
              : "Join the brands already backing the project. There's space for your sponsorship in the modality, platform or event that best fits your brand."}
          </p>
        </div>
        <a href="#contact" className="btn btn-primary">
          {lang === "es" ? "Quiero colaborar →" : "I want to collaborate →"}
        </a>
      </div>
    </SectionShell>
  );
}

Object.assign(window, {
  MetricsSection,
  TiersSection,
  ByModSection,
  BySurfaceSection,
  ContactSection,
  TechStackSection,
  CurrentSponsorsSection,
});