// ABOUT US PAGE - /company/about · "Insurance people, not software vendors"
// Editorial direction. Narrative-led page that walks through:
//   1. Hero  - opening manifesto statement + sub-para
//   2. Founding story - who we are, where we come from
//   3. The problem - what we saw in the field (warm bg)
//   4. Inflection point - single typographic line, the pivot
//   5. Philosophy - the insight + "we built the platform we wished we'd had"
//   6. Technology & ownership - why ProductWriter, why no lock-in (warm bg)
//   7. CTA - see the platforms

const { EdCtx: AboutCtx, EdTag: AboutTag, EdBtn: AboutBtn,
        EdSectionHead: AboutSectionHead, EdChrome: AboutChrome,
        useIsMobile: aboutUseIsMobile } = window;

// ─── shared narrative paragraph ────────────────────────────────

function NarrativePara({ children, max = 980, color }) {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: isMobile ? 1.6 : 1.65, color: color || ED.ink, margin: 0, maxWidth: max }}>
      {children}
    </p>
  );
}

// ─── 1. Hero ───────────────────────────────────────────────────

function AboutHero() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 56px' : '72px 90px 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' }}>
        We built Outrun because we knew <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>what was missing</span>.
      </h1>

      <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 22, lineHeight: 1.5, color: ED.ink, margin: isMobile ? '24px 0 0' : '44px 0 0', maxWidth: 900 }}>
        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>
    </section>
  );
}

// ─── 2. Founding story ─────────────────────────────────────────

function AboutFounding() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '48px 24px' : '96px 90px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 24 : 80, alignItems: 'start', maxWidth: 1320 }}>
        <div>
          <AboutTag color={ED.accent}>Origin</AboutTag>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 40, lineHeight: 1.1, color: ED.ink, margin: isMobile ? '12px 0 0' : '20px 0 0', letterSpacing: '-0.025em' }}>
            A background in schemes &amp; <span style={{ ...edText.displayBold, fontStyle: 'normal' }}>DA products</span>.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <NarrativePara>
            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.
          </NarrativePara>
          <NarrativePara>
            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.
          </NarrativePara>
        </div>
      </div>
    </section>
  );
}

// ─── 3. The problem ────────────────────────────────────────────

function AboutProblem() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '48px 24px' : '96px 90px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 24 : 80, alignItems: 'start', maxWidth: 1320 }}>
        <div>
          <AboutTag color={ED.accent}>What we saw</AboutTag>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 40, lineHeight: 1.1, color: ED.ink, margin: isMobile ? '12px 0 0' : '20px 0 0', letterSpacing: '-0.025em' }}>
            Fragmented stacks - or platforms that took away control.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <NarrativePara>
            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.
          </NarrativePara>
          <NarrativePara>
            And across many of them, the same challenges: data spread across systems, bordereaux that weren&rsquo;t as reliable as they should have been.
          </NarrativePara>
        </div>
      </div>
    </section>
  );
}

// ─── 4. Inflection point ───────────────────────────────────────

function AboutInflection() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  const quoteMark = {
    ...edText.display,
    fontStyle: 'italic',
    color: ED.red,
    fontSize: isMobile ? 56 : 88,
    lineHeight: 0,
    letterSpacing: '-0.04em',
    display: 'inline-block',
    verticalAlign: 'baseline',
  };
  return (
    <section style={{ padding: isMobile ? '64px 24px' : '120px 90px', background: ED.bg }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 28 : 80, alignItems: isMobile ? 'center' : 'start', maxWidth: 1320, justifyItems: isMobile ? 'center' : 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingLeft: isMobile ? 0 : 56, alignItems: 'center', width: 'fit-content' }}>
          <div style={{
            width: isMobile ? 104 : 132, height: isMobile ? 104 : 132, borderRadius: '50%',
            background: ED.bgWarm,
            border: `1px solid ${ED.rule}`,
            overflow: 'hidden',
          }}>
            <img src="images/team/james-hill.jpg" alt="James Hill" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
          <div style={{ textAlign: 'center' }}>
            <div style={{ ...edText.med, fontSize: 16, color: ED.ink, letterSpacing: '-0.005em' }}>James Hill</div>
            <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2, marginTop: 4 }}>Commercial Director</div>
          </div>
        </div>
        <blockquote style={{
          ...edText.display,
          fontSize: isMobile ? 'clamp(28px, 8vw, 34px)' : 56,
          lineHeight: isMobile ? 1.22 : 1.18,
          color: ED.ink,
          margin: 0,
          letterSpacing: '-0.03em',
          fontStyle: 'italic',
          fontWeight: 400,
          maxWidth: 980,
        }}>
          <span aria-hidden="true" style={{ ...quoteMark, marginRight: 4, position: 'relative', top: '0.08em' }}>&ldquo;</span>
          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.<span aria-hidden="true" style={{ ...quoteMark, marginLeft: 4, position: 'relative', top: '0.08em' }}>&rdquo;</span>
        </blockquote>
      </div>
    </section>
  );
}

// ─── 5. Philosophy / Insight ───────────────────────────────────

