// L'Aqua Fure — Avis clients (real Google reviews)
function Avis() {
  const { Star } = window.Icons;
  const reviews = [
    { name: 'Evelyne B.', text: "Première visite au salon. Très bien accueillie par Ingrid et Christophe. Satisfaite de mes mèches et de ma coupe par Christophe. Bonne ambiance ! Je recommande vivement." },
    { name: 'Sylvie B.', text: "Très agréable salon. Très à l'écoute et prix très raisonnable. Merci Ingrid et Christophe pour votre accueil." },
  ];
  return (
    <section id="avis" style={{ background: 'var(--surface-deepest)', padding: 'clamp(64px, 11vh, 130px) var(--gutter-page)' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 'clamp(36px,6vh,60px)' }}>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--brand-bright)', margin: '0 0 16px' }}>Avis clients</p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(32px, 5vw, 52px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--bone-50)', margin: '0 0 18px' }}>
            4,7/5 sur 35 avis Google
          </h2>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ display: 'inline-flex', gap: 2, color: 'var(--brand-gold)' }}>
              {[0,1,2,3,4].map(i => <Star key={i} size={18} />)}
            </span>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 20, maxWidth: 920, margin: '0 auto' }}>
          {reviews.map((r) => (
            <figure key={r.name} style={{ margin: 0, background: 'rgba(247,245,239,0.04)', border: '1px solid var(--border-deep)', borderRadius: 'var(--radius-lg)', padding: '30px 28px', display: 'flex', flexDirection: 'column', gap: 18 }}>
              <span style={{ display: 'inline-flex', gap: 2, color: 'var(--brand-gold)' }}>
                {[0,1,2,3,4].map(i => <Star key={i} size={16} />)}
              </span>
              <blockquote style={{ margin: 0, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500, fontSize: 'clamp(19px, 2.3vw, 23px)', lineHeight: 1.45, color: 'var(--bone-50)' }}>
                « {r.text} »
              </blockquote>
              <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 'auto' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: '50%', background: 'var(--char-700)', color: 'var(--brand-bright)', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 15, flex: 'none' }}>
                  {r.name[0]}
                </span>
                <span style={{ display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 600, color: 'var(--bone-50)' }}>{r.name}</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--text-on-deep-muted)' }}>Avis Google</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Avis = Avis;