const aboutSlides = [
  { src: './assets/nos-1-proposito.png', title: 'Ingeniería con propósito', sub: 'Producto y negocio alineados desde el primer sprint' },
  { src: './assets/nos-2-software.png', title: 'Software robusto', sub: 'Código mantenible, probado y listo para escalar' },
  { src: './assets/nos-3-estrategia.png', title: 'Estrategias inteligentes', sub: 'Decisiones guiadas por datos, no por intuición' },
  { src: './assets/nos-4-social.png', title: 'Social media que crece', sub: 'Comunidades activas y demanda medible para su marca' },
];

function useCarousel(n, ms) {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setI((p) => (p + 1) % n), ms);
    return () => clearInterval(t);
  }, [paused, n, ms]);
  return { i, setI, paused, setPaused, go: (d) => setI((p) => (p + d + n) % n) };
}

const arrowBtn = {
  position: 'absolute', top: '50%', transform: 'translateY(-50%)', width: 36, height: 36, borderRadius: '50%',
  border: '1px solid rgba(255,255,255,.4)', background: 'rgba(0,24,50,.55)', color: '#fff', cursor: 'pointer',
  display: 'grid', placeItems: 'center', fontSize: 17, lineHeight: 1, padding: 0, backdropFilter: 'blur(6px)', zIndex: 3,
};

/* A — Crossfade con barra de título */
function AboutCarouselA({ height = 380 }) {
  const c = useCarousel(aboutSlides.length, 4200);
  return (
    <div onMouseEnter={() => c.setPaused(true)} onMouseLeave={() => c.setPaused(false)} style={{ position: 'relative', height, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', background: 'var(--surface-inverse)' }}>
      {aboutSlides.map((s, idx) => (
        <img key={s.src} src={s.src} alt={s.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: idx === c.i ? 1 : 0, transition: 'opacity .7s ease' }} />
      ))}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '54px 22px 18px', background: 'linear-gradient(to top, rgba(0,20,40,.92), rgba(0,20,40,0))', color: '#fff' }}>
        <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: 'var(--ls-tight)' }}>{aboutSlides[c.i].title}</div>
        <div style={{ fontSize: 13, color: 'rgba(255,255,255,.72)', marginTop: 3 }}>{aboutSlides[c.i].sub}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
          {aboutSlides.map((s, idx) => (
            <button key={s.src} onClick={() => c.setI(idx)} aria-label={s.title} style={{ width: idx === c.i ? 22 : 8, height: 8, borderRadius: 4, border: 'none', padding: 0, cursor: 'pointer', background: idx === c.i ? 'var(--brand-accent-light)' : 'rgba(255,255,255,.4)', transition: 'width .25s ease' }} />
          ))}
        </div>
      </div>
      <button onClick={() => c.go(-1)} aria-label="Anterior" style={{ ...arrowBtn, left: 12 }}>‹</button>
      <button onClick={() => c.go(1)} aria-label="Siguiente" style={{ ...arrowBtn, right: 12 }}>›</button>
    </div>
  );
}

