// BROKER PAS+ PAGE - /broker-pas-plus · "Broker PAS+. The end-to-end PAS for brokers."
// Brand chrome (nav, footer, tokens, primitives) from chrome.jsx.
//
// Section order mirrors the v1.0 Broker PAS+ page copy:
//   1. Hero
//   2. An end-to-end platform for brokers (orientation)
//   3 + 4. What's in Broker PAS+ (Schemes Platform recall + PAS+ additions, merged)
//   5. Why Outrun's Broker PAS+ (comparative editorial)
//   6. Closing CTA

const { EdCtx: BrkpCtx, EdTag: BrkpTag, EdBtn: BrkpBtn,
        EdSectionHead: BrkpSectionHead, EdChrome: BrkpChrome,
        useIsMobile: brkpUseIsMobile } = window;

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

function BrkpHero() {
  const ED = React.useContext(BrkpCtx);
  const edText = ED.text;
  const isMobile = brkpUseIsMobile();
  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' }}>
        <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>Broker PAS+</span>.{isMobile ? ' ' : <br/>}
        The complete PAS for brokers.
      </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: 720 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
            Running a modern brokerage shouldn&rsquo;t mean stitching together separate systems for quoting, accounting, claims, customer service, and communications.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
            Outrun&rsquo;s end-to-end Broker PAS+ brings your whole brokerage onto one platform - schemes and open market business, accounting, claims, customer portal, integrated payments, customer communications.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMobile ? 'stretch' : 'flex-end', gap: 18 }}>
          <BrkpBtn kind="ghost" href="/demo">Book a demo</BrkpBtn>
        </div>
      </div>
    </section>
  );
}

// ─── §2 An end-to-end platform for brokers (orientation) ───────

function BrkpOrientation() {
  const ED = React.useContext(BrkpCtx);
  const edText = ED.text;
  const isMobile = brkpUseIsMobile();
  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 }}>
          One platform for your <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>whole broking operation</span>.
        </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 }}>
          All the schemes work - quoting, binding, document generation, policy management, bordereaux, reporting - plus open market business, accounting, claims, customer portal, integrated payments, and customer communications.
        </p>
      </div>
    </section>
  );
}

// ─── §3 + §4 What's in Broker PAS+ (recall + additions, merged) ─

