// Dedicated sponsor profile pages.
// Each sponsorship gets its own URL — linked from the Sponsors dropdown
// and from the main /sponsors index page.

/* ════════════════════ ARCHIE DAVIES ════════════════════ */
function SponsorArchiePage({ onNavigate }) {
  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Breadcrumb
            crumbs={["Home", "Our Sponsorships", "Archie Davies"]}
            onNavigate={onNavigate}
            targets={["home", "sponsors"]}
          />
          <div style={{ marginTop: 36 }}>
            <Eyebrow style={{ marginBottom: 32 }}>GB4 Championship</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(56px, 8vw, 144px)", lineHeight: 0.92,
              letterSpacing: "-0.01em", textTransform: "uppercase",
              margin: "0 0 36px", color: "var(--fg)", maxWidth: 1280,
            }}>
              Archie Davies.
            </h1>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 20,
              lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 820,
            }}>
              Solo has backed Archie since 2024 — through two full seasons of the BRSCC Fiesta Junior Championship and into his single-seater graduation. In 2026 the 16-year-old joins the GB4 Championship with Scorpio Motorsport, carrying Solo Secure across every round.
            </p>
          </div>
        </div>
      </section>

      {/* PORTRAIT + STORY */}
      <section style={{ padding: "120px 36px", background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, marginBottom: 56, alignItems: "end" }}>
            <div>
              <Eyebrow style={{ marginBottom: 32 }}>The partnership</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>Talent. Discipline. The long view.</H2>
          </div>

          <div style={{
            background: "var(--bg)", border: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "1fr 1fr",
            overflow: "hidden",
          }}>
            <div style={{
              position: "relative", aspectRatio: "3 / 4",
              background: "var(--surface-deep)",
            }}>
              <img
                src="assets/archie-davies-portrait.jpg"
                alt="Archie Davies on the GB4 podium"
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "cover", display: "block",
                }}
                draggable={false}
              />
              <div style={{
                position: "absolute", top: 20, left: 20,
                fontFamily: "var(--font-body)", fontSize: 11,
                letterSpacing: "0.22em", color: "#fff",
                background: "rgba(0,0,0,0.6)", padding: "6px 10px",
                textTransform: "uppercase", fontWeight: 500,
                backdropFilter: "blur(6px)",
              }}>Scorpio Motorsport</div>
              <div style={{
                position: "absolute", bottom: 20, right: 20,
                fontFamily: "var(--font-body)", fontSize: 10,
                letterSpacing: "0.18em", color: "rgba(255,255,255,0.85)",
                textTransform: "uppercase",
              }}>Photo · GB4 / MSV</div>
            </div>

            <div style={{ padding: "48px 48px 48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
                <Eyebrow>Scorpio Motorsport · #4</Eyebrow>
                <Eyebrow style={{ color: "var(--fg)" }}>Since 2024</Eyebrow>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(28px, 3.4vw, 42px)", lineHeight: 1.05,
                letterSpacing: "0.005em", textTransform: "uppercase",
                margin: "0 0 22px", color: "var(--fg)",
              }}>Three seasons. One platform.</h3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 18,
              }}>
                Two seasons in the BRSCC Fiesta Junior Championship took Archie from rookie 8th in 2024 to a championship-contending 4th in 2025 — with wins at Mallory Park and Silverstone, a podium double at Anglesey, pole position at Donington, and a runner-up finish in the C1 Eurocup 24 Hour race at the Algarve.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 28,
              }}>
                2026 is his single-seater debut — joining the GB4 Championship with Scorpio Motorsport. Solo Secure carries on every round.
              </p>

              <div style={{
                borderTop: "1px solid var(--line)", paddingTop: 24,
                display: "grid", gridTemplateColumns: "120px 1fr", gap: "10px 32px",
                marginBottom: 28,
              }}>
                <Eyebrow>2026</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  GB4 Championship · Scorpio Motorsport (debut season)
                </span>
                <Eyebrow>2025</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  BRSCC Fiesta Junior Championship · <strong style={{ color: "var(--fg)" }}>4th overall</strong>
                  <br />
                  <span style={{ color: "var(--fg-soft)" }}>Wins at Mallory Park &amp; Silverstone · podium double at Anglesey · pole at Donington</span>
                </span>
                <Eyebrow>2025</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  C1 Eurocup 24 Hours · Algarve · <strong style={{ color: "var(--fg)" }}>2nd overall</strong>
                </span>
                <Eyebrow>2024</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  BRSCC Fiesta Junior Championship · 8th overall
                </span>
              </div>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a
                  href="https://www.gb-4.net/drivers/2026/archie-davies"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ textDecoration: "none" }}
                >
                  <Button primary>Archie's GB4 profile →</Button>
                </a>
                <Button onClick={() => onNavigate("contact", { subject: "Sponsorship enquiry — Archie Davies / GB4" })}>Partnership enquiries</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SIM RIG */}
      <section style={{ padding: "120px 36px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, marginBottom: 56, alignItems: "end" }}>
            <div>
              <Eyebrow style={{ marginBottom: 32 }}>Part of the partnership</Eyebrow>
              <SectionNumeral n={2} />
            </div>
            <H2>The Solo HQ sim rig.</H2>
          </div>

          <div style={{
            background: "var(--bg)", border: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "1.1fr 1fr",
            overflow: "hidden",
          }}>
            <div style={{
              position: "relative", aspectRatio: "4 / 3",
              background: "var(--surface-deep)",
              borderRight: "1px solid var(--line)",
            }}>
              <BakedPhoto id="sponsor-archie-sim-rig" alt="Live sim rig at Solo HQ" />
              <div style={{
                position: "absolute", top: 20, left: 20,
                fontFamily: "var(--font-body)", fontSize: 11,
                letterSpacing: "0.22em", color: "#fff",
                background: "rgba(0,0,0,0.6)", padding: "6px 10px",
                textTransform: "uppercase", fontWeight: 500,
                backdropFilter: "blur(6px)",
              }}>Bedfordshire HQ · Live now</div>
            </div>
            <div style={{ padding: "44px 44px 44px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <Eyebrow style={{ marginBottom: 18 }}>Driver development</Eyebrow>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(24px, 2.8vw, 34px)", lineHeight: 1.1,
                letterSpacing: "0.005em", textTransform: "uppercase",
                margin: "0 0 18px", color: "var(--fg)",
              }}>Race-grade simulator at HQ.</h3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 15,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 22,
              }}>
                Part of our support for Archie. A race-grade simulator at Bedfordshire HQ — direct-drive wheel, hydraulic pedals and a triple-screen rig — where Archie laps the GB4 calendar between race weekends. Open to customers and staff during site visits.
              </p>
              <ul style={{
                listStyle: "none", padding: 0, margin: 0,
                fontFamily: "var(--font-body)", fontSize: 14,
                borderTop: "1px solid var(--line)",
              }}>
                {[
                  ["01", "Direct-drive force-feedback steering"],
                  ["02", "Triple-screen circuit-accurate visuals"],
                  ["03", "Open to staff, customers and visiting partners"],
                  ["04", "Used by Archie for between-round track preparation"],
                ].map(([n, b]) => (
                  <li key={n} style={{
                    borderBottom: "1px solid var(--line)",
                    padding: "10px 0", display: "flex", gap: 14,
                    color: "var(--fg)",
                  }}>
                    <span style={{
                      fontFamily: "var(--font-body)", fontSize: 11,
                      letterSpacing: "0.2em", color: "var(--fg-dim)",
                      textTransform: "uppercase", fontWeight: 500, minWidth: 22,
                    }}>{n}</span>
                    {b}
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 22 }}>
                <Button small onClick={() => onNavigate("contact", { subject: "Book a visit to Solo HQ — Sim Rig" })}>Book a visit to HQ →</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* OTHER SPONSORSHIPS */}
      <OtherSponsorships current="archie" onNavigate={onNavigate} />

      <FinalCTABand onNavigate={onNavigate} />
    </>
  );
}

