// Additional pages for the expanded nav.
// Services, Regions, Partners, Sponsors, Careers, Sustainability.
// All built strictly to brand — monochrome, all-caps Eurostile headings, big section numerals.

/* ════════════════════ SERVICES ════════════════════ */
function ServicesPage({ onNavigate }) {
  // CTA labels per service — what action a partner should take after reading.
  // primary = solid black button, secondary = outlined button.
  const services = [
    {
      title:   "Contract Manufacturing",
      tagline: "OEM and ODM options for security product design.",
      body:    "We design, prototype and manufacture security systems for partners. Whether you have a finished concept that needs scaling or an idea that needs engineering from scratch, our production lines across Bedfordshire, Wrocław and Wellington, Florida are built around partner programmes.",
      bullets: ["Design + Prototyping", "Welding + Powdercoating", "Assembly + Printing", "Testing — all in house"],
      cta:     { primary: "Discuss a build", secondary: "Capability statement" },
    },
    {
      title:   "Product Design",
      tagline: "You think it, we design it.",
      body:    "Full turnkey design service. Our in-house engineering team takes a concept from sketch to validated, manufacturable product — mechanical, electrical, firmware and industrial design under one roof.",
      bullets: ["In-house turnkey product design", "Concept → prototype → production", "Same team that engineers the Solo range"],
      cta:     { primary: "Start a project", secondary: "Engineering capabilities" },
    },
    {
      title:   "Data Services (SIMs)",
      tagline: "Data and SIM services at source.",
      body:    "Multi-carrier SIM service with private APN options and fully managed connectivity. Single point of contact, single invoice, fixed package pricing — built for partners running fleets of connected devices.",
      bullets: ["Multi-carrier coverage", "Private APN + managed services", "Global coverage, fixed data packages", "Package pricing model"],
      cta:     { primary: "Request a quote", secondary: "Coverage map" },
    },
    {
      title:   "Network & Infrastructure",
      tagline: "All devices, one secure network.",
      body:    "Private networks, mesh, point-to-point, Starlink and WAN — designed, deployed and supported by Solo engineers. Whichever combination your site needs, we'll specify and stand it up.",
      bullets: ["4G · 5G", "LoRa · WiFi", "Mesh · Starlink", "Private + WAN networking"],
      cta:     { primary: "Discuss a network", secondary: "Site survey" },
    },
    {
      title:   "Asset Management",
      tagline: "All devices, one location.",
      body:    "A single platform for everything in the field. Integrations into Ajax, Victron, your CRM and bespoke systems — so every device, alarm, battery and asset shows up in one place, with the right team alerted at the right time.",
      bullets: ["Web access · app access", "GPS tracking", "Incident management", "System health check", "Device status + control", "Integrations: Ajax · Victron · CRM · bespoke"],
      cta:     { primary: "Book a demo", secondary: "Integrations list" },
    },
    {
      title:   "Transport & Logistics",
      tagline: "You order, we deliver.",
      body:    "We deliver to every location we supply and operate in. Our own UK and EU transport operation — 18-tonne rigid and 44-tonne artic with trailer — means we control the supply chain end-to-end, not a hauler relationship we hope holds up.",
      bullets: ["Own O-licence", "Transport manager with ADR", "18 t rigid · 44 t artic + trailer", "Full GPS tracking on every vehicle"],
      cta:     { primary: "Book transport", secondary: "Coverage areas" },
    },
  ];
  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Services</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,
          }}>
            More than hardware.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 820,
          }}>
            Solo is a manufacturer, a design house, a connectivity provider, a network specialist, an asset platform and a transport operation. Our partners tap into any combination of these — or all of them — to deliver complete security services to their end-clients.
          </p>
        </div>
      </section>

      <section style={{ padding: "0 36px 120px" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          {services.map((s) => (
            <div key={s.title}
              id={`service-${s.title.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '')}`}
              style={{
                padding: "72px 0",
                borderBottom: "1px solid var(--line)",
                display: "grid", gridTemplateColumns: "1.4fr 1fr",
                gap: 72, alignItems: "start",
              }}>
              <div>
                <Eyebrow style={{ marginBottom: 22 }}>{s.tagline}</Eyebrow>
                <H3 style={{ fontSize: "clamp(28px, 3vw, 40px)", marginBottom: 22, letterSpacing: "0.005em" }}>
                  {s.title}
                </H3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 17,
                  lineHeight: 1.6, color: "var(--fg-soft)",
                  margin: "0 0 32px", maxWidth: 600,
                }}>{s.body}</p>
                <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <Button primary onClick={() => onNavigate("contact", { subject: `${s.cta.primary} — ${s.title}` })}>
                    {s.cta.primary} →
                  </Button>
                  <Button onClick={() => onNavigate("contact", { subject: `${s.cta.secondary} — ${s.title}` })}>
                    {s.cta.secondary}
                  </Button>
                </div>
              </div>
              <ul style={{
                listStyle: "none", padding: 0, margin: 0,
                fontFamily: "var(--font-body)", fontSize: 14.5,
                border: "1px solid var(--line)",
              }}>
                {s.bullets.map((b, j) => (
                  <li key={j} style={{
                    borderTop: j ? "1px solid var(--line)" : "none",
                    padding: "14px 22px",
                    color: "var(--fg)",
                  }}>{b}</li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </section>

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

/* ════════════════════ REGIONS ════════════════════ */
function RegionsPage({ onNavigate }) {
  // Facilities = Solo-owned or operated locations (HQ + Factories)
  const facilities = [
    { code: "F-01", name: "United Kingdom",  city: "Bedfordshire · UK",   role: "Headquarters + Factory", isHQ: true,    isFactory: true },
    { code: "F-02", name: "Poland",          city: "Wrocław · Poland",    role: "Factory",                isFactory: true },
    { code: "F-03", name: "North America",   city: "Wellington, Florida · North America", role: "Factory",          isFactory: true },
  ];

  // Exclusive regions = territory held under single-customer regional exclusivity.
  // Different commercial model from the standard partner channel.
  const exclusiveRegions = [
    { name: "United Kingdom" },
    { name: "European Union" },
    { name: "Switzerland" },
  ];

  // Partner network = standard tiered reseller channel (Gold / Platinum),
  // covering North America as a single region.
  const partnerRegions = [
    { name: "North America" },
  ];

  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Where we operate</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)",
          }}>
            Regions.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 800,
          }}>
            Solo is built and supported across three continents. UK headquarters and factory, with sister factories in Poland and Florida. The UK and European Union operate under single-customer regional exclusivity; North America is served by our approved Gold and Platinum partner network.
          </p>

          {/* Stat strip — vertical row list, not a 4-col grid. The grid
              broke the moment one label (e.g. "Exclusive regions (UK ·
              EU · CH)") ran longer than its siblings and wrapped to a
              second line, which threw off the row's shared alignment. */}
          <div style={{ marginTop: 64 }}>
            <StatRow large stats={[
              ["3",      "Factories"],
              ["3",      "Exclusive regions (UK · EU · CH)"],
              ["1",      "Partner region (North America)"],
              ["2,000+", "Units in field"],
            ]} />
          </div>
        </div>
      </section>

      {/* SOLO FACILITIES */}
      <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 }}>Solo facilities</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>HQ + three factories.</H2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
            {facilities.map((f, i) => (
              <div key={f.code} style={{
                padding: "40px 32px 44px",
                background: "var(--bg)",
                borderRight: i < facilities.length - 1 ? "1px solid var(--line)" : "none",
                display: "flex", flexDirection: "column", minHeight: 280,
              }}>
                <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 32, alignItems: "center" }}>
                  <div style={{ display: "flex", gap: 6 }}>
                    {f.isHQ && (
                      <span style={{
                        fontFamily: "var(--font-body)", fontSize: 10,
                        letterSpacing: "0.22em", color: "var(--bg)",
                        background: "var(--fg)",
                        textTransform: "uppercase", fontWeight: 600,
                        padding: "4px 8px",
                      }}>HQ</span>
                    )}
                    {f.isFactory && (
                      <span style={{
                        fontFamily: "var(--font-body)", fontSize: 10,
                        letterSpacing: "0.22em", color: "var(--fg)",
                        textTransform: "uppercase", fontWeight: 600,
                        border: "1px solid var(--fg)", padding: "3px 8px",
                      }}>Factory</span>
                    )}
                  </div>
                </div>
                <H3 style={{ fontSize: 26, marginBottom: 14 }}>{f.name}</H3>
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  color: "var(--fg-soft)", marginBottom: "auto",
                }}>{f.city}</div>
                <div style={{
                  marginTop: 32, paddingTop: 16, borderTop: "1px solid var(--line)",
                  fontFamily: "var(--font-body)", fontSize: 12,
                  letterSpacing: "0.18em", color: "var(--fg)",
                  textTransform: "uppercase", fontWeight: 500,
                }}>{f.role}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* EXCLUSIVE REGIONS — UK + EU */}
      <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 }}>Exclusive regions</Eyebrow>
            </div>
            <H2>UK · EU · Switzerland — single-customer exclusivity.</H2>
          </div>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17,
            lineHeight: 1.55, color: "var(--fg-soft)",
            maxWidth: 760, marginBottom: 48,
          }}>
            Solo's UK, European Union and Swiss territories operate under a regional exclusivity arrangement — held by a single customer per region. This is a distinct commercial model from our open partner channel: tighter integration, joint go-to-market, and direct engineering access.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {exclusiveRegions.map((r, i) => (
              <div key={i} style={{
                padding: "44px 36px 44px",
                background: "var(--black)",
                color: "var(--invert-fg)",
                border: "1px solid var(--black)",
                minHeight: 220,
                display: "flex", flexDirection: "column",
              }}>
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 10,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                  color: "rgba(255,255,255,0.6)", fontWeight: 500,
                  marginBottom: 8,
                }}>By invitation · Single customer</div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: 28, letterSpacing: "0.005em",
                  textTransform: "uppercase", margin: "0 0 18px",
                  color: "var(--invert-fg)",
                }}>{r.name}</h3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  lineHeight: 1.55, color: "rgba(255,255,255,0.78)",
                  margin: 0, flex: 1,
                }}>
                  Held under a single-customer exclusivity agreement for the {r.name}.
                  Solo does not appoint additional resellers or distributors in this territory.
                </p>
                <div style={{
                  marginTop: 28, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.16)",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.18em", color: "rgba(255,255,255,0.75)",
                  textTransform: "uppercase",
                }}>
                  <span>Exclusive partner</span>
                  <span style={{ color: "var(--invert-fg)" }}>→</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40 }}>
            <Button onClick={() => onNavigate("exclusive-regions")}>
              About the Exclusive Regions programme →
            </Button>
          </div>
        </div>
      </section>

      {/* PARTNER NETWORK — North America (section header removed at user request) */}
      <section style={{ padding: "120px 36px", borderBottom: "1px solid var(--line)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17,
            lineHeight: 1.55, color: "var(--fg-soft)",
            maxWidth: 760, marginBottom: 48,
          }}>
            Across North America, Solo operates through an approved reseller network. Authorised Gold partners hold wholesale access to the full range; top-tier Platinum partners gain protected deal-registration and joint Tier-1 bid support.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "1fr", border: "1px solid var(--line)" }}>
            {partnerRegions.map((r, i) => (
              <div key={i} style={{
                padding: "36px 30px 40px",
                background: "var(--bg)",
                minHeight: 200,
                display: "flex", flexDirection: "column",
              }}>
                <H3 style={{ fontSize: 22, lineHeight: 1.15, marginBottom: "auto", marginTop: 0 }}>{r.name}</H3>
                <div style={{
                  marginTop: 24, paddingTop: 14, borderTop: "1px solid var(--line)",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.16em", color: "var(--fg-dim)",
                  textTransform: "uppercase",
                }}>
                  <span>Gold · Platinum</span>
                  <span style={{ color: "var(--fg)" }}>→</span>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button onClick={() => onNavigate("gold-partners")}>Gold Partners</Button>
            <Button onClick={() => onNavigate("platinum-partners")}>Platinum Partners</Button>
          </div>
        </div>
      </section>

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

/* ════════════════════ PARTNERS ════════════════════ */
function PartnersPage({ onNavigate, formSubject }) {
  const [resellerSubject, setResellerSubject] = useState(formSubject || "");
  useEffect(() => { if (formSubject) setResellerSubject(formSubject); }, [formSubject]);
  const applyTo = (tier) => {
    setResellerSubject(`Apply to the ${tier} tier`);
    setTimeout(() => {
      document.getElementById("reseller-form")?.scrollIntoView({ behavior: "smooth" });
    }, 50);
  };
  // Solo's partner programme is a two-tier structure: Gold (entry) and
  // Platinum (by invitation). Same tier scheme worldwide — the North
  // American block elsewhere on this page lists the named partners
  // operating at each tier.
  const tiers = [
    {
      tier: "Gold",
      sublabel: "Entry tier",
      benefits: [
        "Wholesale hardware pricing across the Solo range",
        "Co-branded marketing collateral + datasheets",
        "Field-engineer training (Solo Academy)",
        "Direct fulfilment from regional factories",
        "Defined path to Platinum",
      ],
    },
    {
      tier: "Platinum",
      sublabel: "By invitation",
      featured: true,
      benefits: [
        "Everything in Gold",
        "Priority hardware allocation",
        "Co-marketing fund (MDF)",
        "Direct line to engineering",
        "Joint Tier-1 bid support",
      ],
    },
  ];
  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>The partner channel</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,
          }}>
            Partner program.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 800,
          }}>
            Solo sells exclusively through approved security partners. We protect your margin, protect your leads, and back you with the field support of a UK manufacturer that ships every week.
          </p>
        </div>
      </section>

      <section style={{ padding: "120px 36px", background: "var(--surface)", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          {/* Section header removed at user request — only "Partner program" hero remains as a title. */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {tiers.map((t, i) => (
              <div key={t.tier} style={{
                background: t.featured ? "var(--black)" : "var(--bg)",
                color: t.featured ? "var(--invert-fg)" : "var(--fg)",
                border: t.featured ? "1px solid var(--black)" : "1px solid var(--line)",
                padding: "48px 40px",
                display: "flex", flexDirection: "column",
              }}>
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                  color: t.featured ? "rgba(255,255,255,0.6)" : "var(--fg-dim)",
                  marginBottom: 14, fontWeight: 500,
                }}>{t.sublabel}</div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: 40, letterSpacing: "0.005em",
                  textTransform: "uppercase", margin: "0 0 32px",
                }}>{t.tier}</h3>
                <ul style={{
                  listStyle: "none", padding: 0, margin: 0,
                  fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.5,
                  flex: 1,
                }}>
                  {t.benefits.map((b, j) => (
                    <li key={j} style={{
                      borderTop: t.featured ? "1px solid rgba(255,255,255,0.16)" : "1px solid var(--line)",
                      padding: "14px 0",
                      color: t.featured ? "var(--invert-fg)" : "var(--fg)",
                    }}>{b}</li>
                  ))}
                </ul>
                <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  {t.featured ? (
                    <>
                      <Button white onClick={() => onNavigate("platinum-partners")}>See Platinum →</Button>
                      <button onClick={() => applyTo(t.tier)} style={{
                        background: "transparent", color: "#fff",
                        border: "1px solid rgba(255,255,255,0.4)",
                        padding: "16px 24px", cursor: "pointer",
                        fontFamily: "var(--font-body)", fontSize: 13, fontWeight: 500,
                        letterSpacing: "0.18em", textTransform: "uppercase",
                      }}>Apply</button>
                    </>
                  ) : (
                    <>
                      <Button primary onClick={() => onNavigate("gold-partners")}>See Gold →</Button>
                      <Button onClick={() => applyTo(t.tier)}>Apply</Button>
                    </>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* RESELLER FORM (section header removed at user request) */}
      <section id="reseller-form" style={{ padding: "120px 36px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "start" }}>
            <div>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 17,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 22,
              }}>
                Tell us about your business and which tier fits — Gold or Platinum. The Solo channel team will respond within one working day.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 15,
                lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
              }}>
                Already a Solo partner and need reseller portal access? Use the same form — set the subject to "Reseller portal access".
              </p>
            </div>
            <ContactForm formType="reseller" subject={resellerSubject} compact />
          </div>
        </div>
      </section>

      {/* TECHNOLOGY PARTNERS — typographic wordmark wall.
          Rendered as wordmarks rather than uploaded logo files: keeps the
          treatment brand-consistent with the rest of the site and avoids
          embedding third-party logo files. Swap in real SVG logos later
          when you have brand permission. */}
      <section style={{
        padding: "120px 36px",
        background: "#000",
        color: "#fff",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{
            fontFamily: "var(--font-body)", fontSize: 12,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: "rgba(255,255,255,0.5)", fontWeight: 500,
            marginBottom: 36, textAlign: "center",
          }}>
            Our technology partners
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 0,
            border: "1px solid rgba(255,255,255,0.15)",
          }}>
            {[
              {
                name: "Victron Energy",
                role: "Power systems",
                body: "Victron is Solo's power-electronics backbone. Inverters, chargers and BMS integration across the tower fleet.",
                logo: "assets/partner-victron-white.png",
                // Victron PNG includes the sailboat mark and "BLUE POWER" tag
                // below the wordmark, so the rendered height is larger to
                // give the actual wordmark a comparable letter-height to Ajax.
                logoHeight: 68,
              },
              {
                name: "Ajax Systems",
                role: "Wireless security",
                body: "Ajax's wireless intrusion-detection stack is integrated natively into Solo's monitoring platform.",
                logo: "assets/partner-ajax-white.png",
                // Ajax stacked lockup ("AJAX" over "<READY>"). Pixel height
                // bumped large enough that the AJAX wordmark cap-height
                // clearly dominates the Victron wordmark on the same row.
                logoHeight: 200,
              },
              {
                name: "Teltonika Networks",
                role: "Cellular connectivity",
                body: "Teltonika's industrial routers and modems keep Solo's towers online — resilient 4G/5G failover across every deployment.",
                logo: "assets/partner-teltonika-white.png",
                // Plain single-line wordmark like Victron (no stacked
                // tagline like Ajax) — matched to Victron's rendered
                // height for a comparable cap-height across the row.
                logoHeight: 68,
              },
            ].map((p, i, arr) => (
              <div key={p.name} style={{
                padding: "48px 40px 52px",
                borderRight: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.15)" : "none",
                display: "flex", flexDirection: "column",
                // Bumped to accommodate the now-larger Ajax stacked lockup
                // (200px tall) plus role tag, body and footer name.
                minHeight: 380,
              }}>
                {/* Real partner logo, white-on-transparent. Container height
                    sized to fit the tallest lockup (Ajax stacked) with room
                    to breathe. Logos render at their own per-partner height. */}
                <div style={{
                  marginBottom: 28,
                  height: 220,
                  display: "flex", alignItems: "center",
                }}>
                  <img
                    src={p.logo}
                    alt={p.name}
                    style={{ height: p.logoHeight, width: "auto", display: "block" }}
                  />
                </div>

                {/* Role tag */}
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.22em", textTransform: "uppercase",
                  color: "rgba(255,255,255,0.5)", fontWeight: 500,
                  marginBottom: 16,
                }}>{p.role}</div>

                {/* Body */}
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14.5,
                  lineHeight: 1.6, color: "rgba(255,255,255,0.7)",
                  margin: 0, flex: 1, maxWidth: 380,
                }}>{p.body}</p>

                {/* Full company name (small, bottom) */}
                <div style={{
                  marginTop: 28, paddingTop: 18,
                  borderTop: "1px solid rgba(255,255,255,0.12)",
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.18em", textTransform: "uppercase",
                  color: "rgba(255,255,255,0.5)", fontWeight: 500,
                }}>{p.name}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ACCREDITATIONS section moved to the sitewide footer (nav.jsx),
          sitting between "Our technology partners" and "Registered
          entities" so it now appears on every page instead of just here —
          removed the page-local duplicate to avoid showing it twice on
          this page (once mid-page, once again in the footer below). */}
    </>
  );
}

