// Company sub-pages: Leadership, Manufacturing, Press & Media, Investors, ESG & Compliance.
// All built strictly to brand — monochrome, all-caps Eurostile headings, big section numerals,
// dashed image-slots ready for real assets.

/* ════════════════════ LEADERSHIP ════════════════════ */
// Chris Johnson is listed on BOTH the UK and North America leadership groups since he
// covers both offices. Keep the bio in one constant so the two cards stay
// in sync — edit here and both cards update.
const CHRIS_BIO = "Chris Johnson serves as Solo's Non-Exec Group Chairman, working across the UK and North America offices. He provides senior commercial oversight of the group's global operations — chairing the leadership team, guiding partner strategy across the North American and European channels, and representing Solo in top-tier customer and investor conversations.";

function LeadershipPage({ onNavigate }) {
  // Location groups. Each row = one leader; titles can be filled in later.
  // First names only, no surnames public.
  const groups = [
    {
      key:      "uae",
      label:    "UAE office",
      meta:     "GCC region",
      note:     "Founder · operating from the GCC region.",
      people: [
        {
          first: "Aaron",
          title: "Founder · Chief Innovation Officer",
          photo: "assets/team-aaron.png",
          bio: "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, work that ultimately led him to found Solo. That depth across IT, electronics and physical security shapes every decision at Solo, from the product range to the engineering culture and the in-house operating model.",
        },
      ],
    },
    {
      key:      "uk",
      label:    "United Kingdom",
      meta:     "Bedfordshire HQ",
      note:     "The UK team runs Solo end-to-end — from senior leadership through to the engineers, workshop specialists and transport crew who build, prepare and move every unit.",
      // UK now has three sub-groups rendered as sub-sections within a single UK block.
      subgroups: [
        {
          key:   "uk-leadership",
          label: "Leadership",
          note:  "UK leadership across operations, commercial and engineering.",
          people: [
            // Georgie + Jay: no persisted photo yet — silhouette + drop-slot stay
            // active (no comingSoon flag) so their portraits can be dropped in.
            // Chris is listed under the UK & North America Regions section instead — he
            // covers both offices, so he doesn't sit in a single country group.
            { first: "Georgie", title: "Group Accounts Manager" },
            { first: "Ben",     title: "Account Manager" },
            { first: "Gareth",  title: "Head of Technical" },
            { first: "Josh",    title: "Head of Manufacturing" },
            { first: "Jay",     title: "Office Administrator", photo: "assets/team-jay.png?v=3" },
            { first: "Paige",   title: "HR Generalist" }, // photo persisted via drag-drop
          ],
        },
        {
          key:   "workshop",
          label: "Engineering & workshop",
          note:  "The people who design, fabricate, weld, powder-coat, assemble and test every Solo unit. Ten specialists across UK engineering and the workshop floor.",
          // `comingSoon: true` renders a "COMING SOON" placeholder card
          // instead of the silhouette + drop-slot — used when a portrait
          // isn't yet approved for release.
          people: [
            { first: "Gary",      title: "Workshop Supervisor" },
            { first: "Matt",      title: "Engineer" },
            { first: "Che",       title: "Engineer" },
            { first: "Pete",      title: "Engineer", comingSoon: true },
            { first: "Chris L",   title: "Engineer", comingSoon: true },
            { first: "Kanayo",    title: "Engineer" },
            { first: "Craig",     title: "Engineer" },
            { first: "Rob W",     title: "Print Manager" },
            { first: "Shane",     title: "Engineer" },
            { first: "Gleidston", title: "Engineer" },
          ],
        },
        {
          key:   "transport",
          label: "Transport & logistics",
          note:  "The people behind Solo's UK and EU transport operation — own O-licence, ADR-trained transport management, and full GPS tracking on every vehicle.",
          people: [
            { first: "Rob B", title: "Transport Manager & HGV Operator", comingSoon: true },
          ],
        },
      ],
    },
    {
      key:      "us",
      label:    "UK & North America Regions",
      // No meta sub-heading — the section covers two territories, no single city applies.
      meta:     "",
      note:     "Group leadership spanning the UK and North American operations.",
      people: [
        {
          first: "Chris", title: "Non-Exec Group Chairman", photo: "assets/team-chris.png", bio: CHRIS_BIO,
          // Per-person region tag override — Chris covers both offices, so
          // his card reads "Global" rather than the group's shared label.
          region: "Global",
        },
        {
          first: "Ryan Bach",
          title: "Chief Operating Officer, North America",
          photo: "assets/team-ryan.png",
          bio: "Ryan Bach leads Solo's North American business as Chief Operating Officer, with responsibility for regional strategy, operations, growth and organizational performance. Working closely with Solo's global leadership team, he directs the company's expansion across North America and oversees the commercial, operational and partner infrastructure supporting Solo's long-term growth.",
          // Per-person region tag override — Ryan is North America only.
          region: "North America",
        },
      ],
    },
    {
      key:      "poland",
      label:    "Poland",
      meta:     "Wrocław factory",
      note:     "Production leadership across the European manufacturing line.",
      people: [
        { first: "Tomasz",  title: "Partner", photo: "assets/team-tomasz.png" },
        { first: "Paweł",   title: "CTO",     photo: "assets/team-tadeusz.png" },
        { first: "Tadeusz", title: "CEO",     photo: "assets/team-pawel.png" },
      ],
    },
  ];

  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 100px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Company</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,
          }}>Solo Team!</h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 21,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 860,
          }}>
            The people running Solo across four locations — UAE, the United Kingdom, North America, and the Poland factory. Engineer-led, owner-operated, and working as one group.
          </p>
        </div>
      </section>

      {/* GLOBAL LEADERSHIP — UAE (Aaron + Chris Johnson) + North America (Ryan) rendered
          in a single 3-across row so the whole senior team sits together
          before the UK deep-dive. Each card labels the region it belongs to. */}
      {(() => {
        const uae = groups.find(g => g.key === "uae");
        const us  = groups.find(g => g.key === "us");
        if (!uae || !us) return null;
        // Flatten into a single ordered list, tagging each entry with its region.
        const globalLeaders = [
          ...uae.people.map(p => ({ region: uae, person: p })),
          ...us.people.map(p  => ({ region: us,  person: p })),
        ];
        return (
          <section style={{
            padding: "100px 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: 48, alignItems: "end",
              }}>
                <Eyebrow>Global leadership</Eyebrow>
                <div>
                  <H2 style={{ marginBottom: 18 }}>Global Regions.</H2>
                  <p style={{
                    fontFamily: "var(--font-body)", fontSize: 16,
                    lineHeight: 1.55, color: "var(--fg-soft)",
                    margin: 0, maxWidth: 700,
                  }}>
                    Solo's founder operating from the GCC region, the Non-Exec Group Chairman spanning the UK and North America offices, and the North American operations lead in Wellington, Florida.
                  </p>
                </div>
              </div>

              {/* Cards row — auto sizes to number of leaders */}
              <div style={{
                display: "grid",
                gridTemplateColumns: `repeat(${globalLeaders.length}, 1fr)`,
                gap: 20,
              }} className="solo-global-leaders">
                <style>{`
                  @media (max-width: 1100px) { .solo-global-leaders { grid-template-columns: repeat(2, 1fr) !important; } }
                  @media (max-width: 820px)  { .solo-global-leaders { grid-template-columns: 1fr !important; } }
                `}</style>
                {globalLeaders.map(({ region, person }, i) => (
                  <div key={region.key + "-" + i} style={{
                    display: "flex", flexDirection: "column", gap: 16,
                  }}>
                    <div style={{
                      display: "flex", alignItems: "baseline",
                      justifyContent: "space-between", gap: 16,
                      paddingBottom: 12,
                      borderBottom: "1px solid var(--line)",
                    }}>
                      {/* Per-person region tag (falls back to the group
                          label if a person doesn't set their own) — lets
                          Chris ("UK and Northern America") and Ryan
                          ("North America") show distinct region text even
                          though they share one leadership group. */}
                      <div style={{
                        fontFamily: "var(--font-display)", fontWeight: 700,
                        fontSize: 20, letterSpacing: "0.005em",
                        textTransform: "uppercase", color: "var(--fg)",
                      }}>{person.region || region.label}</div>
                      {region.meta ? (
                        <div style={{
                          fontFamily: "var(--font-body)", fontSize: 11,
                          letterSpacing: "0.22em", textTransform: "uppercase",
                          color: "var(--fg-dim)", fontWeight: 500,
                        }}>{region.meta}</div>
                      ) : null}
                    </div>
                    <PersonCard person={person} bg="bg" group={region.key} />
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      })()}

      {/* LEADERSHIP BY LOCATION (excludes UAE + North America — rendered above) */}
      {groups.filter(g => g.key !== "uae" && g.key !== "us").map((g, gi) => (
        <section
          key={g.key}
          style={{
            padding: "100px 36px",
            background: gi % 2 === 0 ? "var(--surface)" : "var(--bg)",
            borderBottom: "1px solid var(--line)",
          }}
        >
          <div style={{ maxWidth: 1480, margin: "0 auto" }}>
            {/* Group header */}
            <div style={{
              display: "grid", gridTemplateColumns: "1fr 1.6fr",
              gap: 80, marginBottom: 48, alignItems: "end",
            }}>
              <Eyebrow>{g.meta}</Eyebrow>
              <div>
                <H2 style={{ marginBottom: 18 }}>{g.label}.</H2>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 16,
                  lineHeight: 1.55, color: "var(--fg-soft)",
                  margin: 0, maxWidth: 700,
                }}>{g.note}</p>
              </div>
            </div>

            {/* Either subgroups (UK) OR a flat people grid */}
            {g.subgroups ? (
              <div style={{ display: "flex", flexDirection: "column", gap: 72 }}>
                {g.subgroups.map((sg, sgi) => (
                  <div key={sg.key}>
                    {/* Sub-group header — smaller than the top-level group heading */}
                    <div style={{
                      display: "grid", gridTemplateColumns: "1fr 1.6fr",
                      gap: 80, marginBottom: 32, alignItems: "end",
                      paddingTop: sgi === 0 ? 0 : 12,
                      borderTop: sgi === 0 ? "none" : "1px solid var(--line)",
                      paddingBlockStart: sgi === 0 ? 0 : 48,
                    }}>
                      <div style={{
                        fontFamily: "var(--font-body)", fontSize: 11,
                        letterSpacing: "0.22em", textTransform: "uppercase",
                        color: "var(--fg-dim)", fontWeight: 500,
                      }}>{`0${sgi + 1}`} · {g.label}</div>
                      <div>
                        <h3 style={{
                          fontFamily: "var(--font-display)", fontWeight: 700,
                          fontSize: "clamp(24px, 2.4vw, 34px)",
                          lineHeight: 1.1, letterSpacing: "-0.005em",
                          textTransform: "uppercase", margin: "0 0 14px",
                          color: "var(--fg)",
                        }}>{sg.label}.</h3>
                        <p style={{
                          fontFamily: "var(--font-body)", fontSize: 15,
                          lineHeight: 1.55, color: "var(--fg-soft)",
                          margin: 0, maxWidth: 700,
                        }}>{sg.note}</p>
                      </div>
                    </div>
                    <PeopleGrid
                      people={sg.people}
                      bg={gi % 2 === 0 ? "bg" : "surface"}
                      group={sg.key}
                    />
                  </div>
                ))}
              </div>
            ) : (
              <PeopleGrid people={g.people} bg={gi % 2 === 0 ? "bg" : "surface"} group={g.key} />
            )}
          </div>
        </section>
      ))}

      {/* WE'RE HIRING BANNER */}
      <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,
            }}>Solo is growing</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)",
            }}>
              We're hiring across every 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,
            }}>
              Engineers, technicians, operators, commercial leaders — across UK, Poland and North America.
            </p>
            <Button white onClick={() => onNavigate("careers")}>
              See open roles →
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