/* B — Ken Burns con índice numerado */
function AboutCarouselB({ height = 380 }) {
  const c = useCarousel(aboutSlides.length, 5000);
  return (
    <div onMouseEnter={() => c.setPaused(true)} onMouseLeave={() => c.setPaused(false)} style={{ position: 'relative', height, borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', background: 'var(--surface-inverse)' }}>
      {aboutSlides.map((s, idx) => (
        <div key={s.src} style={{ position: 'absolute', inset: 0, opacity: idx === c.i ? 1 : 0, transition: 'opacity .9s ease' }}>
          <img src={s.src} alt={s.title} style={{ width: '100%', height: '100%', objectFit: 'cover', transform: idx === c.i ? 'scale(1.12)' : 'scale(1)', transition: 'transform 6s linear' }} />
        </div>
      ))}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(105deg, rgba(0,18,38,.78) 0%, rgba(0,18,38,.15) 58%, rgba(0,18,38,.45) 100%)' }} />
      <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 3, background: 'rgba(255,255,255,.18)' }}>
        <div style={{ height: '100%', width: ((c.i + 1) / aboutSlides.length * 100) + '%', background: 'var(--brand-accent-light)', transition: 'width .5s ease' }} />
      </div>
      <div style={{ position: 'absolute', left: 26, bottom: 26, right: 96, color: '#fff' }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: '.2em', textTransform: 'uppercase', color: 'var(--brand-accent-light)', marginBottom: 8 }}>0{c.i + 1} / 0{aboutSlides.length}</div>
        <div style={{ fontSize: 22, fontWeight: 800, lineHeight: 1.2, letterSpacing: 'var(--ls-tight)' }}>{aboutSlides[c.i].title}</div>
        <div style={{ fontSize: 13.5, color: 'rgba(255,255,255,.75)', marginTop: 6 }}>{aboutSlides[c.i].sub}</div>
      </div>
      <div style={{ position: 'absolute', right: 20, top: 0, bottom: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12 }}>
        {aboutSlides.map((s, idx) => (
          <button key={s.src} onClick={() => c.setI(idx)} aria-label={s.title} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontSize: 12, fontWeight: 700, letterSpacing: '.08em', color: idx === c.i ? '#fff' : 'rgba(255,255,255,.45)', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: idx === c.i ? 20 : 10, height: 2, background: idx === c.i ? 'var(--brand-accent-light)' : 'rgba(255,255,255,.4)', transition: 'width .25s ease' }} />0{idx + 1}
          </button>
        ))}
      </div>
    </div>
  );
}

/* C — Panel apilado con miniaturas */
function AboutCarouselC({ height = 380, slides, prevLabel = 'Anterior', nextLabel = 'Siguiente' }) {
  const items = (slides || []).length === aboutSlides.length ? aboutSlides.map((s, k) => ({ src: s.src, title: slides[k].title, sub: slides[k].sub })) : aboutSlides;
  const c = useCarousel(items.length, 4600);
  const thumbH = 62;
  return (
    <div onMouseEnter={() => c.setPaused(true)} onMouseLeave={() => c.setPaused(false)} style={{ position: 'relative', height, display: 'grid', gridTemplateRows: '1fr ' + thumbH + 'px', gap: 12 }}>
      <div style={{ position: 'relative', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', background: 'var(--surface-inverse)' }}>
        {items.map((s, idx) => (
          <img key={s.src} src={s.src} alt={s.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: idx === c.i ? 1 : 0, transform: idx === c.i ? 'translateX(0)' : 'translateX(3%)', transition: 'opacity .55s ease, transform .55s ease' }} />
        ))}
        <div style={{ position: 'absolute', left: 18, bottom: 16, right: 18, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 14 }}>
          <div style={{ background: 'rgba(0,20,40,.72)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,.18)', borderRadius: 'var(--radius-md)', padding: '12px 16px', color: '#fff', maxWidth: '78%' }}>
            <div style={{ fontSize: 16.5, fontWeight: 700, letterSpacing: 'var(--ls-tight)' }}>{items[c.i].title}</div>
            <div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.72)', marginTop: 2 }}>{items[c.i].sub}</div>
          </div>
        </div>
        <button onClick={() => c.go(-1)} aria-label={prevLabel} style={{ ...arrowBtn, left: 12 }}>‹</button>
        <button onClick={() => c.go(1)} aria-label={nextLabel} style={{ ...arrowBtn, right: 12 }}>›</button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(' + items.length + ', minmax(0,1fr))', gap: 10 }}>
        {items.map((s, idx) => (
          <button key={s.src} onClick={() => c.setI(idx)} aria-label={s.title} style={{ padding: 0, border: idx === c.i ? '2px solid var(--brand-accent-light)' : '1px solid rgba(255,255,255,.25)', borderRadius: 10, overflow: 'hidden', cursor: 'pointer', background: 'none', opacity: idx === c.i ? 1 : .55, transition: 'opacity .25s ease' }}>
            <img src={s.src} alt="" style={{ display: 'block', width: '100%', height: thumbH - 6, objectFit: 'cover' }} />
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { aboutSlides, AboutCarouselA, AboutCarouselB, AboutCarouselC });