// ABOUT - ESSAY LAYOUT (long-form, narrow centred reading column)
// Direction: read it like an essay in a magazine. Single ~720px reading
// column, hairline rules between sections, small marginal kickers, pulled-out
// display moments for the inflection point and the closing line.

const { EdCtx: EssayCtx, EdTag: EssayTag, EdBtn: EssayBtn, EdChrome: EssayChrome,
        useIsMobile: essayUseIsMobile } = window;

function EssayKicker({ children, color }) {
  const ED = React.useContext(EssayCtx);
  const edText = ED.text;
  return (
    <div style={{ ...edText.tag, fontSize: 11, color: color || ED.ink2 }}>{children}</div>
  );
}

function EssayPara({ children, dropCap }) {
  const ED = React.useContext(EssayCtx);
  const edText = ED.text;
  const isMobile = essayUseIsMobile();
  return (
    <p style={{
      ...edText.sans,
      fontSize: isMobile ? 18 : 20,
      lineHeight: isMobile ? 1.6 : 1.7,
      color: ED.ink,
      margin: 0,
      ...(dropCap ? {
        '--dc-color': ED.red,
      } : {}),
    }}>
      {children}
    </p>
  );
}

function EssayRule() {
  const ED = React.useContext(EssayCtx);
  return (
    <div style={{ display: 'flex', justifyContent: 'center', margin: '12px 0' }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: ED.red, display: 'inline-block' }} />
    </div>
  );
}

// ─── Hero ──────────────────────────────────────────────────────

function EssayHero() {
  const ED = React.useContext(EssayCtx);
  const edText = ED.text;
  const isMobile = essayUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '48px 24px 56px' : '120px 144px 100px', background: ED.bg }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: isMobile ? 'left' : 'center' }}>
        <EssayKicker color={ED.ink2}>An Essay · On building Outrun</EssayKicker>
        <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(40px, 11vw, 46px)' : 84, lineHeight: isMobile ? 1.05 : 1.05, color: ED.ink, margin: isMobile ? '20px 0 0' : '32px 0 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 : 21, lineHeight: 1.55, color: ED.ink2, margin: isMobile ? '20px 0 0' : '36px auto 0', maxWidth: 720 }}>
          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.
        </p>
      </div>
    </section>
  );
}

// ─── Narrative body (one wide centred column) ──────────────────

function EssayBody() {
  const ED = React.useContext(EssayCtx);
  const edText = ED.text;
  const isMobile = essayUseIsMobile();
  const colMax = 720;

  return (
    <section style={{ padding: isMobile ? '24px 24px 64px' : '40px 144px 120px', background: ED.bg }}>
      <div style={{ maxWidth: colMax, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: isMobile ? 40 : 56 }}>

        {/* Founding story */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <EssayKicker>§ 01 · Origin</EssayKicker>
          <EssayPara>
            <span style={{
              float: 'left',
              ...edText.display,
              fontSize: isMobile ? 64 : 88,
              lineHeight: 0.85,
              color: ED.red,
              padding: isMobile ? '4px 10px 0 0' : '6px 12px 0 0',
              fontStyle: 'normal',
              fontWeight: 700,
            }}>T</span>
            he 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.
          </EssayPara>
          <EssayPara>
            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.
          </EssayPara>
        </div>

        <EssayRule />

        {/* Problem */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <EssayKicker>§ 02 · What we saw</EssayKicker>
          <EssayPara>
            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.
          </EssayPara>
          <EssayPara>
            And across many of them, the same challenges: data spread across systems, bordereaux that weren&rsquo;t as reliable as they should have been.
          </EssayPara>
        </div>
      </div>

      {/* Inflection - full bleed pulled-out quote */}
      <div style={{ maxWidth: 1240, margin: isMobile ? '64px auto' : '120px auto', textAlign: 'center', padding: '0 4px' }}>
        <span aria-hidden="true" style={{ ...edText.displayBold, fontStyle: 'normal', color: ED.red, fontSize: isMobile ? 80 : 140, lineHeight: 0.6, display: 'block', marginBottom: 8 }}>&ldquo;</span>
        <blockquote style={{
          ...edText.display,
          fontSize: isMobile ? 'clamp(28px, 8.5vw, 36px)' : 64,
          lineHeight: isMobile ? 1.18 : 1.12,
          color: ED.ink,
          margin: 0,
          letterSpacing: '-0.03em',
          fontStyle: 'italic',
          fontWeight: 400,
        }}>
          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>

      <div style={{ maxWidth: colMax, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: isMobile ? 40 : 56 }}>

        {/* Philosophy */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <EssayKicker>§ 03 · What we know</EssayKicker>
          <EssayPara>
            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.
          </EssayPara>
        </div>

        {/* The resolution beat */}
        <div style={{ paddingTop: isMobile ? 24 : 32, borderTop: `1px solid ${ED.rule}`, paddingBottom: isMobile ? 16 : 24 }}>
          <p style={{
            ...edText.display,
            fontSize: isMobile ? 'clamp(26px, 7.5vw, 32px)' : 44,
            lineHeight: 1.15,
            color: ED.ink,
            margin: 0,
            letterSpacing: '-0.03em',
            fontStyle: 'italic',
            textAlign: 'center',
          }}>
            So we built the platform <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>we wished we&rsquo;d had</span>.
          </p>
        </div>

        <EssayRule />

        {/* Technology */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <EssayKicker>§ 04 · Substance</EssayKicker>
          <EssayPara>
            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.
          </EssayPara>
          <EssayPara>
            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.
          </EssayPara>
        </div>

      </div>
    </section>
  );
}

// ─── CTA ───────────────────────────────────────────────────────

function EssayCta() {
  const ED = React.useContext(EssayCtx);
  const edText = ED.text;
  const isMobile = essayUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px 72px' : '100px 144px 140px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}`, textAlign: isMobile ? 'left' : 'center' }}>
      <h2 style={{
        ...edText.display,
        fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 48,
        lineHeight: isMobile ? 1.05 : 1.15,
        color: ED.ink,
        margin: 0,
        letterSpacing: '-0.03em',
        maxWidth: 980,
        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 ? 24 : 40, display: 'flex', justifyContent: isMobile ? 'flex-start' : 'center', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 10 : 12, flexWrap: 'wrap', alignItems: isMobile ? 'stretch' : 'center' }}>
        <EssayBtn kind="ghost" href="/da-platform">DA Platform for MGAs</EssayBtn>
        <EssayBtn kind="ghost" href="/schemes-platform">Schemes Platform for Brokers</EssayBtn>
      </div>
    </section>
  );
}

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

function AboutSiteEssay({ accent, fontMode = 'serif' }) {
  return (
    <EssayChrome accent={accent} fontMode={fontMode} current="/about">
      <EssayHero />
      <EssayBody />
      <EssayCta />
    </EssayChrome>
  );
}

Object.assign(window, { AboutSiteEssay });