/* ──────────── PeopleGrid ────────────
 * Grid of leadership / team cards. Each card has a real photo slot — large
 * enough for a head-and-shoulders portrait — plus first name and title.
 * Same card used by every section on the page so they're visually uniform.
 */
function PeopleGrid({ people, bg, group }) {
  return (
    <div style={{
      display: "grid",
      // FIXED 4 columns so cards are the same size across every section,
      // regardless of how many people are in the row. A section with
      // 1 person (North America — Ryan) renders the card at the same width as a
      // section with 6 people (UK), with empty slots to the right.
      // Responsive: collapses via CSS query below.
      gridTemplateColumns: "repeat(4, 1fr)",
      gap: 20,
    }} className="solo-people-grid">
      <style>{`
        /* Tablet: 3 columns. Small tablet / large phone: 2. Phone: 1. */
        @media (max-width: 1100px) { .solo-people-grid { grid-template-columns: repeat(3, 1fr) !important; } }
        @media (max-width: 820px)  { .solo-people-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 520px)  { .solo-people-grid { grid-template-columns: 1fr !important; } }
      `}</style>
      {people.map((p, i) => (
        <PersonCard key={p.first + i} person={p} bg={bg} group={group} />
      ))}
    </div>
  );
}

/* ──────────── PersonCard ────────────
 * Unified card across the whole Leadership page. Big portrait slot on top
 * (4 / 5 aspect — head-and-shoulders friendly), name + title underneath.
 * Initials show through the slot until a real photo is dropped in.
 *
 * BIO OVERLAY — when `person.bio` is set, a small "Read bio" tag appears in
 * the top-right of the portrait. Hovering the card fades in a full-portrait
 * overlay with the bio text; on touch devices, tapping the card toggles it.
 * Cards without a bio behave exactly as before — nothing changes visually.
 */
