// L'Aqua Fure — "Le salon" : ambiance + équipe
function Salon() {
  const { Leaf, MapPin, Check } = window.Icons;
  const team = [
    { name: 'Ingrid', role: 'Accueil & coiffure' },
    { name: 'Christophe', role: 'Coiffeur' },
  ];
  const points = ['Coupes femme & homme', 'Mèches & colorations', 'Lissages brésiliens', 'Soins spécifiques'];

  return (
    <section id="salon" style={{ background: 'var(--surface-page)', padding: 'clamp(64px, 11vh, 130px) var(--gutter-page)' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 'clamp(36px, 6vw, 80px)', alignItems: 'center' }}>
        {/* Text */}
        <div>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--brand-accent)', margin: '0 0 18px', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <Leaf size={15} /> Le salon
          </p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(34px, 5vw, 54px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '0 0 24px' }}>
            Un écrin noir &amp; végétal,<br />un accueil qui fait la différence
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7, color: 'var(--text-muted)', margin: '0 0 18px', maxWidth: 520 }}>
            Murs anthracite, mobilier noir, parquet foncé et plantes vertes baignées de lumière
            naturelle : L'Aqua fure cultive une atmosphère soignée, calme et chaleureuse au cœur
            du Centre Commercial Le Trident.
          </p>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.7, color: 'var(--text-muted)', margin: '0 0 32px', maxWidth: 520 }}>
            Ingrid et Christophe vous reçoivent avec attention et prennent le temps de comprendre
            vos envies — pour un résultat à votre image, à chaque visite.
          </p>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px 20px', maxWidth: 460 }}>
            {points.map((p) => (
              <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 22, height: 22, borderRadius: '50%', background: 'var(--green-100)', color: 'var(--brand-accent)', flex: 'none' }}>
                  <Check size={13} stroke={2.4} />
                </span>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 500, color: 'var(--text-body)' }}>{p}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Image + team */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-lg)', aspectRatio: '4 / 3' }}>
            <img src="assets/photos/salon-interior.png" alt="Salon L'Aqua fure" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {team.map((t) => (
              <div key={t.name} style={{ display: 'flex', alignItems: 'center', gap: 13, background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '14px 16px' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46, borderRadius: '50%', background: 'var(--char-900)', color: 'var(--brand-bright)', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, flex: 'none' }}>
                  {t.name[0]}
                </span>
                <span style={{ display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, color: 'var(--text-strong)', lineHeight: 1.1 }}>{t.name}</span>
                  <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'var(--text-muted)' }}>{t.role}</span>
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Salon = Salon;