// ABOUT - CHAPTERS LAYOUT (big numerals · magazine table-of-contents feel)
// Direction: each section is a chapter. Massive numerals on the left act as
// anchors; the chapter title sits at display size; body in the right column.
// Inflection point gets its own full-bleed treatment, untethered from chapters.

const { EdCtx: ChapCtx, EdTag: ChapTag, EdBtn: ChapBtn, EdChrome: ChapChrome,
        useIsMobile: chapUseIsMobile } = window;

function ChapHero() {
  const ED = React.useContext(ChapCtx);
  const edText = ED.text;
  const isMobile = chapUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 56px' : '72px 90px 120px', background: ED.bg }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.7fr 1.3fr', gap: isMobile ? 24 : 80, alignItems: isMobile ? 'start' : 'end' }}>
        <div>
          <div style={{ ...edText.tag, fontSize: 12, color: ED.ink2 }}>About Outrun</div>
          <div style={{
            ...edText.display,
            fontSize: isMobile ? 'clamp(120px, 38vw, 156px)' : 260,
            lineHeight: 0.85,
            color: ED.red,
            fontStyle: 'italic',
            margin: isMobile ? '8px 0 0' : '24px 0 0',
            letterSpacing: '-0.04em',
          }}>00</div>
          <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2, marginTop: 8 }}>Foreword</div>
        </div>
        <div style={{ paddingBottom: isMobile ? 0 : 24 }}>
          <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(40px, 11vw, 46px)' : 88, lineHeight: isMobile ? 1.05 : 1.02, color: ED.ink, margin: 0, letterSpacing: '-0.035em' }}>
            Schemes and DA business needs a platform <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>built specifically for it</span>.
          </h1>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 22, lineHeight: 1.5, color: ED.ink, margin: isMobile ? '20px 0 0' : '36px 0 0', maxWidth: 760 }}>
            Outrun is the DA and schemes platform for MGAs and schemes brokers - built by people who&rsquo;ve spent their careers in this industry, across operations, product and technology. The difference runs through every decision we&rsquo;ve made.
          </p>
        </div>
      </div>
    </section>
  );
}

function Chapter({ num, kicker, title, accentColor, children, bg }) {
  const ED = React.useContext(ChapCtx);
  const edText = ED.text;
  const isMobile = chapUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '120px 90px', background: bg || ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.7fr 1.3fr', gap: isMobile ? 16 : 80, alignItems: 'start' }}>
        <div style={isMobile ? {} : { position: 'sticky', top: 120 }}>
          <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2 }}>{kicker}</div>
          <div style={{
            ...edText.display,
            fontSize: isMobile ? 'clamp(120px, 38vw, 156px)' : 260,
            lineHeight: 0.85,
            color: accentColor || ED.ink,
            fontStyle: 'italic',
            margin: isMobile ? '8px 0 0' : '16px 0 0',
            letterSpacing: '-0.04em',
          }}>{num}</div>
        </div>
        <div>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 56, lineHeight: isMobile ? 1.08 : 1.1, color: ED.ink, margin: isMobile ? '12px 0 0' : 0, letterSpacing: '-0.03em', maxWidth: 880 }}>
            {title}
          </h2>
          <div style={{ marginTop: isMobile ? 24 : 48, display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24, maxWidth: 760 }}>
            {children}
          </div>
        </div>
      </div>
    </section>
  );
}

function ChapPara({ children }) {
  const ED = React.useContext(ChapCtx);
  const edText = ED.text;
  const isMobile = chapUseIsMobile();
  return (
    <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: ED.ink, margin: 0 }}>{children}</p>
  );
}

// Inflection - full-bleed, untethered from the chapter system
function ChapInflection() {
  const ED = React.useContext(ChapCtx);
  const edText = ED.text;
  const isMobile = chapUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '88px 24px' : '180px 90px', background: ED.ink, color: ED.inverse, borderTop: `1px solid ${ED.ink}` }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ ...edText.tag, fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>Interlude</div>
        <span aria-hidden="true" style={{ ...edText.displayBold, fontStyle: 'normal', color: ED.red, fontSize: isMobile ? 80 : 140, lineHeight: 0.55, display: 'block', marginTop: isMobile ? 16 : 24 }}>&ldquo;</span>
        <blockquote style={{
          ...edText.display,
          fontSize: isMobile ? 'clamp(32px, 9vw, 40px)' : 88,
          lineHeight: isMobile ? 1.15 : 1.08,
          color: ED.inverse,
          margin: '16px 0 0',
          letterSpacing: '-0.035em',
          fontStyle: 'italic',
          fontWeight: 400,
          maxWidth: 1240,
        }}>
          We found ourselves saying <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'italic' }}>there has to be a better way to run this</span> one too many times.
        </blockquote>
      </div>
    </section>
  );
}

