// EDITORIAL - HOME PAGE V2 (alternative direction).
// Brand chrome (nav, footer, tokens, primitives) is provided by `chrome.jsx`.
// This file contains only home-page-specific sections + the EditorialSite root.
//
// Archived from earlier iterations (kept here for revival):
//   EdMarquee         - ecosystem logo row
//   EdProducts        - three-product grid
//   EdWeeksNotMonths  - Deep Grey AI tooling section (restore on M6+ reveal)
//   EdHowItWorks      - Build / Admin / Distribute steps
//   EdQuote           - customer quote (restore when publicly referenceable)

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

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

function EdHero() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 56px' : '72px 144px 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' }}>
        Build, host and distribute{isMobile ? ' ' : <br/>}
        DAs &amp; Schemes <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>on your terms</span>.
      </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 }}>
        Outrun is the specialist DA &amp; Schemes Platform for MGAs and Broker Schemes.
      </p>

      <div style={{ marginTop: isMobile ? 28 : 44, display: 'flex', flexDirection: 'column', gap: isMobile ? 22 : 32, maxWidth: 640 }}>
        <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 and changing your products and schemes. Outrun gives you <span style={{ color: ED.red, fontWeight: 500 }}>real ownership</span> of your products.
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: isMobile ? 10 : 14 }}>
          {[
            'Regain control of product build cost and speed to market.',
            <>Confidently develop products using the industry&rsquo;s leading rating engine - Polaris ProductWriter.</>,
            'Manage everything seamlessly on one platform - quoting, binding, document generation, policy management and reporting.',
          ].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="/da-platform">MGA Solution</EdBtn>
          <EdBtn kind="ghost" href="/schemes-platform">Broker Schemes Solution</EdBtn>
        </div>
      </div>
    </section>
  );
}

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

function EdWhyNow() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px 96px', background: ED.bgWarm, borderTop: `1px solid ${ED.rule}`, borderBottom: `1px solid ${ED.rule}` }}>
      <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: 1180 }}>
          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, maxWidth: 1100, 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. Insurers setting up schemes teams. Capacity providers backing MGAs. Brokers growing through schemes. MGAs 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.
        </p>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.6, color: ED.ink, margin: 0 }}>
          Every new product, every change, costs what your software house decides - and lands when they decide.
        </p>
      </div>
    </section>
  );
}

// ─── three pillars (Foundations / Freedom / Experience) ───────

function EdPillars() {
  const ED = React.useContext(EdCtx);
  const edText = ED.text;
  const isMobile = useIsMobile();
  const pillars = [
    {
      kicker: 'Foundations',
      claim: <>For rating and rules, we use Polaris ProductWriter - the rating engine <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>the UK insurance industry owns and trusts</span>.</>,
      body: 'We deliberately chose ProductWriter over building our own proprietary engine. ProductWriter is owned and governed by the insurance industry itself, used by the UK\u2019s biggest insurers, and trusted across the value chain. That means the rating engine powering your products carries the credibility of the UK insurance industry.',
    },
    {
      kicker: 'Freedom',
      claim: <>Build, host, and distribute on your terms. <span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>The products you build are yours</span>.</>,
      body: 'We\u2019re your default build partner - but if you\u2019d rather, you can build with a third party, or yourself. Host with us or on your own infrastructure. Distribute via our broker portal or via Polaris iMarket. We don\u2019t lock you in at any layer. And the products you build belong to you, not us. If you ever want to take them elsewhere, you can.',
    },
    {
      kicker: 'Experience',
      claim: <><span style={{ ...edText.displayBold, color: ED.teal, fontStyle: 'normal' }}>Operational insurance experience</span>, built into the platform.</>,
      body: 'The team has spent decades inside this industry - working with MGAs, schemes brokers, and the technology that runs them. That experience is built into how the product works.',
    },
  ];
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg }}>
      <EdSectionHead
        title={<>Three things shape <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>how Outrun works</span>.</>}
      />
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr 1fr', gap: 0, borderTop: `1.5px solid ${ED.ink}` }}>
        {pillars.map((p, i) => (
          <div key={p.kicker} style={{
            borderRight: !isMobile && i < pillars.length - 1 ? `1px solid ${ED.rule}` : 'none',
            borderBottom: isMobile && i < pillars.length - 1 ? `1px solid ${ED.rule}` : 'none',
            padding: isMobile ? '28px 0 32px' : '44px 36px 48px',
            background: ED.bg,
            display: 'flex',
            flexDirection: 'column',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <span style={{ ...edText.tag, color: ED.accent, fontSize: isMobile ? 14 : 18 }}>{p.kicker}</span>
            </div>
            <h3 style={{ ...edText.display, fontSize: isMobile ? 23 : 36, color: ED.ink, margin: isMobile ? '18px 0 0' : '32px 0 0', letterSpacing: '-0.025em', lineHeight: 1.15 }}>{p.claim}</h3>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── 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. 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: '/da-platform',
    },
    {
      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 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={{
            padding: isMobile ? '28px 22px 30px' : '48px 44px 44px',
            border: `1.5px solid ${ED.ink}`,
            background: ED.bg, display: 'flex', flexDirection: 'column',
          }}>
            <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>
            <a href={g.href} style={{ ...edText.med, fontSize: isMobile ? 14 : 15, color: ED.ink, textDecoration: 'none', alignSelf: 'flex-start', borderBottom: `1.5px solid ${ED.ink}`, paddingBottom: 3 }}>
              {g.cta} <span style={{ color: ED.accent }}>→</span>
            </a>
          </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 ? 22 : 80, maxWidth: 1320 }}>
        <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>
        </div>
        <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={{ 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();
  return (
    <section style={{ padding: isMobile ? '56px 24px' : '96px 144px', background: ED.bg, borderTop: `1px solid ${ED.rule}` }}>
      <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 ownership</span> looks like.
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 28 : 80, alignItems: isMobile ? 'stretch' : 'end', marginTop: isMobile ? 32 : 56 }}>
        <p style={{ ...edText.sans, fontSize: isMobile ? 18 : 19, lineHeight: 1.55, color: ED.ink, margin: 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={{ display: 'flex', justifyContent: isMobile ? 'flex-start' : 'flex-end' }}>
          <EdBtn kind="primary" href="/demo">Book a demo</EdBtn>
        </div>
      </div>
    </section>
  );
}

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

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

Object.assign(window, { EditorialSiteV2 });