/* ════════════════════ SPONSORS (INDEX) ════════════════════ */
// Sponsors landing page. Lists both sponsorships as cards; each card
// links to the sponsor's own profile page (sponsor-archie / sponsor-tommy).
function SponsorsPage({ onNavigate }) {
  const sponsorships = [
    {
      id: "archie",
      page: "sponsor-archie",
      code: "S-01",
      name: "Archie Davies",
      kicker: "GB4 Championship · Scorpio Motorsport",
      since: "Since 2024",
      summary: "Solo has backed Archie since 2024 — through two seasons of the BRSCC Fiesta Junior Championship and into his 2026 single-seater debut with Scorpio Motorsport in the GB4 Championship.",
      image: "assets/archie-davies-portrait.jpg",
      slotId: null,
    },
    {
      id: "tommy",
      page: "sponsor-tommy",
      code: "S-02",
      name: "Tommy Lovejoy",
      kicker: "Wera Tools British Kart Championship · Rotax MicroMax",
      since: "2026 season",
      summary: "Eight years old. A privateer entry in the 2026 Wera Tools British Kart Championship — racing kart #77 in the Rotax MicroMax class, the UK's national junior championship.",
      image: "assets/slots/tommy-lovejoy-round2-p1.jpg",
      slotId: null,
    },
  ];

  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Sponsorship</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            // "Sponsorships." is a long single word after "Our" wraps —
            // the old 144px ceiling made it wider than the 1280px column
            // at desktop widths, forcing an ugly mid-character break.
            fontSize: "clamp(48px, 7vw, 98px)", lineHeight: 0.92,
            letterSpacing: "-0.01em", textTransform: "uppercase",
            margin: "0 0 36px", color: "var(--fg)", maxWidth: 1280,
            overflowWrap: "break-word", wordBreak: "normal", hyphens: "manual",
          }}>
            Our sponsorships.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 820,
          }}>
            Solo supports the talent and projects that share our values — engineering discipline, relentless performance, and the long view. Below: the drivers we currently back.
          </p>
        </div>
      </section>

      {/* ROSTER */}
      <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 }}>Current roster</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>Drivers in Solo colours.</H2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {sponsorships.map((s) => (
              <div
                key={s.id}
                onClick={() => onNavigate(s.page)}
                style={{
                  background: "var(--bg)", border: "1px solid var(--line)",
                  cursor: "pointer", display: "flex", flexDirection: "column",
                  overflow: "hidden",
                  transition: "border-color 160ms, transform 200ms",
                }}
                onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--fg)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
                onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; e.currentTarget.style.transform = "translateY(0)"; }}
              >
                {/* Image */}
                <div style={{
                  position: "relative", aspectRatio: "4 / 3",
                  background: "var(--surface-deep)",
                  borderBottom: "1px solid var(--line)",
                }}>
                  {s.image ? (
                    <img
                      src={s.image}
                      alt={s.name}
                      style={{
                        position: "absolute", inset: 0,
                        width: "100%", height: "100%",
                        objectFit: "cover", display: "block",
                      }}
                      draggable={false}
                    />
                  ) : (
                    <BakedPhoto id={s.slotId} alt={s.name} />
                  )}
                </div>

                {/* Body */}
                <div style={{ padding: "32px 32px 32px", display: "flex", flexDirection: "column", flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
                    <Eyebrow>{s.kicker}</Eyebrow>
                    <Eyebrow style={{ color: "var(--fg)" }}>{s.since}</Eyebrow>
                  </div>
                  <H3 style={{ fontSize: 28, marginBottom: 14 }}>{s.name}</H3>
                  <p style={{
                    fontFamily: "var(--font-body)", fontSize: 14.5,
                    lineHeight: 1.6, color: "var(--fg-soft)",
                    margin: "0 0 24px",
                  }}>{s.summary}</p>
                  <div style={{
                    marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--line)",
                    display: "flex", justifyContent: "space-between", alignItems: "center",
                    fontFamily: "var(--font-body)", fontSize: 12, fontWeight: 500,
                    letterSpacing: "0.16em", color: "var(--fg)",
                    textTransform: "uppercase",
                  }}>
                    <span>View full profile</span>
                    <span>→</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MORE TO COME */}
      <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 }}>Future sponsorships</Eyebrow>
              <SectionNumeral n={2} />
            </div>
            <H2 style={{ color: "var(--fg-dim)" }}>More to come.</H2>
          </div>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17,
            lineHeight: 1.55, color: "var(--fg-soft)",
            margin: "0 0 32px", maxWidth: 720,
          }}>
            Solo's sponsorship programme is small by design — we partner with a handful of carefully chosen drivers, teams and projects. If you're working on something that fits our values, we'd like to hear about it.
          </p>
          <Button onClick={() => onNavigate("contact", { subject: "Propose a sponsorship partnership" })}>Propose a partnership →</Button>
        </div>
      </section>

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

