/* FORUM website — content sections. Exports window.ForumSections = {...}. */

function Reveal({ children, delay = 0, as = 'div', style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) { setShown(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.16 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(28px)',
      transition: `opacity var(--duration-slow) var(--ease-out) ${delay}ms, transform var(--duration-slow) var(--ease-out) ${delay}ms`,
      ...style,
    }}>{children}</Tag>
  );
}

const wrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' };

/* Photo placeholder with optional data-point overlay (per wireframe) */
function PhotoPlate({ label = 'Flagship photo', stat, dark = true }) {
  const { StatBlock } = window.FORUMDesignSystem_982c6d;
  return (
    <div style={{
      position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden',
      aspectRatio: '4 / 3', minHeight: 280,
      background: dark
        ? 'linear-gradient(150deg, #123A7C 0%, #0E2A5E 55%, #081B43 100%)'
        : 'linear-gradient(150deg, #DCE6F4 0%, #EAF1FA 100%)',
      border: '1px solid rgba(125,186,246,0.18)',
      boxShadow: 'var(--shadow-md)',
      display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
    }}>
      {/* faint colonnade motif */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'repeating-linear-gradient(90deg, rgba(125,186,246,0.10) 0 2px, transparent 2px 46px)',
        maskImage: 'linear-gradient(to top, black, transparent 70%)',
      }} />
      <span style={{
        position: 'absolute', top: 18, left: 20,
        fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
        letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase',
        color: dark ? 'rgba(196,223,251,0.7)' : 'var(--forum-stone)',
      }}>{label}</span>
      {stat && (
        <div style={{
          position: 'relative', margin: 22, padding: '16px 20px',
          borderRadius: 'var(--radius-lg)',
          background: 'rgba(8,20,46,0.55)', backdropFilter: 'blur(8px)',
          border: '1px solid rgba(125,186,246,0.22)',
        }}>
          <StatBlock value={stat.value} label={stat.label} onDark size="sm" />
        </div>
      )}
    </div>
  );
}

function PillarBand() {
  const { SectionHeading, PillarCard } = window.FORUMDesignSystem_982c6d;
  return (
    <section style={{
      position: 'relative', overflow: 'hidden', padding: '64px 32px var(--section-y)',
      background: '#ffffff',
    }}>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 'var(--container-max)', margin: '0 auto' }}>
      <Reveal>
        <div style={{
          textAlign: 'center', marginBottom: 18,
          fontFamily: 'var(--font-sans)', fontWeight: 800, fontSize: 24,
          WebkitTextStroke: '0.6px currentColor',
          letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase',
          color: 'var(--forum-royal)',
        }}>Welcome to Forum</div>
        <SectionHeading className="pillar-heading" align="center"
          title="Your next stage of growth starts here."
          lead={<React.Fragment>GovCon rewards the proven, which are companies that know the work and deliver.<br />Forum sharpens that edge: the connections to open doors, the advisors to call the right plays, and the insight to see the deal first.</React.Fragment>}
          style={{ marginBottom: 'var(--space-8)' }} />
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
        {[
          { p: 'Events', t: 'The right room is everything.', c: <React.Fragment>Forum puts you face to face with key<br />decision-makers through our award galas, leadership summits, BD roundtables, procurement matchmaker sessions, and our nationwide road shows.</React.Fragment>, cta: 'See upcoming events' },
          { p: 'Advisory', t: "Let's build your winning playbook.", c: "Forum brings decades of frontline experience and an unorthodox approach to strategy, branding, capture and teaming that sharpens your positioning and accelerates your path to growth.", cta: 'Explore advisory' },
          { p: 'Platform', t: 'The intel you need to win.', c: "We give you insight to vital company data, market signals, and competitive intelligence all in one view. This level of clarity is the game changer that you need to win and win big.", cta: 'Request a demo' },
        ].map((x, i) => (
          <Reveal key={x.p} delay={i * 90}>
            <PillarTile pillar={x.p} title={x.t} copy={x.c} cta={x.cta} />
          </Reveal>
        ))}
      </div>

      </div>
    </section>
  );
}