function PersonCard({ person, bg, group }) {
  const cardBg = bg === "surface" ? "var(--bg)" : "var(--surface)";
  // Stable slot id so dropped photos persist across reloads.
  const slug = (person.first || "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
  const slotId = `leader-${group || "x"}-${slug}`;

  const hasBio = !!person.bio && !person.comingSoon;
  const [tapOpen, setTapOpen] = useState(false);

  return (
    <div
      className={hasBio ? "solo-person-card has-bio" : "solo-person-card"}
      onClick={hasBio ? () => setTapOpen(o => !o) : undefined}
      style={{
      background: cardBg,
      border: "1px solid var(--line)",
      display: "flex", flexDirection: "column",
      cursor: hasBio ? "pointer" : "default",
      position: "relative",
    }}>
      {/* Portrait slot — uniform 4:5 across every card. `comingSoon`
          people get a plain "COMING SOON" label instead of a silhouette
          or drop-slot; useful for team members whose photo isn't yet
          approved for release. */}
      <div style={{
        position: "relative",
        aspectRatio: "4 / 5",
        background: "var(--surface-deep)",
        borderBottom: "1px solid var(--line)",
        overflow: "hidden",
      }}>
        {person.comingSoon ? (
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            flexDirection: "column", gap: 8,
          }}>
            <div style={{
              fontFamily: "var(--font-body)", fontSize: 10,
              letterSpacing: "0.32em", textTransform: "uppercase",
              color: "var(--fg-faint)", fontWeight: 500,
            }}>Portrait</div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 18, letterSpacing: "0.02em",
              textTransform: "uppercase", color: "var(--fg-dim)",
            }}>Coming soon</div>
          </div>
        ) : (
          <>
            {/* Silhouette placeholder behind the image-slot — clean monochrome
                head-and-shoulders outline. Visible until the user drops a real
                photo on the slot above. */}
            <div aria-hidden style={{
              position: "absolute", inset: 0,
              display: "flex", alignItems: "flex-end", justifyContent: "center",
              color: "var(--fg-faint)",
              pointerEvents: "none",
              zIndex: 0,
            }}>
              <PortraitSilhouette />
            </div>
            {/* Initials caption underneath the silhouette */}
            <div aria-hidden style={{
              position: "absolute",
              top: "10%", left: 0, right: 0,
              display: "flex", justifyContent: "center",
              fontFamily: "var(--font-body)", fontSize: 10,
              letterSpacing: "0.32em", textTransform: "uppercase",
              color: "var(--fg-faint)",
              pointerEvents: "none",
              zIndex: 0,
            }}>
              {getInitials(person.first)}
            </div>
            {person.photo ? (
              <img
                src={person.photo}
                alt={person.first}
                draggable={false}
                style={{
                  position: "absolute", inset: 0,
                  width: "100%", height: "100%",
                  objectFit: "cover", display: "block",
                }}
              />
            ) : (
              <BakedPhoto id={slotId} alt={person.first} />
            )}
            {/* Bio hover overlay — only rendered when a bio exists.
                Fades in over the portrait on hover / tap; keyboard users get
                it on focus. Tap-to-toggle drives the same visibility so
                touch devices work without hover. */}
            {hasBio && (
              <>
                {/* Small "Read bio" tag anchored top-right so it's clear the
                    card has more to reveal, even before you interact. */}
                <div className="solo-bio-tag" aria-hidden style={{
                  position: "absolute", top: 12, right: 12,
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "5px 9px 5px 8px",
                  background: "rgba(10,10,10,0.72)",
                  backdropFilter: "blur(8px)",
                  WebkitBackdropFilter: "blur(8px)",
                  color: "#fff",
                  fontFamily: "var(--font-body)",
                  fontSize: 10, letterSpacing: "0.18em",
                  textTransform: "uppercase", fontWeight: 500,
                  border: "1px solid rgba(255,255,255,0.18)",
                  transition: "opacity 220ms",
                  pointerEvents: "none",
                  zIndex: 3,
                }}>
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden>
                    <circle cx="5" cy="5" r="4.3" stroke="currentColor" strokeWidth="1" />
                    <rect x="4.4" y="4" width="1.2" height="3.2" fill="currentColor" />
                    <circle cx="5" cy="2.6" r="0.7" fill="currentColor" />
                  </svg>
                  Bio
                </div>
                {/* Full-portrait overlay with the bio text. Visibility is
                    driven by two channels:
                      1. CSS `:hover` on the parent .solo-person-card (desktop)
                      2. .bio-open class toggled by React `tapOpen` (mobile) */}
                <div
                  className={"solo-bio-overlay" + (tapOpen ? " bio-open" : "")}
                  role="dialog"
                  aria-label={`${person.first} — bio`}
                  style={{
                    position: "absolute", inset: 0,
                    background: "linear-gradient(180deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.95) 100%)",
                    color: "#f5f5f5",
                    padding: "24px 22px",
                    display: "flex", flexDirection: "column",
                    justifyContent: "flex-end",
                    opacity: tapOpen ? 1 : 0,
                    transition: "opacity 260ms cubic-bezier(0.4, 0, 0.2, 1)",
                    pointerEvents: tapOpen ? "auto" : "none",
                    zIndex: 4,
                    overflow: "auto",
                  }}
                >
                  <div style={{
                    fontFamily: "var(--font-body)", fontSize: 10,
                    letterSpacing: "0.24em", textTransform: "uppercase",
                    color: "rgba(255,255,255,0.55)", marginBottom: 12,
                    fontWeight: 500,
                  }}>{person.title || "Bio"}</div>
                  <div style={{
                    fontFamily: "var(--font-body)", fontSize: 14,
                    lineHeight: 1.55, color: "#f0f0f0",
                    // Keep long bios readable — allow a subtle inner scroll
                    // rather than pushing the card taller.
                    maxHeight: "100%",
                  }}>{person.bio}</div>
                </div>
              </>
            )}
          </>
        )}
      </div>
      {/* Caption */}
      <div style={{ padding: "20px 22px 24px" }}>
        <div style={{
          fontFamily: "var(--font-display)", fontWeight: 700,
          fontSize: 18, letterSpacing: "0.005em",
          textTransform: "uppercase", color: "var(--fg)",
        }}>{person.first}</div>
        <div style={{
          marginTop: 8,
          fontFamily: "var(--font-body)", fontSize: 12,
          letterSpacing: "0.14em", textTransform: "uppercase",
          color: person.title === "Title TBC" ? "var(--fg-faint)" : "var(--fg-dim)",
          fontWeight: 500,
        }}>{person.title || "Title TBC"}</div>
      </div>
    </div>
  );
}

