// L'Aqua Fure — Prestations (grid by category) + Ybera highlight band
function Prestations() {
  const { Scissors, Sparkle, Leaf, Phone, Star } = window.Icons;

  const categories = [
    { icon: Scissors, title: 'Coupe & coiffage', items: ['Coupe femme', 'Coupe homme', 'Coupe enfant', 'Brushing & mise en forme'] },
    { icon: Sparkle, title: 'Couleur & mèches', items: ['Coloration', 'Mèches & balayage', 'Patine & gloss', 'Couleur végétale'] },
    { icon: Leaf, title: 'Lissage brésilien', items: ['Lissage Ybera Paris', 'Lissage sans formol', 'Discipline & anti-frisottis'], featured: true },
    { icon: Star, title: 'Soins Ybera Paris', items: ['Soin profond reconstructeur', 'Soin brillance', 'Rituel cuir chevelu'] },
  ];

  return (
    <section id="prestations" style={{ background: 'var(--surface-deep)', padding: 'clamp(64px, 11vh, 130px) var(--gutter-page)' }}>
      <div style={{ maxWidth: 'var(--container-lg)', margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto clamp(40px, 6vh, 68px)' }}>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--brand-bright)', margin: '0 0 16px' }}>
            Prestations
          </p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(34px, 5vw, 54px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--bone-50)', margin: '0 0 18px' }}>
            Le savoir-faire d'un coiffeur au Grau-du-Roi
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.65, color: 'var(--text-on-deep-muted)', margin: 0 }}>
            Quatre univers, un même soin du détail. Les tarifs sont communiqués en salon
            et adaptés à la longueur et à la nature de vos cheveux.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 18 }}>
          {categories.map((cat) => {
            const Icon = cat.icon;
            return (
              <div key={cat.title} style={{
                position: 'relative',
                background: cat.featured ? 'linear-gradient(165deg, var(--green-800), var(--char-900))' : 'rgba(247,245,239,0.04)',
                border: cat.featured ? '1px solid var(--border-gold)' : '1px solid var(--border-deep)',
                borderRadius: 'var(--radius-lg)', padding: '28px 26px',
                display: 'flex', flexDirection: 'column', gap: 18,
              }}>
                {cat.featured && (
                  <span style={{ position: 'absolute', top: 18, right: 18, fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--brand-gold)', border: '1px solid var(--border-gold)', borderRadius: 'var(--radius-pill)', padding: '4px 10px' }}>
                    Exclusivité
                  </span>
                )}
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 46, height: 46, borderRadius: '50%', background: cat.featured ? 'var(--brand-gold)' : 'rgba(73,194,194,0.14)', color: cat.featured ? 'var(--char-950)' : 'var(--brand-bright)' }}>
                  <Icon size={22} />
                </span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 25, color: 'var(--bone-50)', margin: 0, lineHeight: 1.1 }}>{cat.title}</h3>
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 9 }}>
                  {cat.items.map((it) => (
                    <li key={it} style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'var(--text-on-deep-muted)' }}>
                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: cat.featured ? 'var(--brand-gold)' : 'var(--brand-bright)', flex: 'none' }} />
                      {it}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>

        <p style={{ textAlign: 'center', fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text-on-deep-muted)', margin: '28px 0 0' }}>
          <span style={{ color: 'var(--brand-gold)', fontWeight: 600 }}>À compléter :</span> grille tarifaire détaillée à intégrer avant publication.
        </p>
      </div>
    </section>
  );
}
window.Prestations = Prestations;