// EDITORIAL - HOME PAGE V2 (live homepage).
// Brand chrome (nav, footer, tokens, primitives) is provided by `chrome.jsx`.
// The Target-mark visual system is provided by `target-mark.jsx` (Phase 2).
// This file contains only home-page-specific sections + the EditorialSite root.
//
// TARGET SYSTEM (the centre dot is your product; rings are the layers around
// it). State tells the story down the page:
//   Hero    → whole       (ownership intact, bottom-right)
//   Why Now → fragmented  (you don't own the centre yet, bottom-right)
//   For Who → stamp        (a small mark in each segment card)
//   Team    → clean        (a calm beat)
//   CTA     → resolved      (the payoff: solid centre)
//
// Archived from earlier iterations (not present in this file; revive from git
// history if needed): EdMarquee · EdProducts · EdWeeksNotMonths · EdHowItWorks
// · EdQuote · EdPillars.

const { EdCtx, EdTag, EdBtn, EdSectionHead, EdChrome, TargetMark } = window;
const useIsMobile = window.useIsMobile;

// Ambient Target-mark layer: a relative <section> with the mark behind the
// content (zIndex 0, pointer-safe) and the content above it.
function EdMarked({ children, mark, style }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', ...style }}>
      {mark && <div style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>{mark}</div>}
      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
    </section>
  );
}

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

function EdHero() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  const mark = !isMobile && (
    <TargetMark size={780} place={{ right: -150, bottom: -160 }} crosshair redRing={0.28} dotR={11} inkScale={0.82} />
  );
  return (
    <EdMarked style={{ boxSizing: 'border-box', minHeight: isMobile ? 821 : 898, padding: isMobile ? '40px 24px 56px' : '72px 144px 120px', background: ED.bg }} mark={mark}>
      <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 <span style={{ color: ED.red }}>end-to-end platform</span>{isMobile ? ' ' : <br/>}
        for MGAs and Schemes Brokers.
      </h1>

      <p style={{ ...edText.sans, fontWeight: 500, fontSize: isMobile ? 18 : 29, lineHeight: isMobile ? 1.35 : 1.25, color: ED.ink, margin: isMobile ? '20px 0 0' : '32px 0 0', letterSpacing: '-0.015em', maxWidth: 1240 }}>
        Build, manage and distribute DAs &amp; Schemes <span style={{ color: ED.red, fontWeight: 600 }}>on your terms</span>.
      </p>

      <div style={{ marginTop: isMobile ? 28 : 44, display: 'flex', flexDirection: 'column', gap: isMobile ? 22 : 32, maxWidth: 1320 }}>
        <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.45, color: ED.ink, margin: 0 }}>
          Today, your software house dictates the cost and speed of building your products and schemes. Outrun gives{isMobile ? ' ' : <br/>}you real control of your products, processes and data - so you <span style={{ color: ED.red, fontWeight: 600 }}>grow at the pace set by you</span>, not your system.
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: isMobile ? 10 : 14, maxWidth: 640 }}>
          {[
            <>Manage everything seamlessly on <strong style={{ fontWeight: 600 }}>one platform</strong> - quoting, binding, document generation, policy management, distribution and bordereaux.</>,
            <><strong style={{ fontWeight: 600 }}>Regain control</strong> of product build cost and speed to market.</>,
            <><strong style={{ fontWeight: 600 }}>Reduce quoting time</strong> by 70% and <strong style={{ fontWeight: 600 }}>increase quotes bound</strong> by 25%.</>,
          ].map((line, i) => (
            <li key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12, ...edText.sans, fontSize: isMobile ? 17 : 18, lineHeight: 1.45, color: ED.ink }}>
              <span aria-hidden="true" style={{ color: ED.teal, fontWeight: 700, lineHeight: 1, position: 'relative', top: -1, flex: '0 0 auto' }}>+</span>
              <span>{line}</span>
            </li>
          ))}
        </ul>
        <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', flexWrap: 'wrap', gap: isMobile ? 10 : 12, marginTop: 8, alignItems: isMobile ? 'stretch' : 'flex-start' }}>
          <EdBtn kind="ghost" href="/mga-platform">MGA Solution</EdBtn>
          <EdBtn kind="ghost" href="/schemes-platform">Broker Schemes Solution</EdBtn>
        </div>
      </div>
    </EdMarked>
  );
}

// ─── why this matters now (worldview) ─────────────────────────

