// Social proof — looks grid + testimonials
function Social() {
  const looks = [
    {
      bg: 'linear-gradient(135deg, #c44536 30%, #e89279 70%, #5f2e23)',
      badge: 'Robe Sézane',
      user: '@camille.r',
      cls: 'look-1',
      label: '“ravie du résultat”',
    },
    {
      bg: 'linear-gradient(135deg, #5f7a5a 0%, #8aa180 60%, #3a4a37)',
      badge: 'Tailleur Maje',
      user: '@léa.studio',
      cls: 'look-2',
      label: '',
    },
    {
      bg: 'linear-gradient(135deg, #d8c9a9 0%, #b08c5f 60%, #6d4a2a)',
      badge: 'Robe Rouje',
      user: '@sophie.h',
      cls: 'look-3',
      label: '“ça change tout.”',
    },
    {
      bg: 'linear-gradient(135deg, #2a2a2a 0%, #4a4a4a 50%, #1a1a1a)',
      badge: 'Set The Kooples',
      user: '@noor.f',
      cls: 'look-4',
      label: '',
    },
    {
      bg: 'linear-gradient(135deg, #f4d7c6 0%, #c48b6b 50%, #7a4a30)',
      badge: 'Robe Sandro',
      user: '@inès.m',
      cls: 'look-5',
      label: '',
    },
  ];

  const reviews = [
    {
      quote: "Avant Myrrae, je commandais 3 tailles et je renvoyais 2. Maintenant je commande pile la bonne. Je gagne du temps et zéro stress.",
      name: 'Camille R.',
      meta: 'Paris · utilise Myrrae depuis 4 mois',
      initials: 'CR',
    },
    {
      quote: "Le styliste IA m'a sorti une tenue pour un date que je n'aurais jamais osé acheter. J'ai eu trois compliments dans la soirée.",
      name: 'Léa M.',
      meta: 'Lyon · 28 ans',
      initials: 'LM',
    },
    {
      quote: "Je suis sceptique sur tout ce qui touche à l'IA. Là, le rendu sur ma vraie photo m'a bluffée. C'est moi qui porte le vêtement, pas un avatar.",
      name: 'Sophie H.',
      meta: 'Bordeaux · 32 ans',
      initials: 'SH',
    },
  ];

  return (
    <section className="social" id="avis">
      <div className="container">
        <div className="section-meta">
          <div className="section-num"><em style={{fontStyle:'italic'}}>v</em></div>
          <div className="section-label">Sur tes copines<span className="dot"></span>Et bientôt sur toi</div>
        </div>

        <h2>
          Comment <em>elles</em> shopent
          <br />
          depuis Myrrae.
        </h2>
        <p className="lede">
          Des essayages partagés, des achats validés, des retours en moins.
          La preuve, sur de vraies utilisatrices.
        </p>

        <div className="looks-grid">
          {looks.map((l, i) => (
            <div key={i} className={'look ' + l.cls}>
              <div className="placeholder-img" style={{background: l.bg}}>
                {l.label}
              </div>
              <span className="badge">{l.badge}</span>
              <span className="user">{l.user}</span>
            </div>
          ))}
        </div>

        <div className="testimonials">
          {reviews.map((r, i) => (
            <div key={i} className="testimonial">
              <blockquote>{r.quote}</blockquote>
              <div className="who">
                <div className="av">{r.initials}</div>
                <div>
                  <div className="name">{r.name}</div>
                  <div className="meta">{r.meta}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Social = Social;