const portfolioArt = ['./assets/brand-1-manual.jpg', './assets/brand-2-logos-fuentes.jpg', './assets/brand-3-colores.jpg', './assets/brand-4-logo.jpg'];
function PortfolioCarousel({ labels, prevLabel, nextLabel }) {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = portfolioArt.length;
  React.useEffect(() => {
    if (paused) return;
    const tm = setInterval(() => setI((p) => (p + 1) % n), 4200);
    return () => clearInterval(tm);
  }, [paused, n]);
  const go = (d) => setI((p) => (p + d + n) % n);
  const navBtn = { position: 'absolute', top: '50%', transform: 'translateY(-50%)', width: 34, height: 34, borderRadius: '50%', border: '1px solid rgba(255,255,255,.35)', background: 'rgba(0,42,80,.55)', color: '#fff', cursor: 'pointer', display: 'grid', placeItems: 'center', fontSize: 16, lineHeight: 1, padding: 0, backdropFilter: 'blur(4px)' };
  return (
    <div onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: 'absolute', inset: 0, background: 'var(--surface-inverse)' }}>
      {portfolioArt.map((src, idx) => (
        <img key={src} src={src} alt={labels[idx]} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: idx === i ? 1 : 0, transition: 'opacity .6s ease' }} />
      ))}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '28px 16px 12px', background: 'linear-gradient(to top, rgba(0,42,80,.85), rgba(0,42,80,0))', color: '#fff', fontSize: 12, fontWeight: 600, letterSpacing: '.02em', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
        <span>{labels[i]}</span>
        <span style={{ display: 'flex', gap: 6 }}>
          {portfolioArt.map((src, idx) => (
            <button key={src} onClick={() => setI(idx)} aria-label={labels[idx]} style={{ width: idx === i ? 18 : 7, height: 7, borderRadius: 4, border: 'none', padding: 0, cursor: 'pointer', background: idx === i ? '#fff' : 'rgba(255,255,255,.45)', transition: 'width .25s ease' }} />
          ))}
        </span>
      </div>
      <button onClick={() => go(-1)} aria-label={prevLabel} style={{ ...navBtn, left: 10 }}>‹</button>
      <button onClick={() => go(1)} aria-label={nextLabel} style={{ ...navBtn, right: 10 }}>›</button>
    </div>
  );
}
function About({ Button, Badge, Icon, NavBar, Footer, onNav, t }) {
  const a = t.about;
  const pillarArt = ['pillar-speed.png', 'pillar-quality-light.png', 'pillar-agility.png'];
  const pillarIcons = ['gauge', 'shield', 'target'];
  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[2]}
        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', overflow: 'hidden', background: 'var(--surface-inverse)', color: '#fff', clipPath: 'polygon(0 0, 100% 0, 100% 92%, 0 100%)' }}>
        <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(./assets/pattern-circuit-lines.png)', backgroundSize: '75% auto', backgroundPosition: 'right top', 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(62px, 9.2vw, 120px)', display: 'grid', gridTemplateColumns: 'minmax(0,1.05fr) minmax(0,.95fr)', gap: 56, alignItems: 'center' }} data-grid="hero">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <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.kickerAbout}</span>
            </div>
            <h1 style={{ fontSize: 'var(--fs-display-lg)', fontWeight: 800, lineHeight: 'var(--lh-tight)', letterSpacing: 'var(--ls-tight)', margin: '0 0 18px' }}>{a.h1}</h1>
            <p style={{ fontSize: 'var(--fs-body-lg)', color: 'rgba(255,255,255,.84)', lineHeight: 'var(--lh-normal)', margin: '0 0 28px', maxWidth: 520 }}>{a.sub}</p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: '24px 28px', maxWidth: 420 }} data-grid="2">
              {a.stats.map((s) => (
                <div key={s.v}>
                  <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: 'var(--ls-tight)' }}>{s.k}</div>
                  <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.65)', letterSpacing: '.04em' }}>{s.v}</div>
                </div>
              ))}
            </div>
          </div>
          <div style={{ position: 'relative', minWidth: 0 }}>
            <div style={{ position: 'absolute', inset: '20px -20px -20px 20px', border: '1px solid rgba(255,255,255,.25)', borderRadius: 'var(--radius-lg)' }} />
            <window.AboutCarouselC height={'clamp(240px, 58vw, 380px)'} slides={a.heroSlides} prevLabel={a.prev} nextLabel={a.next} />
          </div>
        </div>
      </section>

      <section style={{ padding: 'clamp(40px, 5.8vw, 76px) var(--container-pad)', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, letterSpacing: 'var(--ls-tight)', color: 'var(--text-primary)', margin: '0 0 10px' }}>{a.pillarsTitle}</h2>
          <p style={{ color: 'var(--text-secondary)', fontSize: 'var(--fs-body-lg)', maxWidth: 560, margin: '0 0 40px' }}>{a.pillarsSub}</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0,1fr))', gap: 24 }} data-grid="3">
            {a.pillars.map((p, i) => (
              <div key={p.title} style={{
                position: 'relative', padding: 'clamp(17px, 2.5vw, 32px) clamp(15px, 2.2vw, 28px)', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
                background: i === 1 ? 'var(--brand-primary)' : 'var(--surface-alt)',
                color: i === 1 ? '#fff' : 'var(--text-primary)',
                boxShadow: i === 1 ? 'var(--shadow-lg)' : 'var(--shadow-sm)',
              }}>
                <div style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '72%', backgroundImage: 'url(./assets/' + pillarArt[i] + ')', backgroundSize: 'cover', backgroundPosition: 'right center', maskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 100%)', WebkitMaskImage: 'linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 40%, #000 100%)', pointerEvents: 'none' }} />
                <div style={{ position: 'relative', width: 56, height: 56, borderRadius: '50%', marginBottom: 20, display: 'grid', placeItems: 'center', background: i === 1 ? 'rgba(255,255,255,.16)' : '#fff', color: i === 1 ? '#fff' : 'var(--brand-primary)', boxShadow: i === 1 ? 'none' : 'var(--shadow-sm)' }}>
                  <Icon name={pillarIcons[i]} size={26} />
                </div>
                <h3 style={{ position: 'relative', fontSize: 'var(--fs-display-sm)', fontWeight: 700, margin: '0 0 10px', letterSpacing: 'var(--ls-tight)' }}>{p.title}</h3>
                <p style={{ position: 'relative', maxWidth: '86%', margin: 0, fontSize: 15, lineHeight: 'var(--lh-normal)', color: i === 1 ? 'rgba(255,255,255,.85)' : 'var(--text-secondary)' }}>{p.desc}</p>
                <span style={{ position: 'absolute', right: 20, bottom: 12, fontSize: 44, fontWeight: 800, color: 'transparent', WebkitTextStroke: i === 1 ? '1.5px rgba(255,255,255,.35)' : '1.5px var(--border-default)', lineHeight: 1 }}>{'0' + (i + 1)}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '0 var(--container-pad) clamp(40px, 5.8vw, 76px)', background: '#fff' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 28, alignItems: 'start' }} data-grid="2">
          <div>
            <div style={{ position: 'relative', height: 'clamp(200px, 45vw, 280px)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
              <video src="./assets/video-antes-y-despues.mp4" autoPlay loop muted playsInline style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <h3 style={{ fontSize: 19, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: 'var(--ls-tight)', margin: '16px 0 0' }}>{a.videoTitle}</h3>
          </div>
          <div>
            <div style={{ position: 'relative', height: 'clamp(200px, 45vw, 280px)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-md)' }}>
              <PortfolioCarousel labels={a.slides} prevLabel={a.prev} nextLabel={a.next} />
            </div>
            <h3 style={{ fontSize: 19, fontWeight: 700, color: 'var(--text-primary)', letterSpacing: 'var(--ls-tight)', margin: '16px 0 0' }}>{a.carouselTitle}</h3>
          </div>
        </div>
      </section>

      <section style={{ position: 'relative', background: 'var(--gradient-hero)', color: '#fff', overflow: 'hidden', clipPath: 'polygon(0 10%, 100% 0, 100% 100%, 0 100%)' }}>
        <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)', textAlign: 'center' }}>
          <p style={{ fontSize: 13, fontWeight: 700, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--brand-accent-light)', margin: '0 0 14px' }}>{a.ctaKicker}</p>
          <h2 style={{ fontSize: 'var(--fs-display-md)', fontWeight: 700, margin: '0 auto 26px', maxWidth: 620, letterSpacing: 'var(--ls-tight)' }}>{a.ctaTitle}</h2>
          <Button variant="inverse" size="lg" onClick={() => onNav && onNav('contact')}>{a.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.About = About;