// MGA PLATFORM PAGE - /mga-platform · "The MGA Platform"
// COMBINED offering: the DA Platform + MGA PAS+ merged into one page.
// Brand chrome (nav, footer, tokens, primitives) from chrome.jsx.
//
// Section order (rendered):
//   1. Hero            - "The MGA Platform" (whole MGA: DA work + wider operation)
//   2. Pillars         - "on your terms" (Foundations / Freedom / Experience) [from DA]
//   3. Orientation     - "One platform for your whole operation" [from PAS+, bridge]
//   4. Features        - unified: DA core (5 groups / 21) + wider operation (3 groups / 6),
//                        shown as two tiers ("Delegated authority" / "The wider operation")
//   5. Why Outrun      - comparative editorial [from PAS+]
//   6. Closing CTA     - "your whole MGA on one platform"
//
// Cut vs. the two source pages: the "upgrade path to MGA PAS+" section, the
// containment visual, and the PAS+ "DA recall" block (folded into the unified features).

const { EdCtx: MpCtx, EdTag: MpTag, EdBtn: MpBtn,
        EdSectionHead: MpSectionHead, EdChrome: MpChrome,
        useIsMobile: mpUseIsMobile, TargetMark: MpTarget,
        ContainmentVisual: MpContainment, StatStrip: MpStatStrip } = window;

const MP_STATS = [
  { fig: '70%', label: 'typical reduction in quote processing time' },
  { fig: '25%', label: 'typical improvement in quote bind rate' },
  { fig: '95%', label: 'self serve capability' },
  { fig: '3', label: 'ways to build', sub: 'Build with us, a third party, or your own team. Host and distribute your way.' },
];

// Ambient Target-mark layer (see target-mark.jsx). Relative section, mark
// behind content (zIndex 0, pointer-safe), content above.
function MpMarked({ children, mark, style }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', ...style }}>
      {mark && <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>{mark}</div>}
      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
    </section>
  );
}

// ─── §1 hero ───────────────────────────────────────────────────

function MpHero({ statStyle = 'hairline', statCount = 4 }) {
  const ED = React.useContext(MpCtx);
  const edText = ED.text;
  const isMobile = mpUseIsMobile();
  const mark = isMobile ? (
    <MpTarget size={300} place={{ right: -128, bottom: -150 }} state="fragmented" rings={[0.94, 0.72, 0.5]} dotR={9} inkScale={0.55} baseOpacity={0.92} />
  ) : (
    <MpTarget size={780} place={{ right: -150, bottom: -160 }} state="fragmented" crosshair dotR={11} inkScale={0.82} />
  );
  return (
    <MpMarked style={{ boxSizing: 'border-box', minHeight: isMobile ? 657 : 898, padding: isMobile ? '40px 24px 56px' : '72px 144px 96px', background: ED.bg }} mark={mark}>
      <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 <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>MGA</span> Platform.
      </h1>

      <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 16 : 20, maxWidth: isMobile ? 700 : 875, marginTop: isMobile ? 28 : 44 }}>
        <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
          One purpose-built platform for quoting, binding, document generation, policy management, distribution, bordereaux and reporting on your delegated authority business.
        </p>
        <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
          Either your software house dictates the cost and speed of every new product launch and every change, or you&rsquo;re stuck building on workbooks. Outrun gives <span style={{ color: ED.red, fontWeight: 500 }}>control back to you</span> &ndash; so your growth isn&rsquo;t constrained.
        </p>
        <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
          With Outrun, the products you build are yours. For rating and rules, we use the industry owned engine, so decisions about cost and speed of building are in your hands.
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 20 : 28, flexWrap: 'wrap', justifyContent: 'flex-start', marginTop: isMobile ? 8 : 12 }}>
          <MpBtn kind="ghost" href="/demo">Book a demo</MpBtn>
          <div style={{ display: 'flex', alignItems: 'center', paddingLeft: isMobile ? 20 : 28 }}>
            <img src="images/mgaa-member.png" alt="MGAA Member" style={{ display: 'block', width: isMobile ? 72 : 87, height: isMobile ? 72 : 87 }} />
          </div>
        </div>
      </div>

      <div style={{ marginTop: isMobile ? 44 : 40, maxWidth: 1152 }}>
        <MpStatStrip stats={MP_STATS} variant={statStyle} count={statCount} />
      </div>
    </MpMarked>
  );
}

// ─── §2 Pillars - "on your terms" (from DA) ────────────────────