/* ════════════════════ TOMMY LOVEJOY ════════════════════ */
function SponsorTommyPage({ onNavigate }) {
  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Breadcrumb
            crumbs={["Home", "Our Sponsorships", "Tommy Lovejoy"]}
            onNavigate={onNavigate}
            targets={["home", "sponsors"]}
          />
          <div style={{ marginTop: 36 }}>
            <Eyebrow style={{ marginBottom: 32 }}>British Kart Championship</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(56px, 8vw, 144px)", lineHeight: 0.92,
              letterSpacing: "-0.01em", textTransform: "uppercase",
              margin: "0 0 36px", color: "var(--fg)", maxWidth: 1280,
            }}>
              Tommy Lovejoy.
            </h1>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 20,
              lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 820,
            }}>
              Eight years old. Already a privateer entry in the 2026 Wera Tools British Kart Championship — racing in the Rotax MicroMax class against the strongest junior karting field in the country.
            </p>
          </div>
        </div>
      </section>

      <section style={{ padding: "120px 36px", background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, marginBottom: 56, alignItems: "end" }}>
            <div>
              <Eyebrow style={{ marginBottom: 32 }}>The partnership</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>Backing the next generation.</H2>
          </div>

          <div style={{
            background: "var(--bg)", border: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "1fr 1fr",
            overflow: "hidden",
          }}>
            <div style={{
              position: "relative", aspectRatio: "3 / 4",
              background: "var(--surface-deep)",
            }}>
              <BakedPhoto id="sponsor-tommy-portrait" alt="Tommy Lovejoy" />
              <div style={{
                position: "absolute", top: 20, left: 20,
                fontFamily: "var(--font-body)", fontSize: 11,
                letterSpacing: "0.22em", color: "#fff",
                background: "rgba(0,0,0,0.6)", padding: "6px 10px",
                textTransform: "uppercase", fontWeight: 500,
                backdropFilter: "blur(6px)",
              }}>Privateer · Rotax MicroMax</div>
            </div>

            <div style={{ padding: "48px 48px 48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 24 }}>
                <Eyebrow>Rotax MicroMax · #77</Eyebrow>
                <Eyebrow style={{ color: "var(--fg)" }}>2026 season</Eyebrow>
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(28px, 3.4vw, 42px)", lineHeight: 1.05,
                letterSpacing: "0.005em", textTransform: "uppercase",
                margin: "0 0 22px", color: "var(--fg)",
              }}>British karting. Solo colours. Privateer entry.</h3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 18,
              }}>
                Tommy runs as a privateer in the 2026 Wera Tools British Kart Championship — the UK's national junior karting championship. He's eight years old, racing kart #77 in the Rotax MicroMax class.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 28,
              }}>
                Solo's backing the next generation of British motorsport — drivers building the same engineering discipline and competitive instinct we build into the platform. Tommy carries Solo Secure colours at every round.
              </p>

              <div style={{
                borderTop: "1px solid var(--line)", paddingTop: 24,
                display: "grid", gridTemplateColumns: "140px 1fr", gap: "10px 32px",
                marginBottom: 28,
              }}>
                <Eyebrow>2026</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  Wera Tools British Kart Championship · <strong style={{ color: "var(--fg)" }}>Rotax MicroMax privateer</strong>
                </span>
                <Eyebrow>Class</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  Rotax MicroMax · UK national junior championship
                </span>
                <Eyebrow>Number</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  #77
                </span>
                <Eyebrow>Age</Eyebrow>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--fg)" }}>
                  8 years old
                </span>
              </div>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a
                  href="https://www.instagram.com/tommy_lovejoy77_karting/"
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{ textDecoration: "none" }}
                >
                  <Button primary>Follow Tommy on Instagram →</Button>
                </a>
                <Button onClick={() => onNavigate("contact", { subject: "Sponsorship enquiry — Tommy Lovejoy / Karting" })}>Partnership enquiries</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* OTHER SPONSORSHIPS */}
      <OtherSponsorships current="tommy" onNavigate={onNavigate} />

      <FinalCTABand onNavigate={onNavigate} />
    </>
  );
}