function PillarTile({ pillar, title, copy, cta, href = '#' }) {
  const [hover, setHover] = React.useState(false);
  return (
    <a href={href} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column', height: '100%', textAlign: 'center', textDecoration: 'none',
        background: 'linear-gradient(to bottom, #ffffff 0%, #e8e9ea 100%)', border: '1px solid var(--color-border)',
        borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)',
        boxShadow: hover ? 'var(--shadow-sm)' : 'var(--shadow-xs)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard)',
      }}>
      <span style={{
        fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(22px, 2.2vw, 28px)',
        letterSpacing: '-0.01em', textTransform: 'uppercase', lineHeight: 1,
        background: 'linear-gradient(100deg, #1E55C8 0%, #3D97F0 100%)',
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
      }}>{pillar}</span>
      <h3 style={{
        margin: '12px 0 10px', fontFamily: 'var(--font-display)', fontWeight: 700,
        fontSize: 'clamp(15px, 1.3vw, 18px)', lineHeight: 1.15, letterSpacing: '-0.01em', color: 'var(--forum-slate)', whiteSpace: 'nowrap',
      }}>{title}</h3>
      <p style={{
        margin: 0, fontFamily: 'var(--font-sans)', fontSize: 'var(--text-body)', lineHeight: 1.6, color: 'var(--forum-slate)',
      }}>{copy}</p>
      <span style={{
        marginTop: 'auto', paddingTop: 'var(--space-5)', fontFamily: 'var(--font-sans)',
        fontSize: 'var(--text-body-sm)', fontWeight: 600, color: 'var(--forum-royal)',
        textDecoration: hover ? 'underline' : 'none', textUnderlineOffset: 3,
      }}>{cta}</span>
    </a>
  );
}

/* Rotating image plate — cycles images on an interval (per request: every 2s) */
function RotatingPlate({ images, interval = 3000, stat, badge, accent = 'var(--forum-royal)' }) {
  const { StatBlock } = window.FORUMDesignSystem_982c6d;
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce || images.length < 2) return;
    const id = setInterval(() => setI((p) => (p + 1) % images.length), interval);
    return () => clearInterval(id);
  }, [images.length, interval]);
  return (
    <div style={{
      position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden',
      aspectRatio: '4 / 3', minHeight: 280, background: '#0E2A5E',
      border: '1px solid rgba(125,186,246,0.18)', boxShadow: 'var(--shadow-md)',
    }}>
      {images.map((src, idx) => (
        <img key={src} src={src} alt="" aria-hidden={idx !== i} style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
          opacity: idx === i ? 1 : 0, transform: idx === i ? 'scale(1.02)' : 'scale(1)',
          transition: 'opacity 700ms var(--ease-out), transform 2.6s var(--ease-out)',
        }} />
      ))}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(to top, rgba(10,30,74,0.86) 0%, rgba(18,54,128,0.40) 36%, rgba(30,85,200,0.10) 60%, transparent 82%)',
      }} />
      {badge && (
        <span style={{
          position: 'absolute', top: 16, left: 16, padding: '7px 13px', borderRadius: 'var(--radius-pill)',
          background: accent, color: '#fff', fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 700,
          letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', boxShadow: 'var(--shadow-sm)',
        }}>{badge}</span>
      )}
      {stat && (
        <div style={{
          position: 'absolute', bottom: 0, left: 0, margin: 20, padding: '14px 18px',
          borderRadius: 'var(--radius-lg)', background: 'rgba(8,20,46,0.55)', backdropFilter: 'blur(8px)',
          border: '1px solid rgba(125,186,246,0.22)',
        }}>
          <StatBlock value={stat.value} label={stat.label} onDark size="sm" />
        </div>
      )}
      {images.length > 1 && (
        <div style={{ position: 'absolute', bottom: 16, right: 16, display: 'flex', gap: 7 }}>
          {images.map((_, idx) => (
            <span key={idx} style={{
              width: 7, height: 7, borderRadius: '50%',
              background: idx === i ? accent : 'rgba(255,255,255,0.45)',
              transition: 'background var(--duration-base) var(--ease-standard)',
            }} />
          ))}
        </div>
      )}
    </div>
  );
}