function MpPillars() {
  const ED = React.useContext(MpCtx);
  const edText = ED.text;
  const isMobile = mpUseIsMobile();
  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: [
        <>For rating and rules, we use Polaris ProductWriter, fully integrated with Outrun - and the most powerful rating engine in the UK insurance market. Capable of handling any product complexity, it&rsquo;s industry-owned, industry-trusted, and used by the UK&rsquo;s biggest insurers.</>,
        <>Your products are built on the industry&rsquo;s standard, not a vendor&rsquo;s proprietary system, which means the products you build are genuinely, permanently yours. The product build expertise sits across the industry, not locked in one software house. Because the industry funds and develops ProductWriter together, it evolves with the market.</>,
      ],
    },
    {
      kicker: 'Freedom',
      claim: <>Run your business on your terms. <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>Get real control of your platform</span>.</>,
      bodies: [
        <>Whoever controls your rating engine, your build process, or your distribution ends up controlling your build costs and your launch speed. With Outrun, that control is yours.</>,
        <>We can build your products for you, you can build them yourself, or bring in third party resource - the choice is yours. Distribute to your brokers via our portal, or into the wider market e-trade environment via Polaris iMarket.</>,
        <>Your team can update question sets, documents, referral and endorsement libraries and pricing rules directly. You retain as much control as you want over product build and the day-to-day running of your products and processes.</>,
      ],
    },
    {
      kicker: 'Experience',
      claim: <><span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>Operational insurance experience</span>, built into the platform.</>,
      bodies: [
        <>The Outrun team has spent decades in specialist insurance operations - building schemes, handling binder updates, managing bordereaux.</>,
        <>We know where to focus our attention. On product builds for example, we review the underwriting guide in detail. That can surface gaps where the question set wouldn&rsquo;t capture all the required risk data, or missing rating logic. Our experience means 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 }}>
      <MpSectionHead
        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>
  );
}

// ─── §3 Orientation - "whole operation" (from PAS+, bridge) ────

function MpOrientation() {
  const ED = React.useContext(MpCtx);
  const edText = ED.text;
  const isMobile = mpUseIsMobile();
  const mark = isMobile ? (
    <MpTarget size={300} place={{ right: -170, bottom: -188 }} state="fragmented" rings={[0.94, 0.72, 0.5]} dotR={9} inkScale={0.55} baseOpacity={0.92} />
  ) : (
    <MpTarget size={560} place={{ right: -180, bottom: -120 }} state="fragmented" rings={[0.94, 0.72, 0.5]} dotR={9} baseOpacity={0.92} />
  );
  return (
    <MpMarked style={{ padding: isMobile ? '56px 24px' : '96px 144px 96px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}` }} mark={mark}>
      <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.red, fontStyle: 'normal' }}>whole operation</span>.
        </h2>
      </div>

      <div style={{ marginTop: isMobile ? 36 : 64, display: isMobile ? 'flex' : 'grid', gridTemplateColumns: isMobile ? undefined : 'minmax(0, 0.62fr) minmax(0, 1fr)', gap: isMobile ? 40 : 80, alignItems: 'start', flexDirection: 'column' }}>
        <MpContainment
          variant="pas"
          surface={ED.bgWarm}
          scale={1.05}
          frame={false}
          coreName="The MGA Platform"
          coreSub="One platform to run your whole business"
          coreGroups={[
            'Core policy & underwriting',
            'Configuration',
            'Workflows',
            'Automation',
            'Distribution',
            'Data, reporting & bordereaux',
            'Accounting & finance',
            'Claims',
            'Complaints',
            'Multi-brand & division',
          ]}
          addsLabel=""
          adds={[]}
        />
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 28, width: isMobile ? undefined : '60%' }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            Running a modern MGA shouldn&rsquo;t mean stitching together separate systems for underwriting, policy admin, accounting, claims, and reporting. The MGA Platform brings your whole operation onto one system.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            All the delegated authority work - underwriting, quoting, document generation, policy management, broker distribution, bordereaux, reporting - plus full premium accounting, claims and complaints.
          </p>
        </div>
      </div>
    </MpMarked>
  );
}

// ─── §4 Features - unified two-tier set ────────────────────────