function getInitials(name) {
  return (name || "")
    .split(/\s+/)
    .map(w => w[0])
    .slice(0, 2)
    .join("")
    .toUpperCase();
}

/* ──────────── PortraitSilhouette ────────────
 * Clean monochrome head-and-shoulders outline. Used as the placeholder
 * behind every PersonCard's image-slot — a real photo, when dropped onto
 * the slot, covers this silhouette. The silhouette fills the bottom of
 * the card with a rounded head + sloping shoulders, giving the empty
 * state a recognisable "person here" shape without being figurative.
 *
 * Stroke uses currentColor so it inherits the parent's `color` value
 * (fg-faint in our usage). */
function PortraitSilhouette() {
  return (
    <svg
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMax meet"
      style={{ width: "80%", height: "90%", display: "block" }}
      aria-hidden
    >
      {/* Head — circle */}
      <circle cx="50" cy="42" r="18"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.4" />
      {/* Shoulders — wide arc that meets the bottom edge */}
      <path
        d="M 14 100
           C 14 82, 32 70, 50 70
           C 68 70, 86 82, 86 100"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.4"
        strokeLinecap="round"
      />
    </svg>
  );
}

/* ════════════════════ MANUFACTURING ════════════════════ */
function ManufacturingPage({ onNavigate }) {
  const sites = [
    { code: "M-01", city: "Bedfordshire", country: "United Kingdom", role: "HQ + Factory", since: "2019", focus: "Engineering, R&D, EU/UK production" },
    { code: "M-02", city: "Wrocław",      country: "Poland",         role: "Factory",      since: "2023", focus: "European production capacity" },
    { code: "M-03", city: "Wellington",   country: "North America", role: "Factory",      since: "2025", focus: "North American production" },
  ];
  return (
    <>
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>How we build</Eyebrow>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 700,
            // "Manufacturing." 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. Sized so the
            // full word always fits on one line.
            fontSize: "clamp(48px, 6.2vw, 88px)", lineHeight: 0.92,
            letterSpacing: "-0.01em", textTransform: "uppercase",
            margin: "0 0 36px", color: "var(--fg)", maxWidth: 1280,
            overflowWrap: "break-word", wordBreak: "normal", hyphens: "manual",
          }}>
            Manufacturing.
          </h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 20,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 800,
          }}>
            Three factories. One operating standard. Every Solo unit is built to ISO 9001 quality on production lines in Bedfordshire, Wrocław and Wellington — and burned-in on site before it ships.
          </p>

          <div style={{
            marginTop: 64,
            display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
            borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)",
          }}>
            {[
              ["3",        "Factories"],
              ["ISO 9001", "Quality management"],
              ["ISO 27001", "Information security"],
              ["7 years",  "Spares pipeline"],
            ].map(([v, l], i) => (
              <div key={i} style={{
                padding: "36px 0",
                paddingLeft:  i === 0 ? 0 : 32,
                paddingRight: i === 3 ? 0 : 32,
                borderRight: i < 3 ? "1px solid var(--line)" : "none",
              }}>
                <Stat value={v} label={l} large />
              </div>
            ))}
          </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 }}>Production sites</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>Three factories.</H2>
          </div>

          {sites.map((s, i) => (
            <div key={s.code} style={{
              border: "1px solid var(--line)",
              background: "var(--bg)",
              marginBottom: i < sites.length - 1 ? 24 : 0,
              // minmax(0, 1fr) on each column locks the two halves to equal
              // 50/50 widths regardless of inner content — so all three
              // factory cards have identically-sized photo slots.
              display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
              overflow: "hidden",
            }}>
              <div style={{
                position: "relative",
                aspectRatio: "4 / 3",
                background: "var(--surface)",
              }}>
                <BakedPhoto id={`factory-${s.code}`} alt={`${s.city} factory`} />
              </div>
              <div style={{ padding: "40px 40px 40px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ marginBottom: 20 }}>
                  <Eyebrow style={{ color: "var(--fg)" }}>Operational since {s.since}</Eyebrow>
                </div>
                <h3 style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1,
                  letterSpacing: "0.005em", textTransform: "uppercase",
                  margin: "0 0 8px", color: "var(--fg)",
                }}>{s.city}</h3>
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--fg-dim)", fontWeight: 500, marginBottom: 24,
                }}>{s.country}</div>
                <div style={{
                  display: "grid", gridTemplateColumns: "auto 1fr",
                  gap: "10px 24px", borderTop: "1px solid var(--line)",
                  paddingTop: 22,
                }}>
                  <span style={{
                    fontFamily: "var(--font-body)", fontSize: 11,
                    letterSpacing: "0.18em", color: "var(--fg-dim)",
                    textTransform: "uppercase", fontWeight: 500,
                  }}>Role</span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--fg)" }}>{s.role}</span>
                  <span style={{
                    fontFamily: "var(--font-body)", fontSize: 11,
                    letterSpacing: "0.18em", color: "var(--fg-dim)",
                    textTransform: "uppercase", fontWeight: 500,
                  }}>Focus</span>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 15, color: "var(--fg)" }}>{s.focus}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* QUALITY + PROCESS */}
      <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 }}>Process</Eyebrow>
              <SectionNumeral n={2} />
            </div>
            <H2>End-to-end, in-house.</H2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, border: "1px solid var(--line)" }}>
            {[
              { n: "01", t: "Engineer", b: "Mechanical, electrical and engineered in-house at Bedfordshire R&D." },
              { n: "02", t: "Fabricate", b: "Chassis, mast and cabinet fabricated on our own production lines." },
              { n: "03", t: "Integrate", b: "Optics, comms and analytics integrated and configured to the order spec." },
              { n: "04", t: "Burn-in",   b: "Every unit run on a test bench for 72 hours before despatch. No exceptions." },
            ].map((m, i, arr) => (
              <div key={m.n} style={{
                padding: "40px 28px 48px",
                background: "var(--bg)",
                borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
              }}>
                <H3 style={{ fontSize: 22, marginBottom: 14 }}>{m.t}</H3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14.5,
                  lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
                }}>{m.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

/* ════════════════════ PRESS & MEDIA ════════════════════ */
function PressPage({ onNavigate, formSubject }) {
  // Five media-kit asset cards — all confirmed ready for distribution.
  const kit = [
    { title: "Brand assets",          body: "Logo lockups, colour palette, typography, brand book." },
    { title: "Product imagery (studio)", body: "Studio renders of every product in the current range." },
    { title: "Product imagery (field)",  body: "Field photography of Solo units on real deployments." },
    { title: "Leadership portraits",  body: "Approved portraits of Solo's senior team." },
    { title: "Factory + facility shots", body: "Production-floor and facility photography across UK, Poland and North America." },
  ];

  return (
    <>
      {/* HERO — black-and-white tower shot + headline */}
      <section style={{ padding: "80px 36px 0", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>News + media</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,
          }}>Press &amp; media.</h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 21,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 820,
            marginBottom: 64,
          }}>
            Solo's media kit and press office. Brand assets and approved imagery are available on request — and our team is available for interviews, briefings and comment on the rapid-deployable security market.
          </p>

          {/* Hero image — cinematic infrastructure shot. Uses the same
              substation/BESS hero photo used elsewhere in the site so
              press assets stay visually consistent. Grayscale filter
              gives it the "press kit" black-and-white treatment. */}
          <div style={{
            position: "relative",
            aspectRatio: "21 / 9",
            background: "var(--black)",
            border: "1px solid var(--line)",
            marginBottom: -1,   // sit flush with section border
            overflow: "hidden",
          }}>
            <img
              src="assets/hero-substation-bess.png"
              alt="Solo Secure tower on a substation deployment at dusk"
              style={{
                position: "absolute", inset: 0,
                width: "100%", height: "100%",
                objectFit: "cover",
                filter: "grayscale(1) contrast(1.05)",
                display: "block",
              }}
            />
          </div>
        </div>
      </section>

      {/* COMING SOON — releases + coverage */}
      <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>Press releases &amp; coverage</Eyebrow>
            <H2>Coming soon.</H2>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24,
          }}>
            <div style={{
              background: "var(--bg)",
              border: "1px solid var(--line)",
              padding: "40px 36px 44px",
              display: "flex", flexDirection: "column",
            }}>
              <Eyebrow style={{ marginBottom: 22 }}>Press releases</Eyebrow>
              <H3 style={{ fontSize: 22, marginBottom: 16 }}>Solo press office releases.</H3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 15,
                lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
              }}>
                Solo will publish press releases through this page as the news happens. For early access, get on the press list using the form below.
              </p>
            </div>
            <div style={{
              background: "var(--bg)",
              border: "1px solid var(--line)",
              padding: "40px 36px 44px",
              display: "flex", flexDirection: "column",
            }}>
              <Eyebrow style={{ marginBottom: 22 }}>In the press</Eyebrow>
              <H3 style={{ fontSize: 22, marginBottom: 16 }}>Coverage as it lands.</H3>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 15,
                lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
              }}>
                Trade press, industry features, podcasts and broadcast appearances will be tracked here as they go live.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* MEDIA KIT — five ready-to-distribute asset categories */}
      <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>Media kit</Eyebrow>
            <H2>Ready on request.</H2>
          </div>

          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17,
            lineHeight: 1.6, color: "var(--fg-soft)",
            maxWidth: 820, marginBottom: 48,
          }}>
            Five asset categories available to credentialed press. Request the kit using the form below and we'll respond same day where possible.
          </p>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
            gap: 0,
            border: "1px solid var(--line)",
          }}>
            {kit.map((k, i, arr) => (
              <div key={k.title} style={{
                padding: "36px 28px 40px",
                background: "var(--bg)",
                borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                display: "flex", flexDirection: "column",
                minHeight: 220,
              }}>
                <Eyebrow style={{ color: "var(--fg)", marginBottom: 20 }}>Available</Eyebrow>
                <H3 style={{ fontSize: 18, marginBottom: 14, lineHeight: 1.2 }}>{k.title}</H3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  lineHeight: 1.55, color: "var(--fg-soft)", margin: 0, flex: 1,
                }}>{k.body}</p>
                <div style={{
                  marginTop: 24, paddingTop: 16, borderTop: "1px solid var(--line)",
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--fg-dim)", fontWeight: 500,
                }}>On request →</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRESS CONTACT + ENQUIRY FORM */}
      <section id="press-form" 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>Press office</Eyebrow>
            <H2>Press enquiries.</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: 30,
              }}>
                For interviews, comment, or stories about Solo and the rapid-deployable security market, send the press office a brief. We respond same-day where possible.
              </p>

              {/* Dedicated press contact */}
              <div style={{
                background: "var(--bg)",
                border: "1px solid var(--line)",
                padding: "28px 30px 30px",
                marginBottom: 24,
              }}>
                <Eyebrow style={{ marginBottom: 14 }}>Press contact</Eyebrow>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: 22, letterSpacing: "0.005em",
                  textTransform: "uppercase", color: "var(--fg)",
                  marginBottom: 8,
                }}>Solo press office</div>
                <div style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  color: "var(--fg-soft)", marginBottom: 14,
                }}>Dedicated press contact — name + email forthcoming.</div>
                <a href="mailto:contactus@solosecure.group?subject=Press%20enquiry" style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  color: "var(--fg)", textDecoration: "underline",
                  fontWeight: 500,
                }}>contactus@solosecure.group</a>
              </div>

              {/* What to include in your brief */}
              <Eyebrow style={{ marginBottom: 14 }}>What to include in your brief</Eyebrow>
              <ul style={{
                listStyle: "none", padding: 0, margin: 0,
                fontFamily: "var(--font-body)", fontSize: 14.5,
                lineHeight: 1.6, color: "var(--fg-soft)",
              }}>
                {[
                  "Outlet, deadline, and the angle you're working on",
                  "Whether you need comment, interview, or assets",
                  "Specific assets if it's a kit request (logos / imagery / portraits)",
                  "Embargo information if you have one",
                ].map((bullet) => (
                  <li key={bullet} style={{
                    borderTop: "1px solid var(--line)",
                    padding: "12px 0", color: "var(--fg)",
                  }}>{bullet}</li>
                ))}
              </ul>
            </div>
            <ContactForm formType="press" subject={formSubject} compact />
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════ INVESTORS ════════════════════ */
function InvestorsPage({ onNavigate, formSubject }) {
  return (
    <>
      {/* HERO — self-funded story, no investor solicitation */}
      <section style={{ padding: "80px 36px 100px", 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,
          }}>Investors.</h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 21,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 880,
          }}>
            Solo has been self-funded from day one. Every penny of growth has been reinvested into the platform — and we're proud that we've grown exponentially every year since.
          </p>
        </div>
      </section>

      {/* PRINCIPLE — quiet headline section */}
      <section style={{
        padding: "100px 36px",
        background: "var(--surface)",
        borderBottom: "1px solid var(--line)",
      }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1.8fr", gap: 80, alignItems: "start" }}>
            <Eyebrow>Our position</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(32px, 4.4vw, 64px)", lineHeight: 1.05,
              letterSpacing: "-0.005em", textTransform: "uppercase",
              margin: 0, color: "var(--fg)", maxWidth: 1100,
            }}>
              Self-funded. Engineer-led. Owner-operated.
            </h2>
          </div>
        </div>
      </section>

      {/* MILESTONES — three honest flexes */}
      <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: 48, alignItems: "end" }}>
            <Eyebrow>Without external capital</Eyebrow>
            <H2>What we've built so far.</H2>
          </div>

          {/* "Since 2019" wraps to 2 lines while "2,000+" / "3" stay on one,
              which used to misalign the labels+body text beneath each
              column in this 3-col grid. Cap the number cell's min-height
              to the tallest possible wrapped value so all 3 body copy
              blocks start at the same Y regardless of number line-count. */}
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)",
            border: "1px solid var(--line)", background: "var(--bg)",
          }}>
            {[
              { stat: "2,000+",   label: "Units shipped",     body: "Every Solo unit in the field has been built, shipped and supported without external capital." },
              { stat: "3",        label: "Locations open",   body: "UK headquarters, Polish factory, and North American factory \u2014 stood up across three continents without dilution." },
              { stat: "Since 2019", label: "Continuous reinvestment", body: "Every penny of profit has gone back into engineering, manufacturing, and the team." },
            ].map((m, i, arr) => (
              <div key={i} style={{
                padding: "48px 36px 52px",
                borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
              }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: "clamp(36px, 4.6vw, 84px)", lineHeight: 1,
                  letterSpacing: "-0.02em", color: "var(--fg)",
                  marginBottom: 14, minHeight: "1.9em", display: "flex", alignItems: "flex-end",
                }}>{m.stat}</div>
                <Eyebrow style={{ color: "var(--fg)", marginBottom: 16 }}>{m.label}</Eyebrow>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14.5,
                  lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
                }}>{m.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* QUIET CLOSE — IR contact for confidential conversations */}
      <section id="investor-form" 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>Confidential enquiries</Eyebrow>
            <H2>Get in touch.</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,
              }}>
                Solo is privately owned and self-funded. We're not running an open fundraise, but we read every serious enquiry from strategic partners, investors, and corporate development teams.
              </p>
              <p style={{
                fontFamily: "var(--font-body)", fontSize: 15,
                lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
              }}>
                All enquiries handled confidentially. We respond personally within one working day.
              </p>
            </div>
            <ContactForm formType="investors" subject={formSubject} compact />
          </div>
        </div>
      </section>
    </>
  );
}

