// MGA PAS+ PAGE - /mga-pas-plus · "MGA PAS+. The end-to-end PAS for MGAs."
// Brand chrome (nav, footer, tokens, primitives) from chrome.jsx.
//
// Section order mirrors the v1.0 MGA PAS+ page copy:
//   1. Hero
//   2. End-to-end MGA, on one platform (orientation)
//   3. Everything the DA Platform does (recall block + link back to /mgas)
//   4. Plus the wider operation (6 features in 3 sub-groups)
//   5. Why Outrun's MGA PAS+ (comparative editorial)
//   6. Closing CTA

const { EdCtx: MgapCtx, EdTag: MgapTag, EdBtn: MgapBtn,
        EdSectionHead: MgapSectionHead, EdChrome: MgapChrome,
        useIsMobile: mgapUseIsMobile } = window;

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

function MgapHero() {
  const ED = React.useContext(MgapCtx);
  const edText = ED.text;
  const isMobile = mgapUseIsMobile();
  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' }}>MGA PAS+</span>.{isMobile ? ' ' : <br/>}
        The complete PAS for MGAs.
      </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: 700 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
            Running a modern MGA shouldn&rsquo;t mean stitching together separate systems for product build, accounting, claims, and reporting.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
            Outrun&rsquo;s end-to-end MGA PAS+ brings the whole operation onto one platform - Delegated Authority products, accounting, claims, complaints, multi-brand, multi-division - with rating and rules from the engine the industry owns.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMobile ? 'stretch' : 'flex-end', gap: 18 }}>
          <MgapBtn kind="ghost" href="/demo">Book a demo</MgapBtn>
        </div>
      </div>
    </section>
  );
}

// ─── §2 End-to-end MGA, on one platform (orientation) ──────────

function MgapOrientation() {
  const ED = React.useContext(MgapCtx);
  const edText = ED.text;
  const isMobile = mgapUseIsMobile();
  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.yellow, fontStyle: 'normal' }}>whole 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 DA work - quoting, underwriting, document generation, policy management, broker distribution, bordereaux, reporting - plus the wider operation: premium accounting, claims, complaints, multi-brand, multi-division. 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 What's in MGA PAS+ (DA recall + PAS+ additions, merged) ──

function MgapWhatsIn() {
  const ED = React.useContext(MgapCtx);
  const edText = ED.text;
  const isMobile = mgapUseIsMobile();

  const daGroups = [
    { name: 'Core policy & underwriting',  detail: 'Full policy lifecycle, Polaris ProductWriter integration, underwriting controls, insurer panel.' },
    { name: 'Configuration & workflow',    detail: 'Customisable workflows and question sets, document generation, task management, rules-based automation.' },
    { name: 'Reporting & data',            detail: 'Standard and custom reports, PowerBI integration, bordereaux production and management.' },
    { name: 'Distribution',                detail: 'Broker portal with full policy management, Polaris iMarket distribution.' },
    { name: 'Platform foundations',        detail: 'Security, hosting flexibility, API integrations, audit trail, user permissions.' },
  ];

  const plusBlocks = [
    {
      title: 'Finance',
      features: [
        { name: 'Premium accounting', body: 'Track premiums collected and paid, generate broker and capacity-provider statements, reconcile across the books. GAAP/IFRS compliant.' },
        { name: 'Office accounts',    body: 'Manage your office\u2019s books alongside premium accounting, in the same system.' },
      ],
    },
    {
      title: 'Customer operations',
      features: [
        { name: 'Claims management',     body: 'Log claims, track status through to resolution, and report on claim data - fully integrated with policy records.' },
        { name: 'Complaints management', body: 'Log, track, and report on complaints, with regulatory and insurer summary reports out of the box.' },
      ],
    },
    {
      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 }}>
      <MgapSectionHead
        title={<>Everything in <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>MGA PAS+</span>.</>}
      />

      {/* - Sub-block A: DA Platform recall --------------- */}
      <div style={{ maxWidth: 1320, marginTop: isMobile ? 12 : 24 }}>
        <h3 style={subHeading}>
          The core <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>DA Platform</span> functionality.
        </h3>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: isMobile ? '18px 0 28px' : '24px 0 40px', maxWidth: 900 }}>
          Every part of the DA Platform is included in MGA PAS+
        </p>
        <div style={{ display: 'flex', flexDirection: 'column', borderTop: `1.5px solid ${ED.ink}` }}>
          {daGroups.map((g) => (
            <div key={g.name} style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
              gap: isMobile ? 8 : 48,
              padding: isMobile ? '20px 0' : '28px 0',
              borderBottom: `1px solid ${ED.rule}`,
              alignItems: isMobile ? 'stretch' : 'baseline',
            }}>
              <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 ? 18 : 20, color: ED.ink, margin: 0, letterSpacing: '-0.015em', lineHeight: 1.25 }}>
                  {g.name}
                </h4>
              </div>
              <p style={{ ...edText.sans, fontSize: isMobile ? 16 : 16, lineHeight: 1.55, color: ED.ink, margin: isMobile ? '0 0 0 28px' : 0 }}>
                {g.detail}
              </p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: isMobile ? 24 : 32, display: 'flex', justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
          <a href="/da-platform" style={{ ...edText.med, fontSize: 15, color: ED.ink, textDecoration: 'none', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3 }}>
            See the full DA Platform feature set <span style={{ color: ED.accent }}>→</span>
          </a>
        </div>
      </div>

      {/* - Sub-block B: Plus the wider operation ----------- */}
      <div style={{ maxWidth: 1320, marginTop: isMobile ? 48 : 64 }}>
        <h3 style={subHeading}>
          Plus the <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>wider operation</span>.
        </h3>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: isMobile ? '18px 0 36px' : '24px 0 56px', maxWidth: 900 }}>
          Three areas MGA PAS+ adds to the DA Platform foundation:
        </p>
        <div style={{ 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 MGA PAS+ (comparative editorial) ──────────

function MgapWhy() {
  const ED = React.useContext(MgapCtx);
  const edText = ED.text;
  const isMobile = mgapUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <MgapSectionHead
        title={<>Why Outrun&rsquo;s <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>MGA 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 }}>
          Most ways to run a full MGA come with a trade-off. Legacy full PAS systems handle the wider operation well, but DA work rarely plays to their strengths. Modern proprietary platforms do products well - but on an engine they own, with the products you build living in their system. Spreadsheets work until they don&rsquo;t.
        </p>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: ED.ink, margin: 0 }}>
          Outrun&rsquo;s MGA PAS+ is built to avoid that trade-off - a full PAS that does DA properly, using rating and rules from the engine the industry owns. Every part of an MGA operation in one place, with the products you build staying yours.
        </p>
      </div>
    </section>
  );
}

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

function MgapCta() {
  const ED = React.useContext(MgapCtx);
  const edText = ED.text;
  const isMobile = mgapUseIsMobile();
  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 MGA</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 MGA PAS+ end-to-end - from product build, through policy admin and broker distribution, to premium accounting, claims, and complaints - and the ProductWriter integration that makes the products you build yours.
          </p>
          <MgapBtn kind="primary" href="/demo">Book a demo</MgapBtn>
        </div>
      </div>
    </section>
  );
}

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

function MgapSite({ accent, fontMode = 'serif' }) {
  return (
    <MgapChrome accent={accent} fontMode={fontMode} current="/mga-pas-plus">
      <MgapHero />
      <MgapOrientation />
      <MgapWhatsIn />
      <MgapWhy />
      <MgapCta />
    </MgapChrome>
  );
}

Object.assign(window, { MgapSite });