/* ──────────── Cross-link block ────────────
 * Shown at the bottom of each profile page — links to the other sponsorship(s)
 * so visitors can move sideways through the roster.
 */
function OtherSponsorships({ current, onNavigate }) {
  const all = [
    { id: "archie", page: "sponsor-archie", code: "S-01", name: "Archie Davies",
      body: "GB4 Championship · Scorpio Motorsport · Backed since 2024." },
    { id: "tommy",  page: "sponsor-tommy",  code: "S-02", name: "Tommy Lovejoy",
      body: "8-year-old British karting privateer · 2026 Wera Tools British Kart Championship." },
  ];
  const others = all.filter(s => s.id !== current);
  if (others.length === 0) return null;
  return (
    <section style={{ padding: "100px 36px", borderBottom: "1px solid var(--line)" }}>
      <div style={{ maxWidth: 1480, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80, marginBottom: 40, alignItems: "end" }}>
          <div>
            <Eyebrow style={{ marginBottom: 32 }}>Also in our roster</Eyebrow>
          </div>
          <H2>Other sponsorships.</H2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {others.map((s) => (
            <div key={s.id}
              onClick={() => onNavigate(s.page)}
              style={{
                background: "var(--bg)", border: "1px solid var(--line)",
                padding: "36px 36px 32px", cursor: "pointer",
                display: "flex", flexDirection: "column",
                transition: "border-color 160ms, transform 160ms",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--fg)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}
            >
              <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 18 }}>
                <Eyebrow style={{ color: "var(--fg)" }}>View profile →</Eyebrow>
              </div>
              <H3 style={{ fontSize: 26, marginBottom: 12 }}>{s.name}</H3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 14.5,
                lineHeight: 1.55, color: "var(--fg-soft)", margin: 0,
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SponsorArchiePage, SponsorTommyPage });