// ARTICLE - /news/wheres-my-bordereau-data
// "Where's my bordereau data?" - James Hill, 24 Sep 2026
// Reuses the reading-column primitives exported by insights-article.jsx - load that file first.

const { EdCtx: BdxCtx, EdTag: BdxTag, EdChrome: BdxChrome, useIsMobile: bdxUseIsMobile,
        ArtCol: BdxCol, ArtP: BdxP } = window;

const BDX_META = { kicker: 'Perspective', date: '24 September 2026', readTime: '3 min read' };
const BDX_AUTHOR = { name: 'James Hill', role: 'Commercial Director, Outrun', photo: 'images/team/james-hill.jpg', email: 'james.hill@outrun.insure' };

function BdxHeader() {
  const ED = React.useContext(BdxCtx);
  const edText = ED.text;
  const isMobile = bdxUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 40px' : '64px 90px 56px', background: ED.bg }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <a href="/news" style={{ ...edText.med, fontSize: 13, color: ED.ink, textDecoration: 'none', borderBottom: `1px solid ${ED.rule}`, paddingBottom: 3 }}>&larr; Back to News &amp; Resources</a>
        <div style={{ marginTop: isMobile ? 36 : 56, display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <span style={{ ...edText.tag, fontSize: 12, color: ED.red }}>{BDX_META.kicker}</span>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: ED.rule }}></span>
          <span style={{ ...edText.tag, fontSize: 12, color: ED.ink2 }}>{BDX_META.date}</span>
          <span style={{ width: 4, height: 4, borderRadius: 999, background: ED.rule }}></span>
          <span style={{ ...edText.tag, fontSize: 12, color: ED.ink2 }}>{BDX_META.readTime}</span>
        </div>
        <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(38px, 11vw, 52px)' : 88, lineHeight: isMobile ? 1.05 : 1.02, color: ED.ink, margin: '20px 0 0', letterSpacing: '-0.035em', maxWidth: 1140 }}>
          Where&rsquo;s my bordereau data?
        </h1>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: `1px solid ${ED.rule}`, display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 56, height: 56, borderRadius: '50%', overflow: 'hidden', border: `1px solid ${ED.rule}`, flex: '0 0 auto' }}>
            <img src={edAsset(BDX_AUTHOR.photo)} alt={`${BDX_AUTHOR.name}, ${BDX_AUTHOR.role.replace(', Outrun', '')} at Outrun`} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
          <div>
            <div style={{ ...edText.med, fontSize: 15, color: ED.ink }}>{BDX_AUTHOR.name}</div>
            <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2, marginTop: 4 }}>{BDX_AUTHOR.role}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// "Spot the Outrun team" expo illustration (supplied by Outrun). Shown at the
// full header width and links to the full-size file - it's a busy scene to search. - held to the reading-column width rather than full bleed.
function BdxLeadImage() {
  const ED = React.useContext(BdxCtx);
  const isMobile = bdxUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '0 24px 40px' : '0 90px 64px', background: ED.bg }}>
      <a href={edAsset('images/news/wheres-my-bordereau-data.jpg')} target="_blank" rel="noopener" title="Open full size" style={{ display: 'block', maxWidth: 1240, margin: '0 auto', border: `1px solid ${ED.rule}`, overflow: 'hidden', cursor: 'zoom-in' }}>
        <img src={edAsset('images/news/wheres-my-bordereau-data.jpg')} alt="Illustration of a crowded insurance expo hall with stands for the MGA village, Claims corner, Bordereaux clinic, Schemes hub and Outrun, whose stand says Back in 5 minutes. Somewhere in the crowd is the Outrun team, alongside a teetering stack of BDX paperwork and a flurry of loose pages." style={{ display: 'block', width: '100%', height: 'auto' }} />
      </a>
    </section>
  );
}

