function KeyInfo() {
  const images = [
    '../../assets/img-friends-03.jpg',
    '../../assets/img-friends-04.jpg',
  ];
  const [index, setIndex] = React.useState(0);

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

  const sections = [
    {
      title: 'Plazos y Requisitos',
      cards: [
        { accent:'', icon:'clock', title:'Hay plazo limitado', body:'La regularización extraordinaria 2026 tiene fecha límite.' },
        { accent:'cyan', icon:'scale', title:'No todos los casos son iguales', body:'Cada situación debe revisarse bien antes de dar pasos.' },
        { accent:'yellow', icon:'folder-check', title:'La documentación es clave', body:'Es importante empezar a reunir pruebas y documentos cuanto antes.' },
      ]
    },
    {
      title: 'Soporte y Garantías',
      cards: [
        { accent:'blue', icon:'git-branch', title:'Casos con más complejidad', body:'Asilo, familia, menores o antecedentes deben analizarse con cuidado.' },
        { accent:'green', icon:'messages-square', title:'ATU te orienta con lenguaje claro', body:'Queremos ayudarte a entender si esta vía puede encajar contigo.' },
      ]
    }
  ];

  return (
    <section className="section" style={{position:'relative', overflow:'hidden', color:'#fff'}}>
      {/* Background slider with strong overlay */}
      {images.map((img, i) => (
        <div 
          key={img} 
          style={{
            position:'absolute',inset:0,
            backgroundImage:`url(${img})`,
            backgroundSize:'cover',backgroundPosition:'center',
            opacity: i === index ? 0.4 : 0,
            transition: 'opacity 2s ease-in-out',
            zIndex: -2,
            filter: 'grayscale(30%)'
          }} 
        />
      ))}
      <div style={{
        position:'absolute',inset:0,
        background:'linear-gradient(to bottom, #072767, #0A3D91)',
        opacity: 0.9,
        zIndex: -1
      }} />

      <div className="container" style={{position:'relative'}}>
        <div style={{textAlign:'center',maxWidth:720,margin:'0 auto 56px'}}>
          <div className="eyebrow-pill" style={{background:'rgba(255,255,255,0.15)', color:'#fff', marginBottom:14}}>Información clave</div>
          <h2 style={{margin:0, color:'#fff'}}>Lo más importante que debes saber</h2>
          <p style={{marginTop:16, color:'rgba(255,255,255,0.75)', fontSize:18}}>Entender el proceso es el primer paso para una regularización exitosa.</p>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:48}}>
          {sections.map((sec, i) => (
            <div key={i}>
              <h3 style={{fontSize:20, fontWeight:700, color:'var(--atu-cyan)', marginBottom:24, textTransform:'uppercase', letterSpacing:'0.05em'}}>
                {sec.title}
              </h3>
              <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:20}}>
                {sec.cards.map((c,j) => (
                  <article key={j} className={`card card-accent ${c.accent}`} style={{padding:'28px', background:'rgba(255,255,255,0.05)', backdropFilter:'blur(10px)', border:'1px solid rgba(255,255,255,0.1)', borderTopWidth:4}}>
                    <div className={`icon-square ${c.accent === '' ? 'coral' : c.accent}`} style={{marginBottom:16}}>
                      <i data-lucide={c.icon} style={{width:22,height:22}}></i>
                    </div>
                    <h4 style={{fontSize:19,margin:'0 0 8px', color:'#fff'}}>{c.title}</h4>
                    <p style={{margin:0,fontSize:15,color:'rgba(255,255,255,0.7)',lineHeight:1.5}}>{c.body}</p>
                  </article>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.KeyInfo = KeyInfo;