function MetaRow({ icon, text, accent, onDark = false }) {
  const paths = {
    calendar: <React.Fragment><rect x="3" y="4" width="18" height="18" rx="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></React.Fragment>,
    pin: <React.Fragment><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></React.Fragment>,
  };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{paths[icon]}</svg>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 600, color: onDark ? 'rgba(196,223,251,0.9)' : 'var(--forum-ink)' }}>{text}</span>
    </div>
  );
}

function FeatureRow({ pillar, verb, title, copy, cta, ctaHref, ctaVariant = 'secondary', cta2, cta2Href, stat, flip, photoLabel, images, accent, kicker, kickerColor, meta, flushTop, onDark = false }) {
  const { Button } = window.FORUMDesignSystem_982c6d;
  const text = (
    <Reveal style={{ flex: '1 1 0', minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12, flexWrap: 'wrap' }}>
        <span style={{
          fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(22px, 2.2vw, 28px)',
          letterSpacing: '-0.01em', textTransform: 'uppercase', lineHeight: 1,
          background: 'linear-gradient(135deg, #a0a8b0 0%, #d8dde2 40%, #ffffff 100%)',
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
        }}>{pillar}</span>
      </div>
      {kicker && (
        <div style={{
          margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 800,
          fontSize: 'clamp(23px, 2.5vw, 32px)', lineHeight: 1.1, letterSpacing: '-0.015em',
          color: kickerColor || accent || 'var(--forum-royal)',
        }}>{kicker}</div>
      )}
      <h3 style={kicker ? {
        margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 600,
        fontSize: 'clamp(16px, 1.5vw, 19px)', lineHeight: 1.4,
        color: onDark ? 'var(--forum-sky-100)' : 'var(--forum-slate)',
      } : {
        margin: 0, fontFamily: 'var(--font-display)', fontWeight: 800,
        fontSize: 'clamp(28px, 3vw, 40px)', lineHeight: 1.04, letterSpacing: '-0.025em',
        color: onDark ? 'var(--forum-white)' : 'var(--forum-ink)',
      }}>{title}</h3>
      {meta && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9, margin: '18px 0 0' }}>
          {meta.map((m) => <MetaRow key={m.text} icon={m.icon} text={m.text} accent={onDark ? 'var(--forum-sky-300)' : (accent || 'var(--forum-royal)')} onDark={onDark} />)}
        </div>
      )}
      <p style={{
        margin: '18px 0 28px', maxWidth: 460,
        fontFamily: 'var(--font-sans)', fontSize: 'var(--text-body-lg)', lineHeight: 1.6,
        color: onDark ? 'var(--forum-sky-100)' : 'var(--forum-slate)',
      }}>{copy}</p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Button variant={ctaVariant}
          onClick={ctaHref ? () => window.open(ctaHref, '_blank', 'noopener') : undefined}>{cta}</Button>
        {cta2 && (
          <Button variant="secondary"
            onClick={cta2Href ? () => window.open(cta2Href, '_self') : undefined}>{cta2}</Button>
        )}
      </div>
    </Reveal>
  );
  const photo = (
    <Reveal delay={120} style={{ flex: '1 1 0', minWidth: 0 }}>
      {images && images.length
        ? <RotatingPlate images={images} stat={stat} badge={photoLabel} accent={accent || 'var(--forum-royal)'} />
        : <PhotoPlate label={photoLabel} stat={stat} />}
    </Reveal>
  );
  return (
    <section style={{ ...wrap, padding: flushTop ? 'var(--space-7) 32px var(--section-y)' : 'var(--section-y) 32px' }}>
      <div style={{ display: 'flex', gap: 64, alignItems: 'center', flexDirection: flip ? 'row-reverse' : 'row' }}>
        {text}{photo}
      </div>
    </section>
  );
}

