// Partner tier sub-pages.
// One reusable component, three configured exports — Exclusive Regions,
// Gold Partners, Platinum Partners. Built strictly to brand.

/* ──────────── Generic tier page ────────────
 * Same structural template across all three so updates stay easy.
 * Replace the placeholder copy and roster table when real details arrive.
 */
function PartnerTierPage({ onNavigate, tier }) {
  return (
    <>
      {/* HERO */}
      <section style={{ padding: "80px 36px 120px", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 1480, margin: "0 auto" }}>
          <Breadcrumb
            crumbs={["Home", "Partners", tier.title]}
            onNavigate={onNavigate}
            targets={["home", "partners"]}
          />

          <div style={{ marginTop: 36, maxWidth: 1100 }}>
            <Eyebrow style={{ marginBottom: 32 }}>{tier.region}</Eyebrow>
            <h1 style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              // Tightened top of the clamp — 128px was overflowing the
              // hero column on narrower desktops when the title runs
              // long ("Platinum Partners", "Gold Partners"). Also
              // constrain the box + allow break-word so nothing ever
              // pokes past the section's right padding.
              fontSize: "clamp(48px, 7vw, 128px)", lineHeight: 0.92,
              letterSpacing: "-0.01em", textTransform: "uppercase",
              margin: "0 0 36px", color: "var(--fg)",
              maxWidth: "100%", overflowWrap: "break-word",
              wordBreak: "normal", hyphens: "manual",
            }}>{tier.title}.</h1>
            <p style={{
              fontFamily: "var(--font-body)", fontSize: 20,
              lineHeight: 1.55, color: "var(--fg-soft)", maxWidth: 820,
            }}>{tier.intro}</p>
          </div>

          {/* Stat strip — a vertical row list rather than a 4-up grid.
              The 4-column grid broke on values that wrap to two lines
              (e.g. "North America"), which threw off row heights and
              misaligned every label beneath it. A stacked list has no
              per-column width constraint, so long values always sit on
              a single line regardless of viewport width. */}
          <div style={{
            marginTop: 64,
            borderTop: "1px solid var(--line)",
          }}>
            {tier.stats.map(([v, l], i) => (
              <div key={i} style={{
                display: "flex", flexWrap: "wrap",
                alignItems: "baseline", justifyContent: "space-between",
                gap: "8px 32px",
                padding: "28px 0",
                borderBottom: "1px solid var(--line)",
              }}>
                <span style={{
                  fontFamily: "var(--font-body)", fontSize: 12,
                  letterSpacing: "0.2em", textTransform: "uppercase",
                  color: "var(--fg-dim)", fontWeight: 500,
                }}>{l}</span>
                <span style={{
                  fontFamily: "var(--font-display)", fontWeight: 700,
                  fontSize: "clamp(26px, 3.2vw, 42px)", lineHeight: 1,
                  letterSpacing: "-0.01em", textTransform: "uppercase",
                  color: "var(--fg)", textAlign: "right",
                }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* BENEFITS */}
      <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 }}>Programme benefits</Eyebrow>
              <SectionNumeral n={1} />
            </div>
            <H2>{tier.benefitsHeading}</H2>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
            border: "1px solid var(--line)",
          }}>
            {tier.benefits.map((b, i, arr) => (
              <div key={i} style={{
                padding: "40px 28px 48px",
                background: "var(--bg)",
                borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
              }}>
                <H3 style={{ fontSize: 20, marginBottom: 14 }}>{b.title}</H3>
                <p style={{
                  fontFamily: "var(--font-body)", fontSize: 14.5,
                  lineHeight: 1.6, color: "var(--fg-soft)", margin: 0,
                }}>{b.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ROSTER — only shows real partner entries. Stub "Replace with…"
          placeholders are filtered out, so Gold + Platinum currently
          render as "Coming soon" until real partner names are supplied. */}
      {(() => {
        const realRoster = (tier.roster || []).filter(p => !/replace with/i.test(p.name));
        return (
          <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 }}>Current partners</Eyebrow>
                  <SectionNumeral n={2} />
                </div>
                <H2>{tier.rosterHeading}</H2>
              </div>

              {realRoster.length > 0 ? (
                <div style={{ background: "var(--bg)", border: "1px solid var(--line)" }}>
                  {realRoster.map((p, i) => (
                    <div key={i} style={{
                      display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 60px",
                      gap: 24, padding: "24px 28px",
                      borderTop: i ? "1px solid var(--line)" : "none",
                      alignItems: "center",
                    }}>
                      <span style={{
                        fontFamily: "var(--font-display)", fontWeight: 700,
                        fontSize: 17, letterSpacing: "0.005em",
                        textTransform: "uppercase", color: "var(--fg)",
                      }}>{p.name}</span>
                      <span style={{
                        fontFamily: "var(--font-body)", fontSize: 13,
                        color: "var(--fg-soft)",
                      }}>{p.region}</span>
                      <span style={{
                        fontFamily: "var(--font-body)", fontSize: 11,
                        letterSpacing: "0.18em", color: "var(--fg-dim)",
                        textTransform: "uppercase",
                      }}>{p.since}</span>
                      <span style={{
                        fontFamily: "var(--font-body)", fontSize: 16,
                        color: "var(--fg)", textAlign: "right",
                      }}>→</span>
                    </div>
                  ))}
                </div>
              ) : (
                // Empty-state card. Kept intentionally simple — the point
                // is to signal that the tier is open + how to enquire,
                // without pretending the roster is populated.
                <div style={{
                  border: "1px solid var(--line)",
                  padding: "60px 40px",
                  background: "var(--bg)",
                  textAlign: "center",
                }}>
                  <div style={{
                    fontFamily: "var(--font-body)", fontSize: 11,
                    letterSpacing: "0.22em", textTransform: "uppercase",
                    color: "var(--fg-dim)", fontWeight: 500,
                    marginBottom: 20,
                  }}>Partner roster</div>
                  <div style={{
                    fontFamily: "var(--font-display)", fontWeight: 700,
                    fontSize: "clamp(24px, 3vw, 40px)",
                    lineHeight: 1.1, letterSpacing: "-0.005em",
                    textTransform: "uppercase", color: "var(--fg)",
                    marginBottom: 20,
                  }}>Currently onboarding.</div>
                  <p style={{
                    fontFamily: "var(--font-body)", fontSize: 15,
                    lineHeight: 1.6, color: "var(--fg-soft)",
                    margin: "0 auto", maxWidth: 560,
                  }}>
                    We're building this tier out across our target regions. If your business is a strong fit — get in touch and we'll walk through what {tier.title} membership looks like.
                  </p>
                </div>
              )}

              <div style={{ marginTop: 40, display: "flex", gap: 12 }}>
                <Button primary onClick={() => onNavigate("partners", { subject: `Apply to ${tier.title}` })}>Apply to this tier →</Button>
                <Button onClick={() => onNavigate("partners")}>All partner tiers</Button>
              </div>
            </div>
          </section>
        );
      })()}

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

/* ──────────── Three configured tier pages ────────────
 * Same template, different config. Edit these in-place when real
 * roster + descriptions arrive. */

function ExclusiveRegionsPage({ onNavigate }) {
  return <PartnerTierPage onNavigate={onNavigate} tier={{
    code: "T-01",
    title: "Exclusive Regions",
    region: "UK & European Partners",
    featured: true,
    tagline: "Regionally exclusive Solo partners across the UK and European Union. By invitation only.",
    intro: "Solo's most senior partner status. Exclusive Region partners hold sole distribution and deployment rights for a defined territory across the UK, EU and wider Europe — backed by direct engineering access, protected deal-registration and a joint go-to-market plan. Currently held by VPS Group across three operating divisions and by Erres Sécurité in Switzerland.",
    stats: [
      ["UK + EU", "Coverage"],
      ["Exclusive", "Territory rights"],
      ["Invitation", "Entry"],
      ["Tier-1", "Procurement-approved"],
    ],
    benefitsHeading: "What Exclusive Region partners get.",
    benefits: [
      { title: "Regional exclusivity",       body: "Sole rights to sell and deploy the Solo platform in a defined UK or EU territory." },
      { title: "Protected deal registration", body: "Every opportunity registered through your team is locked to you — no channel conflict." },
      { title: "Engineering access",          body: "Direct line to Solo's UK engineering team for bespoke spec, integration and Tier-1 bid support." },
      { title: "Priority allocation",         body: "First call on hardware allocation across the Pro, Ultra, SSU and RS ranges." },
      { title: "Co-marketing fund (MDF)",     body: "Dedicated marketing development funds, co-branded collateral, joint events and press." },
      { title: "Custom firmware / liveries",  body: "Optional partner-branded firmware skins and unit liveries for your end-clients." },
    ],
    rosterHeading: "Exclusive Region partners.",
    // Exclusive Region partner list. VPS Group holds UK + EU territorial
    // exclusivity across three divisions; Erres Sécurité holds a
    // single-country exclusive for Switzerland.
    roster: [
      { code: "ER-01", name: "VPS Group — UK & Ireland",     region: "United Kingdom · Ireland",             since: "Exclusive partner" },
      { code: "ER-02", name: "VPS Group — Europe North",     region: "Netherlands · Germany",                since: "Exclusive partner" },
      { code: "ER-03", name: "VPS Group — Europe South",     region: "France · Spain · Italy",               since: "Exclusive partner" },
      { code: "ER-04", name: "Erres Sécurité",               region: "Switzerland",                          since: "Exclusive partner" },
    ],
  }} />;
}

function GoldPartnersPage({ onNavigate }) {
  return <PartnerTierPage onNavigate={onNavigate} tier={{
    code: "T-02",
    title: "Gold Partners",
    region: "North American Partners",
    featured: false,
    tagline: "Authorised Solo partners across North America. Wholesale access to the full product range.",
    intro: "The entry tier of Solo's North American partner programme. Gold Partners hold authorised reseller status for North America — with wholesale hardware pricing, training, and access to Solo's full product catalogue.",
    stats: [
      ["North America", "Coverage"],
      ["Authorised", "Reseller status"],
      ["Wholesale", "Pricing tier"],
      ["Solo Academy", "Training included"],
    ],
    benefitsHeading: "What Gold Partners get.",
    benefits: [
      { title: "Tiered partner pricing",     body: "Structured Gold-tier wholesale pricing on Solo's full North American range — volume discounts unlock at every level of the tier." },
      { title: "Wholesale pricing",          body: "Access to Solo's full North American product range at authorised reseller pricing." },
      { title: "Co-branded collateral",      body: "Marketing collateral, datasheets and case studies that you can co-brand for end-clients." },
      { title: "Field-engineer training",    body: "Free access to Solo Academy — deployment, configuration and first-line service training." },
      { title: "Florida factory access",     body: "Direct fulfilment from Solo's Wellington, Florida facility. Short lead-times across the region." },
      { title: "Path to Platinum",           body: "A defined progression path. Hit volume + service metrics to step up to Platinum status." },
    ],
    rosterHeading: "Gold Partners across North America.",
    roster: [
      { code: "GD-01", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "GD-02", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "GD-03", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "GD-04", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "GD-05", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "GD-06", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
    ],
  }} />;
}

function PlatinumPartnersPage({ onNavigate }) {
  return <PartnerTierPage onNavigate={onNavigate} tier={{
    code: "T-03",
    title: "Platinum Partners",
    region: "North American Partners",
    featured: true,
    tagline: "Top-tier Solo partners across the North American region. By invitation only.",
    intro: "Solo's most senior North American partner status. Platinum Partners commit to scale across North America — and in return receive joint Tier-1 bid support and the highest tier of engineering access on the continent.",
    stats: [
      ["North America", "Coverage"],
      ["Top tier",    "Programme level"],
      ["Invitation",  "Entry"],
      ["Tier-1",      "Procurement-approved"],
    ],
    benefitsHeading: "What Platinum Partners get.",
    benefits: [
      { title: "Everything in Gold",         body: "All Gold tier benefits, plus the items below." },
      { title: "Tiered Platinum pricing",    body: "Platinum-tier wholesale pricing with deeper discount steps than Gold — additional volume-based tiers unlock at agreed thresholds." },
      { title: "Priority allocation",         body: "First call on hardware allocation from the Wellington, Florida factory." },
      { title: "Co-marketing fund (MDF)",     body: "Dedicated marketing development funds, co-branded collateral, joint events and press." },
      { title: "Engineering access",          body: "Direct line to Solo's engineering team — bespoke spec, integration, joint Tier-1 bids." },
      { title: "Quarterly strategic planning", body: "Joint annual plan with the Solo executive team. Roadmap visibility, joint forecasting." },
    ],
    rosterHeading: "Platinum Partners across North America.",
    roster: [
      { code: "PL-01", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "PL-02", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
      { code: "PL-03", name: "Replace with partner name", region: "Replace with state / region", since: "Since 20—" },
    ],
  }} />;
}

Object.assign(window, { ExclusiveRegionsPage, GoldPartnersPage, PlatinumPartnersPage });