function GroupPage({ Button, Icon, onNav, t, preview }) {
  const g = t.group;
  const c = g.corp;
  const divisions = [
    { name: g.brands[1].name, tag: g.brands[1].tag, desc: g.brands[1].desc, href: '/structures', nav: 'structures', logo: './assets/brand-band-cs.png', showTag: true, accent: '#7FC4FF', art: 'blueprint-tower-render.svg', base: 'radial-gradient(80% 120% at 76% 38%, #0E3A78 0%, #0A2452 48%, #061A38 100%)', top: 'linear-gradient(180deg, #1E5CA8 0%, #14417F 42%, rgba(10,36,82,.28) 82%, rgba(10,36,82,0) 100%)', mesh: 'rgba(140,200,255,', foot: 'rgba(6,26,56,' },
    { name: g.brands[0].name, tag: g.brands[0].tag, desc: g.brands[0].desc, href: '/innovations', nav: 'home', logo: './assets/brand-band-ci.png', showTag: true, accent: '#6FD8E6', art: 'tech-orbit-render.svg', base: 'radial-gradient(80% 120% at 76% 38%, #0C4A70 0%, #0A2C50 48%, #05192F 100%)', top: 'linear-gradient(180deg, #1C6E9E 0%, #114A76 42%, rgba(8,32,58,.28) 82%, rgba(8,32,58,0) 100%)', mesh: null, foot: 'rgba(5,24,46,' },
  ];
  const wa = 'https://wa.me/17867097143?text=' + encodeURIComponent(c.waMsg || '');
  const valueIcons = ['target', 'shield', 'chart'];
  const valueBg = ['value-bg-precision.jpeg', 'value-bg-responsibility.jpeg', 'value-bg-scale.jpeg'];
  const goDiv = (d) => (d.nav === 'structures' ? undefined : (e) => { e.preventDefault(); onNav && onNav(d.nav); });
  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 20, behavior: 'smooth' });
  };
  return (
    <div style={{ fontFamily: 'var(--font-body)', background: '#fff' }}>
      <section id="divisiones" style={{ position: 'relative', background: '#050f1d', color: '#fff', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '62% auto', backgroundPosition: 'right top', backgroundRepeat: 'no-repeat', opacity: .5 }} />
        <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: '92%', backgroundImage: 'url(./assets/group-collage.jpeg)', backgroundSize: 'cover', backgroundPosition: 'center right', opacity: .72, maskImage: 'linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 14%, #000 48%)', WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 14%, #000 48%)', pointerEvents: 'none' }} data-hero-collage="1" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, #050f1d 0%, rgba(5,15,29,.78) 26%, rgba(5,15,29,.34) 60%, rgba(5,15,29,.42) 100%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '68px var(--container-pad) 72px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,.95fr)', gap: 48, alignItems: 'center' }} data-grid="2">
            <div>
              <p style={{ margin: '0 0 18px', fontSize: 17, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: '#4FA8FF' }}>{c.heroKicker}</p>
              <h1 style={{ margin: '0 0 18px', maxWidth: 520, fontSize: 'var(--fs-display-lg, 40px)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', textWrap: 'pretty' }}>{c.heroH1}</h1>
              <p style={{ margin: '0 0 28px', maxWidth: 460, fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-normal)', color: 'rgba(255,255,255,.86)', textWrap: 'pretty' }}>{c.heroSub}</p>
              <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a href={wa} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '14px 26px', borderRadius: 999, background: '#fff', color: '#071426', fontSize: 14.5, fontWeight: 700, textDecoration: 'none' }}>
                  {c.heroCta2}<Icon name="arrowRight" size={18} />
                </a>
              </div>
            </div>
            <div style={{ display: 'grid', gap: 14 }}>
              <span style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,.6)' }}>{c.divisionsKicker}</span>
              {divisions.map((d) => (
                <a key={d.name} href={d.href} onClick={goDiv(d)} style={{ position: 'relative', display: 'block', background: 'rgba(255,255,255,.07)', border: '1px solid rgba(255,255,255,.18)', borderRadius: 'var(--radius-lg)', padding: '22px 24px', backdropFilter: 'blur(10px)', WebkitBackdropFilter: 'blur(10px)', textDecoration: 'none', color: '#fff' }}>
                  <div style={{ position: 'absolute', left: 0, top: 18, bottom: 18, width: 3, borderRadius: 3, background: d.accent }} />
                  <div style={{ borderRadius: 'var(--radius-md)', overflow: 'hidden', marginBottom: 16, boxShadow: '0 8px 24px rgba(3,12,26,.5)' }}>
                    <img src={d.logo} alt={d.name} style={{ width: '100%', height: 'auto', display: 'block' }} />
                  </div>
                  {d.showTag && <span style={{ display: 'block', fontSize: 10.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: d.accent, marginBottom: 10 }}>{d.tag}</span>}
                  <p style={{ margin: '0 0 16px', fontSize: 13.5, lineHeight: 'var(--lh-normal)', color: 'rgba(255,255,255,.88)', textWrap: 'pretty' }}>{d.desc}</p>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '10px 20px', borderRadius: 999, background: d.accent, fontSize: 13, fontWeight: 700, color: '#062038' }}>
                    {c.divisionEnter}<Icon name="arrowRight" size={16} />
                  </span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '64px var(--container-pad)', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <h2 style={{ fontSize: 'var(--fs-display-sm, 30px)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '0 0 30px' }}>{c.statsTitle}</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 24 }} data-grid="4">
            {c.stats.map((s) => (
              <div key={s.l} style={{ paddingTop: 20, borderTop: '2px solid var(--brand-primary)' }}>
                <strong style={{ display: 'block', fontSize: 38, fontWeight: 800, letterSpacing: 'var(--ls-tight)', color: 'var(--brand-primary)', lineHeight: 1.05, marginBottom: 8 }}>{s.v}</strong>
                <span style={{ fontSize: 14, lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)' }}>{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      </section>


      <section style={{ padding: '68px var(--container-pad)', background: 'var(--surface-alt)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div style={{ marginBottom: 30 }}>
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>{c.valuesKicker}</span>
            <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '8px 0 0' }}>{c.valuesTitle}</h2>
          </div>
          <div style={{ background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: '34px 36px', display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 32 }} data-grid="3">
            {c.values.map((v, i) => {
              const on = i === 1;
              return (
                <div key={v.t} style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-md)', padding: on ? '22px 24px' : '20px 22px', background: on ? 'var(--brand-primary)' : 'var(--surface-alt)', boxShadow: on ? 'var(--shadow-md)' : 'none' }}>
                  <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/' + valueBg[i] + ')', backgroundSize: 'cover', backgroundPosition: 'center right', opacity: on ? .26 : .34, mixBlendMode: on ? 'luminosity' : 'normal', maskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 46%, #000 100%)', WebkitMaskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 46%, #000 100%)', pointerEvents: 'none' }} />
                  <div style={{ position: 'relative', width: 46, height: 46, borderRadius: 12, background: on ? 'rgba(255,255,255,.18)' : '#fff', color: on ? '#fff' : 'var(--brand-primary)', display: 'grid', placeItems: 'center', marginBottom: 16, boxShadow: on ? 'none' : '0 2px 8px rgba(8,32,64,.1)' }}>
                    <Icon name={valueIcons[i]} size={22} />
                  </div>
                  <h3 style={{ position: 'relative', margin: '0 0 8px', fontSize: 17.5, fontWeight: 700, color: on ? '#fff' : 'var(--text-primary)' }}>{v.t}</h3>
                  <p style={{ position: 'relative', margin: 0, maxWidth: '90%', fontSize: 14, lineHeight: 'var(--lh-normal)', color: on ? 'rgba(255,255,255,.86)' : 'var(--text-secondary)', textWrap: 'pretty' }}>{v.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section style={{ position: 'relative', background: 'var(--surface-inverse)', color: '#fff', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '58% auto', backgroundPosition: 'right bottom', backgroundRepeat: 'no-repeat', opacity: .85 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '72px var(--container-pad)', display: 'flex', gap: 40, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 560 }}>
            <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', margin: '0 0 12px', textWrap: 'pretty' }}>{c.ctaTitle}</h2>
            <p style={{ margin: 0, fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.84)' }}>{c.ctaSub}</p>
          </div>
          <a href={wa} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '15px 30px', borderRadius: 999, background: '#fff', color: '#071426', fontSize: 15, fontWeight: 700, textDecoration: 'none' }}>
            {c.ctaButton}<Icon name="arrowRight" size={18} />
          </a>
        </div>
      </section>

      <footer style={{ background: '#050f1d', color: 'rgba(255,255,255,.72)', padding: '54px var(--container-pad) 40px' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr)', gap: 40 }} data-grid="3">
          <div>
            <strong style={{ display: 'block', fontSize: 16, fontWeight: 700, color: '#fff', marginBottom: 10 }}>Canaan Group Solutions LLC</strong>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 'var(--lh-normal)', maxWidth: 340 }}>{c.heroSub}</p>
          </div>
          <div>
            <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: '#fff', marginBottom: 14 }}>{c.footDivisions}</span>
            <div style={{ display: 'grid', gap: 10 }}>
              {divisions.map((d) => (
                <a key={d.name} href={d.href} onClick={goDiv(d)} style={{ fontSize: 14, color: 'rgba(255,255,255,.72)', textDecoration: 'none' }}>{d.name}</a>
              ))}
            </div>
          </div>
          <div>
            <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: '#fff', marginBottom: 14 }}>{c.footContact}</span>
            <div style={{ display: 'grid', gap: 8, fontSize: 14 }}>
              <a href="mailto:sales@canaangroupsolutions.com" style={{ color: 'rgba(255,255,255,.72)', textDecoration: 'none' }}>sales@canaangroupsolutions.com</a>
              <a href="tel:+17867097143" style={{ color: 'rgba(255,255,255,.72)', textDecoration: 'none' }}>+1 (786) 709-7143</a>
              <span>13925 SW 140th St, Miami, FL 33186</span>
            </div>
          </div>
        </div>
        <div style={{ maxWidth: 'var(--container-max)', margin: '38px auto 0', paddingTop: 22, borderTop: '1px solid rgba(255,255,255,.12)', fontSize: 13 }}>{g.footNote}</div>
      </footer>
    </div>
  );
}
window.GroupPage = GroupPage;
