const homeBarLink = { display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0, whiteSpace: 'nowrap', color: 'inherit', textDecoration: 'none' };
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: 'cart', tint: '#002A52', wm: 'home-card-web-tiendas.jpeg' },
    { n: '02', icon: 'megaphone', tint: 'var(--color-navy-900)', wm: 'home-card-marketing-marca.jpeg' },
    { n: '03', icon: 'code', tint: 'var(--color-blue-700)', wm: 'home-card-software-medida.jpeg' },
    { n: '04', icon: 'chip', tint: '#0E3A4A', wm: 'home-card-modernizacion.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 data-page="home" 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>
          <a href="#" onClick={(e) => { e.preventDefault(); go('group'); }} style={{ ...homeBarLink, fontWeight: 700, marginRight: 'auto' }}><Icon name="arrowRight" size={13} style={{ transform: 'rotate(180deg)' }} />Canaan Group</a>
          <a href="https://wa.me/17867097143" target="_blank" rel="noopener noreferrer" style={homeBarLink}><Icon name="whatsapp" size={14} />+1 (786) 709-7143</a>
          <a href="https://wa.me/17542979520" target="_blank" rel="noopener noreferrer" style={homeBarLink}><Icon name="whatsapp" size={14} />+1 (754) 297-9520</a>
          <a data-top="opt" href="mailto:sales@canaangroupsolutions.com" style={homeBarLink}><Icon name="mail" size={14} />sales@canaangroupsolutions.com</a>
          <a data-top="opt2" href="https://www.instagram.com/canaan.innovations/" target="_blank" rel="noopener noreferrer" style={homeBarLink}><Icon name="instagram" size={14} />canaan.innovations</a>
        </React.Fragment>}
      />

      <section data-sticky="hero" style={{ position: 'sticky', top: 0, zIndex: 0, 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 data-stagger="1">
            <p data-reveal="1" style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--brand-accent-light)', margin: '0 0 18px' }}>{h.tagline}</p>
            <h1 data-reveal="1" 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 data-reveal="1" 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 data-reveal="1" 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' }} />
        <div 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, zIndex: 2 }}>
          <img src="./assets/hero-brand-card.png" alt="Canaan Innovations" data-reveal="1" data-parallax="0.05" data-hoverzoom="1" style={{ width: '100%', display: 'block', filter: 'drop-shadow(0 26px 52px rgba(0,0,0,.45))' }} />
        </div>
      </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" data-stagger="1">
          {h.pillars.map((p, i) => (
            <div key={p.title} data-reveal="1" 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 data-stagger="1" style={{ marginBottom: 36 }}>
            <div data-reveal="1" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, 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-lg)', fontWeight: 800, letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-tight)', color: 'var(--text-primary)', margin: '10px 0 0' }}>{h.servicesTitle}</h2>
              </div>
              <Button variant="ghost" size="sm" onClick={() => go('services')}>{h.servicesLink}</Button>
            </div>
            <p data-oneline="lead" data-reveal="1" style={{ margin: '16px 0 0', paddingTop: 16, borderTop: '1px solid var(--border-subtle)', fontSize: 'clamp(15px, 1.62vw, 21px)', fontWeight: 500, lineHeight: 1.35, color: 'var(--text-secondary)', textWrap: 'pretty' }}>{h.servicesLead}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: 20 }} data-grid="2" data-stagger="1">
            {h.services.map((s, i) => {
              const m = serviceMeta[i] || serviceMeta[serviceMeta.length - 1];
              const wide = i === h.services.length - 1 && h.services.length % 2 === 1;
              return (
              <div key={m.n} data-reveal="1" style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden', borderRadius: 'var(--radius-lg)', background: '#fff', border: '1px solid var(--border-subtle)', boxShadow: '0 10px 30px rgba(0,40,82,.08)', gridColumn: wide ? '1 / -1' : 'auto' }}>
                <div data-zoom="1" style={{ position: 'relative', height: wide ? 210 : 188, backgroundImage: 'url(./assets/' + m.wm + ')', backgroundSize: 'cover', backgroundPosition: 'center', backgroundColor: m.tint }}>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,40,82,.1), rgba(0,40,82,.45))' }} />
                  <span style={{ position: 'absolute', right: 20, bottom: 12, fontSize: 34, fontWeight: 800, lineHeight: 1, color: 'rgba(255,255,255,.9)' }}>{m.n}</span>
                </div>
                <div style={{ padding: '24px 26px 28px' }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 12 }}>
                    <div style={{ flex: '0 0 42px', width: 42, height: 42, borderRadius: 12, display: 'grid', placeItems: 'center', background: 'rgba(0,85,164,.09)', color: 'var(--color-blue-700)' }}>
                      <Icon name={m.icon} size={22} />
                    </div>
                    <h3 data-oneline="card" style={{ margin: 0, fontSize: 'clamp(18px, 1.9vw, 22px)', fontWeight: 800, letterSpacing: 'var(--ls-tight)', lineHeight: 1.2, color: 'var(--color-navy-900)', textWrap: 'balance' }}>{s.title}</h3>
                  </div>
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.5, color: 'var(--color-blue-700)', textWrap: 'pretty' }}>{s.desc}</p>
                  {s.items && <ul style={{ listStyle: 'none', display: 'grid', gap: 9, margin: '18px 0 0', padding: '16px 0 0', borderTop: '1px solid var(--border-subtle)' }}>
                    {s.items.map((it) => (
                      <li key={it} style={{ display: 'grid', gridTemplateColumns: '16px 1fr', gap: 10, alignItems: 'start', fontSize: 14.5, lineHeight: 1.45, color: 'var(--color-navy-900)' }}>
                        <Icon name="check" size={16} style={{ marginTop: 2, color: 'var(--brand-accent)' }} />
                        <span>{it}</span>
                      </li>
                    ))}
                  </ul>}
                </div>
              </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 data-reveal="1">
              <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 data-stagger="1" style={{ display: 'grid', gap: 14 }}>
              {h.backing.divisions.map((d, i) => (
                <div key={d.name} data-reveal="1" 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" data-stagger="1">
              {h.backing.stats.map((s) => (
                <div key={s.l} data-reveal="1">
                  <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 data-reveal="1" 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 data-zoom="1" style={{ position: 'relative', borderRadius: 'var(--radius-md)', overflow: 'hidden', aspectRatio: '16 / 9', background: 'var(--surface-alt)' }}>
              <video ref={(v) => { if (v) { v.muted = true; v.defaultMuted = true; v.volume = 0; v.setAttribute('muted', ''); v.removeAttribute('controls'); } }} onPlay={(e) => { e.target.muted = true; e.target.volume = 0; }} onVolumeChange={(e) => { if (!e.target.muted) { e.target.muted = true; e.target.volume = 0; } }} 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 data-reveal="1" 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" data-stagger="1">
            {[
              { 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} data-reveal="1" data-tile="1" 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 ref={(v) => { if (v) { v.muted = true; v.defaultMuted = true; v.volume = 0; v.setAttribute('muted', ''); v.removeAttribute('controls'); } }} onPlay={(e) => { e.target.muted = true; e.target.volume = 0; }} onVolumeChange={(e) => { if (!e.target.muted) { e.target.muted = true; e.target.volume = 0; } }} src={'./assets/' + p.src} autoPlay loop muted playsInline style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />}
              </a>
            ))}
          </div>
        </div>
      </section>

      <div data-clip-bed="1" style={{ position: 'relative', zIndex: 1, background: '#fff' }}>
      <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 data-stagger="1" style={{ maxWidth: 480 }}>
            <h2 data-reveal="1" style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, margin: '0 0 12px', letterSpacing: 'var(--ls-tight)' }}>{h.ctaTitle}</h2>
            <p data-reveal="1" style={{ color: 'rgba(255,255,255,.84)', fontSize: 'var(--fs-body-lg)', margin: '0 0 26px' }}>{h.ctaSub}</p>
            <div data-reveal="1"><Button variant="inverse" size="lg" onClick={() => go('contact')}>{h.ctaButton}</Button></div>
          </div>
          <img src="./assets/photo-contact-banner.jpeg" alt="" data-reveal="1" data-parallax="0.04" data-hoverzoom="1" style={{ width: 420, maxWidth: '100%', aspectRatio: '1376 / 768', objectFit: 'contain', background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', display: 'block' }} />
        </div>
      </section>
      </div>

      <Footer
        langCode={t.code}
        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;