function MpFeatures() {
  const ED = React.useContext(MpCtx);
  const edText = ED.text;
  const isMobile = mpUseIsMobile();

  const daGroups = [
    {
      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: 'Refer and sign off. Authority limits, referral rules, and decline rules - every risk signed off by the person with the right authority, whether referred from a broker or escalated internally.' },
        { name: 'Insurer panel', body: 'Single risk capture, multiple products. Quote across your product range from a single question set.' },
      ],
    },
    {
      title: 'Configuration, workflows & automation',
      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 product, or connected to multiple products.' },
        { 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: 'Data, reporting & bordereaux',
      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: 'Distribution',
      features: [
        { name: 'Broker portal', body: 'Distribute products to your brokers through a portal we provide. Includes full cycle policy management.' },
        { name: 'Polaris iMarket distribution', body: 'Publish your products to brokers and systems across the market via iMarket.' },
      ],
    },
    {
      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.' },
        { 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.' },
      ],
    },
  ];

  const opsGroups = [
    {
      title: 'Accounting & 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: 'Claims & complaints',
      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: 'Multi-brand & division',
      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 renderGroups = (groups, emphasis) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 40 : 80 }}>
      {groups.map((g) => (
        <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: emphasis, fontWeight: 700, lineHeight: 1, position: 'relative', top: -1 }}>+</span>
                  <h4 style={{ ...edText.med, fontSize: 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>
  );

  const tierLabel = (kicker, title, emphasis, blurb) => (
    <div style={{ maxWidth: 1100 }}>
      <span style={{ ...edText.tag, color: emphasis, fontSize: isMobile ? 13 : 15 }}>{kicker}</span>
      <h3 style={{ ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 56, lineHeight: isMobile ? 1.1 : 1.05, color: ED.ink, margin: isMobile ? '12px 0 0' : '16px 0 0', letterSpacing: '-0.03em' }}>
        {title}
      </h3>
      <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: isMobile ? '16px 0 32px' : '22px 0 48px', maxWidth: 900 }}>
        {blurb}
      </p>
    </div>
  );

  return (
    <section style={{ padding: isMobile ? '0 24px 56px' : '0 144px 96px', background: ED.bgWarm }}>
      {/* Tier 1 - Delegated authority */}
      {renderGroups(daGroups, ED.teal)}

      {/* Tier 2 - The wider operation */}
      <div style={{ marginTop: isMobile ? 40 : 80 }}>
        {renderGroups(opsGroups, ED.teal)}
      </div>
    </section>
  );
}

// ─── §5 Why Outrun (comparative, from PAS+) ────────────────────

function MpWhy() {
  const ED = React.useContext(MpCtx);
  const edText = ED.text;
  const isMobile = mpUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <MpSectionHead
        title={<>Why Outrun&rsquo;s <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>MGA Platform</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 Platform 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 MpCta() {
  const ED = React.useContext(MpCtx);
  const edText = ED.text;
  const isMobile = mpUseIsMobile();
  const mark = isMobile ? (
    <MpTarget size={320} place={{ right: -104, bottom: -120 }} state="resolved" crosshair rings={[0.94, 0.72, 0.5]} redRing={0.28} dotR={10} inkScale={0.75} />
  ) : (
    <MpTarget size={560} place={{ right: -90, bottom: -110 }} state="resolved" crosshair rings={[0.94, 0.76, 0.58, 0.4]} redRing={0.26} dotR={12} />
  );
  return (
    <MpMarked style={{ boxSizing: 'border-box', minHeight: isMobile ? undefined : 660, padding: isMobile ? '56px 24px' : '120px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }} mark={mark}>
      <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: 1100 }}>
        See your <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>whole MGA</span> on one platform.
      </h2>
      <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.55, color: ED.ink, margin: isMobile ? '32px 0 0' : '40px 0 0', maxWidth: 780 }}>
        Book a 30-minute demo. We&rsquo;ll walk you through the MGA Platform 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>
      <div style={{ marginTop: isMobile ? 28 : 36, display: 'flex', justifyContent: 'flex-start' }}>
        <MpBtn kind="primary" href="/demo">Book a demo</MpBtn>
      </div>
    </MpMarked>
  );
}

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

function MgaPlatformSite({ accent, fontMode = 'serif', statStyle = 'hairline', statCount = 4 }) {
  return (
    <MpChrome accent={accent} fontMode={fontMode} current="/mga-platform" signup={false}>
      <MpHero statStyle={statStyle} statCount={statCount} />
      <MpPillars />
      <MpOrientation />
      <MpFeatures />
      <SignupBlock layout="band" tone="light" bordered={false} blurb="Monthly update on issues impacting MGAs - plus new features we’ve delivered on the platform." />
      <MpWhy />
      <MpCta />
    </MpChrome>
  );
}

Object.assign(window, { MgaPlatformSite });