/* global React */
// FirstSteps — standalone pages: About, Partner Clubs, Collaboration (+ Collaboration form modal)

const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP, useRef: useRefP } = React;

// ---------- ABOUT US ----------
function AboutPage({ lang, navigate }) {
  const t = window.I18N[lang].aboutPage;
  useEffectP(() => { window.scrollTo(0, 0); }, []);
  return (
    <main className="fade-in about-page">
      <section className="about-hero">
        <div className="container">
          <div className="eyebrow">{t.eyebrow}</div>

          <div className="about-hero-mark">
            <img
              src="assets/firststeps-mark-white.png"
              alt="FirstSteps mark"
            />
          </div>

          <div className="about-hero-headline">
            <div className="kicker">{t.kicker}</div>
            <p className="lead">{t.lead}</p>
            <div className="founder-tag">
              {t.founderTag}
              <span className="founder-name">Olzhas Akmolda</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section about-body">
        <div className="container">
          {t.story.map((chapter, i) => (
            <article key={i} className="story-chapter">
              <div className="story-num">0{i + 1}</div>
              <div className="story-content">
                <h2 className="h3 story-title">{chapter.h}</h2>
                {chapter.p.map((para, j) => <p key={j}>{para}</p>)}
              </div>
            </article>
          ))}

          <div className="about-cta">
            <button
              className="btn btn-primary btn-large"
              onClick={() => {
                navigate({ name: "home" });
                setTimeout(() => {
                  const el = document.getElementById(t.cta.target || "programs");
                  if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
                }, 60);
              }}
            >
              {t.cta.label} <Arrow size={14} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- PARTNER CLUBS ----------
function PartnersPage({ lang, navigate }) {
  const t = window.I18N[lang].partnersPage;
  const labels = (window.PARTNER_DETAIL_LABELS && window.PARTNER_DETAIL_LABELS[lang]) || (window.PARTNER_DETAIL_LABELS && window.PARTNER_DETAIL_LABELS.en) || {};

  useEffectP(() => { window.scrollTo(0, 0); }, []);

  return (
    <main className="fade-in partners-page">
      <section
        className="partners-hero has-bg"
        style={{ backgroundImage: "linear-gradient(180deg, rgba(10,31,68,0.78) 0%, rgba(10,31,68,0.92) 100%), url(assets/partners-hero.jpg)" }}
      >
        <div className="container">
          <div className="eyebrow" style={{ color: "var(--yellow)" }}>{t.eyebrow}</div>
          <h1 className="h1">{t.title}</h1>
          <p className="lead">{t.lead}</p>
        </div>
      </section>

      <section className="section partners-list-section">
        <div className="container">
          <div className="club-grid">
            {window.PARTNERS.map((club) => {
              const c = (t.clubs && t.clubs[club.name]) || { tagline: club.loc, text: "" };
              const hasDetails = !!(window.PARTNER_DETAILS && window.PARTNER_DETAILS[club.name]);
              const onOpen = () => { if (hasDetails) navigate({ name: "partners", id: club.id }); };
              return (
                <article
                  className={"club-card" + (hasDetails ? " is-clickable" : "")}
                  key={club.name}
                  role={hasDetails ? "button" : undefined}
                  tabIndex={hasDetails ? 0 : undefined}
                  onClick={onOpen}
                  onKeyDown={(e) => { if (hasDetails && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); onOpen(); } }}
                  aria-label={hasDetails ? `${club.name} — ${labels.open || "Details"}` : undefined}
                >
                  <div className="club-logo">
                    <img src={club.logo} alt={club.name} loading="lazy" />
                  </div>
                  <div className="club-info">
                    <h3 className="club-name">{club.name}</h3>
                    <div className="club-tagline">{c.tagline}</div>
                    <p className="club-text">{c.text}</p>
                    {hasDetails && (
                      <span className="club-more-link" aria-hidden="true">
                        {labels.open || "Details"} <Arrow size={12} />
                      </span>
                    )}
                  </div>
                </article>
              );
            })}
          </div>

          <div className="partners-cta">
            <div>
              <h2 className="h3">{t.ctaTitle}</h2>
              <p>{t.ctaBody}</p>
            </div>
            <button
              className="btn btn-primary btn-large"
              onClick={() => navigate({ name: "collaboration" })}
            >
              {t.ctaButton} <Arrow size={14} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- CLUB DETAIL PAGE (full page, own URL) ----------
// Renders at #/partners/{clubId}. Pulls language-neutral facts plus history
// and per-player role notes from window.PARTNER_DETAILS, indexed by club
// display name (window.PARTNERS provides the id → name mapping).
function ClubDetailPage({ lang, clubId, navigate }) {
  const labels = (window.PARTNER_DETAIL_LABELS && window.PARTNER_DETAIL_LABELS[lang])
    || (window.PARTNER_DETAIL_LABELS && window.PARTNER_DETAIL_LABELS.en)
    || {};
  const club = (window.PARTNERS || []).find((p) => p.id === clubId);
  const details = club && window.PARTNER_DETAILS && window.PARTNER_DETAILS[club.name];

  useEffectP(() => { window.scrollTo(0, 0); }, [clubId]);

  // Unknown slug — send the user back to the partner-clubs index.
  if (!club || !details) {
    return (
      <main className="container" style={{ padding: "120px 24px", textAlign: "center" }}>
        <p style={{ marginBottom: 16 }}>Club not found.</p>
        <button className="btn btn-primary" onClick={() => navigate({ name: "partners" })}>
          {labels.back || "Back"}
        </button>
      </main>
    );
  }

  const localised = (val) => (val && typeof val === "object" && !Array.isArray(val))
    ? (val[lang] || val.en || "")
    : (val || "");

  return (
    <main className="fade-in club-page">
      <section className="club-page-hero">
        <div className="container">
          <button className="btn btn-link club-back" onClick={() => navigate({ name: "partners" })}>
            <ArrowLeft size={12} /> {labels.back || "Back"}
          </button>

          <header className="club-page-head">
            <div className="club-page-logo">
              <img src={club.logo} alt={club.name} />
            </div>
            <div className="club-page-title">
              <div className="club-page-league">{localised(details.league)}</div>
              <h1 className="h1">{club.name}</h1>
            </div>
          </header>

          <dl className="club-meta-grid">
            <div className="club-meta">
              <dt>{labels.founded}</dt>
              <dd>{details.founded}</dd>
            </div>
            <div className="club-meta">
              <dt>{labels.city}</dt>
              <dd>{details.city}</dd>
            </div>
            <div className="club-meta">
              <dt>{labels.stadium}</dt>
              <dd>{details.stadium}</dd>
            </div>
          </dl>
        </div>
      </section>

      <section className="section club-page-body">
        <div className="container club-page-grid">
          <article className="club-section club-history">
            <h2 className="club-section-title">{labels.history}</h2>
            <p className="club-section-body">{localised(details.history)}</p>
          </article>

          <article className="club-section club-trophies-section">
            <h2 className="club-section-title">{labels.trophies}</h2>
            <ul className="club-trophies">
              {(details.trophies || []).map((tr, i) => (
                <li key={i}>
                  <span className="club-trophy-name">{tr.name}</span>
                  <span className="club-trophy-year">{tr.year}</span>
                </li>
              ))}
            </ul>
          </article>

          <article className="club-section club-stars-section">
            <h2 className="club-section-title">{labels.stars}</h2>
            <ul className="club-stars">
              {(details.stars || []).map((s, i) => (
                <li key={i}>
                  <span className="club-star-name">{s.name}</span>
                  <span className="club-star-role">{localised(s.role)}</span>
                </li>
              ))}
            </ul>
          </article>
        </div>

        <div className="container">
          <div className="partners-cta club-page-cta">
            <div>
              <h2 className="h3">{(window.I18N[lang].partnersPage && window.I18N[lang].partnersPage.ctaTitle) || labels.cta}</h2>
              <p>{(window.I18N[lang].partnersPage && window.I18N[lang].partnersPage.ctaBody) || ""}</p>
            </div>
            <button
              className="btn btn-primary btn-large"
              onClick={() => navigate({ name: "collaboration" })}
            >
              {labels.cta} <Arrow size={14} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// ---------- COLLABORATION ----------
function CollaborationPage({ lang, navigate }) {
  const t = window.I18N[lang].collabPage;
  useEffectP(() => { window.scrollTo(0, 0); }, []);

  // Both "Apply" buttons on this page route to the single, canonical form
  // URL (#/apply/form) so every form on the site shares the same address.
  // The form type ("collab") travels in sessionStorage — see app.jsx.
  const openCollabForm = () => navigate({ name: "apply", type: "collab", returnTo: "collaboration" });

  return (
    <main className="fade-in collab-page">
      <section className="collab-hero collab-hero-with-bg">
        <div className="collab-hero-photo" aria-hidden="true"></div>
        <GlobeBackdrop />
        <div className="container collab-hero-inner">
          <div className="eyebrow" style={{ color: "var(--yellow)" }}>{t.eyebrow}</div>
          <h1 className="h1">{t.title}</h1>
          <p className="lead">{t.lead}</p>
          <button
            className="btn btn-primary btn-large collab-cta-btn"
            onClick={openCollabForm}
          >
            {t.ctaButton} <Arrow size={14} />
          </button>
        </div>
      </section>

      <section className="section collab-body" style={{ background: "var(--bg-soft)" }}>
        <div className="container">
          <div className="collab-bullets">
            {t.bullets.map((b, i) => (
              <div className="collab-bullet" key={i}>
                <div className="collab-bullet-num">0{i + 1}</div>
                <h3 className="h3">{b.h}</h3>
                <p>{b.b}</p>
              </div>
            ))}
          </div>

          <div className="collab-bottom-cta">
            <div>
              <h2 className="h2" style={{ marginBottom: 12 }}>{t.ctaTitle}</h2>
              <p>{t.ctaBody}</p>
            </div>
            <button
              className="btn btn-primary btn-large"
              onClick={openCollabForm}
            >
              {t.ctaButton} <Arrow size={14} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

// World globe with country silhouettes + connection lines spreading from Spain.
// Uses D3.geoOrthographic + topojson world-atlas (loaded from CDN) for the country
// outlines so the silhouettes are geographically real, with the centre dot fixed
// on Spain.
function GlobeBackdrop() {
  const [countries, setCountries] = useStateP(null);

  // Load world atlas TopoJSON once.
  useEffectP(() => {
    let cancelled = false;
    (async () => {
      try {
        // Wait briefly for d3 + topojson script tags to attach to window.
        for (let i = 0; i < 20 && (!window.d3 || !window.topojson); i++) {
          await new Promise((r) => setTimeout(r, 100));
        }
        if (!window.d3 || !window.topojson) return;
        const res = await fetch("https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json");
        if (!res.ok) return;
        const world = await res.json();
        const features = window.topojson.feature(world, world.objects.countries).features;
        if (!cancelled) setCountries(features);
      } catch (e) {
        // Silent fail — globe still works without silhouettes (graticule + arcs).
      }
    })();
    return () => { cancelled = true; };
  }, []);

  // Geometry constants. viewBox is square; sphere fills it almost edge-to-edge.
  const cx = 360, cy = 360, R = 320;
  const spain = { lat: 40.4, lon: -3.7 }; // Madrid

  // Build a d3 orthographic projection centred on Spain — used for both country
  // outlines (via d3.geoPath) and for our connection-arc endpoints.
  const projection = useMemoP(() => {
    if (!window.d3) return null;
    return window.d3.geoOrthographic()
      .scale(R)
      .translate([cx, cy])
      .rotate([-spain.lon, -spain.lat])
      .clipAngle(90);
  }, []);

  const geoPath = useMemoP(() => {
    if (!projection || !window.d3) return null;
    return window.d3.geoPath(projection);
  }, [projection]);

  // Origin (Spain) projects to the centre by construction.
  const origin = { x: cx, y: cy };

  // Connection targets — same set as before.
  const targets = [
    { lat: 39.9,   lon: 116.4  }, // Beijing
    { lat: 35.7,   lon: 139.7  }, // Tokyo
    { lat: 51.0,   lon:  71.4  }, // Astana
    { lat: 28.6,   lon:  77.2  }, // Delhi
    { lat: -1.3,   lon:  36.8  }, // Nairobi
    { lat: -33.9,  lon:  18.4  }, // Cape Town
    { lat: -34.6,  lon: -58.4  }, // Buenos Aires
    { lat: -23.5,  lon: -46.6  }, // São Paulo
    { lat: 19.4,   lon: -99.1  }, // Mexico City
    { lat: 40.7,   lon: -74.0  }, // New York
    { lat: 37.8,   lon: -122.4 }, // San Francisco
    { lat: -33.9,  lon: 151.2  }, // Sydney
    { lat: 25.3,   lon:  55.3  }, // Dubai
    { lat: 1.35,   lon: 103.8  }, // Singapore
    { lat: 55.7,   lon:  37.6  }, // Moscow
    { lat: 60.2,   lon:  24.9  }, // Helsinki
    { lat: 64.1,   lon: -21.9  }, // Reykjavik
    { lat:  6.5,   lon:   3.4  }, // Lagos
  ];

  // Project a target via d3 if available, fall back to manual orthographic.
  function projectPoint(p) {
    if (projection) {
      const r = projection([p.lon, p.lat]);
      if (r) return { x: r[0], y: r[1], visible: true };
    }
    // Fallback manual orthographic
    const lat0 = (spain.lat * Math.PI) / 180;
    const lon0 = (spain.lon * Math.PI) / 180;
    const lat  = (p.lat * Math.PI) / 180;
    const lon  = (p.lon * Math.PI) / 180;
    const cosc = Math.sin(lat0) * Math.sin(lat) + Math.cos(lat0) * Math.cos(lat) * Math.cos(lon - lon0);
    const x = Math.cos(lat) * Math.sin(lon - lon0);
    const y = Math.cos(lat0) * Math.sin(lat) - Math.sin(lat0) * Math.cos(lat) * Math.cos(lon - lon0);
    return { x: cx + R * x, y: cy - R * y, visible: cosc >= 0 };
  }

  // Build the arc list. Back-side targets are nudged to the rim so we still
  // get the radiating "connections" feel — geographically loose but visually right.
  const lines = targets.map((tgt, i) => {
    const p = projectPoint(tgt);
    let ex = p.x, ey = p.y;
    if (!p.visible) {
      const dx = p.x - cx, dy = p.y - cy;
      const dist = Math.sqrt(dx * dx + dy * dy) || 1;
      ex = cx + (dx / dist) * R * 0.96;
      ey = cy + (dy / dist) * R * 0.96;
    }
    // Lift the quadratic Bezier control point outward for a curved feel.
    const mx = (origin.x + ex) / 2;
    const my = (origin.y + ey) / 2;
    const vx = mx - cx, vy = my - cy;
    const vlen = Math.sqrt(vx * vx + vy * vy) || 1;
    const lift = 60;
    const ccx = mx + (vx / vlen) * lift;
    const ccy = my + (vy / vlen) * lift;
    return { id: i, ex, ey, ccx, ccy, delay: (i % 8) * 0.4 };
  });

  // Longitudes for the graticule, sampled as polylines (only visible side).
  const longitudes = [-150, -120, -90, -60, -30, 0, 30, 60, 90, 120, 150];
  function graticulePolyline(lonDeg) {
    const pts = [];
    for (let latDeg = -90; latDeg <= 90; latDeg += 6) {
      const r = projectPoint({ lat: latDeg, lon: lonDeg });
      if (r.visible) pts.push(r.x.toFixed(1) + "," + r.y.toFixed(1));
    }
    return pts.length >= 2 ? pts.join(" ") : null;
  }

  return (
    <div className="globe-backdrop" aria-hidden="true">
      <svg viewBox="0 0 720 720" preserveAspectRatio="xMidYMid meet">
        <defs>
          <radialGradient id="globe-fill" cx="35%" cy="32%" r="75%">
            <stop offset="0%"   stopColor="#15336f" />
            <stop offset="60%"  stopColor="#0a1f44" />
            <stop offset="100%" stopColor="#050f24" />
          </radialGradient>
          <radialGradient id="globe-edge" cx="50%" cy="50%" r="50%">
            <stop offset="92%" stopColor="rgba(255,199,0,0)" />
            <stop offset="100%" stopColor="rgba(255,199,0,0.35)" />
          </radialGradient>
          <clipPath id="globe-clip">
            <circle cx={cx} cy={cy} r={R} />
          </clipPath>
        </defs>

        {/* Ocean sphere */}
        <circle cx={cx} cy={cy} r={R} fill="url(#globe-fill)" />

        {/* Land — country silhouettes (after topojson load). Clipped to the sphere
            so back-projection artefacts can't leak out of the disc. */}
        {countries && geoPath && (
          <g className="globe-land" clipPath="url(#globe-clip)">
            {countries.map((feature, i) => {
              const d = geoPath(feature);
              if (!d) return null;
              return (
                <path
                  key={i}
                  d={d}
                  fill="rgba(255,255,255,0.10)"
                  stroke="rgba(255,255,255,0.32)"
                  strokeWidth="0.6"
                />
              );
            })}
          </g>
        )}

        {/* Graticule — longitudes only (latitudes through the equator + tropics) */}
        <g className="globe-graticule">
          {longitudes.map((lonDeg) => {
            const points = graticulePolyline(lonDeg);
            return points ? (
              <polyline
                key={"lon" + lonDeg}
                points={points}
                fill="none"
                stroke="rgba(255,255,255,0.05)"
                strokeWidth="1"
              />
            ) : null;
          })}
        </g>

        {/* Rim highlight */}
        <circle cx={cx} cy={cy} r={R} fill="url(#globe-edge)" />
        <circle cx={cx} cy={cy} r={R} fill="none" stroke="rgba(255,199,0,0.18)" strokeWidth="1.5" />

        {/* Connection arcs from Spain to each target */}
        <g className="globe-connections">
          {lines.map((l) => (
            <g key={l.id} style={{ animationDelay: l.delay + "s" }}>
              <path
                d={"M " + origin.x + " " + origin.y + " Q " + l.ccx + " " + l.ccy + " " + l.ex + " " + l.ey}
                fill="none"
                stroke="rgba(255,199,0,0.65)"
                strokeWidth="1.6"
                strokeLinecap="round"
                className="globe-arc"
              />
              <circle cx={l.ex} cy={l.ey} r="3.2" fill="#FFC700" className="globe-dot">
                <animate attributeName="r" values="3;5;3" dur="2.4s" repeatCount="indefinite" begin={l.delay + "s"} />
              </circle>
            </g>
          ))}
          {/* Origin pulse — Spain (centre of the visible hemisphere) */}
          <circle cx={origin.x} cy={origin.y} r="6.5" fill="#FFC700" />
          <circle cx={origin.x} cy={origin.y} r="6.5" fill="none" stroke="#FFC700" strokeWidth="1.6" className="globe-pulse" />
        </g>
      </svg>
    </div>
  );
}

// ---------- COLLABORATION FORM (modal) ----------
function CollaborationFormModal({ lang, onClose }) {
  const t = window.I18N[lang].collabForm;
  const [values, setValues] = useStateP({ first: "", last: "", email: "", website: "" });
  const [errors, setErrors] = useStateP({});
  const [submitting, setSubmitting] = useStateP(false);
  const [submitError, setSubmitError] = useStateP(false);
  const [submitted, setSubmitted] = useStateP(false);
  const phoneRef = useRefP(null);

  // UTM capture (same approach as the player form).
  const utm = useMemoP(() => {
    const keys = ["utm_source", "utm_campaign", "utm_medium", "utm_content", "utm_term"];
    const out = {};
    try {
      const sp = new URLSearchParams(window.location.search);
      keys.forEach((k) => { out[k] = sp.get(k) || ""; });
    } catch (e) {
      keys.forEach((k) => { out[k] = ""; });
    }
    return out;
  }, []);

  const set = (k) => (e) => setValues({ ...values, [k]: e.target.value });

  const validate = () => {
    const e = {};
    if (!values.first.trim()) e.first = t.errors.first;
    if (!values.last.trim()) e.last = t.errors.last;
    if (!phoneRef.current || !phoneRef.current.isValid()) e.phone = t.errors.phone;
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) e.email = t.errors.email;
    return e;
  };

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;

    // Honeypot
    if (values.website && values.website.trim() !== "") return;

    const errs = validate();
    setErrors(errs);
    if (Object.keys(errs).length > 0) {
      const f = document.querySelector(".collab-form .field.error input");
      if (f) f.focus();
      return;
    }

    setSubmitError(false);
    setSubmitting(true);

    const phoneE164 = phoneRef.current ? phoneRef.current.getNumber() : "";

    const payload = {
      first_name:   values.first.trim(),
      last_name:    values.last.trim(),
      phone:        phoneE164,
      email:        values.email.trim(),
      // Defaults for the other fields the AmoCRM endpoint expects from the player form,
      // so AmoCRM stays consistent across both lead sources.
      age:          "",
      current_club: "",
      position:     "",
      video_link:   "",
      program:      "Collaboration", // fixed value — AmoCRM lead title becomes "First Last — Collaboration"
      language:     (lang || "en").toUpperCase(),
      utm_source:   utm.utm_source   || "",
      utm_campaign: utm.utm_campaign || "",
      utm_medium:   utm.utm_medium   || "",
      utm_content:  utm.utm_content  || "",
      utm_term:     utm.utm_term     || "",
      landing_url:  (typeof window !== "undefined" && window.location) ? window.location.href : "",
      website:      "",
    };

    const endpoint = "https://f1rststeps.com/amo.php";

    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 10000);

    try {
      const res = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
        signal: controller.signal,
      });
      clearTimeout(timer);
      if (res.status === 200) {
        // Meta Pixel — fire Lead on successful submit (pixel is already
        // initialised in the site head, this only triggers the event).
        if (typeof fbq !== "undefined") {
          try { fbq("track", "Lead"); } catch (e) {}
        }
        setSubmitted(true);
      } else {
        setSubmitError(true);
      }
    } catch (err) {
      clearTimeout(timer);
      setSubmitError(true);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="modal-overlay" role="dialog" aria-modal="true" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">×</button>

        {!submitted ? (
          <React.Fragment>
            <div className="modal-head">
              <div className="for">{window.I18N[lang].collabPage.eyebrow}</div>
              <h2 className="h3" style={{ marginTop: 4 }}>{t.title}</h2>
              <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 10 }}>{t.sub}</div>
            </div>

            <form onSubmit={submit} noValidate className="collab-form">
              {/* Honeypot */}
              <div style={{ display: "none" }} aria-hidden="true">
                <label>Website
                  <input type="text" name="website" tabIndex={-1} autoComplete="off"
                    value={values.website} onChange={set("website")} />
                </label>
              </div>

              <div className="form-grid">
                <Field label={t.first} required error={errors.first}>
                  <input type="text" value={values.first} onChange={set("first")} autoComplete="given-name" />
                </Field>
                <Field label={t.last} required error={errors.last}>
                  <input type="text" value={values.last} onChange={set("last")} autoComplete="family-name" />
                </Field>
                <Field label={t.phone} required error={errors.phone}>
                  <PhoneInput ref={phoneRef} lang={lang} />
                </Field>
                <Field label={t.email} required error={errors.email}>
                  <input type="email" value={values.email} onChange={set("email")} autoComplete="email" placeholder="name@example.com" />
                </Field>
              </div>

              <div className="form-actions">
                <div className="legal">{t.legal}</div>
                <button
                  type="submit"
                  className="btn btn-primary btn-large"
                  disabled={submitting}
                  aria-busy={submitting}
                >
                  {submitting ? (
                    <React.Fragment>
                      <span className="spinner" aria-hidden="true" />
                      {lang === "ru" ? "Отправляем…" : (lang === "es" ? "Enviando…" : "Sending…")}
                    </React.Fragment>
                  ) : (
                    <React.Fragment>{t.submit} <Arrow size={14} /></React.Fragment>
                  )}
                </button>
              </div>

              {submitError && (
                <div className="form-error-banner" role="alert">
                  <div className="form-error-banner__msg">
                    {lang === "ru"
                      ? "Не удалось отправить заявку. Напишите нам в WhatsApp"
                      : (lang === "es"
                          ? "No se pudo enviar la solicitud. Escríbenos por WhatsApp"
                          : "We couldn't submit your enquiry. Message us on WhatsApp")}
                  </div>
                  <a className="btn btn-primary" href="https://wa.me/+34610827731" target="_blank" rel="noopener noreferrer">
                    WhatsApp <Arrow size={12} />
                  </a>
                </div>
              )}
            </form>
          </React.Fragment>
        ) : (
          <div className="collab-thanks">
            <div className="mark"><Check size={36} /></div>
            <h2 className="h2" style={{ marginTop: 18 }}>{t.thanksTitle}</h2>
            <p style={{ marginTop: 12 }}>{t.thanksBody}</p>
            <button className="btn btn-primary btn-large" onClick={onClose} style={{ marginTop: 28 }}>
              {t.cancel}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage, PartnersPage, ClubDetailPage, CollaborationPage, CollaborationFormModal, GlobeBackdrop });