function CountStat({ n, prefix = '', suffix = '', comma = false, label }) {
  const ref = React.useRef(null);
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started) {
          started = true;
          if (reduce) { setVal(n); io.disconnect(); return; }
          const dur = 1700, t0 = performance.now();
          const tick = (now) => {
            const p = Math.min(1, (now - t0) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(n * eased);
            if (p < 1) requestAnimationFrame(tick); else setVal(n);
          };
          requestAnimationFrame(tick);
          io.disconnect();
        }
      });
    }, { threshold: 0.25, rootMargin: '0px 0px -10% 0px' });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, [n]);
  const display = comma ? Math.round(val).toLocaleString('en-US') : String(Math.round(val));
  return (
    <div ref={ref} style={{ borderLeft: '2px solid var(--forum-sky-300)', paddingLeft: 20 }}>
      <div style={{
        fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(32px, 3.6vw, 50px)',
        lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--forum-navy)',
      }}>{prefix}{display}{suffix}</div>
      <div style={      { marginTop: 12, fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.4, color: 'var(--forum-slate)' }}>{label}</div>
    </div>
  );
}

function FeatureDivider() {
  return (
    <div aria-hidden="true" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 32px' }}>
      <div style={{
        height: 1,
        background: 'linear-gradient(90deg, transparent 0%, rgba(125,186,246,0.28) 20%, rgba(125,186,246,0.28) 80%, transparent 100%)',
      }} />
    </div>
  );
}

function StatStrip() {
  const stats = [
    { n: 200000, suffix: '+', comma: true, label: 'Event attendees and counting' },
    { n: 4, prefix: '$', suffix: 'B+', label: 'In contract value with our clients' },
    { n: 500, suffix: '+', label: 'Customers and growing' },
    { n: 12, label: 'Years powering the GovCon market' },
  ];
  return (
    <section style={{
      position: 'relative', overflow: 'hidden', background: '#ffffff',
      borderTopLeftRadius: 32, borderTopRightRadius: 32, marginTop: -32, zIndex: 3,
      boxShadow: '0 -30px 60px rgba(40,20,120,0.10)',
    }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'none',
      }} />
      <div style={{ ...wrap, padding: '28px 32px 40px', position: 'relative', zIndex: 2 }}>
        <div style={{ textAlign: 'center', marginBottom: 20 }}>
          <img src="media/forum-f-blue2.png" alt="Forum" style={{ height: 72, display: 'inline-block' }} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {stats.map((s) => <CountStat key={s.label} {...s} />)}
        </div>
      </div>
    </section>
  );
}