function EdWhyNow() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  const mark = isMobile ? (
    <TargetMark size={300} place={{ right: -170, bottom: -188 }} state="fragmented" rings={[0.94, 0.72, 0.5]} dotR={9} inkScale={0.55} baseOpacity={0.92} />
  ) : (
    <TargetMark size={560} place={{ right: -180, bottom: -120 }} state="fragmented" rings={[0.94, 0.72, 0.5]} dotR={9} baseOpacity={0.92} />
  );
  return (
    <EdMarked style={{ padding: isMobile ? '56px 24px' : '96px 144px 96px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }} mark={mark}>
      <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: 872 }}>
          Specialist insurance is growing fast but enabling infrastructure <span style={{ ...edText.displayBold, color: ED.green, fontStyle: 'normal' }}>hasn&rsquo;t kept up</span>.
        </h2>
      </div>

      <div style={{ marginTop: isMobile ? 36 : 64, display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'minmax(0, 1fr) 30%', gap: isMobile ? 32 : 72, alignItems: 'start' }}>
        <div style={{ maxWidth: 735, display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 28 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            Delegated Authority business is becoming more strategic across the value chain. More insurers are setting up schemes teams. Alternative capacity providers are directly backing MGAs. Brokers are increasingly looking to schemes for growth. MGAs are writing a growing share of UK premium.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            But the infrastructure underneath was built for a different market in a different decade, trapping you with the software house that built it. Every new product, every change, costs what your software house decides - and lands when they decide.
          </p>
        </div>
        {window.SignupBlock ? <div style={{ marginTop: isMobile ? 0 : -276 }}><window.SignupBlock layout="boxed" tone="warm" bare /></div> : null}
      </div>
    </EdMarked>
  );
}

// ─── for who (MGAs / Brokers segment teasers) ──────────────────

function EdForWho() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  const groups = [
    {
      tag: 'For MGAs',
      headline: <>Start with one scheme. Scale to run your whole MGA on Outrun.</>,
      copy: 'Start with a single scheme or run your whole MGA on Outrun - product build, admin, and distribution on one platform, using the industry-owned rating engine for rating and rules. The products you build are yours. And every product change - new build or existing - happens at a cost and speed that fits your business, not your software house\u2019s.',
      cta: <>See how <span style={{ color: ED.teal }}>MGAs</span> use Outrun</>,
      href: '/mga-platform',
      mgaa: true,
    },
    {
      tag: 'For Schemes Brokers',
      headline: <>The dedicated platform for the schemes side of your business.</>,
      copy: 'The dedicated platform for the schemes side of your business - built for the volume, complexity, and reporting that schemes work demands. Launch new schemes faster than your main PAS would let you. Keep existing ones running cleanly, with the bordereaux and insurer reporting your binders require. And move at your speed - without your software house in the way of every change you want to make.',
      cta: <>See how <span style={{ color: ED.teal }}>brokers</span> use Outrun</>,
      href: '/schemes-platform',
    },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <EdSectionHead
        title={<><span style={{ ...edText.displayBold, color: ED.yellow, fontStyle: 'normal' }}>Built for the realities</span> of running<br />DAs and schemes.</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 12 : 16 }}>
        {groups.map((g, i) => (
          <div key={g.tag} style={{
            position: 'relative', overflow: 'hidden',
            padding: isMobile ? '28px 22px 30px' : '48px 44px 44px',
            border: `1.5px solid ${ED.ink}`,
            background: ED.bg, display: 'flex', flexDirection: 'column',
          }}>
            <TargetMark size={isMobile ? 38 : 56} place={isMobile ? { bottom: 16, right: 16 } : { top: 24, right: 26 }} rings={[0.92, 0.58]} redRing={0.32} redWidth={1.1} dotR={4} inkScale={0.85} baseOpacity={0.95} />
            <EdTag color={ED.accent}>{g.tag}</EdTag>
            <h3 style={{ ...edText.display, fontSize: isMobile ? 'clamp(23px, 6vw, 31px)' : 44, color: ED.ink, lineHeight: 1.12, letterSpacing: '-0.025em', margin: isMobile ? '18px 0 18px' : '28px 0 28px', maxWidth: 540 }}>{g.headline}</h3>
            <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 17, lineHeight: 1.6, color: ED.ink, margin: isMobile ? '0 0 24px' : '0 0 36px', flex: 1 }}>{g.copy}</p>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20 }}>
              <a href={g.href} style={{ ...edText.med, fontSize: isMobile ? 14 : 15, color: ED.ink, textDecoration: 'none', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3 }}>
                {g.cta} <span style={{ color: ED.accent }}>→</span>
              </a>
              {g.mgaa && <img src="images/mgaa-member.png" alt="MGAA Member" style={{ display: 'block', width: isMobile ? 66 : 84, height: isMobile ? 66 : 84, flexShrink: 0 }} />}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── team (coalface) ───────────────────────────────────────────