/* ════════════════════ ESG & COMPLIANCE ════════════════════ */
function ESGPage({ onNavigate }) {
  // Real certifications held by Solo.
  const certifications = [
    { name: "ISO 9001",        body: "Quality management systems — certified." },
    { name: "ISO 27001",       body: "Information security management — certified." },
    { name: "UKCA",            body: "UK Conformity Assessed — products marked and certified." },
    { name: "CE",              body: "European Conformity — products marked and certified." },
    { name: "Constructionline", body: "UK construction supply-chain accreditation." },
  ];

  // Policies that exist as documents and are available on written request.
  const policies = [
    { title: "Modern Slavery & Human Trafficking", body: "Solo's statement under Section 54 of the UK Modern Slavery Act 2015 — covering policy, supply-chain due diligence, and training." },
    { title: "Anti-bribery & Corruption",          body: "Zero-tolerance policy, gift and hospitality rules, and reporting channels for partners, suppliers and employees." },
    { title: "Environmental policy",               body: "Solar-hybrid by default, renewable power across UK operations, and measured fuel-per-deployment reporting." },
    { title: "Health, safety & wellbeing",         body: "Manual-handling-compliant product design, Constructionline accreditation, and mental-health-first-aider programme." },
    { title: "Quality management",                 body: "ISO 9001 certified production across UK, Polish and North American facilities. Documented manufacturing standard and audit programme." },
    { title: "Information security",               body: "ISO 27001 certified. UK GDPR compliant. Penetration testing across firmware and platform." },
  ];

  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 100px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Eyebrow style={{ marginBottom: 32 }}>Governance + responsibility</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,
          }}>ESG &amp; compli&shy;ance.</h1>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 21,
            lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 880,
          }}>
            The certifications and policies that underpin how Solo manufactures, sells and supports the platform. Available on request to Tier-1 procurement, partners, and credentialed press.
          </p>
        </div>
      </section>

      {/* CERTIFICATIONS — the real ones, prominently */}
      <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>Certifications</Eyebrow>
            <H2>What Solo is certified to.</H2>
          </div>
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            border: "1px solid var(--line)",
          }}>
            {certifications.map((c, i, arr) => (
              <div key={c.name} style={{
                padding: "40px 30px 44px",
                background: "var(--bg)",
                borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                display: "flex", flexDirection: "column",
                minHeight: 240,
              }}>
                <Eyebrow style={{ color: "var(--fg)", marginBottom: 22 }}>Certified</Eyebrow>
                <div style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: 22, letterSpacing: "0.005em",
                  textTransform: "uppercase", color: "var(--fg)",
                  marginBottom: 16,
                }}>{c.name}</div>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14,
                  lineHeight: 1.55, color: "var(--fg-soft)", margin: 0, flex: 1,
                }}>{c.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FACTORY + SUSTAINABILITY IMAGERY — wide hero band */}
      <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: 48, alignItems: "end" }}>
            <Eyebrow>Operating standard</Eyebrow>
            <H2>Built responsibly.</H2>
          </div>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17,
            lineHeight: 1.6, color: "var(--fg-soft)",
            maxWidth: 820, marginBottom: 48,
          }}>
            Every Solo unit is built across three certified facilities. Solar-hybrid power is standard. Aluminium chassis are non-corrosive and engineered for years in the field. Manual-handling-compliant design means a single crew can deploy without lifting equipment.
          </p>
          <div style={{
            position: "relative",
            aspectRatio: "21 / 9",
            background: "var(--surface-deep)",
            border: "1px solid var(--line)",
            overflow: "hidden",
          }}>
            <BakedPhoto id="esg-factory-hero" alt="Factory + sustainability" />
            <div aria-hidden style={{
              position: "absolute", inset: 0,
              display: "flex", alignItems: "center", justifyContent: "center",
              flexDirection: "column", gap: 14,
              color: "rgba(255,255,255,0.5)",
              fontFamily: "var(--font-body)", fontSize: 11,
              letterSpacing: "0.22em", textTransform: "uppercase",
              fontWeight: 500,
              pointerEvents: "none",
            }}>
              <div>Factory + sustainability photography</div>
              <div style={{ color: "rgba(255,255,255,0.3)", fontSize: 10 }}>
                Drop a photo onto this area
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* POLICIES — on request */}
      <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>Statements + policies</Eyebrow>
            <H2>Available on request.</H2>
          </div>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17,
            lineHeight: 1.6, color: "var(--fg-soft)",
            maxWidth: 820, marginBottom: 48,
          }}>
            Solo's compliance documents are held centrally and released on written request. Procurement, partner due-diligence, journalists \u2014 contact the compliance team and we'll route the right document within one working day.
          </p>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
            {policies.map((p) => (
              <div key={p.title} style={{
                background: "var(--bg)", border: "1px solid var(--line)",
                padding: "32px 32px 32px",
                display: "flex", flexDirection: "column",
              }}>
                <Eyebrow style={{ marginBottom: 22 }}>On request</Eyebrow>
                <H3 style={{ fontSize: 22, marginBottom: 14, lineHeight: 1.2 }}>{p.title}</H3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14.5,
                  lineHeight: 1.6, color: "var(--fg-soft)", margin: 0, flex: 1,
                }}>{p.body}</p>
                <div style={{
                  marginTop: 26, paddingTop: 16, borderTop: "1px solid var(--line)",
                  fontFamily: "var(--font-body)", fontSize: 11,
                  letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "var(--fg-dim)", fontWeight: 500,
                }}>Released on written request →</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 48 }}>
            <Button primary onClick={() => onNavigate("contact", { subject: "ESG / compliance enquiry" })}>
              Contact compliance team →
            </Button>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  LeadershipPage, ManufacturingPage, PressPage, InvestorsPage, ESGPage,
});