// partners.jsx - MSSP / white-label / reseller funnel
// Different audience: people who sell security services to their clients.
// Different conversation: revenue share, multi-tenancy, white-label,
// not "Download Community" or "Start a trial."

function PartnersHero({ setPage }) {
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <Dot color="var(--accent-2)" size={7} />
            <Label>PARTNER PROGRAM · WHITE-LABEL · MULTI-TENANT</Label>
          </div>

          <h1 className="serif" style={{
            fontSize: "clamp(48px, 6vw, 88px)", margin: 0,
            lineHeight: 0.98, letterSpacing: "-0.025em",
          }}>
            Your clients.<br/>
            Your brand.<br/>
            <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Our AI SOC.</span>
          </h1>

          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--fg-mute)", margin: 0, maxWidth: 560 }}>
            White-label the platform for your clients. Multi-tenancy that actually isolates. Per-tenant LLM keys for cost control. Revenue share that respects the work you put in. Built for MSSPs, MSPs, and consultancies that need a real AI layer on top of Wazuh — without the 18 months of building it.
          </p>

          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => setPage("contact")}>Book a partnership call →</button>
            <button className="btn" onClick={() => window.scrollTo({ top: 1400, behavior: "smooth" })}>Read partner economics ↓</button>
          </div>

          <div style={{
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
            paddingTop: 28, borderTop: "1px solid var(--line-soft)",
          }}>
            {[
              ["18 mo",     "build vs license · saved"],
              ["Your %",    "you set client pricing"],
              ["0 clawback","what you sell stays sold"],
            ].map(([v, l]) => (
              <div key={l}>
                <div className="serif" style={{ fontSize: 30, color: "var(--accent)", lineHeight: 1, letterSpacing: "-0.02em" }}>{v}</div>
                <Mono style={{ fontSize: 10, color: "var(--fg-dim)", marginTop: 4, display: "block", letterSpacing: "0.08em", textTransform: "uppercase" }}>{l}</Mono>
              </div>
            ))}
          </div>
        </div>

        {/* Right: partner deployment mock */}
        <div style={{ border: "1px solid var(--line)", background: "var(--bg-1)" }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 14,
            padding: "12px 16px", borderBottom: "1px solid var(--line)", background: "var(--bg-2)",
          }}>
            <Mono style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em" }}>
              partner-tenant-overview
            </Mono>
            <span style={{ flex: 1 }} />
            <Mono style={{ fontSize: 11, color: "var(--accent)" }}>
              <Dot size={6} /> &nbsp;5 TENANTS LIVE
            </Mono>
          </div>
          <div style={{ padding: "24px 24px 8px" }}>
            <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>
              YOUR PARTNER DASHBOARD · BRANDED · MULTI-TENANT
            </Mono>
          </div>
          <div style={{ padding: "8px 24px 24px", display: "flex", flexDirection: "column", gap: 8 }}>
            {[
              { c: "Acme Bank",       a: "847", e: "12.4 EPS", l: "Anthropic", st: "live"  },
              { c: "Brightline Tech", a: "212", e: "3.1 EPS",  l: "OpenAI",    st: "live"  },
              { c: "Coral Health",    a: "418", e: "5.8 EPS",  l: "Anthropic", st: "live"  },
              { c: "DeltaWorks Mfg",  a: "1,204", e: "18.2 EPS", l: "Groq",   st: "live"  },
              { c: "EquityRow LLC",   a: "92",  e: "1.4 EPS",  l: "Anthropic", st: "onboarding" },
            ].map((t, i) => (
              <div key={t.c} style={{
                display: "grid", gridTemplateColumns: "1.4fr 80px 80px 100px 80px",
                gap: 12, alignItems: "center",
                padding: "12px 14px",
                border: "1px solid var(--line-soft)",
                background: i % 2 === 0 ? "var(--bg-2)" : "transparent",
              }}>
                <span style={{ fontSize: 13, color: "var(--fg)" }}>{t.c}</span>
                <Mono style={{ fontSize: 11, color: "var(--fg-mute)", textAlign: "right" }}>{t.a}<br/><span style={{ fontSize: 9, color: "var(--fg-dim)" }}>agents</span></Mono>
                <Mono style={{ fontSize: 11, color: "var(--fg-mute)", textAlign: "right" }}>{t.e}</Mono>
                <Mono style={{ fontSize: 10, color: "var(--accent-2)" }}>◆ {t.l}</Mono>
                <Mono style={{ fontSize: 10, color: t.st === "live" ? "var(--accent)" : "var(--warn)" }}>● {t.st}</Mono>
              </div>
            ))}
          </div>
          <div style={{
            padding: "16px 24px", borderTop: "1px solid var(--line)",
            display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16,
          }}>
            <div>
              <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>TOTAL AGENTS</Mono>
              <div className="serif" style={{ fontSize: 22, color: "var(--fg)", lineHeight: 1, marginTop: 4 }}>2,773</div>
            </div>
            <div>
              <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>MONTHLY MRR</Mono>
              <div className="serif" style={{ fontSize: 22, color: "var(--accent)", lineHeight: 1, marginTop: 4 }}>$28k</div>
            </div>
            <div>
              <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em" }}>YOUR MARGIN</Mono>
              <div className="serif" style={{ fontSize: 22, color: "var(--accent)", lineHeight: 1, marginTop: 4 }}>YOU SET</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhyPartner() {
  const reasons = [
    {
      n: "01",
      title: "Build vs license.",
      sub: "18 MONTHS · $500K+ · ENGINEERS YOU DON'T HAVE",
      body: "Building an AI SOC platform from scratch takes 18 months and a security engineering team. We did it. Now you don't have to. License the platform, white-label the dashboard, ship to clients in week one.",
    },
    {
      n: "02",
      title: "Open source you can actually trust.",
      sub: "WAZUH UNDERNEATH · INSPECT THE CODE · OWN THE STACK",
      body: "The detection layer is Wazuh — an OSS SIEM you've probably already worked with. The AI layer is ours, fully reviewable. No vendor lock-in trap. If our partnership ends, your clients keep running on the open stack.",
    },
    {
      n: "03",
      title: "Revenue model that respects you.",
      sub: "NO CLAWBACK · NO QUARTERLY QUOTAS · NO PRESSURE",
      body: "Tiered revenue share that improves with volume. You set client pricing — we don't dictate. No clawback if a client churns mid-year. No 'first year only' exclusions. The deal you close is the deal you keep.",
    },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="01 · WHY PARTNER WITH US" />
        <SectionHead
          title="Three reasons most partner programs fail. Here's how ours doesn't."
          sub="We've been the partner. We've seen the bad agreements. The clawbacks, the quarterly pressure, the co-marketing requirements that cost more than they earn. This program is built to not be those things."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", border: "1px solid var(--line)" }}>
          {reasons.map((r, i) => (
            <div key={r.n} style={{
              padding: 32,
              borderRight: i < 2 ? "1px solid var(--line-soft)" : "none",
              display: "flex", flexDirection: "column", gap: 14,
              minHeight: 280,
            }}>
              <Mono style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>{r.n}</Mono>
              <h3 className="serif" style={{ fontSize: 28, margin: 0, lineHeight: 1.1, letterSpacing: "-0.015em" }}>
                {r.title}
              </h3>
              <Mono style={{ fontSize: 10, color: "var(--fg-dim)", letterSpacing: "0.12em", lineHeight: 1.5 }}>
                {r.sub}
              </Mono>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.65 }}>
                {r.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function WhatYouGet() {
  const groups = [
    {
      cat: "PRODUCT",
      items: [
        ["White-label dashboard",         "Your logo, your colors, your domain. Clients see your brand, never ours."],
        ["Multi-tenant architecture",     "Org-level isolation per client. Fernet-encrypted configs. No data crossing tenants."],
        ["Per-tenant LLM provider",       "One client on Anthropic, another on OpenAI, a third on local Ollama. Cost control per relationship."],
        ["Cost tracking by tenant",       "Token usage, LLM spend, infra cost — all per client. Bill them with confidence."],
      ],
    },
    {
      cat: "GO-TO-MARKET",
      items: [
        ["Partner sales support",         "Joint deal calls when you want them. Technical SE on key opportunities. No pressure to use us on every deal."],
        ["Custom client demos",           "We'll demo to your clients under your brand. Or hand you the deck and let you run it."],
        ["Co-marketing if you want",      "Case studies, joint webinars, conference appearances — if you want them. You don't have to."],
        ["Pricing freedom",               "You set what your clients pay. We don't dictate margins or floor pricing."],
      ],
    },
    {
      cat: "OPERATIONS",
      items: [
        ["Technical training for your team", "Two-day intensive. Architecture, deployment, operations, troubleshooting. Your engineers leave certified."],
        ["Tier-2 + Tier-3 support",       "You handle Tier-1 with your client. We back you on harder issues. Direct slack to our engineering."],
        ["Quarterly roadmap input",       "Your client requests get prioritized in the platform roadmap. You influence what ships."],
        ["Free internal-use license",     "Use the platform for your own SOC at no cost. Eat your own dog food."],
      ],
    },
  ];

  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="02 · WHAT YOU GET" />
        <SectionHead
          title="Twelve concrete things in the partner package."
          sub="Not a marketing list. The actual deliverables when you sign. Grouped by what they do for you."
        />
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {groups.map(g => (
            <div key={g.cat}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                <Diamond color="var(--accent)" />
                <Mono style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>{g.cat}</Mono>
                <span style={{ flex: 1, height: 1, background: "var(--line-soft)" }} />
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", border: "1px solid var(--line)" }}>
                {g.items.map((it, i) => (
                  <div key={i} style={{
                    padding: "22px 26px",
                    borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
                    borderBottom: i < g.items.length - 2 ? "1px solid var(--line-soft)" : "none",
                    display: "flex", flexDirection: "column", gap: 6,
                  }}>
                    <span className="serif" style={{ fontSize: 19, lineHeight: 1.25, letterSpacing: "-0.005em" }}>
                      {it[0]}
                    </span>
                    <span style={{ color: "var(--fg-mute)", fontSize: 13.5, lineHeight: 1.55 }}>
                      {it[1]}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnerEconomics() {
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container">
        <div style={{
          padding: 48,
          border: "1px solid var(--line)",
          background: "var(--bg-1)",
          display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56,
        }}>
          <div>
            <Label>PARTNER ECONOMICS</Label>
            <h3 className="serif" style={{ fontSize: 42, margin: "18px 0 18px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
              How the money <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>actually works.</span>
            </h3>
            <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 15.5, lineHeight: 1.65 }}>
              Exact percentages live in the partnership conversation — they vary with volume commitment, deal size, and which platform tier you're licensing. Here's the framework so you know what you're walking into.
            </p>
            <div style={{ marginTop: 28 }}>
              <button className="btn btn-primary" onClick={() => window.dispatchEvent(new CustomEvent("nav", { detail: "contact" }))}>
                Book a partnership call →
              </button>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              ["TIERED REVENUE SHARE",  "Margin improves with active client count and total platform volume. Your committed-deal pricing is published to you upfront — no surprises at renewal."],
              ["YOU SET CLIENT PRICING", "We don't dictate floor pricing or list price. Your sales motion, your margin call. We license at our wholesale rate to you."],
              ["NO CLAWBACK",            "If a client churns mid-year, your earned revenue stays earned. We don't reverse commissions on cancelled accounts."],
              ["MONTHLY OR ANNUAL BILLING", "Bill clients however you bill them. We invoice you monthly in arrears or annually upfront — your call."],
              ["INTERNAL-USE FREE",      "Run the platform for your own SOC at no licensing cost. Eat your own dog food. Use it as a reference deployment in client demos."],
            ].map(([k, v]) => (
              <div key={k} style={{
                padding: "18px 22px",
                border: "1px solid var(--line-soft)",
                background: "var(--bg)",
              }}>
                <Mono style={{ fontSize: 11, color: "var(--accent)", letterSpacing: "0.14em" }}>◆ {k}</Mono>
                <p style={{ margin: "8px 0 0", fontSize: 13.5, color: "var(--fg-mute)", lineHeight: 1.6 }}>
                  {v}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function WhoFits() {
  const fits = [
    { tag: "FIT", title: "Existing MSSP / MDR provider", body: "10+ active client relationships. You already sell managed security. You're tired of your current SIEM vendor's pricing or capabilities." },
    { tag: "FIT", title: "Security consultancy moving to recurring revenue", body: "Project-based today. Want to add a managed services line. Have technical depth, need a platform to deliver on." },
    { tag: "FIT", title: "Wazuh-savvy MSP expanding into security", body: "You already deploy Wazuh for clients. You want to layer real AI triage on top instead of staring at the default rule pack noise." },
    { tag: "FIT", title: "Regional or vertical specialist", body: "Strong in a specific country, language, industry, or compliance regime. We're better off with you owning that segment than competing for it." },
    { tag: "NOT A FIT", title: "Drive-by resellers without security expertise", body: "If you can't deliver Tier-1 support to your own clients, the partnership fails on day one. We need partners who can actually run the platform." },
    { tag: "NOT A FIT", title: "Want exclusive territory rights", body: "Hard no on most regions. We'll consider for a small set of vertical or country combinations with strong revenue commitment, but the default is non-exclusive." },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="03 · WHO FITS" />
        <SectionHead
          title="Honest qualification, six lines."
          sub="A bad partnership wastes both our weekends. Here's who succeeds with us — and who should keep looking."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", border: "1px solid var(--line)" }}>
          {fits.map((f, i) => (
            <div key={i} style={{
              padding: 28,
              borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
              borderBottom: i < 4 ? "1px solid var(--line-soft)" : "none",
              display: "flex", flexDirection: "column", gap: 12,
              background: f.tag === "NOT A FIT" ? "var(--bg-2)" : "transparent",
            }}>
              <Mono style={{
                fontSize: 10,
                color: f.tag === "NOT A FIT" ? "var(--fg-dim)" : "var(--accent)",
                letterSpacing: "0.14em",
              }}>
                ◆ {f.tag}
              </Mono>
              <h3 className="serif" style={{
                fontSize: 22, margin: 0, lineHeight: 1.2, letterSpacing: "-0.01em",
                color: f.tag === "NOT A FIT" ? "var(--fg-mute)" : "var(--fg)",
              }}>
                {f.title}
              </h3>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.6 }}>
                {f.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnerProcess() {
  const steps = [
    { n: "01", w: "Week 0",    title: "Intro call · 30 min",        body: "We qualify each other. You describe your business. We describe the platform. If neither of us flinches, we book the deep dive." },
    { n: "02", w: "Week 1",    title: "Deep dive · 90 min",         body: "Architecture walkthrough. Multi-tenancy demo. Economics conversation with real numbers. NDA signed if needed." },
    { n: "03", w: "Weeks 2-3", title: "Pilot deployment · 1 client", body: "We deploy on one of your clients at our cost. 30 days. They see white-label. You see what operations look like." },
    { n: "04", w: "Week 4",    title: "Partnership contract",        body: "If the pilot lands, we paper the partnership. Standard agreement, lawyered terms, room for your specific concerns." },
    { n: "05", w: "Weeks 5+",  title: "Launch · onboard your team",  body: "Two-day technical training for your engineers. Sales enablement for your AEs. First 3 client deployments with our SE alongside." },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="04 · HOW A PARTNERSHIP STARTS" />
        <SectionHead
          title="Five steps. About six weeks from intro to live partner."
          sub="No 6-month qualification cycles. No 12-meeting evaluation processes. We move at the speed of mutual interest."
        />
        <div style={{ display: "flex", flexDirection: "column", border: "1px solid var(--line)" }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{
              display: "grid", gridTemplateColumns: "60px 120px 280px 1fr",
              gap: 32,
              padding: "24px 32px",
              borderTop: i > 0 ? "1px solid var(--line-soft)" : "none",
              alignItems: "center",
            }}>
              <Mono style={{ fontSize: 13, color: "var(--accent)", letterSpacing: "0.08em" }}>{s.n}</Mono>
              <Mono style={{ fontSize: 12, color: "var(--fg-dim)", letterSpacing: "0.1em" }}>{s.w.toUpperCase()}</Mono>
              <h3 className="serif" style={{ fontSize: 20, margin: 0, letterSpacing: "-0.005em", lineHeight: 1.25 }}>
                {s.title}
              </h3>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 14, lineHeight: 1.55 }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnerFAQ() {
  const qa = [
    {
      q: "Can we resell to clients in our region?",
      a: "Yes — most partnerships are non-exclusive by region. We're happy to focus our direct sales motion away from your strong markets if you commit to volume there. Specifics in the partnership conversation.",
    },
    {
      q: "We have existing reseller agreements with other vendors. Conflict?",
      a: "We don't require exclusivity. If your clients use multiple security tools — fine, normal, expected. If a specific client wants Wazuh + our AI layer over your other SIEM offering, that's your sales call to make.",
    },
    {
      q: "How does support split between you and us?",
      a: "Tier 1 is yours — your client relationship, your phone calls. We handle Tier 2 and Tier 3 (deep technical, platform bugs, integration issues). Direct Slack channel to our engineering during onboarding. Response SLA defined per partner.",
    },
    {
      q: "Can we customize the dashboard beyond branding?",
      a: "Yes — within reason. Custom widgets, branded reporting templates, your own integrations are all supported. Deep architectural changes go on the roadmap conversation. We're not a custom-software shop.",
    },
    {
      q: "What about multi-LLM setups for client cost control?",
      a: "Built in. Each tenant can use a different LLM provider (Anthropic, OpenAI, Groq, local Ollama, others). Cost tracking is per-tenant. Some of our partners use this to offer multiple price tiers to their own clients.",
    },
    {
      q: "Do you sell direct in our territory after we sign?",
      a: "We default to non-exclusive but commit to good-faith routing. If a direct lead comes from your territory, we'll route to you first. Conflicts handled per the partnership agreement — usually first-touch wins.",
    },
    {
      q: "What if a client of ours wants to buy direct from you?",
      a: "We'll redirect them to you. Active partner relationships take precedence over direct sales for clients in your territory. Trust is the whole game in partner programs — we don't break it.",
    },
    {
      q: "What's the minimum commitment to become a partner?",
      a: "Onboarding investment is mutual — your engineering time for training, our SE time for first deployments. We don't require revenue minimums in year one. We do require active engagement: deploying for actual clients, not collecting partnership badges.",
    },
  ];
  return (
    <section style={{ padding: "80px 0 40px" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <Divider label="05 · COMMON QUESTIONS" />
        <SectionHead
          title="Answers to what partners actually ask first."
          sub="The objections that come up in every intro call. Pre-answered so we can spend the call on harder things."
        />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", border: "1px solid var(--line)" }}>
          {qa.map((item, i) => (
            <div key={i} style={{
              padding: 28,
              borderRight: i % 2 === 0 ? "1px solid var(--line-soft)" : "none",
              borderBottom: i < qa.length - 2 ? "1px solid var(--line-soft)" : "none",
              display: "flex", flexDirection: "column", gap: 10,
            }}>
              <h4 className="serif" style={{
                fontSize: 19, margin: 0, lineHeight: 1.25,
                letterSpacing: "-0.005em",
              }}>
                {item.q}
              </h4>
              <p style={{ margin: 0, color: "var(--fg-mute)", fontSize: 13.5, lineHeight: 1.65 }}>
                {item.a}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnerCTA({ setPage }) {
  return (
    <section style={{ padding: "60px 0 80px" }}>
      <div className="container">
        <div style={{
          border: "1px solid var(--line)",
          background: "var(--bg-1)",
          padding: "64px 48px",
          display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center",
        }}>
          <div>
            <Label>READY TO TALK?</Label>
            <h3 className="serif" style={{ fontSize: "clamp(34px, 4vw, 52px)", margin: "14px 0 12px", lineHeight: 1.05, letterSpacing: "-0.02em" }}>
              30-min intro call.<br/>
              <span style={{ color: "var(--fg-mute)", fontStyle: "italic" }}>Mutual qualification, both ways.</span>
            </h3>
            <p style={{ color: "var(--fg-mute)", fontSize: 16, margin: 0, maxWidth: 580, lineHeight: 1.65 }}>
              You'll talk to Prathamesh directly. Bring your business model, your client mix, and any hard questions about partner economics. If we're a fit, we'll know in the call.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <button className="btn btn-primary" onClick={() => setPage("contact")}>Book partnership call →</button>
            <button className="btn" onClick={() => setPage("platform")}>See the product first</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function PartnersPage({ setPage }) {
  return (
    <div className="page">
      <PartnersHero setPage={setPage} />
      <WhyPartner />
      <WhatYouGet />
      <PartnerEconomics />
      <WhoFits />
      <PartnerProcess />
      <PartnerFAQ />
      <PartnerCTA setPage={setPage} />
    </div>
  );
}

Object.assign(window, { PartnersPage });