const Avatar = ({ seed, dark }) => {
  const bgs = ['#FFC93C', '#9AE6B4', '#4D6BFF', '#FF5A4A', '#FDEED1'];
  const bg = bgs[seed % bgs.length];
  const skin = ['#F4C896', '#E8B181', '#D4A373', '#C89274', '#B8845D'][seed % 5];
  return (
    <svg viewBox="0 0 52 52">
      <rect width="52" height="52" fill={bg}/>
      <circle cx="26" cy="21" r="9" fill={skin}/>
      <path d={`M8 52 C8 38, 16 ${32 + (seed%3)}, 26 ${32 + (seed%3)} C36 ${32 + (seed%3)}, 44 38, 44 52 Z`} fill="#1B1840"/>
      <circle cx="23" cy="21" r="1.4" fill="#1B1840"/>
      <circle cx="29" cy="21" r="1.4" fill="#1B1840"/>
      <path d="M22 26 Q26 28, 30 26" fill="none" stroke="#1B1840" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  );
};

const Temoignages = () => {
  const items = [
    {
      size: 3,
      quote: <>J'ai <em>remplacé ma coach</em> de productivité par ce PDF. Désolée Sarah 😅</>,
      name: 'Marion L.', role: 'Fondatrice · Studio design · Paris', seed: 1
    },
    {
      size: 3,
      quote: <>Le prompt #07 m'a fait encaisser <em>3 400€</em> de factures en une aprem. J'aurais jamais osé tout seul.</>,
      name: 'Kevin D.', role: 'Consultant indé · Lyon', seed: 2
    },
    {
      size: 2,
      quote: <>Diagnostiquée TDAH à 34 ans. <em>Ça parle mon cerveau.</em></>,
      name: 'Inès B.', role: 'E-commerce · Bordeaux', seed: 3
    },
    {
      size: 2,
      quote: <>Enfin quelqu'un qui écrit comme si mon cerveau <em>était pas défectueux.</em></>,
      name: 'Thomas V.', role: 'Freelance SaaS · Nantes', seed: 4
    },
    {
      size: 2,
      quote: <>J'ai fait 12 formations prod. Ce PDF, <em>c'est le seul truc</em> que j'ouvre encore.</>,
      name: 'Léa M.', role: 'Solopreneur · Lille', seed: 5
    },
  ];

  return (
    <section className="temoignages" data-screen-label="07 Témoignages">
      <div className="shell">
        <div className="section-label"><span className="num">§ 06</span><span>ils l'ont adopté</span></div>
        <div className="temoignages-head">
          <h2 className="reveal">
            Ils ont troqué leur méthode<br/>
            contre une <span className="highlight">équipe IA.</span>
          </h2>
        </div>

        <div className="temoignages-grid">
          {items.map((t, i) => (
            <div className={`temoignage size-${t.size} reveal`} key={i} style={{transitionDelay:`${i*80}ms`}}>
              <div className="temoignage-quote">« {t.quote} »</div>
              <div className="temoignage-person">
                <div className="temoignage-avatar">
                  <Avatar seed={t.seed} dark={t.size === 3}/>
                </div>
                <div>
                  <div className="temoignage-name">{t.name}</div>
                  <div className="temoignage-role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Temoignages = Temoignages;