// FOR BROKERS - SCHEMES PLATFORM PAGE - /brokers · "The Schemes Platform for Brokers"
// Brand chrome (nav, footer, tokens, primitives) from chrome.jsx.
//
// Section order mirrors the v1.0 Schemes Platform page copy:
//   1. Hero (three pain alternatives + Outrun fourth-option)
//   2. Built for the schemes side of your business (orientation)
//   3. Three things shape how Outrun works (broker-flavoured pillars + anecdote)
//   4. Features - 4 groups, 19 features (no Distribution group)
//   5. A smooth upgrade path to Broker PAS+ (quiet)
//   6. Closing CTA

const { EdCtx: BrkCtx, EdTag: BrkTag, EdBtn: BrkBtn,
        EdSectionHead: BrkSectionHead, EdChrome: BrkChrome,
        useIsMobile: brkUseIsMobile } = window;

// ─── hero ──────────────────────────────────────────────────────

function BrkHero() {
  const ED = React.useContext(BrkCtx);
  const edText = ED.text;
  const isMobile = brkUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 56px' : '72px 144px 120px', background: ED.bg }}>
      <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(40px, 11vw, 46px)' : 119, lineHeight: isMobile ? 1.0 : 0.95, color: ED.ink, margin: 0, maxWidth: 1320, letterSpacing: '-0.04em' }}>
        The Schemes Platform{isMobile ? ' ' : <br/>}
        for <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>Brokers</span>.
      </h1>

      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 0.9fr', gap: isMobile ? 28 : 80, marginTop: isMobile ? 28 : 44, alignItems: isMobile ? 'stretch' : 'end' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 16 : 20, maxWidth: 680 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
            Today, brokers running schemes do it on a PAS that wasn&rsquo;t built for the job, on spreadsheets that don&rsquo;t scale, or on expensive standalone software that locks you in.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
            Outrun gives you a fourth option. A purpose-built schemes platform, running alongside your main PAS, using the industry&rsquo;s rating engine. You&rsquo;re not locked in - and the products you build are yours.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMobile ? 'stretch' : 'flex-end', gap: 18 }}>
          <BrkBtn kind="ghost" href="/demo">Book a demo</BrkBtn>
        </div>
      </div>
    </section>
  );
}

// ─── §2 Built for the schemes side of your business (orientation) ─

function BrkOrientation() {
  const ED = React.useContext(BrkCtx);
  const edText = ED.text;
  const isMobile = brkUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }}>
      <div style={{ maxWidth: 1240 }}>
        <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 88, lineHeight: isMobile ? 1.05 : 1.0, margin: 0, color: ED.ink, letterSpacing: '-0.035em', maxWidth: 1180 }}>
          Built for the <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>schemes side</span> of your business.
        </h2>
      </div>

      <div style={{ marginTop: isMobile ? 32 : 80, maxWidth: 1180 }}>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: ED.ink, margin: 0 }}>
          One platform for quoting, binding, document generation, policy management, bordereaux, and reporting on your schemes. For rating and rules, we use Polaris ProductWriter - so your products are yours, and the cost and speed of building them isn&rsquo;t dictated by your software house.
        </p>
      </div>
    </section>
  );
}

// ─── §3 Three things shape how Outrun works ────────────────────

