// FOR MGAs - DA PLATFORM PAGE - /mgas · "The DA Platform for MGAs"
// Brand chrome (nav, footer, tokens, primitives) from chrome.jsx.
//
// Section order mirrors the v1.0 MGA page copy:
//   1. Hero
//   2. Built for delegated authority work (orientation)
//   3. Three things shape how Outrun works (MGA-flavoured pillars + customer anecdote)
//   4. Features - 5 groups, 21 features (Distribution group is MGA-only)
//   5. A smooth upgrade path to MGA PAS+ (quiet)
//   6. Closing CTA

const { EdCtx: MgaCtx, EdTag: MgaTag, EdBtn: MgaBtn,
        EdSectionHead: MgaSectionHead, EdChrome: MgaChrome,
        useIsMobile: mgaUseIsMobile } = window;

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

function MgaHero() {
  const ED = React.useContext(MgaCtx);
  const edText = ED.text;
  const isMobile = mgaUseIsMobile();
  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 DA Platform{isMobile ? ' ' : <br/>}
        for <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>MGAs</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 }}>
            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>.
          </p>
          <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 }}>
            The products you build are yours. For rating and rules, we use Polaris ProductWriter - so the cost and speed of building them isn&rsquo;t dictated by your software house.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: isMobile ? 'stretch' : 'flex-end', gap: 18 }}>
          <MgaBtn kind="ghost" href="/demo">Book a demo</MgaBtn>
        </div>
      </div>
    </section>
  );
}

// ─── §2 Built for delegated authority work (orientation) ───────

function MgaOrientation() {
  const ED = React.useContext(MgaCtx);
  const edText = ED.text;
  const isMobile = mgaUseIsMobile();
  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 <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>delegated authority</span> work.
        </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, underwriting, document generation, policy management, broker distribution, bordereaux, and reporting on your delegated authority business. 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 MgaPillars() {
  const ED = React.useContext(MgaCtx);
  const edText = ED.text;
  const isMobile = mgaUseIsMobile();
  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. Distribute to your brokers via our portal, or into the wider market via Polaris iMarket. 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 }}>
      <MgaSectionHead
        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 (21 features across 5 groups) ─────────────────

function MgaFeatures() {
  const ED = React.useContext(MgaCtx);
  const edText = ED.text;
  const isMobile = mgaUseIsMobile();
  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: '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 & 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 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: '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: '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.' },
      ],
    },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}` }}>
      <MgaSectionHead
        title={<>Everything to run your <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>delegated authority</span> business.</>}
      />
      <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, underwriting, document generation, policy management, broker distribution, bordereaux, reporting - it lives in one place. Built specifically for delegated authority products.
      </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 MGA PAS+ (quiet) ───────────────────────

function MgaUpgrade() {
  const ED = React.useContext(MgaCtx);
  const edText = ED.text;
  const isMobile = mgaUseIsMobile();
  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' }}>MGA 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 DA Platform handles your delegated authority work. When you need a full PAS to run the wider operation - accounting, claims, complaints, multi-brand, multi-division - MGA PAS+ is the natural next step.
          </p>
          <div style={{ display: 'flex', gap: 36, flexWrap: 'wrap' }}>
            <a href="/mga-pas-plus" style={{ ...edText.med, fontSize: 15, color: ED.ink, textDecoration: 'none', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3 }}>
              MGA PAS+ <span style={{ color: ED.accent }}>→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

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

function MgaCta() {
  const ED = React.useContext(MgaCtx);
  const edText = ED.text;
  const isMobile = mgaUseIsMobile();
  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 MGA</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 DA Platform on a real scheme - quoting, binding, document generation, broker distribution, bordereaux - and the ProductWriter integration that makes the products you build yours.
          </p>
          <MgaBtn kind="primary" href="/demo">Book a demo</MgaBtn>
        </div>
      </div>
    </section>
  );
}

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

function MgaSite({ accent, fontMode = 'serif' }) {
  return (
    <MgaChrome accent={accent} fontMode={fontMode} current="/da-platform">
      <MgaHero />
      <MgaPillars />
      <MgaFeatures />
      <MgaUpgrade />
      <MgaCta />
    </MgaChrome>
  );
}

Object.assign(window, { MgaSite });