// NEWS & RESOURCES PAGE - /news
// Editorial blog landing. Hero · featured article · grid of articles ·
// research / report callout. Article cards link to /news/software-demo-truth
// which is the individual post template.

const { EdCtx: InsCtx, EdTag: InsTag, EdBtn: InsBtn, EdChrome: InsChrome,
        useIsMobile: insUseIsMobile } = window;

// ─── data ──────────────────────────────────────────────────────

const ARTICLES = [
  {
    slug: 'competitive-advantage',
    image: 'images/news/competitive-advantage.png',
    kicker: 'Perspective',
    title: 'The competitive advantage no MGA can afford to ignore.',
    excerpt: 'We stepped away from our desks and asked ten industry leaders what separates the MGAs that will win. The answer wasn\u2019t efficiency - it was speed, and the infrastructure that either enables it or quietly caps it.',
    author: 'James Hill',
    initials: 'JH',
    date: '22 July 2026',
    readTime: '5 min read',
    accent: 'red',
    featured: true,
  },
  {
    slug: 'software-demo-truth',
    image: 'images/news/software-demo-truth.png',
    kicker: 'Perspective',
    title: 'Getting the truth out of a software demo.',
    excerpt: 'When you sit down for a software demo, you and the vendor are playing two different games in the same meeting. You think you\u2019re evaluating whether the thing fits. The vendor is running a well-rehearsed route...',
    author: 'Steve Hirst',
    initials: 'SH',
    date: '15 July 2026',
    readTime: '9 min read',
    accent: 'teal',
  },
];

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

function InsHero() {
  const ED = React.useContext(InsCtx);
  const edText = ED.text;
  const isMobile = insUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '40px 24px 40px' : '72px 144px 80px', background: ED.bg }}>
      <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'flex-start' : 'end', gap: isMobile ? 20 : 60, maxWidth: 1320 }}>
        <h1 style={{ ...edText.display, fontSize: isMobile ? 'clamp(48px, 16vw, 72px)' : 119, lineHeight: 0.95, color: ED.ink, margin: 0, letterSpacing: '-0.04em' }}>
          <span style={{ ...edText.displayBold, color: ED.red, fontStyle: 'normal' }}>News &amp; Resources</span>.
        </h1>
        <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 20, lineHeight: 1.5, color: ED.ink, margin: 0, maxWidth: isMobile ? undefined : 480, paddingBottom: isMobile ? 0 : 18 }}>
          News on technology, the industry and how Outrun&rsquo;s platform is helping MGAs and scheme brokers to grow.
        </p>
      </div>
    </section>
  );
}

// ─── featured article ─────────────────────────────────────────

