function Hero() {
  const images = [
    '../../assets/img-friends-05.jpg',
    '../../assets/img-friends-01.jpg',
    '../../assets/img-friends-02.jpg',
  ];
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % images.length);
    }, 6000); // 6 seconds for dynamic feel
    return () => clearInterval(timer);
  }, []);

  return (
    <header style={{position:'relative',overflow:'hidden',paddingBottom:40,minHeight:480}}>
      {/* Background images + transitions */}
      {images.map((img, i) => (
        <div 
          key={img} 
          style={{
            position:'absolute',inset:0,
            backgroundImage:`url(${img})`,
            backgroundSize:'cover',backgroundPosition:'center 30%',
            opacity: i === index ? 1 : 0,
            transition: 'opacity 1.2s ease-in-out',
            zIndex: i === index ? -2 : -3
          }} 
        />
      ))}
      
      <div style={{
        position:'absolute',inset:0,
        background:'linear-gradient(105deg, rgba(7,39,103,.92) 0%, rgba(15,78,192,.78) 45%, rgba(15,78,192,.35) 100%)',
        zIndex: -1
      }} />

      <div className="container" style={{position:'relative',padding:'88px 24px 96px',maxWidth:1120}}>
        <div style={{maxWidth:680}} className="fade-up">
          <div className="eyebrow-pill" style={{background:'rgba(255,255,255,.14)',color:'#fff',marginBottom:20}}>
            Plan Migrantes · 2026
          </div>
          <h1 style={{color:'#fff',fontSize:'clamp(34px,5vw,58px)',margin:'0 0 18px',lineHeight:1.05,letterSpacing:'-0.025em',fontWeight:800,textWrap:'balance'}}>
            Regularización extraordinaria 2026 con GRUPO ATU
          </h1>
          <p style={{color:'rgba(255,255,255,.92)',fontSize:20,lineHeight:1.5,maxWidth:620,margin:'0 0 14px',textWrap:'pretty'}}>
            Infórmate mejor sobre los requisitos, resuelve tus dudas y deja tus datos para que revisemos tu caso de forma personalizada.
          </p>
          <p style={{color:'rgba(255,255,255,.78)',fontSize:15,lineHeight:1.55,maxWidth:620,margin:'0 0 32px'}}>
            En ATU llevamos más de 40 años acompañando a personas que llegan a España en busca de un futuro mejor.
          </p>
          <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
            <a href="#form" className="btn btn-primary">
              Quiero que revisen mi caso <i data-lucide="arrow-right" style={{width:18,height:18}}></i>
            </a>
            <a href="#form" className="btn btn-hero-secondary" style={{padding:'16px 26px', borderRadius:'var(--r-pill)', border:'1.5px solid rgba(255,255,255,0.4)', backdropFilter: 'blur(8px)'}}>
              Consigue la guía de regularización gratuita
            </a>
          </div>
        </div>

        {/* Dot navigation */}
        <div style={{
          position: 'absolute', bottom: 32, left: 24, 
          display: 'flex', gap: 8, zIndex: 10 
        }}>
          {images.map((_, i) => (
            <button
              key={i}
              onClick={() => setIndex(i)}
              style={{
                width: i === index ? 24 : 8,
                height: 8,
                borderRadius: 4,
                border: 0,
                background: i === index ? 'var(--atu-cyan)' : 'rgba(255,255,255,0.4)',
                cursor: 'pointer',
                transition: 'all 0.3s ease'
              }}
              title={`Slide ${i + 1}`}
            />
          ))}
        </div>
      </div>
    </header>
  );
}
window.Hero = Hero;