function BrkPillars() {
  const ED = React.useContext(BrkCtx);
  const edText = ED.text;
  const isMobile = brkUseIsMobile();
  const pillars = [
    {
      kicker: 'Foundations',
      claim: <>We use the rating engine <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>the UK insurance industry owns and trusts</span>.</>,
      bodies: [
        <>Polaris ProductWriter is the most powerful rating engine in the market - capable of handling any product complexity. It&rsquo;s industry-owned, industry-trusted, and used by the UK&rsquo;s biggest insurers. Your team, ours, or a third party can develop and update your products.</>,
        <>Your products are built on the industry&rsquo;s standard, not a vendor&rsquo;s proprietary system - and the product build expertise sits across the industry, not behind one software house. Because the industry funds and develops it together, ProductWriter evolves with the market.</>,
      ],
    },
    {
      kicker: 'Freedom',
      claim: <>Build, host, and distribute on your terms. <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>The products you build are yours</span>.</>,
      bodies: [
        <>Get products built by us, by a third party, or by your own team. Host with us or in your own environment. Each choice is yours.</>,
        <>Whoever controls your rating engine, your build process, your hosting, or your distribution ends up controlling your build costs and your launch speed. With Outrun, you retain control. Real ownership means the products are genuinely, permanently yours.</>,
      ],
    },
    {
      kicker: 'Experience',
      claim: <><span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>Operational insurance experience</span>, built into the platform.</>,
      bodies: [
        <>The team behind Outrun has spent decades in specialist insurance operations - building schemes, handling binder updates, getting bordereaux out under deadline. We know the operational reality, the challenges and what good looks like.</>,
        <>On every new product build, we go through the question set against the underwriting guide. Sometimes that surfaces gaps where the question set wouldn&rsquo;t capture all the required risk data - and can surface potential gaps on the rating side too. Our team&rsquo;s operational experience means this kind of detail doesn&rsquo;t get missed.</>,
      ],
      quoteLead: 'We often hear:',
      quote: <>&ldquo;Normally software providers build it and when it&rsquo;s not right they blame the spec.&rdquo;</>,
    },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px 96px', background: ED.bg }}>
      <BrkSectionHead
        title={<>The platform that works <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>on your terms</span>.</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr', gap: isMobile ? 12 : 0, borderTop: isMobile ? 'none' : `1.5px solid ${ED.ink}` }}>
        {pillars.map((p, i) => (
          <div key={p.kicker} style={{
            borderRight: !isMobile && i < pillars.length - 1 ? `1px solid ${ED.rule}` : 'none',
            border: isMobile ? `1.5px solid ${ED.ink}` : undefined,
            padding: isMobile ? '28px 22px 30px' : '44px 36px 48px',
            background: ED.bg,
            display: 'flex',
            flexDirection: 'column',
          }}>
            <span style={{ ...edText.tag, color: ED.accent, fontSize: isMobile ? 14 : 18 }}>{p.kicker}</span>
            <h3 style={{ ...edText.display, fontSize: isMobile ? 23 : 36, color: ED.ink, margin: isMobile ? '16px 0 20px' : '32px 0 28px', letterSpacing: '-0.025em', lineHeight: 1.12 }}>{p.claim}</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 14 : 18 }}>
              {p.bodies.map((b, j) => (
                <React.Fragment key={j}>
                  <p style={{ ...edText.sans, fontSize: isMobile ? 16 : 15.5, lineHeight: 1.6, color: ED.ink, margin: 0 }}>{b}</p>
                  {j === 0 && p.quote && (
                    <p style={{ ...edText.sans, fontSize: isMobile ? 16 : 15.5, lineHeight: 1.55, color: ED.ink, margin: 0 }}>
                      {p.quoteLead && (
                        <span style={{ fontWeight: 600 }}>{p.quoteLead} </span>
                      )}
                      <span style={{ fontStyle: 'italic' }}>{p.quote}</span>
                    </p>
                  )}
                </React.Fragment>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── §4 Features (19 features across 4 groups, no Distribution) ─

function BrkFeatures() {
  const ED = React.useContext(BrkCtx);
  const edText = ED.text;
  const isMobile = brkUseIsMobile();
  const groups = [
    {
      title: 'Core policy & underwriting',
      features: [
        { name: 'Full cycle policy management', body: 'Quotation, new business, MTAs, endorsements, renewals, lapse, and cancellation in one place.' },
        { name: 'Leading Rating & Rules Engine', body: 'Polaris ProductWriter, the most powerful rating engine in the UK insurance industry, owned by the industry and fully integrated with Outrun.' },
        { name: 'Underwriting controls', body: 'Authority limits, decline rules, and sign-off workflows - every risk signed off by the broker with the right authority.' },
        { name: 'Insurer panel', body: 'Single risk capture, multiple quotes. Get quotes from your insurer panel using a single question set.' },
      ],
    },
    {
      title: 'Configuration & workflow',
      features: [
        { name: 'Customisable workflows', body: 'Configure new business, MTA, and renewal workflows to work how you want them to.' },
        { name: 'Customisable question sets', body: 'Build the risk capture you need, per scheme, or connected to multiple schemes.' },
        { name: 'Document generation', body: 'Configurable templates for quotes, schedules, statement of facts - every policy document you need.' },
        { name: 'Task and diary management', body: 'Create and assign tasks, manually or with rules-based automation.' },
        { name: 'Rules-based automation', body: 'Define rules that trigger tasks, notifications, and workflow steps automatically.' },
      ],
    },
    {
      title: 'Reporting & data',
      features: [
        { name: 'Standard report library', body: 'Out-of-the-box reports on policy, premium, and operational performance.' },
        { name: 'Custom reports', body: 'Build whatever you need on any data in the platform.' },
        { name: 'PowerBI integration', body: 'Plug into your existing BI stack for deeper visualisation and analysis.' },
        { name: 'Bordereaux production', body: 'Generate the bordereaux your capacity providers require, in the format they expect.' },
        { name: 'Bordereaux management', body: 'View and track previous bordereaux.' },
      ],
    },
    {
      title: 'Platform foundations',
      features: [
        { name: 'Security', body: 'Robust security programme and infrastructure, built to the standards your insurer partners require.' },
        { name: 'Product hosting flexibility', body: 'Host with us, or host your products in your environment.' },
        { name: 'API and third-party integrations', body: 'Connect to the systems and data you already use, including your main PAS.' },
        { name: 'Audit trail', body: 'Full version history of every change, for compliance and internal governance.' },
        { name: 'User permissions', body: 'Role-based access so the right people see and do the right things.' },
      ],
    },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}` }}>
      <BrkSectionHead
        title={<>Everything to run schemes <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>properly</span>.</>}
      />
      <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.55 : 1.65, color: ED.ink, margin: isMobile ? '-16px 0 36px' : '-24px 0 64px', maxWidth: 1100 }}>
        From the moment a risk comes in to the moment a renewal goes out - quoting, binding, document generation, policy management, bordereaux, reporting - it lives in one place. Purpose-built for schemes.
      </p>
      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 40 : 80 }}>
        {groups.map((g, gi) => (
          <div key={g.title} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '300px 1fr', gap: isMobile ? 20 : 60, paddingTop: isMobile ? 28 : 36, borderTop: `1px solid ${ED.rule}` }}>
            <div>
              <h3 style={{ ...edText.display, fontSize: isMobile ? 24 : 32, color: ED.ink, lineHeight: 1.1, letterSpacing: '-0.025em', margin: 0 }}>
                {g.title}
              </h3>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 0 : '0 48px' }}>
              {g.features.map((f, fi) => (
                <div key={f.name} style={{
                  padding: isMobile ? '18px 0' : '24px 0',
                  borderTop: isMobile ? (fi === 0 ? 'none' : `1px solid ${ED.rule}`) : (fi < 2 ? 'none' : `1px solid ${ED.rule}`),
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 6,
                }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                    <span aria-hidden="true" style={{ color: ED.teal, fontWeight: 700, lineHeight: 1, position: 'relative', top: -1 }}>+</span>
                    <h4 style={{ ...edText.med, fontSize: isMobile ? 17 : 17, color: ED.ink, margin: 0, letterSpacing: '-0.01em', lineHeight: 1.3 }}>
                      {f.name}
                    </h4>
                  </div>
                  <p style={{ ...edText.sans, fontSize: isMobile ? 15.5 : 14.5, lineHeight: 1.5, color: ED.ink, margin: '0 0 0 28px' }}>
                    {f.body}
                  </p>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── §5 Upgrade path to Broker PAS+ (quiet) ────────────────────

function BrkUpgrade() {
  const ED = React.useContext(BrkCtx);
  const edText = ED.text;
  const isMobile = brkUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 80, alignItems: isMobile ? 'stretch' : 'center', maxWidth: 1320 }}>
        <h3 style={{ ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 44, color: ED.ink, lineHeight: 1.1, letterSpacing: '-0.025em', margin: 0, maxWidth: 480 }}>
          A smooth upgrade path to <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>Broker PAS+</span>.
        </h3>
        <div>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 17, lineHeight: 1.6, color: ED.ink, margin: isMobile ? '0 0 20px' : '0 0 28px' }}>
            The Schemes Platform handles the schemes side of your business. When you need a full PAS for your wider operation - open market business, accounting, claims, customer portal, integrated payments, customer communications - Broker PAS+ is the natural next step.
          </p>
          <div style={{ display: 'flex', gap: 36, flexWrap: 'wrap' }}>
            <a href="/broker-pas-plus" style={{ ...edText.med, fontSize: 15, color: ED.ink, textDecoration: 'none', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3 }}>
              Broker PAS+ <span style={{ color: ED.accent }}>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── §6 Closing CTA ────────────────────────────────────────────

function BrkCta() {
  const ED = React.useContext(BrkCtx);
  const edText = ED.text;
  const isMobile = brkUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 28 : 80, alignItems: isMobile ? 'stretch' : 'end' }}>
        <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 104, lineHeight: isMobile ? 1.05 : 0.98, color: ED.ink, margin: 0, letterSpacing: '-0.04em', maxWidth: 980 }}>
          See the difference Outrun can make to <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>your schemes</span>.
        </h2>
        <div style={{ paddingBottom: isMobile ? 0 : 24 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 18, lineHeight: 1.55, color: ED.ink, margin: isMobile ? '0 0 24px' : '0 0 32px' }}>
            Book a 30-minute demo. We&rsquo;ll walk you through the Schemes Platform on a real scheme - quoting, binding, document generation, policy management, bordereaux - and the ProductWriter integration that makes the products you build yours.
          </p>
          <BrkBtn kind="primary" href="/demo">Book a demo</BrkBtn>
        </div>
      </div>
    </section>
  );
}

// ─── root ──────────────────────────────────────────────────────

function BrkSite({ accent, fontMode = 'serif' }) {
  return (
    <BrkChrome accent={accent} fontMode={fontMode} current="/schemes-platform">
      <BrkHero />
      <BrkPillars />
      <BrkFeatures />
      <BrkUpgrade />
      <BrkCta />
    </BrkChrome>
  );
}

Object.assign(window, { BrkSite });