function InsFeatured({ article }) {
  const ED = React.useContext(InsCtx);
  const edText = ED.text;
  const isMobile = insUseIsMobile();
  const accent = article.accent === 'red' ? ED.red : article.accent === 'teal' ? ED.teal : article.accent === 'yellow' ? ED.yellow : ED.green;
  return (
    <section style={{ padding: isMobile ? '0 24px 56px' : '0 90px 96px', background: ED.bg }}>
      <a href={`/news/${article.slug}`} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
        <article style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1.05fr 0.95fr',
          gap: isMobile ? 0 : 56,
          alignItems: 'stretch',
          border: `1px solid ${ED.rule}`,
          borderTop: `2px solid ${ED.ink}`,
          background: ED.bg,
        }}>
          <div style={{
            background: ED.bgWarm,
            position: 'relative',
            minHeight: isMobile ? 240 : 480,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            borderRight: isMobile ? 'none' : `1px solid ${ED.rule}`,
            borderBottom: isMobile ? `1px solid ${ED.rule}` : 'none',
            overflow: 'hidden',
          }}>
            {article.image && (
              <img src={article.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            )}
            <div style={{
              position: 'absolute', top: 20, left: 24,
              ...edText.tag, fontSize: 11, color: accent,
            }}>
              Featured
            </div>
          </div>
          {/* Article copy */}
          <div style={{ padding: isMobile ? '28px 22px 30px' : '48px 48px 40px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ ...edText.tag, fontSize: 12, color: accent, marginBottom: 16 }}>
              {article.kicker}
            </div>
            <h2 style={{ ...edText.display, fontSize: isMobile ? 32 : 56, lineHeight: 1.05, color: ED.ink, margin: 0, letterSpacing: '-0.03em', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
              {article.title}
            </h2>
            <p style={{ ...edText.sans, fontSize: isMobile ? 17 : 19, lineHeight: 1.55, color: ED.ink, margin: isMobile ? '18px 0 24px' : '28px 0 36px', maxWidth: 560, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
              {article.excerpt}
            </p>
            <div style={{ flex: 1 }} />
            <div style={{
              display: 'flex', alignItems: 'center',
              paddingTop: 24, borderTop: `1px solid ${ED.rule}`,
            }}>
              <span style={{ ...edText.med, fontSize: 14, color: ED.ink }}>
                Read &rarr;
              </span>
            </div>
          </div>
        </article>
      </a>
    </section>
  );
}

// ─── article grid ──────────────────────────────────────────────

function InsCard({ article, single }) {
  const ED = React.useContext(InsCtx);
  const edText = ED.text;
  const accent = article.accent === 'red' ? ED.red : article.accent === 'teal' ? ED.teal : article.accent === 'yellow' ? ED.yellow : ED.green;
  return (
    <a href={`/news/${article.slug}`} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}>
      <article style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <div style={{
          ...(single ? { height: 420 } : { aspectRatio: '4 / 3' }),
          background: ED.bgWarm,
          border: `1px solid ${ED.rule}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {article.image ? (
            <img src={article.image} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          ) : (
            <div style={{
              width: 56, height: 56, borderRadius: '50%',
              border: `1px solid ${accent}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              ...edText.display, fontSize: 22, color: accent, fontStyle: 'italic',
            }}>§</div>
          )}
          <div style={{
            position: 'absolute', top: 12, left: 14,
            ...edText.tag, fontSize: 10, color: accent,
          }}>
            {article.kicker}
          </div>
        </div>
        <h3 style={{ ...edText.display, fontSize: 30, lineHeight: 1.12, color: ED.ink, margin: 0, letterSpacing: '-0.02em', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
          {article.title}
        </h3>
        <p style={{ ...edText.sans, fontSize: 15, lineHeight: 1.55, color: ED.ink2, margin: 0, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>
          {article.excerpt}
        </p>
        <div style={{
          display: 'flex', alignItems: 'center',
          paddingTop: 12, marginTop: 4, borderTop: `1px solid ${ED.rule}`,
        }}>
          <span style={{ ...edText.med, fontSize: 13, color: ED.ink }}>
            Read &rarr;
          </span>
        </div>
      </article>
    </a>
  );
}

function InsGrid({ articles }) {
  const ED = React.useContext(InsCtx);
  const edText = ED.text;
  const isMobile = insUseIsMobile();
  return (
    <section style={{ padding: isMobile ? '0 24px 64px' : '0 90px 96px', background: ED.bg }}>
      <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'baseline', justifyContent: 'space-between', maxWidth: 1320, marginBottom: isMobile ? 28 : 40, gap: isMobile ? 16 : 0 }}>
        <InsTag color={ED.accent}>More from Outrun</InsTag>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : (articles.length === 1 ? '1fr' : 'repeat(2, 1fr)'),
        gap: isMobile ? 40 : 56,
        maxWidth: isMobile ? 1320 : (articles.length === 1 ? '50%' : 1320),
      }}>
        {articles.map(a => <InsCard key={a.slug} article={a} single={!isMobile && articles.length === 1} />)}
      </div>
    </section>
  );
}

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

function InsightsSite({ accent, fontMode = 'serif' }) {
  const featured = ARTICLES.find(a => a.featured);
  const rest = ARTICLES.filter(a => !a.featured);
  return (
    <InsChrome accent={accent} fontMode={fontMode} current="/news">
      <InsHero />
      {featured && <InsFeatured article={featured} />}
      {rest.length > 0 && <InsGrid articles={rest} />}
    </InsChrome>
  );
}

Object.assign(window, { InsightsSite });