function ChapCta() {
  const ED = React.useContext(ChapCtx);
  const edText = ED.text;
  const isMobile = chapUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px 72px' : '120px 90px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '0.7fr 1.3fr', gap: isMobile ? 16 : 80, alignItems: isMobile ? 'start' : 'end' }}>
        <div>
          <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2 }}>End of chapter</div>
          <div style={{
            ...edText.display,
            fontSize: isMobile ? 'clamp(120px, 38vw, 156px)' : 260,
            lineHeight: 0.85,
            color: ED.red,
            fontStyle: 'italic',
            margin: isMobile ? '8px 0 0' : '16px 0 0',
            letterSpacing: '-0.04em',
          }}>05</div>
        </div>
        <div style={{ paddingBottom: isMobile ? 0 : 32 }}>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 56, lineHeight: isMobile ? 1.08 : 1.12, color: ED.ink, margin: isMobile ? '12px 0 0' : 0, letterSpacing: '-0.03em', maxWidth: 880 }}>
            See what a platform built <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>specifically for schemes and DA business</span> looks like.
          </h2>
          <div style={{ marginTop: isMobile ? 24 : 36, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 10 : 12, flexWrap: 'wrap', alignItems: isMobile ? 'stretch' : 'flex-start' }}>
            <ChapBtn kind="ghost" href="/da-platform">DA Platform for MGAs</ChapBtn>
            <ChapBtn kind="ghost" href="/schemes-platform">Schemes Platform for Brokers</ChapBtn>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutSiteChapters({ accent, fontMode = 'serif' }) {
  return (
    <ChapChrome accent={accent} fontMode={fontMode} current="/about">
      <ChapHero />
      <Chapter num="01" kicker="Chapter" title={<>Years <span style={{ fontStyle: 'italic' }}>at the coalface</span>, not on the sidelines.</>}>
        <ChapPara>
          The founding team spent years building and running schemes operations in both specialist retail and wholesale MGA, covering lines like commercial combined, specialist commercial, PI, property, liability and motor.
        </ChapPara>
        <ChapPara>
          The team behind Outrun has been involved across the full range of what this business involves - scheme design and build, binder management (non-Lloyd&rsquo;s and Lloyd&rsquo;s coverholder), bordereaux, capacity relationships, wholesale and retail distribution - doing the work, not advising on it.
        </ChapPara>
      </Chapter>
      <Chapter num="02" kicker="Chapter" title={<>Fragmented stacks. Or platforms that <span style={{ fontStyle: 'italic' }}>owned you</span>.</>}>
        <ChapPara>
          For some of those operations, the stack was entirely fragmented - separate web front ends, rating in workbook calculators, risk data in Word documents, bordereaux in Excel, accounting in a separate system. For others, there was a platform - but not one that gave them real ownership of their products. The software house controlled the products: what they could do, what they cost to change, and how fast.
        </ChapPara>
        <ChapPara>
          And across many of them, the same challenges: data spread across systems, bordereaux that weren&rsquo;t as reliable as they should have been.
        </ChapPara>
      </Chapter>
      <ChapInflection />
      <Chapter num="03" kicker="Chapter" title={<>The view most software teams <span style={{ fontStyle: 'italic' }}>don&rsquo;t have</span>.</>}>
        <ChapPara>
          Our background gives us a view most software teams don&rsquo;t have. We know when a question set isn&rsquo;t capturing the data needed to rate correctly against the underwriting guide. We know what a capacity provider needs in a bordereaux and why the format matters. We know the difference between a referral workflow that works in theory and one that works under pressure - the kind of detail that only comes from having done the job.
        </ChapPara>
        <p style={{ fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 'clamp(26px, 7vw, 38px)', lineHeight: 1.2, fontStyle: 'italic', margin: '24px 0 0', letterSpacing: '-0.02em', color: 'currentColor' }}>
          So we built the platform <span style={{ fontWeight: 700, color: '#EE4B46' }}>we wished we&rsquo;d had</span>.
        </p>
      </Chapter>
      <Chapter num="04" kicker="Chapter" title={<>Built on the engine the <span style={{ fontStyle: 'italic' }}>industry owns</span>.</>}>
        <ChapPara>
          For rating and rules, we chose Polaris ProductWriter - the engine the UK insurance industry owns and trusts. Not because it was the easiest route, but because we&rsquo;d seen what building on a proprietary engine means in practice: costs and timescales owned by the software house, products that can&rsquo;t move if the relationship does. ProductWriter is open and industry-standard. Multiple parties can work with your products. The expertise sits across the market, not behind one vendor.
        </ChapPara>
        <ChapPara>
          The same thinking runs through the rest of the platform. Build choices are yours. Hosting choices are yours. The products you build aren&rsquo;t locked inside our system - they&rsquo;re genuinely owned by you. We built it that way deliberately, because we knew what it felt like to be locked in.
        </ChapPara>
      </Chapter>
      <ChapCta />
    </ChapChrome>
  );
}

Object.assign(window, { AboutSiteChapters });