function EdTeam() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}` }}>
      <EdSectionHead
        title={<><span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>Insurance people</span>. Not software vendors.</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 80, maxWidth: 1320, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: isMobile ? 18 : 24 }}>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            The team behind Outrun come from inside the industry - schemes broking, binder management, MGA and broking operations.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            We&rsquo;re insurance people. We didn&rsquo;t arrive in the industry selling software. We built Outrun because it&rsquo;s the platform we wished we&rsquo;d had when we were running schemes and DAs ourselves.
          </p>
          <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
            That background shapes what we build. All too often, we hear the same story from new customers: their previous software house built what was on the spec - and when it wasn&rsquo;t right, blamed the spec. When you tell us what you need, we understand it - the product, the process, and what you&rsquo;re actually trying to achieve.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 10 : 12, alignContent: 'start', width: isMobile ? '100%' : 384, justifySelf: isMobile ? 'stretch' : 'center' }}>
          {[
            { src: 'images/team/steve-hirst.jpg' },
            { src: 'images/team/james-hill.jpg', imgStyle: { transform: 'scale(1.32)', transformOrigin: 'center 62%' } },
            { src: 'images/team/ian-symondson-sq.jpg' },
            { src: 'images/team/dan-simons.jpg' },
          ].map(({ src, imgStyle }) => (
            <div key={src} style={{ aspectRatio: '1 / 1', overflow: 'hidden', background: ED.bg, border: `1px solid ${ED.rule}` }}>
              <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block', filter: 'grayscale(1)', ...imgStyle }} />
            </div>
          ))}
        </div>
      </div>
      <div style={{ marginTop: isMobile ? 40 : 64, display: 'flex', justifyContent: isMobile ? 'flex-start' : 'flex-end', alignItems: 'center', gap: 32 }}>
        <a href="/team" style={{ ...edText.med, fontSize: isMobile ? 14 : 15, color: ED.ink, textDecoration: 'none', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3 }}>
          Meet the team <span style={{ color: ED.accent }}>→</span>
        </a>
      </div>
    </section>
  );
}

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

function EdCta() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  const mark = isMobile ? (
    <TargetMark size={320} place={{ right: -104, bottom: -120 }} state="resolved" crosshair rings={[0.94, 0.72, 0.5]} redRing={0.28} dotR={10} inkScale={0.75} />
  ) : (
    <TargetMark size={560} place={{ right: -90, bottom: -110 }} state="resolved" crosshair rings={[0.94, 0.76, 0.58, 0.4]} redRing={0.26} dotR={12} />
  );
  return (
    <EdMarked style={{ padding: isMobile ? '56px 24px' : '120px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }} mark={mark}>
      <h2 style={{ ...edText.display, fontSize: isMobile ? 'clamp(34px, 9.5vw, 38px)' : 88, lineHeight: isMobile ? 1.05 : 1.0, color: ED.ink, margin: 0, letterSpacing: '-0.035em', maxWidth: 1200 }}>
        See what <span style={{ ...edText.displayBold, color: ED.accent, fontStyle: 'normal' }}>real control</span> looks like.
      </h2>
      <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.55, color: ED.ink, margin: isMobile ? '32px 0 0' : '40px 0 0', maxWidth: 720 }}>
        Book a 30-minute demo of Outrun. We&rsquo;ll walk you through how the platform works and what taking back control of cost and speed would mean for the way you build, administer and distribute your schemes and DA business.
      </p>
      <div style={{ marginTop: isMobile ? 28 : 36, display: 'flex', justifyContent: 'flex-start' }}>
        <EdBtn kind="primary" href="/demo">Book a demo</EdBtn>
      </div>
    </EdMarked>
  );
}

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

function EditorialSiteV2({ accent, fontMode = 'serif' }) {
  return (
    <EdChrome accent={accent} fontMode={fontMode} current="/">
      <EdHero />
      <EdWhyNow />
      <EdForWho />
      <EdTeam />
      <EdCta />
    </EdChrome>
  );
}

Object.assign(window, { EditorialSiteV2 });