function GroupSplit({ Icon, onNav, t, compact }) {
  const g = t.group;
  const [hover, setHover] = React.useState(null);
  const panels = [
    { href: '/structures', logo: './assets/logo-cs-primary.jpg', bg: '#071426', accent: '#7FC4FF', live: true, contain: true, art: './assets/blueprint-tower-render.svg', artSize: 'auto 86%', base: 'radial-gradient(80% 70% at 50% 45%, #0E3A78 0%, #0A2452 45%, #061A38 100%)', top: 'linear-gradient(180deg, #1E5CA8 0%, #1A5299 18%, #14417F 38%, rgba(13,52,104,.62) 62%, rgba(10,36,82,.24) 84%, rgba(10,36,82,0) 100%)', mesh: 'rgba(140,200,255,', foot: 'rgba(6,26,56,' },
    { href: '/innovations', logo: './assets/logo-ci-square.jpg', bg: '#0C2547', accent: '#6FD8E6', live: true, contain: true, art: './assets/tech-orbit-render.svg', artSize: 'auto 84%', base: 'radial-gradient(80% 70% at 50% 45%, #0C4A70 0%, #0A2C50 45%, #05192F 100%)', top: 'linear-gradient(180deg, #1C6E9E 0%, #175E8E 18%, #114A76 38%, rgba(12,58,92,.62) 62%, rgba(8,32,58,.24) 84%, rgba(8,32,58,0) 100%)', mesh: null, foot: 'rgba(5,24,46,' },
  ];
  const brands = [g.brands[1], g.brands[0]];
  const flexFor = (i) => hover === null ? 1 : (hover === i ? 1.32 : .68);
  return (
    <div style={{ fontFamily: 'var(--font-body)', height: compact ? 'min(76vh, 720px)' : 'calc(100vh - 44px)', minHeight: compact ? 500 : 560, display: 'flex', background: '#050f1d', color: '#fff', position: 'relative', overflow: 'hidden' }} data-split="1">
      {brands.map((b, i) => {
        const p = panels[i];
        return (
          <a key={b.name} href={p.href}
            onClick={p.live ? (i === 0 ? undefined : (e) => { e.preventDefault(); onNav && onNav('home'); }) : (e) => e.preventDefault()}
            onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
            aria-disabled={p.live ? undefined : true}
            style={{ position: 'relative', flex: flexFor(i), transition: 'flex .55s cubic-bezier(.2,.8,.2,1)', background: p.bg, cursor: p.live ? 'pointer' : 'default', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: compact ? '40px 40px 52px' : '48px 40px 24vh', overflow: 'hidden', borderRight: 'none', textDecoration: 'none', color: '#fff' }}>
            <React.Fragment>
              <div style={{ position: 'absolute', inset: 0, background: p.base }} />
              <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '72%', background: p.top }} />
              <div style={{ position: 'absolute', inset: 0, opacity: hover === i ? .5 : .38, transition: 'opacity .5s ease', backgroundImage: p.mesh ? 'repeating-linear-gradient(90deg, ' + p.mesh + '.16) 0 1px, transparent 1px 30px), repeating-linear-gradient(0deg, ' + p.mesh + '.13) 0 1px, transparent 1px 30px)' : 'none' }} />
              <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(' + p.art + ')', backgroundSize: p.artSize, backgroundPosition: 'center bottom', backgroundRepeat: 'no-repeat', mixBlendMode: 'screen', filter: 'brightness(1.05)', opacity: hover === i ? .68 : .5, maskImage: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%)', WebkitMaskImage: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%)', transform: hover === i ? 'scale(1.05)' : 'scale(1)', transformOrigin: 'center 40%', transition: 'opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1)', pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '40%', background: 'linear-gradient(180deg, transparent 0%, ' + p.foot + '.55) 60%, ' + p.foot + '.85) 100%)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(50% 36% at 50% 46%, ' + p.foot + '.5) 0%, ' + p.foot + '.22) 62%, transparent 100%)' }} />
            </React.Fragment>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(70% 55% at 50% 40%, ' + p.accent + '26 0%, transparent 70%)', opacity: hover === i ? 1 : 0, transition: 'opacity .5s ease' }} />
            <div style={{ position: 'relative', textAlign: 'center', maxWidth: 520, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
              <img src={p.logo} alt={b.name} style={{ width: i === 0 ? 'min(460px, 78%)' : 'min(300px, 60%)', maxHeight: '38vh', objectFit: 'contain', display: 'block', transform: hover === i ? 'scale(1.05)' : 'scale(1)', transition: 'transform .55s cubic-bezier(.2,.8,.2,1)', borderRadius: i === 1 ? 14 : 0 }} />
              <div>
                <p style={{ margin: '0 0 10px', fontSize: 11.5, fontWeight: 700, letterSpacing: '.24em', textTransform: 'uppercase', color: p.accent }}>{b.tag}</p>
                <p style={{ margin: '0 0 14px', fontSize: 'clamp(21px, 2.1vw, 29px)', fontWeight: 750, letterSpacing: '-.01em' }}>{b.name}</p>
                <p style={{ margin: '0 auto', maxWidth: 420, fontSize: 15, lineHeight: 1.6, color: 'rgba(255,255,255,.94)', fontWeight: 600, textShadow: '0 1px 14px rgba(4,16,36,.85)', opacity: hover === i || hover === null ? 1 : .45, transition: 'opacity .4s ease', textWrap: 'pretty' }}>{b.desc}</p>
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '11px 22px', borderRadius: 999, fontSize: 13.5, fontWeight: 700, letterSpacing: '.02em', border: '1px solid ' + (p.live ? p.accent : 'rgba(255,255,255,.22)'), background: p.live && hover === i ? p.accent : 'transparent', color: p.live ? '#fff' : 'rgba(255,255,255,.45)', transition: 'background .3s ease' }}>
                <span>{p.live ? g.enter : g.soon}</span>
                {p.live && <Icon name="arrowRight" size={17} />}
              </div>
            </div>
          </a>
        );
      })}
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: hover === null ? '50%' : (hover === 0 ? '66%' : '34%'), width: 132, transform: 'translateX(-50%)', pointerEvents: 'none', zIndex: 3, transition: 'left .55s cubic-bezier(.2,.8,.2,1)', background: 'linear-gradient(90deg, rgba(7,28,58,0) 0%, rgba(9,34,64,.38) 38%, rgba(11,40,74,.5) 50%, rgba(8,32,60,.38) 62%, rgba(5,24,46,0) 100%)', maskImage: 'linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%)', WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 30%, #000 70%, transparent 100%)' }} />
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: hover === null ? '50%' : (hover === 0 ? '66%' : '34%'), width: 1, pointerEvents: 'none', zIndex: 4, transition: 'left .55s cubic-bezier(.2,.8,.2,1)', background: 'linear-gradient(180deg, transparent 0%, rgba(180,220,255,.22) 22%, rgba(180,220,255,.28) 50%, rgba(180,220,255,.18) 78%, transparent 100%)' }} />
      <div style={{ position: 'absolute', top: 26, left: 0, right: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none', zIndex: 5 }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12, padding: '8px 20px', borderRadius: 999, background: 'rgba(5,15,29,.72)', border: '1px solid rgba(255,255,255,.14)', backdropFilter: 'blur(6px)' }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.28em', textTransform: 'uppercase', color: '#4FA8FF' }}>{g.kicker}</span>
          <span style={{ width: 1, height: 12, background: 'rgba(255,255,255,.2)' }} />
          <span style={{ fontSize: 11.5, color: 'rgba(255,255,255,.6)' }}>{g.splitHint}</span>
        </div>
      </div>
    </div>
  );
}
window.GroupSplit = GroupSplit;