function Home({ Button, Badge, Card, Icon, NavBar, Footer, onNav, t }) {
  const h = t.home;
  const pillarArt = ['pillar-speed.png', 'pillar-quality-light.png', 'pillar-agility.png'];
  const pillarIcons = ['gauge', 'shield', 'target'];
  const serviceMeta = [
    { n: '01', icon: 'code', tint: 'var(--color-navy-900)', wm: 'photo-software-medida.jpeg' },
    { n: '02', icon: 'megaphone', tint: 'var(--color-blue-700)', wm: 'photo-social-media.jpeg' },
    { n: '03', icon: 'cart', tint: 'var(--color-blue-500)', wm: 'photo-web-ecommerce.jpeg' },
    { n: '04', icon: 'chip', tint: '#0E3A4A', wm: 'photo-estrategia-infra-v2.jpeg' },
  ];
  const backingPanels = [
    { logo: 'logo-cs-mark.png', accent: '#7FC4FF', art: 'blueprint-tower-render.svg', base: 'radial-gradient(80% 120% at 78% 40%, #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,' },
    { logo: 'logo-ci-mark.png', accent: '#6FD8E6', art: 'tech-orbit-render.svg', base: 'radial-gradient(80% 120% at 78% 40%, #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 go = (p) => onNav && onNav(p);
  return (
    <div style={{ fontFamily: 'var(--font-body)', background: '#fff' }}>
      <NavBar
        logo={<img src="./assets/logo-primary.jpg" style={{ height: 46, borderRadius: 8, display: 'block' }} />}
        links={t.nav}
        active={t.nav[0]}
        onNavigate={(l) => onNav && onNav(t.navMap[l])}
        cta={<Button size="sm" onClick={() => go('contact')}>{t.cta}</Button>}
        topBar={<React.Fragment><span>+1 (786) 709-7143</span><span>+1 (754) 297-9520</span><span>sales@canaangroupsolutions.com</span></React.Fragment>}
      />

      <section style={{ position: 'relative', background: 'var(--gradient-hero)', color: '#fff', overflow: 'hidden', clipPath: 'polygon(0 0, 100% 0, 100% 90%, 0 100%)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '80% auto', backgroundPosition: 'left bottom', backgroundRepeat: 'no-repeat', opacity: .9 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '76px var(--container-pad) 132px', display: 'grid', gridTemplateColumns: 'minmax(0,1.15fr) minmax(0,.85fr)', gap: 48, alignItems: 'end' }} data-grid="hero">
          <div>
            <p style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--brand-accent-light)', margin: '0 0 18px' }}>{h.tagline}</p>
            <h1 style={{ fontSize: 'var(--fs-display-xl)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', margin: '0 0 20px', maxWidth: 640 }}>{h.h1}</h1>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.86)', lineHeight: 'var(--lh-normal)', maxWidth: 520, margin: '0 0 32px' }}>{h.sub}</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button variant="inverse" size="lg" onClick={() => go('contact')}>{h.ctaPrimary}</Button>
              <Button variant="ghost" size="lg" style={{ color: '#fff', border: '1px solid rgba(255,255,255,.45)' }} onClick={() => go('services')}>{h.ctaSecondary}</Button>
            </div>
          </div>
          <div />
        </div>
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '56%', backgroundImage: 'url(./assets/hero-circuit-rise.png)', backgroundSize: '100% 100%', backgroundPosition: 'center bottom', backgroundRepeat: 'no-repeat', opacity: .75, pointerEvents: 'none' }} />
        <img src="./assets/hero-brand-card.png" alt="Canaan Innovations" data-hero-cutout="1" style={{ position: 'absolute', right: 'max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)))', top: '50%', transform: 'translateY(-50%)', width: 320, display: 'block', filter: 'drop-shadow(0 26px 52px rgba(0,0,0,.45))', pointerEvents: 'none' }} />
      </section>

      <section style={{ padding: '0 var(--container-pad)', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '-56px auto 0', position: 'relative', zIndex: 2, 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">
          {h.pillars.map((p, i) => (
            <div key={p.title} style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-md)', padding: i === 1 ? '16px 18px' : 8, background: i === 1 ? 'var(--brand-primary)' : 'transparent', boxShadow: i === 1 ? 'var(--shadow-md)' : 'none', display: 'grid', gridTemplateColumns: '46px 1fr', gap: 16, alignItems: 'start' }}>
              <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '46%', backgroundImage: 'url(./assets/' + pillarArt[i] + ')', backgroundSize: 'cover', backgroundPosition: 'right center', maskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.7) 100%)', WebkitMaskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.7) 100%)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative', width: 46, height: 46, borderRadius: 12, background: i === 1 ? 'rgba(255,255,255,.16)' : 'var(--surface-alt)', color: i === 1 ? '#fff' : 'var(--brand-primary)', display: 'grid', placeItems: 'center' }}>
                <Icon name={pillarIcons[i]} size={22} />
              </div>
              <div style={{ position: 'relative' }}>
                <h3 style={{ margin: '0 0 6px', fontSize: 17, fontWeight: 700, color: i === 1 ? '#fff' : 'var(--text-primary)' }}>{p.title}</h3>
                <p style={{ margin: 0, maxWidth: '84%', fontSize: 14, lineHeight: 'var(--lh-normal)', color: i === 1 ? 'rgba(255,255,255,.85)' : 'var(--text-secondary)' }}>{p.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ padding: '76px var(--container-pad) 0', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, marginBottom: 36, flexWrap: 'wrap' }}>
            <div>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>{t.kickerSolutions}</span>
              <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '8px 0 0' }}>{h.servicesTitle}</h2>
            </div>
            <Button variant="ghost" size="sm" onClick={() => go('services')}>{h.servicesLink}</Button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: 20 }} data-grid="2">
            {h.services.map((s, i) => (
              <div key={serviceMeta[i].n} style={{ position: 'relative', overflow: 'hidden', borderRadius: 'var(--radius-lg)', padding: '30px 28px', background: serviceMeta[i].tint, color: '#fff', boxShadow: 'var(--shadow-lg)' }}>
                <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/' + serviceMeta[i].wm + ')', backgroundSize: 'cover', backgroundPosition: 'center', filter: 'grayscale(1) contrast(1.05)', opacity: .2, maskImage: 'linear-gradient(105deg, transparent 0%, rgba(0,0,0,.35) 45%, #000 100%)', WebkitMaskImage: 'linear-gradient(105deg, transparent 0%, rgba(0,0,0,.35) 45%, #000 100%)', pointerEvents: 'none' }} />
                <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22 }}>
                  <div style={{ width: 54, height: 54, borderRadius: '50%', display: 'grid', placeItems: 'center', background: 'rgba(255,255,255,.14)', color: '#fff' }}>
                    <Icon name={serviceMeta[i].icon} size={25} />
                  </div>
                  <span style={{ fontSize: 40, fontWeight: 800, color: 'transparent', WebkitTextStroke: '1.5px rgba(255,255,255,.32)', lineHeight: 1 }}>{serviceMeta[i].n}</span>
                </div>
                <h3 style={{ position: 'relative', margin: '0 0 10px', fontSize: 20, fontWeight: 700, letterSpacing: 'var(--ls-tight)' }}>{s.title}</h3>
                <p style={{ position: 'relative', margin: 0, maxWidth: '88%', fontSize: 14.5, lineHeight: 'var(--lh-normal)', color: 'rgba(255,255,255,.82)' }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '76px var(--container-pad)', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', background: 'var(--surface-alt)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '40px 40px 34px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 44, alignItems: 'start' }} data-grid="2">
            <div>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>{h.backing.kicker}</span>
              <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '8px 0 14px', textWrap: 'pretty' }}>{h.backing.title}</h2>
              <p style={{ margin: '0 0 22px', fontSize: 15.5, lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', textWrap: 'pretty' }}>{h.backing.sub}</p>
              <button onClick={() => go('group')} style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: 0, border: 'none', background: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 14.5, fontWeight: 700, color: 'var(--brand-primary)' }}>
                {h.backing.link}<Icon name="arrowRight" size={18} />
              </button>
            </div>
            <div style={{ display: 'grid', gap: 14 }}>
              {h.backing.divisions.map((d, i) => (
                <div key={d.name} style={{ position: 'relative', overflow: 'hidden', background: '#071426', border: '1px solid ' + backingPanels[i].accent + '3d', borderRadius: 'var(--radius-md)', padding: '22px 24px', boxShadow: 'var(--shadow-md)' }}>
                  <div style={{ position: 'absolute', inset: 0, background: backingPanels[i].base }} />
                  <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '78%', background: backingPanels[i].top }} />
                  {backingPanels[i].mesh && <div style={{ position: 'absolute', inset: 0, opacity: .34, backgroundImage: 'repeating-linear-gradient(90deg, ' + backingPanels[i].mesh + '.16) 0 1px, transparent 1px 30px), repeating-linear-gradient(0deg, ' + backingPanels[i].mesh + '.13) 0 1px, transparent 1px 30px)' }} />}
                  <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/' + backingPanels[i].art + ')', backgroundSize: 'auto 165%', backgroundPosition: 'right -10% center', backgroundRepeat: 'no-repeat', mixBlendMode: 'screen', filter: 'brightness(1.05)', opacity: .46, maskImage: 'linear-gradient(90deg, transparent 24%, rgba(0,0,0,.6) 58%, #000 100%)', WebkitMaskImage: 'linear-gradient(90deg, transparent 24%, rgba(0,0,0,.6) 58%, #000 100%)', pointerEvents: 'none' }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, ' + backingPanels[i].foot + '.88) 0%, ' + backingPanels[i].foot + '.55) 46%, transparent 78%)' }} />
                  <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(64% 46% at 50% 50%, ' + backingPanels[i].accent + '1f 0%, transparent 72%)' }} />
                  {i === 1 && <span style={{ position: 'absolute', top: 14, right: 14, zIndex: 2, padding: '4px 10px', borderRadius: 999, background: 'rgba(255,255,255,.16)', border: '1px solid rgba(255,255,255,.18)', fontSize: 10, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#fff', backdropFilter: 'blur(4px)' }}>{h.backing.hereLabel}</span>}
                  <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 16, marginBottom: 14, paddingRight: i === 1 ? 128 : 0 }}>
                    <img src={'./assets/' + backingPanels[i].logo} alt={d.name} style={{ width: 58, height: 58, objectFit: 'contain', display: 'block', flexShrink: 0, filter: 'drop-shadow(0 4px 16px rgba(4,16,36,.7))' }} />
                    <div style={{ minWidth: 0 }}>
                      <strong style={{ display: 'block', fontSize: 15.5, fontWeight: 700, color: '#fff', letterSpacing: 'var(--ls-tight)', textShadow: '0 1px 12px rgba(4,16,36,.8)' }}>{d.name}</strong>
                      <span style={{ display: 'block', fontSize: 11, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: backingPanels[i].accent, marginTop: 4 }}>{d.tag}</span>
                    </div>
                  </div>
                  <p style={{ position: 'relative', margin: 0, fontSize: 13.5, lineHeight: 'var(--lh-normal)', color: 'rgba(255,255,255,.9)', textShadow: '0 1px 12px rgba(4,16,36,.75)', textWrap: 'pretty' }}>{d.desc}</p>
                </div>
              ))}
            </div>
          </div>
          <div style={{ marginTop: 34, paddingTop: 26, borderTop: '1px solid var(--border-default, var(--border-subtle))' }}>
            <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-secondary)', marginBottom: 18 }}>{h.backing.statsLabel}</span>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 24 }} data-grid="4">
              {h.backing.stats.map((s) => (
                <div key={s.l}>
                  <strong style={{ display: 'block', fontSize: 30, fontWeight: 800, letterSpacing: 'var(--ls-tight)', color: 'var(--brand-primary)', lineHeight: 1.1, marginBottom: 6 }}>{s.v}</strong>
                  <span style={{ fontSize: 13.5, lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)' }}>{s.l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '76px var(--container-pad) 84px', background: 'var(--surface-alt)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div style={{ maxWidth: 760, marginBottom: 34 }}>
            <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>{h.proof.kicker}</span>
            <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '8px 0 14px', textWrap: 'pretty' }}>{h.proof.title}</h2>
            <p style={{ margin: 0, fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', textWrap: 'pretty' }}>{h.proof.sub}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.02fr) minmax(0,.98fr)', gap: 34, alignItems: 'center', background: '#fff', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 26, boxShadow: 'var(--shadow-lg)' }} data-grid="2">
            <div style={{ position: 'relative', borderRadius: 'var(--radius-md)', overflow: 'hidden', aspectRatio: '16 / 9', background: 'var(--surface-alt)' }}>
              <video src="./assets/case-jv-air.mp4" autoPlay loop muted playsInline style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
              <span style={{ position: 'absolute', left: 14, top: 14, padding: '6px 12px', borderRadius: 999, background: 'rgba(8,20,34,.72)', color: '#fff', fontSize: 11.5, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', backdropFilter: 'blur(6px)' }}>{h.proof.videoBadge}</span>
            </div>
            <div>
              <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap', paddingBottom: 20, marginBottom: 22, borderBottom: '1px solid var(--border-subtle)' }}>
                <div>
                  <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-secondary)', marginBottom: 5 }}>{h.proof.clientLabel}</span>
                  <strong style={{ display: 'block', fontSize: 16.5, fontWeight: 700, color: 'var(--text-primary)' }}>{h.proof.clientName}</strong>
                  <span style={{ fontSize: 13.5, color: 'var(--text-secondary)' }}>{h.proof.clientMeta}</span>
                </div>
                <div>
                  <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-secondary)', marginBottom: 5 }}>{h.proof.projectLabel}</span>
                  <strong style={{ display: 'block', fontSize: 16.5, fontWeight: 700, color: 'var(--text-primary)', textWrap: 'pretty' }}>{h.proof.projectName}</strong>
                </div>
              </div>
              <div style={{ marginBottom: 22, padding: '20px 22px', borderRadius: 'var(--radius-md)', background: 'var(--brand-primary)', color: '#fff' }}>
                <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,.72)', marginBottom: 12 }}>{h.proof.metricLabel}</span>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap', marginBottom: 10 }}>
                  <span style={{ fontSize: 26, fontWeight: 700, color: 'rgba(255,255,255,.55)', textDecoration: 'line-through', textDecorationThickness: '2px' }}>{h.proof.metricFrom}</span>
                  <Icon name="arrowRight" size={20} />
                  <span style={{ fontSize: 38, fontWeight: 800, letterSpacing: 'var(--ls-tight)', lineHeight: 1 }}>{h.proof.metricTo}</span>
                </div>
                <p style={{ margin: 0, fontSize: 14, lineHeight: 'var(--lh-normal)', color: 'rgba(255,255,255,.86)', textWrap: 'pretty' }}>{h.proof.metricNote}</p>
              </div>
              <div style={{ marginBottom: 22 }}>
                <span style={{ display: 'block', fontSize: 11.5, fontWeight: 700, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-secondary)', marginBottom: 10 }}>{h.proof.modulesLabel}</span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {h.proof.modules.map((m) => (
                    <span key={m} style={{ padding: '6px 12px', borderRadius: 999, background: 'var(--surface-alt)', border: '1px solid var(--border-subtle)', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{m}</span>
                  ))}
                </div>
              </div>
              <div style={{ display: 'grid', gap: 16, marginBottom: 24 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '3px 1fr', gap: 14 }}>
                  <div style={{ borderRadius: 999, background: 'var(--border-subtle)' }} />
                  <div>
                    <span style={{ display: 'block', fontSize: 12, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--text-secondary)', marginBottom: 5 }}>{h.proof.beforeLabel}</span>
                    <p style={{ margin: 0, fontSize: 14.5, lineHeight: 'var(--lh-normal)', color: 'var(--text-secondary)', textWrap: 'pretty' }}>{h.proof.beforeText}</p>
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '3px 1fr', gap: 14 }}>
                  <div style={{ borderRadius: 999, background: 'var(--brand-accent)' }} />
                  <div>
                    <span style={{ display: 'block', fontSize: 12, fontWeight: 700, letterSpacing: '.12em', textTransform: 'uppercase', color: 'var(--brand-accent)', marginBottom: 5 }}>{h.proof.afterLabel}</span>
                    <p style={{ margin: 0, fontSize: 14.5, lineHeight: 'var(--lh-normal)', color: 'var(--text-primary)', textWrap: 'pretty' }}>{h.proof.afterText}</p>
                  </div>
                </div>
              </div>
              <Button size="lg" onClick={() => go('contact')}>{h.proof.cta}</Button>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: '76px var(--container-pad) 84px', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, marginBottom: 28, flexWrap: 'wrap' }}>
            <div>
              <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>{h.feedKicker}</span>
              <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '8px 0 0' }}>{h.feedTitle}</h2>
            </div>
            <a href="https://www.instagram.com/canaan.innovations" target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 14.5, fontWeight: 700, color: 'var(--brand-primary)', textDecoration: 'none' }}>
              <Icon name="instagram" size={20} />@canaan.innovations
            </a>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0,1fr))', gap: 16 }} data-grid="4">
            {[
              { src: 'ig-1.jpeg', type: 'img' },
              { src: 'ig-2.jpeg', type: 'img' },
              { src: 'ig-3.jpeg', type: 'img' },
              { src: 'ig-4.mp4', type: 'video' },
              { src: 'ig-5.mp4', type: 'video' },
              { src: 'ig-6.mp4', type: 'video' },
              { src: 'ig-7.mp4', type: 'video' },
              { src: 'ig-8.mp4', type: 'video' },
            ].map((p) => (
              <a key={p.src} href="https://www.instagram.com/canaan.innovations" target="_blank" rel="noopener" style={{ position: 'relative', display: 'block', aspectRatio: '1 / 1', borderRadius: 'var(--radius-md)', overflow: 'hidden', background: 'var(--surface-alt)', border: '1px solid var(--border-subtle)' }}>
                {p.type === 'img'
                  ? <img src={'./assets/' + p.src} alt="Canaan Innovations" style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <video src={'./assets/' + p.src} autoPlay loop muted playsInline style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />}
              </a>
            ))}
          </div>
        </div>
      </section>

      <section style={{ position: 'relative', background: 'var(--surface-inverse)', color: '#fff', overflow: 'hidden', clipPath: 'polygon(0 12%, 100% 0, 100% 100%, 0 100%)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '65% auto', backgroundPosition: 'right bottom', backgroundRepeat: 'no-repeat', opacity: .9 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '112px var(--container-pad) 84px', display: 'flex', gap: 48, alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 480 }}>
            <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, margin: '0 0 12px', letterSpacing: 'var(--ls-tight)' }}>{h.ctaTitle}</h2>
            <p style={{ color: 'rgba(255,255,255,.84)', fontSize: 'var(--fs-body-lg)', margin: '0 0 26px' }}>{h.ctaSub}</p>
            <Button variant="inverse" size="lg" onClick={() => go('contact')}>{h.ctaButton}</Button>
          </div>
          <img src="./assets/photo-contact-us.jpeg" alt="" style={{ width: 300, height: 300, objectFit: 'cover', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', display: 'block' }} />
        </div>
      </section>

      <Footer
        links={t.nav}
        navLabel={t.footer.nav}
        contactLabel={t.footer.contact}
        blurb={t.footer.blurb}
        phone="+1 (786) 709-7143 / +1 (754) 297-9520"
        email="sales@canaangroupsolutions.com"
        address="13925 SW 140th St, Miami, FL 33186"
        instagram="@canaan.innovations"
      />
    </div>
  );
}
window.Home = Home;