function ResourcesGrid() {
  const { SectionHeading, Card, Badge } = window.FORUMDesignSystem_982c6d;
  const items = [
    { cat: 'Report', tone: 'royal', t: <React.Fragment>The 2026 GovCon<br />Market Map</React.Fragment>, meta: 'Reports · 18 min read' },
    { cat: 'Blog', tone: 'sky', t: 'Why connection comes before scale', meta: 'Blog · 6 min read' },
    { cat: 'Podcast', tone: 'navy', t: <React.Fragment>Inside the room:<br />a prime’s playbook</React.Fragment>, meta: 'Podcasts · Ep. 24' },
  ];
  return (
    <section style={{ ...wrap, padding: 'var(--section-y) 32px', background: 'var(--forum-paper)' }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center', textAlign: 'center', marginBottom: 'var(--space-7)' }}>
        <SectionHeading align="center" eyebrow="Resources" title="GovCon knowledge, on demand." />
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 380px))', gap: 22, justifyContent: 'center' }}>
        {items.map((x, i) => (
          <Reveal key={x.cat} delay={i * 90}>
            <Card interactive style={{ height: '100%', display: 'flex', flexDirection: 'column', paddingBottom: 0 }}>
              {i === 0 ? (
                <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', aspectRatio: '4 / 3', minHeight: 280, flexShrink: 0 }}>
                  <img src="uploads/shutterstock_1968875902.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(90,40,160,0.72) 0%, rgba(90,40,160,0.18) 55%, transparent 100%)' }} />
                </div>
              ) : i === 1 ? (
                <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', aspectRatio: '4 / 3', minHeight: 280, flexShrink: 0 }}>
                  <img src="uploads/shutterstock_2604006819.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(90,40,160,0.72) 0%, rgba(90,40,160,0.18) 55%, transparent 100%)' }} />
                </div>
              ) : (
                <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', aspectRatio: '4 / 3', minHeight: 280, flexShrink: 0 }}>
                  <img src="uploads/shutterstock_2592408145.jpg" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                  <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(90,40,160,0.72) 0%, rgba(90,40,160,0.18) 55%, transparent 100%)' }} />
                </div>
              )}
              <div style={{ paddingTop: 14, paddingBottom: 0 }}>
                <Badge tone={x.tone} pillar>{x.cat}</Badge>
                <h4 style={{
                  margin: '12px 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700,
                  fontSize: 'var(--text-h3)', lineHeight: 1.15, color: 'var(--forum-ink)',
                }}>{x.t}</h4>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--forum-stone)', marginBottom: 10 }}>{x.meta}</div>
                {i < 3 && (
                  <a href="#" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--forum-royal)', textDecoration: 'none', letterSpacing: '0.01em', display: 'inline-block', marginBottom: 0 }}>Read more →</a>
                )}
              </div>
            </Card>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function PartnersStrip() {
  const logos = [
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffbfe3870784a8905c057_softdev_transparent.png', alt: 'SoftDev' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffc94c318c76bac617cf7_tria-Picsart-BackgroundRemover.png', alt: 'Tria' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd1988cf686a26c28543_softrams_transparent.png', alt: 'Softrams' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd257b5246e397ec6279_phillips_transparent.png', alt: 'Phillips' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd36bcc3d56a65df16bd_peraton_transparent.png', alt: 'Peraton' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd4ee4b31b38850fabbb_optum-serve_transparent.png', alt: 'Optum Serve' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd631e48c15718ceddce_oddball_transparent.png', alt: 'Oddball' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd783fa184eebc58a6ac_nationalgov_transparent.png', alt: 'National Government Services' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd8d22c54dca5188018d_metaphase-Picsart-BackgroundRemover.png', alt: 'Metaphase' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffd9c5eaa8ecaad2af902_leidos%20(1).png', alt: 'Leidos' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffdaa281724118b00b90d_icf_transparent.png', alt: 'ICF' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffdbbd8c5e5cbe7bd61e8_guidehouse_transparent.png', alt: 'Guidehouse' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffdce48116baf22347f38_gdit_transparent.png', alt: 'GDIT' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffddabfe1b6978949d6ce_dell_transparent.png', alt: 'Dell' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffde77d17f5bedc04fb9b_carahsoft_transparent.png', alt: 'Carahsoft' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffdf4f3438ac8da63f93d_alphaomega_transparent.png', alt: 'Alpha Omega' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffe030eb4b11daa67e32c_visual-connections-Picsart-BackgroundRemover.png', alt: 'Visual Connections' },
    { src: 'https://cdn.prod.website-files.com/67e59cbbe270b364c8aec542/69bffe0eb9c7fa2b14ce944a_act-iac_transparent.png', alt: 'ACT-IAC' },
  ];
  const { SectionHeading } = window.FORUMDesignSystem_982c6d;
  return (
    <section style={{ background: 'var(--forum-paper)', borderTop: '1px solid var(--color-border)', borderBottom: '1px solid var(--color-border)', overflow: 'hidden' }}>
      <style>{`
        @keyframes marquee-scroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .marquee-track {
          display: flex; align-items: center; gap: 56px;
          width: max-content;
          animation: marquee-scroll 55s linear infinite;
        }
        .marquee-track:hover { animation-play-state: paused; }
      `}</style>
      <div style={{ padding: '48px 0 40px' }}>
        <div style={{ textAlign: 'center', marginBottom: 36, padding: '0 32px' }}>
          <SectionHeading align="center" title="Our Sponsors" />
        </div>
        <div style={{ overflow: 'hidden', WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)', maskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)' }}>
          <div className="marquee-track">
            {[...logos.slice(0, 9), ...logos.slice(0, 9)].map((l, i) => (
              <div key={'r1-'+i} style={{ width: 160, height: 79, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src={l.src} alt={l.alt} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', opacity: 0.8, filter: 'grayscale(20%)' }} />
              </div>
            ))}
          </div>
          <div className="marquee-track" style={{ marginTop: 28, animationDirection: 'reverse' }}>
            {[...logos.slice(9), ...logos.slice(9)].map((l, i) => (
              <div key={'r2-'+i} style={{ width: 160, height: 79, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <img src={l.src} alt={l.alt} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', opacity: 0.8, filter: 'grayscale(20%)' }} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function CTASection({ onCta }) {
  const { Button } = window.FORUMDesignSystem_982c6d;
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--forum-gradient-deep)', borderTopLeftRadius: 32, borderTopRightRadius: 32, zIndex: 3, boxShadow: '0 -30px 60px rgba(8,20,46,0.20)' }}>
      {/* Background video */}
      <video
        autoPlay muted loop playsInline aria-hidden="true"
        style={{
          position: 'absolute', inset: 0, width: '100%', height: '100%',
          objectFit: 'cover', zIndex: 0, pointerEvents: 'none',
        }}
      >
        <source src="media/Blue background.mp4" type="video/mp4" />
      </video>
      {/* Navy scrim so the slogan stays legible */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(8,27,67,0.74) 0%, rgba(11,35,83,0.68) 50%, rgba(8,27,67,0.80) 100%)',
      }} />
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        backgroundImage: 'repeating-linear-gradient(90deg, rgba(125,186,246,0.07) 0 2px, transparent 2px 64px)',
        maskImage: 'radial-gradient(120% 100% at 50% 120%, black, transparent 70%)',
      }} />
      <div style={{ ...wrap, padding: '58px 32px', textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <Reveal>
          <h2 style={{
            margin: 0, fontFamily: 'var(--font-slogan)', fontWeight: 500,
            fontSize: 'clamp(32px, 4.5vw, 60px)', lineHeight: 1.05, letterSpacing: '-0.015em',
            color: 'var(--forum-white)',
          }}>
            Connect. Scale. <em style={{ fontStyle: 'italic', color: 'var(--forum-sky-300)' }}>Win.</em>
          </h2>
          <Button variant="primary" size="lg" onClick={onCta} style={{ marginTop: 32 }}>Work with us</Button>
        </Reveal>
      </div>
    </section>
  );
}

function FeaturesSectionIntro({ onDark = false }) {
  const { SectionHeading } = window.FORUMDesignSystem_982c6d;
  return (
    <div style={{ ...wrap, padding: 'var(--section-y) 32px var(--space-6)', textAlign: 'center' }}>
      <Reveal>
        <img src="media/forum-f-mark.png" alt="" aria-hidden="true" style={{ height: 64, display: 'inline-block', marginBottom: 20 }} />
        <SectionHeading
          align="center"
          eyebrow="Events · Advisory · Platform"
          title="Select your growth path."
          onDark={onDark}
        />
      </Reveal>
    </div>
  );
}

window.ForumSections = { PillarBand, FeatureRow, FeaturesSectionIntro, FeatureDivider, StatStrip, ResourcesGrid, PartnersStrip, CTASection, Reveal, PhotoPlate };