/* ════════════════════ CAREERS ════════════════════ */
function CareersPage({ onNavigate, formSubject }) {
  const roles = [
    { ref: "ENG-015", title: "Production line technician",  team: "Manufacturing", loc: "UK · On-site",                     type: "Full-time" },
    { ref: "CMM-003", title: "Channel sales manager",       team: "Commercial",    loc: "North America · Wellington, Florida region",  type: "Full-time" },
  ];
  const [careersSubject, setCareersSubject] = useState(formSubject || "");
  useEffect(() => { if (formSubject) setCareersSubject(formSubject); }, [formSubject]);

  // Scroll-to-form helper
  const applyTo = (roleTitle) => {
    setCareersSubject(`Apply: ${roleTitle}`);
    setTimeout(() => {
      document.getElementById("careers-form")?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 50);
  };
  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Join Solo</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,
          }}>
            Careers.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 800,
          }}>
            We're always looking for talent — so feel free to reach out if you want to join the Solo family.
          </p>
        </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 }}>Open roles</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>{roles.length} open roles.</H2>
          </div>
          <div style={{ background: "var(--bg)", border: "1px solid var(--line)" }}>
            {roles.map((r, i) => (
              <div key={r.ref}
                onClick={() => applyTo(r.title)}
                style={{
                  display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr 60px",
                  gap: 24, padding: "24px 28px",
                  borderTop: i ? "1px solid var(--line)" : "none",
                  alignItems: "center", cursor: "pointer",
                  transition: "background 140ms",
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--surface)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
              >
                <span style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: 17, letterSpacing: "0.005em",
                  textTransform: "uppercase", color: "var(--fg)",
                }}>{r.title}</span>
                <span style={{
                  fontFamily: "var(--font-body)", fontSize: 13,
                  color: "var(--fg-soft)",
                }}>{r.team}</span>
                <span style={{
                  fontFamily: "var(--font-body)", fontSize: 13,
                  color: "var(--fg-soft)",
                }}>{r.loc}</span>
                <span style={{
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.18em", color: "var(--fg-dim)",
                  textTransform: "uppercase",
                }}>{r.type}</span>
                <span style={{
                  fontFamily: "var(--font-body)", fontSize: 16,
                  color: "var(--fg)", textAlign: "right",
                }}>→</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40 }}>
            <Button onClick={() => applyTo("Speculative application")}>
              Don't see your role? Apply speculatively →
            </Button>
          </div>
        </div>
      </section>

      {/* APPLICATION FORM */}
      <section id="careers-form" 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" }}>
            <Eyebrow>Apply to Solo</Eyebrow>
            <H2>Send us your application.</H2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "start" }}>
            <div>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 17,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 22,
              }}>
                Tell us which role you're interested in, share your background and attach a CV. We respond within one working day.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 15,
                lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
              }}>
                Speculative applications welcome — we hire engineers, technicians, operators and commercial roles across UK, Poland and North America.
              </p>
            </div>
            <ContactForm formType="careers" subject={careersSubject} compact />
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════ SUSTAINABILITY ════════════════════ */
function SustainabilityPage({ onNavigate }) {
  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Responsible by design</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            // "Sustainability." is a long single word — the old 144px
            // ceiling made it wider than the 1280px column at desktop
            // widths, forcing an ugly mid-character break.
            fontSize: "clamp(48px, 6.9vw, 96px)", lineHeight: 0.92,
            letterSpacing: "-0.01em", textTransform: "uppercase",
            margin: "0 0 36px", color: "var(--fg)", maxWidth: 1280,
            overflowWrap: "break-word", wordBreak: "normal", hyphens: "manual",
          }}>
            Sustainability.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 800,
          }}>
            Solar-hybrid power, long-life LFP batteries and a 7-year spares pipeline mean a Solo unit stays in the field for longer and burns less fuel doing it. Engineered for the long term.
          </p>

          {/* Stat strip — vertical row list (see Regions page comment above
              for why: long values/labels like "30+ days" / "Off-grid
              autonomy without sunlight" wrapped and misaligned the grid). */}
          <div style={{ marginTop: 64 }}>
            <StatRow large stats={[
              ["100%",     "Solar-hybrid capable"],
              ["30+ days", "Off-grid autonomy without sunlight"],
              ["7 years",  "Spares pipeline"],
              ["UK",       "Designed & built"],
            ]} />
          </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 }}>Our commitments</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>What we measure.</H2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, border: "1px solid var(--line)" }}>
            {[
              { n: "01", t: "Power",   b: "Every Pro Tower ships solar-hybrid as standard. Diesel generators are an option only where the site demands it. We report fuel use per deployment back to the customer." },
              { n: "02", t: "Lifecycle", b: "Modular design means individual components can be swapped without retiring the unit. Frames last over a decade in the field. Spares guaranteed for 7 years." },
              { n: "03", t: "Operations", b: "Our UK manufacturing facility runs on 100% renewable electricity. We measure crew miles per deployment and route-optimise to reduce travel emissions." },
            ].map((m) => (
              <div key={m.n} style={{
                padding: "44px 32px 48px",
                background: "var(--bg)",
                borderRight: m.n !== "03" ? "1px solid var(--line)" : "none",
              }}>
                <H3 style={{ fontSize: 22, marginBottom: 16 }}>{m.t}</H3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 15,
                  lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
                }}>{m.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

/* ════════════════════ OUR STORY ════════════════════ */
function OurStoryPage({ onNavigate }) {
  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>About Solo</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,
          }}>
            Our story.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 21,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 860,
          }}>
            Solo started with a clear technical vision and a stubborn belief that the rapidly-deployable security market deserved better products. Six years on, that vision runs every part of the business — engineering, manufacturing, services, and the team we've built around it.
          </p>
        </div>
      </section>

      {/* FOUNDER */}
      <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" }}>
            <Eyebrow>The founder</Eyebrow>
            <H2>Aaron Eastwood.</H2>
          </div>

          <div style={{
            background: "var(--bg)", border: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "1fr 1.4fr",
            overflow: "hidden",
          }}>
            {/* Portrait slot */}
            <div style={{
              position: "relative", aspectRatio: "3 / 4",
              background: "var(--surface)",
              borderRight: "1px solid var(--line)",
            }}>
              <BakedPhoto id="our-story-founder-portrait" alt="Aaron Eastwood, Founder" />
            </div>

            {/* Bio */}
            <div style={{ padding: "48px 48px 48px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
              <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 22 }}>
                <Eyebrow>Founder · Chief Innovation Officer</Eyebrow>
                <Eyebrow style={{ color: "var(--fg)" }}>Since 2019</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)",
              }}>Engineer first.</h3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16.5,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 18,
              }}>
                Aaron Eastwood is Solo's founder and Chief Innovation Officer. He started his professional career in IT and security at 19, going on to build and run a successful IT and security company — the work that ultimately led him to found Solo.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 16.5,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 28,
              }}>
                That depth — across IT, electronics and physical security — is why every decision at Solo is made with a technical vision. The product range, the engineering culture and the in-house operating model all trace back to it.
              </p>

              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <Button onClick={() => onNavigate("leadership")}>Meet the team →</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PROUDEST MOMENT — pull-quote */}
      <section style={{ padding: "120px 36px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2.4fr", gap: 80, alignItems: "start" }}>
            <Eyebrow>What we're proud of</Eyebrow>
            <div>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: "clamp(32px, 4.4vw, 64px)", lineHeight: 1.05,
                letterSpacing: "-0.005em", textTransform: "uppercase",
                margin: "0 0 32px", color: "var(--fg)", maxWidth: 1100,
              }}>
                Growing the team. Building the products. Staying true to the goal — industry-leading work.
              </h2>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 17,
                lineHeight: 1.6, color: "var(--fg-soft)", margin: 0, maxWidth: 760,
              }}>
                We measure success at Solo three ways: how the team has grown, how the products have evolved, and whether we've stayed true to the goal we set in 2019 — to make industry-leading rapidly-deployable security. On all three counts, we're proud of where we are.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 2025 — THE TURNING POINT */}
      <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" }}>
            <Eyebrow>2025 — A turning point</Eyebrow>
            <H2>The Pro Cam Tower changed everything.</H2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 18,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 22,
              }}>
                In 2025 we released the Pro Cam Tower — and the rest of the business followed. Procurement, the production line, and operations across every part of Solo were redesigned around the new platform.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 18,
                lineHeight: 1.6, color: "var(--fg-soft)", marginBottom: 32,
              }}>
                It was a significant change to take on as one business — but the team embraced it. It's the year Solo went from being a product company to a platform company.
              </p>

              {/* Stat row */}
              <div style={{
                display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
                border: "1px solid var(--line)", background: "var(--bg)",
              }}>
                {[
                  ["Procurement", "Rebuilt around the new platform"],
                  ["Production",  "Redesigned line, new flow"],
                  ["Operations",  "Restructured across the group"],
                ].map(([t, b], i, arr) => (
                  <div key={i} style={{
                    padding: "26px 24px",
                    borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                  }}>
                    <div style={{
                      fontFamily: "var(--font-display)", fontWeight: 700,
                      fontSize: 16, letterSpacing: "0.005em",
                      textTransform: "uppercase", color: "var(--fg)",
                      marginBottom: 8,
                    }}>{t}</div>
                    <div style={{
                      fontFamily: "var(--font-body)", fontSize: 13.5,
                      lineHeight: 1.5, color: "var(--fg-soft)",
                    }}>{b}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Image — factory floor / production shot */}
            <div style={{
              position: "relative", aspectRatio: "4 / 5",
              background: "var(--bg)",
              border: "1px solid var(--line)", overflow: "hidden",
            }}>
              <BakedPhoto id="our-story-2025" alt="Solo HQ — Bedfordshire" />
              <div style={{
                position: "absolute", top: 20, left: 22,
                fontFamily: "var(--font-body)", fontSize: 11,
                letterSpacing: "0.22em", textTransform: "uppercase",
                color: "#fff", background: "rgba(0,0,0,0.55)",
                padding: "6px 10px", backdropFilter: "blur(6px)",
              }}>2025 · Solo HQ · Bedfordshire</div>
            </div>
          </div>
        </div>
      </section>

      {/* WHERE WE ARE TODAY */}
      <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" }}>
            <Eyebrow>Today</Eyebrow>
            <H2>Where Solo is now.</H2>
          </div>

          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)",
            maxWidth: 920, marginBottom: 48,
          }}>
            A team of over 25 people across three locations — UK, Poland and North America. The biggest progress in the company's history came this year. Six service lines running as one operation. Three exclusive regions, three partner regions, and a product range trusted across UK and international deployments.
          </p>

          {/* Headline figures — vertical row list (see Regions page for why). */}
          <StatRow large stats={[
            ["25+", "Team members"],
            ["3",   "Locations · UK · Poland · North America"],
            ["6",   "Service lines"],
            ["2019", "Founded"],
          ]} />
        </div>
      </section>

      {/* CTA — Meet the leadership team */}
      <section style={{
        padding: "140px 36px",
        background: "var(--black)", color: "var(--invert-fg)",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{
          maxWidth: 1480, margin: "0 auto",
          display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 80, alignItems: "center",
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-body)", fontSize: 12,
              letterSpacing: "0.22em", textTransform: "uppercase",
              color: "rgba(255,255,255,0.6)", fontWeight: 500, marginBottom: 32,
            }}>The team behind it</div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(40px, 5.5vw, 84px)", lineHeight: 1,
              letterSpacing: "-0.005em", textTransform: "uppercase",
              margin: 0, color: "var(--invert-fg)",
            }}>
              Meet the leadership team.
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 22, alignItems: "flex-start" }}>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 17,
              lineHeight: 1.55, color: "rgba(255,255,255,0.75)", margin: 0,
            }}>
              The people running Solo across engineering, manufacturing, commercial and operations.
            </p>
            <Button white onClick={() => onNavigate("leadership")}>
              Meet the team →
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  ServicesPage, RegionsPage, PartnersPage, SponsorsPage, CareersPage, SustainabilityPage, OurStoryPage,
});