function AboutPhilosophy() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '48px 24px 64px' : '96px 90px 120px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 24 : 80, alignItems: 'start', maxWidth: 1320 }}>
        <div>
          <AboutTag color={ED.accent}>What we know</AboutTag>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 40, lineHeight: 1.1, color: ED.ink, margin: isMobile ? '12px 0 0' : '20px 0 0', letterSpacing: '-0.025em' }}>
            The view most software teams <span style={{ ...edText.displayBold, fontStyle: 'normal' }}>don&rsquo;t have</span>.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <NarrativePara>
            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.
          </NarrativePara>
        </div>
      </div>

      <div style={{ marginTop: isMobile ? 52 : 96, paddingTop: isMobile ? 40 : 64, borderTop: `1px solid ${ED.rule}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 28 : 80, alignItems: isMobile ? 'center' : 'start', maxWidth: 1320, justifyItems: isMobile ? 'center' : 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingLeft: isMobile ? 0 : 56, alignItems: 'center', width: 'fit-content' }}>
            <div style={{
              width: isMobile ? 104 : 132, height: isMobile ? 104 : 132, borderRadius: '50%',
              background: ED.bgWarm,
              border: `1px solid ${ED.rule}`,
              overflow: 'hidden',
            }}>
              <img src="images/team/steve-hirst.jpg" alt="Steve Hirst" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
            </div>
            <div style={{ textAlign: 'center' }}>
              <div style={{ ...edText.med, fontSize: 16, color: ED.ink, letterSpacing: '-0.005em' }}>Steve Hirst</div>
              <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2, marginTop: 4 }}>CEO</div>
            </div>
          </div>
          <blockquote style={{
            ...edText.display,
            fontSize: isMobile ? 'clamp(24px, 7vw, 30px)' : 40,
            lineHeight: isMobile ? 1.3 : 1.28,
            color: ED.ink,
            margin: 0,
            letterSpacing: '-0.025em',
            fontStyle: 'italic',
            fontWeight: 400,
            maxWidth: 920,
          }}>
            <span aria-hidden="true" style={{
              ...edText.display, fontStyle: 'italic', color: ED.red,
              fontSize: isMobile ? 42 : 64, lineHeight: 0, letterSpacing: '-0.04em',
              display: 'inline-block', verticalAlign: 'baseline',
              marginRight: 4, position: 'relative', top: '0.08em',
            }}>&ldquo;</span>
            We weren&rsquo;t building a product for a market we&rsquo;d researched. We were building <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'italic' }}>the platform we wished we&rsquo;d had</span>. We&rsquo;d spent long enough saying there had to be a better way. Eventually you just have to build it.<span aria-hidden="true" style={{
              ...edText.display, fontStyle: 'italic', color: ED.red,
              fontSize: isMobile ? 42 : 64, lineHeight: 0, letterSpacing: '-0.04em',
              display: 'inline-block', verticalAlign: 'baseline',
              marginLeft: 4, position: 'relative', top: '0.08em',
            }}>&rdquo;</span>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

// ─── 6. Technology & ownership ─────────────────────────────────

function AboutTech() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '48px 24px' : '96px 90px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr', gap: isMobile ? 24 : 80, alignItems: 'start', maxWidth: 1320 }}>
        <div>
          <AboutTag color={ED.accent}>Substance</AboutTag>
          <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(28px, 7.5vw, 32px)' : 40, lineHeight: 1.1, color: ED.ink, margin: isMobile ? '12px 0 0' : '20px 0 0', letterSpacing: '-0.025em' }}>
            Designed to give you <span style={{ ...edText.displayBold, fontStyle: 'normal' }}>control and ownership</span>.
          </h2>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <NarrativePara>
            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.
          </NarrativePara>
          <NarrativePara>
            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.
          </NarrativePara>
        </div>
      </div>
    </section>
  );
}

// ─── 7. CTA ────────────────────────────────────────────────────

function AboutCta() {
  const ED = React.useContext(AboutCtx);
  const edText = ED.text;
  const isMobile = aboutUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '64px 24px' : '120px 90px', background: ED.bg, textAlign: isMobile ? 'left' : 'center' }}>
      <h2 style={{
        ...edText.display,
        fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 56,
        lineHeight: isMobile ? 1.05 : 1.1,
        color: ED.ink,
        margin: 0,
        letterSpacing: '-0.03em',
        maxWidth: 1100,
        marginLeft: isMobile ? 0 : 'auto',
        marginRight: isMobile ? 0 : 'auto',
      }}>
        See what a platform built <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>specifically for schemes and delegated authority business</span> looks like.
      </h2>
      <div style={{ marginTop: isMobile ? 28 : 48, display: 'flex', justifyContent: isMobile ? 'flex-start' : 'center', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 10 : 12, flexWrap: 'wrap', alignItems: isMobile ? 'stretch' : 'center' }}>
        <AboutBtn kind="ghost" href="/da-platform">DA Platform for MGAs</AboutBtn>
        <AboutBtn kind="ghost" href="/schemes-platform">Schemes Platform for Brokers</AboutBtn>
      </div>
    </section>
  );
}

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

function AboutSite({ accent, fontMode = 'serif' }) {
  return (
    <AboutChrome accent={accent} fontMode={fontMode} current="/about">
      <AboutHero />
      <AboutFounding />
      <AboutProblem />
      <AboutInflection />
      <AboutPhilosophy />
      <AboutTech />
      <AboutCta />
    </AboutChrome>
  );
}

Object.assign(window, { AboutSite });
