function Services({ Button, Badge, Card, Tag, Icon, NavBar, Footer, onNav, t }) {
  const [active, setActive] = React.useState(0);
  const s2 = t.services;
  const meta = [
    { n: '01', icon: 'code', img: './assets/photo-software-medida.jpeg' },
    { n: '02', icon: 'megaphone', img: './assets/photo-social-media.jpeg' },
    { n: '03', icon: 'cart', img: './assets/photo-web-ecommerce.jpeg' },
    { n: '04', icon: 'chip', img: './assets/photo-estrategia-infra-v2.jpeg' },
  ];
  const items = s2.items.map((it, i) => Object.assign({}, it, meta[i]));
  const visible = active === 0 ? items : [items[active - 1]];
  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[1]}
        onNavigate={(l) => onNav && onNav(t.navMap[l])}
        cta={<Button size="sm" onClick={() => onNav && onNav('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% 88%, 0 100%)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '70% auto', backgroundPosition: 'left bottom', backgroundRepeat: 'no-repeat', opacity: .9 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(37px, 5.5vw, 72px) var(--container-pad) clamp(69px, 10.2vw, 132px)', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 620px', gap: 44, alignItems: 'center' }} data-grid="hero">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
              <span style={{ width: 34, height: 2, background: 'var(--brand-accent-light)' }} />
              <span style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--brand-accent-light)' }}>{t.kickerSolutions}</span>
            </div>
            <h1 style={{ fontSize: 'var(--fs-display-xl)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', margin: '0 0 18px', maxWidth: 480 }}>{s2.h1}</h1>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.85)', lineHeight: 'var(--lh-normal)', maxWidth: 440, margin: 0 }}>{s2.sub}</p>
          </div>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', border: '1px solid rgba(255,255,255,.22)', boxShadow: '0 24px 48px rgba(0,0,0,.4)', transform: 'rotate(-1.5deg)' }}>
            <img src="./assets/photo-soluciones-collage.jpeg" alt={s2.collageAlt} style={{ display: 'block', width: '100%', height: 'auto' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(160deg, rgba(0,42,80,.18), rgba(0,42,80,0) 55%)' }} />
          </div>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' }}>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', margin: '-44px 0 0', position: 'relative', zIndex: 2, background: '#fff', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-lg)', padding: 'clamp(9px, 1.4vw, 18px) clamp(11px, 1.7vw, 22px)' }}>
          {s2.tags.map((tag, i) => <Tag key={i} selected={active === i} onClick={() => setActive(i)}>{tag}</Tag>)}
        </div>
      </section>

      {visible.map((s, i) => {
        const flip = i % 2 === 1;
        return (
          <section key={s.n} style={{ padding: 'clamp(37px, 5.5vw, 72px) var(--container-pad)', background: flip ? 'var(--surface-alt)' : '#fff' }}>
            <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 56, alignItems: 'center' }} data-grid="2">
              <div style={{ order: flip ? 2 : 1 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 18 }}>
                  <div style={{ width: 62, height: 62, borderRadius: '50%', background: 'var(--brand-primary)', color: '#fff', display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-md)' }}>
                    <Icon name={s.icon} size={28} />
                  </div>
                  <span style={{ fontSize: 46, fontWeight: 800, color: 'transparent', WebkitTextStroke: '1.5px var(--border-default)', lineHeight: 1 }}>{s.n}</span>
                </div>
                <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: '.16em', textTransform: 'uppercase', color: 'var(--brand-accent)' }}>{s.kicker}</span>
                <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', lineHeight: 'var(--lh-snug)', color: 'var(--text-primary)', margin: '8px 0 14px' }}>{s.title}</h2>
                <p style={{ color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', lineHeight: 'var(--lh-normal)', margin: '0 0 22px', maxWidth: 480 }}>{s.desc}</p>
                <ul style={{ margin: '0 0 26px', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontWeight: 600, fontSize: 15, color: 'var(--text-primary)' }}>
                      <span style={{ color: 'var(--brand-accent)', marginTop: 1 }}><Icon name="check" size={18} strokeWidth={2.2} /></span>{b}
                    </li>
                  ))}
                </ul>
                <Button variant="secondary" size="sm" onClick={() => onNav && onNav('contact')}>{s2.proposal}</Button>
              </div>
              <div style={{ order: flip ? 1 : 2, position: 'relative', minWidth: 0 }}>
                <div style={{ position: 'absolute', inset: flip ? '18px -18px -18px 18px' : '18px 18px -18px -18px', background: 'var(--surface-inverse)', borderRadius: 'var(--radius-lg)' }} />
                <div style={{ position: 'relative', aspectRatio: '16 / 9', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', background: 'var(--surface-inverse)' }}>
                  <img src={s.img} alt={s.title} style={{ position: 'absolute', inset: 0, display: 'block', width: '100%', height: '100%', objectFit: 'contain' }} />
                </div>
              </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: '60% auto', backgroundPosition: 'right center', backgroundRepeat: 'no-repeat', opacity: .9 }} />
        <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: 'clamp(57px, 8.5vw, 110px) var(--container-pad) clamp(44px, 6.5vw, 84px)', display: 'flex', gap: 40, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'space-between' }}>
          <div style={{ maxWidth: 520 }}>
            <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, margin: '0 0 12px', letterSpacing: 'var(--ls-tight)' }}>{s2.ctaTitle}</h2>
            <p style={{ color: 'rgba(255,255,255,.82)', fontSize: 'var(--fs-body-lg)', margin: 0 }}>{s2.ctaSub}</p>
          </div>
          <Button variant="inverse" size="lg" onClick={() => onNav && onNav('contact')}>{s2.ctaButton}</Button>
        </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.Services = Services;