const { useState: useStateSlider, useEffect: useEffectSlider } = React;

const SLIDES_ES = [
{ cat: 'Estructuración Corporativa', headline: 'Tu negocio con un pie donde necesites, para lo que lo necesites', img: 'assets/slide-4.png' },
{ cat: 'Planificación Fiscal', headline: 'Eficiencia y eficacia fiscal e impositiva, limpio y sin grises, estés donde estés', img: 'assets/slide-1.png' },
{ cat: 'Cripto & Tokens', headline: 'Vos construís el proyecto cripto. Nosotros nos aseguramos de que la regulación no lo frene.', img: 'assets/slide-3.png' },
{ cat: 'Compliance AML', headline: 'Programas de compliance que sobreviven auditorías y fiscalizaciones, sin quedarse en el papel', img: 'assets/slide-2.png' }];


const SLIDES_EN = [
{ cat: 'Corporate Structuring', headline: 'Your business with a foothold wherever you need, for whatever you need it.', img: 'assets/slide-4.png' },
{ cat: 'Tax Planning', headline: 'Fiscal and tax efficiency — clean and without grey areas, wherever you are.', img: 'assets/slide-1.png' },
{ cat: 'Crypto & Tokens', headline: 'You build the crypto project. We make sure regulation doesn’t hold it back.', img: 'assets/slide-3.png' },
{ cat: 'AML Compliance', headline: 'Compliance programs that survive audits and inspections, not just paperwork.', img: 'assets/slide-2.png' }];


const Slider = ({ lang }) => {
  const slides = lang === 'es' ? SLIDES_ES : SLIDES_EN;
  const [active, setActive] = useStateSlider(0);
  const [paused, setPaused] = useStateSlider(false);

  useEffectSlider(() => {
    if (paused) return;
    const id = setInterval(() => setActive((i) => (i + 1) % slides.length), 6500);
    return () => clearInterval(id);
  }, [paused, slides.length]);

  return (
    <section
      className="hero-slider"
      data-screen-label="01b Slider"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: 'relative',
        width: '100%',
        height: '78vh',
        minHeight: 540,
        maxHeight: 820,
        overflow: 'hidden',
        background: '#0a0c0f',
        borderTop: 0,
        borderBottom: '1px solid var(--line-soft)',
        padding: 0
      }}>
      
      {/* preload all */}
      {slides.map((s, i) =>
      <div
        key={i}
        aria-hidden={i !== active}
        style={{
          position: 'absolute',
          inset: 0,
          backgroundImage: `linear-gradient(180deg, rgba(10,12,15,0.55) 0%, rgba(10,12,15,0.7) 100%), linear-gradient(90deg, rgba(10,12,15,0.85) 0%, rgba(10,12,15,0.55) 50%, rgba(10,12,15,0.4) 100%), url('${s.img}')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
          opacity: i === active ? 1 : 0,
          transition: 'opacity 1100ms cubic-bezier(.4,0,.2,1)',
          willChange: 'opacity'
        }} />

      )}

      {/* Content (left-aligned, like Carey Olsen) */}
      <div
        style={{
          position: 'relative',
          height: '100%',
          width: '100%',
          maxWidth: 1320,
          margin: '0 auto',
          padding: '0 48px',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center'
        }}>
        
        {slides.map((s, i) =>
        <div
          key={i}
          aria-hidden={i !== active}
          style={{
            position: 'absolute',
            left: 48,
            right: 48,
            maxWidth: 920,
            opacity: i === active ? 1 : 0,
            transform: i === active ? 'translateY(0)' : 'translateY(14px)',
            transition: 'opacity 900ms cubic-bezier(.4,0,.2,1), transform 900ms cubic-bezier(.4,0,.2,1)',
            transitionDelay: i === active ? '180ms' : '0ms',
            pointerEvents: i === active ? 'auto' : 'none'
          }}>
          
            <div
            style={{
              fontFamily: "'IBM Plex Mono', monospace",

              letterSpacing: '0.28em',
              textTransform: 'uppercase',
              color: '#ffffff',
              marginBottom: 28,
              opacity: 0.85, fontSize: "12px"
            }}>
            
              <span style={{
              display: 'inline-block',
              width: 28,
              height: 1,
              background: '#ffffff',
              verticalAlign: 'middle',
              marginRight: 16,
              opacity: 0.6
            }} />
              {s.cat}
            </div>
            <h2
            style={{
              fontFamily: "'Cormorant Garamond', Georgia, serif",
              fontWeight: 400,
              color: '#ffffff',
              fontSize: 'clamp(34px, 4.6vw, 64px)',
              lineHeight: 1.08,
              letterSpacing: '-0.018em',
              textWrap: 'balance'
            }}>
            
              {s.headline}
            </h2>
          </div>
        )}

        {/* Dots — bottom right */}
        <div
          style={{
            position: 'absolute',
            right: 48,
            bottom: 36,
            display: 'flex',
            alignItems: 'center',
            gap: 14
          }}>
          
          <span
            style={{
              fontFamily: "'IBM Plex Mono', monospace",
              fontSize: 10,
              letterSpacing: '0.22em',
              color: 'rgba(255,255,255,0.55)',
              marginRight: 6
            }}>
            
            {String(active + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
          </span>
          {slides.map((_, i) =>
          <button
            key={i}
            onClick={() => setActive(i)}
            aria-label={`Slide ${i + 1}`}
            style={{
              width: i === active ? 28 : 10,
              height: 2,
              padding: 0,
              margin: 0,
              border: 0,
              background: i === active ? '#ffffff' : 'rgba(255,255,255,0.35)',
              cursor: 'pointer',
              transition: 'all 400ms cubic-bezier(.4,0,.2,1)'
            }} />

          )}
        </div>
      </div>
    </section>);

};

window.Slider = Slider;