function BrkpWhatsIn() {
  const ED = React.useContext(BrkpCtx);
  const edText = ED.text;
  const isMobile = brkpUseIsMobile();

  const plusBlocks = [
    {
      title: 'Finance',
      features: [
        { name: 'Client accounting (IBA)', body: 'Premium accounting, client money management, reconciliations.' },
        { name: 'Office accounts',         body: 'Manage your office\u2019s books alongside client accounting.' },
        { name: 'Integrated payments',     body: 'Card payment gateway for taking premiums directly.' },
        { name: 'Premium finance',         body: 'Originate and manage premium finance loans, so customers can spread payments.' },
      ],
    },
    {
      title: 'Customer operations',
      features: [
        { name: 'Claims management',       body: 'Log, track, and report on claims, integrated with policy records.' },
        { name: 'Complaints management',   body: 'Log, track, and report on complaints, with regulatory and insurer summary reports.' },
        { name: 'Customer service portal', body: 'Self-serve payments and renewals for your customers.' },
        { name: 'Customer communications', body: 'Integrated email, SMS, and WhatsApp - auto-assigned to the policy.' },
        { name: 'Prospect pipeline',       body: 'Track prospects from enquiry through to bind.' },
        { name: 'Alternative quoting',     body: 'Review existing policies and generate alternative quotes.' },
      ],
    },
    {
      title: 'Operational structure',
      features: [
        { name: 'Multi-brand',    body: 'Run multiple trading brands from one platform.' },
        { name: 'Multi-division', body: 'Operate multiple operationally independent divisions from one platform.' },
      ],
    },
  ];

  const subHeading = { ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 56, lineHeight: isMobile ? 1.1 : 1.05, color: ED.ink, margin: 0, letterSpacing: '-0.03em' };

  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg }}>
      <BrkpSectionHead
        title={<>Everything in <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>Broker PAS+</span>.</>}
      />

      {/* - Sub-block A: Schemes Platform recall (one paragraph + link) - */}
      <div style={{ maxWidth: 1320, marginTop: isMobile ? 12 : 24 }}>
        <h3 style={subHeading}>
          The core <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>Schemes Platform</span> functionality.
        </h3>
        <div style={{ marginTop: isMobile ? 22 : 32, paddingTop: isMobile ? 22 : 28, borderTop: `1.5px solid ${ED.ink}`, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: isMobile ? 22 : 60, alignItems: isMobile ? 'stretch' : 'baseline' }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0, maxWidth: 900 }}>
            Broker PAS+ includes the Schemes Platform in full - Polaris ProductWriter for rating and rules, plus everything to run schemes from quote to bordereaux.
          </p>
          <a href="/schemes-platform" style={{ ...edText.med, fontSize: 15, color: ED.ink, textDecoration: 'none', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3, whiteSpace: 'nowrap', alignSelf: isMobile ? 'flex-start' : 'auto' }}>
            See the Schemes Platform <span style={{ color: ED.accent }}>→</span>
          </a>
        </div>
      </div>

      {/* - Sub-block B: Plus everything you'd expect from a full PAS - */}
      <div style={{ maxWidth: 1320, marginTop: isMobile ? 56 : 96 }}>
        <h3 style={subHeading}>
          Plus everything you&rsquo;d expect from a <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>full PAS</span>.
        </h3>
        <div style={{ marginTop: isMobile ? 36 : 64, display: 'flex', flexDirection: 'column', gap: isMobile ? 36 : 64 }}>
          {plusBlocks.map((b, bi) => (
            <div key={b.title} style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 18 : 60, paddingTop: bi === 0 ? 0 : (isMobile ? 28 : 36), borderTop: bi === 0 ? 'none' : `1px solid ${ED.rule}` }}>
              <div>
                <h4 style={{ ...edText.display, fontSize: isMobile ? 24 : 32, color: ED.ink, lineHeight: 1.1, letterSpacing: '-0.025em', margin: 0 }}>
                  {b.title}
                </h4>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 0 : '0 48px' }}>
                {b.features.map((f, fi) => (
                  <div key={f.name} style={{
                    padding: isMobile ? '16px 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>
                      <h5 style={{ ...edText.med, fontSize: isMobile ? 17 : 17, color: ED.ink, margin: 0, letterSpacing: '-0.01em', lineHeight: 1.3, fontWeight: 500 }}>
                        {f.name}
                      </h5>
                    </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>
      </div>
    </section>
  );
}

// ─── §5 Why Outrun's Broker PAS+ (comparative editorial) ───────

function BrkpWhy() {
  const ED = React.useContext(BrkpCtx);
  const edText = ED.text;
  const isMobile = brkpUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <BrkpSectionHead
        title={<>Why Outrun&rsquo;s <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>Broker PAS+</span>.</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 22 : 80, maxWidth: 1320 }}>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: ED.ink, margin: 0 }}>
          Full PAS choices for brokers usually mean a trade-off: legacy platforms with the operational stack but slow to change, or modern systems on an engine they own, with the schemes you build living in their system.
        </p>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: ED.ink, margin: 0 }}>
          Outrun&rsquo;s Broker PAS+ avoids both - a modern, configurable PAS using the rating engine the industry owns. Build the workflows you want, integrate with what you already use, and the schemes you build stay yours.
        </p>
      </div>
    </section>
  );
}

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

function BrkpCta() {
  const ED = React.useContext(BrkpCtx);
  const edText = ED.text;
  const isMobile = brkpUseIsMobile();
  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 your <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>whole brokerage</span> on one platform.
        </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 Broker PAS+ end-to-end - from quoting and binding, through policy management, to client accounting, claims, and customer communications - and the ProductWriter integration that makes the schemes you build yours.
          </p>
          <BrkpBtn kind="primary" href="/demo">Book a demo</BrkpBtn>
        </div>
      </div>
    </section>
  );
}

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

function BrkpSite({ accent, fontMode = 'serif' }) {
  return (
    <BrkpChrome accent={accent} fontMode={fontMode} current="/broker-pas-plus">
      <BrkpHero />
      <BrkpOrientation />
      <BrkpWhatsIn />
      <BrkpWhy />
      <BrkpCta />
    </BrkpChrome>
  );
}

Object.assign(window, { BrkpSite });