// Apricus — Paroles de la communauté (défilement horizontal auto + flèches)
function TestimonialCard({ t }) {
  const D = 'var(--font-display)';
  return (
    <figure style={{ flex: '0 0 360px', width: 360, margin: 0,
      background: 'var(--apr-linen)', borderRadius: 'var(--radius-lg)', boxShadow: 'var(--shadow-md)',
      padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 13 }}>
      <div style={{ display: 'flex', gap: 3, color: 'var(--apr-zest)', fontSize: 15 }}>
        {[0, 1, 2, 3, 4].map(s => <Icon key={s} name="star" size={15} color="var(--apr-zest)" />)}
      </div>
      <blockquote style={{ fontFamily: D, fontWeight: 400, fontStyle: 'italic', fontSize: 18,
        lineHeight: 1.5, color: 'var(--apr-ink)', margin: 0 }}>« {t.quote} »</blockquote>
      <figcaption style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 12, paddingTop: 8 }}>
        <span style={{ width: 42, height: 42, borderRadius: '50%', background: 'var(--apr-citron-pale)',
          display: 'grid', placeItems: 'center', flex: 'none' }}>
          <Icon name="sun" size={22} color="var(--apr-honey)" />
        </span>
        <span style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontFamily: 'var(--font-script)', fontSize: 25, color: 'var(--apr-clay)', lineHeight: 1 }}>{t.name}</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--apr-ink-faint)', marginTop: 4 }}>{t.context}</span>
        </span>
      </figcaption>
    </figure>
  );
}

function Testimonials() {
  const ref = useReveal();
  const D = 'var(--font-display)';
  const trackRef = React.useRef(null);
  const pausedRef = React.useRef(false);

  // défilement automatique doux via requestAnimationFrame (robuste face au throttling CSS)
  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    let raf;
    const tick = () => {
      if (el && !pausedRef.current) {
        el.scrollLeft += 0.45;
        const half = el.scrollWidth / 2;
        if (half > 0 && el.scrollLeft >= half) el.scrollLeft -= half;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const nudge = (dir) => {
    const el = trackRef.current;
    if (el) el.scrollBy({ left: dir * 380, behavior: 'smooth' });
  };

  const arrow = (dir) => (
    <button onClick={() => nudge(dir === 'left' ? -1 : 1)} aria-label={dir === 'left' ? 'Précédent' : 'Suivant'}
      style={{ width: 50, height: 50, borderRadius: '50%', border: '1.5px solid rgba(251,244,230,0.5)',
        background: 'rgba(251,244,230,0.92)', cursor: 'pointer', display: 'grid', placeItems: 'center',
        color: 'var(--apr-ink)', boxShadow: 'var(--shadow-sm)', transition: 'all .15s var(--ease-out)', flex: 'none' }}
      onMouseEnter={e => { e.currentTarget.style.color = 'var(--apr-honey)'; }}
      onMouseLeave={e => { e.currentTarget.style.color = 'var(--apr-ink)'; }}>
      <Icon name={dir === 'left' ? 'arrow-left' : 'arrow-right'} size={20} />
    </button>
  );

  const loop = TEMOINS.concat(TEMOINS);

  return (
    <section ref={ref} style={{ position: 'relative', overflow: 'hidden', padding: '92px 0' }}>
      <VideoBg src="assets/ambiance-1.mp4" />
      <div style={{ position: 'relative', zIndex: 2 }}>
        <div className="apr-fade" style={{ textAlign: 'center', marginBottom: 44, padding: '0 40px' }}>
          <Eyebrow style={{ color: 'var(--apr-citron)', justifyContent: 'center' }}>Paroles de la communauté Apricus</Eyebrow>
          <h2 style={{ fontFamily: D, fontSize: 'clamp(32px,4.2vw,50px)', lineHeight: 1.04,
            letterSpacing: '-0.02em', color: 'var(--apr-cream)', margin: '14px 0 0',
            textShadow: '0 2px 24px rgba(40,30,10,0.4)' }}>
            <span style={{ fontWeight: 300, fontStyle: 'italic' }}>Elles vous partagent leur </span>
            <span style={{ fontWeight: 900 }}>expérience</span>
          </h2>
        </div>

        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 16, padding: '0 28px' }}>
          {arrow('left')}
          <div ref={trackRef} className="apr-tmarquee"
            onMouseEnter={() => { pausedRef.current = true; }}
            onMouseLeave={() => { pausedRef.current = false; }}
            style={{ flex: 1, display: 'flex', gap: 22, overflowX: 'auto', scrollbarWidth: 'none',
              msOverflowStyle: 'none', paddingBottom: 6 }}>
            {loop.map((t, i) => <TestimonialCard key={i} t={t} />)}
          </div>
          {arrow('right')}
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;