// Section animée "Think — Philosophie" — THINK + mot anglais qui défile, traduction en encart
const { useState: useStateTP, useEffect: useEffectTP } = React;

const THINK_PHRASES = [
  { en: 'Just think… !',        fr: 'Imaginez(-vous) un peu !',                  tag: 'Imaginer' },
  { en: 'Think again',          fr: 'reconsidérer',                              tag: 'Réfléchir' },
  { en: 'Think over',           fr: 'examiner, bien réfléchir',                  tag: 'Réfléchir' },
  { en: 'Think for oneself',    fr: 'se faire sa propre opinion',                tag: 'Raisonner' },
  { en: 'Think aloud',          fr: 'penser tout haut',                          tag: 'Raisonner' },
  { en: 'Think big',            fr: 'voir les choses en grand, être ambitieux',  tag: 'Raisonner' },
  { en: 'Think ahead',          fr: 'anticiper, prévoir',                        tag: 'Prévoir' },
];

function ThinkPhilosophy() {
  const [active, setActive] = useStateTP(0);

  useEffectTP(() => {
    const id = setInterval(() => {
      setActive(a => (a + 1) % THINK_PHRASES.length);
    }, 3200);
    return () => clearInterval(id);
  }, []);

  const cur = THINK_PHRASES[active];

  return (
    <section className="think-philo">
      <div className="think-philo__bg" aria-hidden="true">
        <span className="think-philo__ghost">think</span>
      </div>

      <div className="container think-philo__inner">
        <div className="think-philo__head">
          <span className="section-tag">Think — Philosophie</span>
        </div>

        <div className="think-philo__anim" key={active}>
          <div className="think-philo__en">
            <span className="think-philo__tag">{cur.tag}</span>
            <span className="think-philo__phrase">{cur.en}</span>
          </div>
          <div className="think-philo__card">
            <span className="think-philo__fr">{cur.fr}</span>
          </div>
        </div>

        <div className="think-philo__progress">
          {THINK_PHRASES.map((_, i) => (
            <button
              key={i}
              aria-label={`Phrase ${i + 1}`}
              className={`think-philo__pip ${i === active ? 'is-active' : ''}`}
              onClick={() => setActive(i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

window.ThinkPhilosophy = ThinkPhilosophy;