function BdxBody() {
  const ED = React.useContext(BdxCtx);
  const edText = ED.text;
  const isMobile = bdxUseIsMobile();
  const link = { color: ED.ink, textDecoration: 'none', borderBottom: `1px solid ${ED.red}` };
  return (
    <section style={{ padding: isMobile ? '8px 0 80px' : '16px 0 80px', background: ED.bg }}>
      <BdxCol>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <BdxP lead>50 new business cases on your policy admin system, or on your policies bound list &ndash; but only 48 on the bordereau. Now someone has to figure out which two didn&rsquo;t make it&hellip; and fix it before the submission deadline.</BdxP>
          <BdxP>It isn&rsquo;t necessarily a process problem; it&rsquo;s a stale data problem: a snapshot taken at a point in time from a workbook, or collated from a number of systems, meaning what&rsquo;s reflected is not the reality of the policy in its current state. Each MTA, cancellation, or amended renewal is another chance for your bordereau to drift further from the truth.</BdxP>
          <BdxP>There&rsquo;s a hidden cost too: the hours your operations team &ndash; and sometimes underwriters &ndash; spend reconciling data, instead of quoting and writing new business.</BdxP>
          <BdxP>There&rsquo;s also the confidence your capacity has in you &ndash; in a recent survey by Intelligent Insurer, 69% of respondents agreed that portfolio transparency is one of the primary factors in securing and retaining capacity. Put bluntly, when a carrier has hundreds of MGAs to choose from, the ability to see and trust your data = confidence in the quality of your operation.</BdxP>
          <BdxP>Ultimately, it&rsquo;s a symptom of a bigger problem: growth exposing operational fragility, which can almost feel inevitable. I wrote about that in <a href="/news/competitive-advantage" style={link}>The competitive advantage no MGA can afford to ignore</a>.</BdxP>
          <BdxP>While bordereaux aren&rsquo;t going anywhere, the question is whether yours is a byproduct of live, unified data&hellip; or a manual reconstruction every month.</BdxP>
        </div>

        <div style={{ margin: isMobile ? '44px 0' : '64px 0', padding: isMobile ? '28px 0' : '32px 0', borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }}>
          <span style={{ ...edText.display, fontStyle: 'italic', fontSize: isMobile ? 25 : 36, lineHeight: 1.25, color: ED.ink, letterSpacing: '-0.025em' }}>
            You won&rsquo;t fix it with more checklists, sense-checks, or pairs of eyes at month-end. You will fix it by pulling the right data from a <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'italic' }}>live, unified</span> data source.
          </span>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <BdxP>If you&rsquo;re playing Where&rsquo;s Wally with missing data before each submission deadline, it might be worth looking again at how your bordereau is built every month. If you&rsquo;re curious what &ldquo;live and unified&rdquo; data looks like in practice, I&rsquo;d be happy to show you.</BdxP>
          <BdxP>Or grab a coffee with me, Steve Hirst or Ian Symondson &ndash; we&rsquo;re exhibiting at the Intelligent Insurer&rsquo;s MGA Outlook 2026 event (19th Nov).</BdxP>
        </div>
      </BdxCol>
    </section>
  );
}

function BdxFooter() {
  const ED = React.useContext(BdxCtx);
  const edText = ED.text;
  const isMobile = bdxUseIsMobile();
  return (
    <section style={{ padding: '40px 0 96px', background: ED.bg }}>
      <BdxCol>
        <div style={{ padding: isMobile ? '28px 24px' : '36px 36px 32px', background: ED.bgWarm, border: `1px solid ${ED.rule}`, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '88px 1fr', gap: 24, alignItems: 'start' }}>
          <div style={{ width: 88, height: 88, borderRadius: '50%', overflow: 'hidden', background: ED.bg, border: `1px solid ${ED.rule}` }}>
            <img src={edAsset(BDX_AUTHOR.photo)} alt={`${BDX_AUTHOR.name}, ${BDX_AUTHOR.role.replace(', Outrun', '')} at Outrun`} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
          </div>
          <div>
            <div style={{ ...edText.tag, fontSize: 11, color: ED.ink2 }}>Written by</div>
            <div style={{ ...edText.display, fontSize: 28, color: ED.ink, margin: '6px 0 0', letterSpacing: '-0.02em' }}>{BDX_AUTHOR.name}</div>
            <div style={{ ...edText.sans, fontSize: 14, color: ED.ink2, marginTop: 2 }}>{BDX_AUTHOR.role}</div>
            <p style={{ ...edText.sans, fontSize: 15, lineHeight: 1.6, color: ED.ink, margin: '14px 0 0', maxWidth: 540 }}>
              A decade in schemes broking across product development, binder management and distribution, followed by three years in leadership roles at Jensten. Co-founded Outrun and joined as Commercial Director in 2024.
            </p>
            <a href={`mailto:${BDX_AUTHOR.email}`} style={{ ...edText.med, fontSize: 13, color: ED.ink, textDecoration: 'none', borderBottom: `1px solid ${ED.rule}`, paddingBottom: 3, display: 'inline-block', marginTop: 14 }}>{BDX_AUTHOR.email}</a>
          </div>
        </div>
      </BdxCol>
    </section>
  );
}

function BdxKeepReading() {
  const ED = React.useContext(BdxCtx);
  const edText = ED.text;
  const isMobile = bdxUseIsMobile();
  const items = [
    { href: '/news/build-the-right-product', title: 'Build the right product – and build it right.', by: 'Steve Hirst · 8 October 2026' },
    { href: '/news/competitive-advantage', title: 'The competitive advantage no MGA can afford to ignore.', by: 'James Hill · 22 July 2026' },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 90px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <div style={{ maxWidth: 1320 }}>
        <BdxTag color={ED.accent}>Keep reading</BdxTag>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, minmax(0, 560px))', gap: isMobile ? 40 : 56, marginTop: isMobile ? 28 : 40 }}>
          {items.map(it => (
            <a key={it.href} href={it.href} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
              <div style={{ ...edText.tag, fontSize: 11, color: ED.accent }}>Perspective</div>
              <h3 style={{ ...edText.display, fontSize: 26, lineHeight: 1.15, color: ED.ink, margin: '14px 0 24px', letterSpacing: '-0.02em' }}>{it.title}</h3>
              <div style={{ ...edText.sans, fontSize: 13, color: ED.ink2, paddingTop: 16, borderTop: `1px solid ${ED.rule}` }}>{it.by}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function BordereauDataSite({ accent, fontMode = 'serif' }) {
  return (
    <BdxChrome accent={accent} fontMode={fontMode} current="/news/wheres-my-bordereau-data">
      <BdxHeader />
      <BdxLeadImage />
      <BdxBody />
      <BdxFooter />
      <BdxKeepReading />
    </BdxChrome>
  );
}

Object.assign(window, { BordereauDataSite });