// Testimonials carousel

function TestimonialsSection(){
  const items = [
    { q:'Vivía con una rabia constante y a través de los ejercicios he podido descubrir por qué me sentía así. Esto me ayudó más de lo que esperaba.', n:'Andrea M.', tag:'Miembro desde enero' },
    { q:'Me ha encantado la idea de escribir, porque hay cosas que no te atreves a contarle a nadie, o por lo menos no con total sinceridad por miedo a ser juzgada.', n:'Paola Q.', tag:'Miembro desde marzo' },
    { q:'Sentía la cabeza llena todo el tiempo, esto fue un alivio.', n:'Valeria J.', tag:'Miembro desde febrero' },
    { q:'Ha sido muy bonito conocerme a través de la escritura. Me encantan los ejercicios de autoconocimiento, he recordado que he sido capaz de empezar de nuevo muchas veces.', n:'Juliana J.', tag:'Miembro desde diciembre' },
    { q:'Nunca había escrito, pero estos ejercicios me han ayudado porque me guían, así que es más fácil. Además, lo hago todos los días durante mi hora de lunch.', n:'Sofía L.', tag:'Miembro desde noviembre' },
    { q:'Me ha encantado este eBook porque todos los días tiene un ejercicio distinto. Cada día me dedico 15 minutos a mí misma, y eso me hace sentir que estoy haciendo algo por mí.', n:'Fabiola M.', tag:'Miembro desde octubre' },
  ];
  const [idx, setIdx] = React.useState(0);
  const [perView, setPerView] = React.useState(2);

  React.useEffect(()=>{
    const onResize = ()=> setPerView(window.innerWidth < 900 ? 1 : 2);
    onResize();
    window.addEventListener('resize', onResize);
    return ()=> window.removeEventListener('resize', onResize);
  },[]);

  const pages = Math.ceil(items.length / perView);
  const page = Math.floor(idx / perView);
  const next = ()=> setIdx((page+1) % pages * perView);
  const prev = ()=> setIdx(((page-1+pages) % pages) * perView);

  const visible = items.slice(page*perView, page*perView + perView);

  return (
    <section id="testimonios" className="sec-lg" style={{
      padding: '140px 0', background: 'var(--terracotta-deep)', color: 'var(--cream)', position:'relative', overflow:'hidden'
    }}>
      {/* giant serif marker */}
      <div aria-hidden className="serif-it" style={{
        position:'absolute', left: -20, top: -60, fontSize: 400, color:'rgba(253,235,221,0.06)',
        lineHeight: 0.8, pointerEvents:'none', userSelect:'none',
      }}>“</div>

      <div className="container" style={{ position:'relative', zIndex: 2 }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom: 60, gap: 32, flexWrap:'wrap' }}>
          <div>
            <Reveal><Eyebrow color="var(--coral)">Ya ellas lo probaron</Eyebrow></Reveal>
            <Reveal delay={100}>
              <h2 className="serif-it" style={{
                fontSize:'clamp(40px, 5vw, 72px)', lineHeight: 1.02, margin:'24px 0 0', color:'var(--cream)'
              }}>
                Lo que dicen las<br/>mujeres del <span style={{color:'var(--coral)'}}>Círculo</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={150}>
            <div style={{ display:'flex', gap: 12 }}>
              <CarouselButton onClick={prev} dir="prev"/>
              <CarouselButton onClick={next} dir="next"/>
            </div>
          </Reveal>
        </div>

        <Reveal>
          <div className="testim-grid" style={{ display:'grid', gridTemplateColumns:`repeat(${perView}, minmax(0,1fr))`, gap: 24 }}>
            {visible.map((t, i)=>(
              <div key={page+'-'+i} style={{
                background: 'rgba(253,235,221,0.06)',
                border: '1px solid rgba(253,235,221,0.15)',
                borderRadius: 4,
                padding: '40px 36px',
                display:'flex', flexDirection:'column',
                minHeight: 320,
                animation: 'cardIn .6s cubic-bezier(.2,.7,.2,1)',
                animationDelay: `${i*80}ms`,
                animationFillMode: 'both',
              }}>
                <div style={{ fontSize: 60, lineHeight: 0.3, height: 18, color:'var(--coral)', fontFamily:"'Cormorant Garamond', serif" }}>“</div>
                <p className="serif-it" style={{
                  fontSize: 22, lineHeight: 1.4, margin:'20px 0 auto', color:'var(--cream)', flex: 1,
                }}>
                  {t.q}
                </p>
                <div style={{ display:'flex', alignItems:'center', gap: 14, paddingTop: 28, borderTop:'1px solid rgba(253,235,221,0.15)' }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: '50%',
                    background:'var(--coral)', color:'var(--terracotta-deep)',
                    display:'grid', placeItems:'center',
                    fontFamily:"'Cormorant Garamond', serif", fontSize: 18, fontWeight: 600,
                  }}>
                    {t.n[0]}
                  </div>
                  <div>
                    <div style={{ fontWeight: 600, fontSize: 14 }}>{t.n}</div>
                    <div style={{ fontSize: 11, opacity: 0.7, letterSpacing:'0.1em', textTransform:'uppercase', marginTop: 2 }}>{t.tag}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        {/* dots */}
        <div style={{ display:'flex', justifyContent:'center', gap: 8, marginTop: 40 }}>
          {Array.from({length: pages}).map((_, i) => (
            <button key={i} onClick={()=>setIdx(i*perView)} aria-label={`Página ${i+1}`}
              style={{
                width: i === page ? 32 : 8, height: 8, borderRadius: 999,
                background: i === page ? 'var(--coral)' : 'rgba(253,235,221,0.3)',
                border:'none', cursor:'pointer', transition:'all .3s ease',
                padding: 0,
              }}/>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes cardIn { from { opacity: 0; transform: translateY(12px)} to { opacity:1; transform: none}}
      `}</style>
    </section>
  );
}

function CarouselButton({ onClick, dir }){
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} aria-label={dir}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        width: 52, height: 52, borderRadius: '50%',
        background: hover ? 'var(--coral)' : 'transparent',
        color: hover ? 'var(--terracotta-deep)' : 'var(--cream)',
        border: '1px solid rgba(253,235,221,0.3)',
        cursor:'pointer', display:'grid', placeItems:'center',
        transition: 'all .25s ease',
      }}>
      <svg width="18" height="14" viewBox="0 0 18 14" fill="none" style={{
        transform: dir === 'prev' ? 'rotate(180deg)' : 'none'
      }}>
        <path d="M 1 7 H 17 M 11 1 L 17 7 L 11 13" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

window.TestimonialsSection = TestimonialsSection;