// L'Aqua Fure — Ybera Paris exclusivity band
function Ybera() {
  const { Sparkle, Phone, Check } = window.Icons;
  const benefits = ['Lissages brésiliens sans formol', 'Soins reconstructeurs en profondeur', 'Brillance & discipline longue durée'];
  return (
    <section style={{ position: 'relative', background: 'var(--surface-green)', overflow: 'hidden', padding: 'clamp(56px, 9vh, 104px) var(--gutter-page)' }}>
      {/* subtle gold hairline frame */}
      <div style={{ position: 'absolute', inset: 'clamp(14px,2vw,26px)', border: '1px solid var(--border-gold)', borderRadius: 'var(--radius-lg)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 'var(--container-md)', margin: '0 auto', textAlign: 'center' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--brand-gold)', margin: '0 0 22px' }}>
          <Sparkle size={15} /> Salon exclusif
        </span>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(38px, 6vw, 68px)', lineHeight: 1.04, letterSpacing: '-0.02em', color: 'var(--bone-50)', margin: '0 0 22px' }}>
          Ybera Paris
        </h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'clamp(16px, 2vw, 19px)', lineHeight: 1.65, color: 'var(--text-on-deep)', margin: '0 auto 34px', maxWidth: 560 }}>
          L'Aqua fure est salon exclusif Ybera Paris : une gamme professionnelle dédiée aux
          lissages brésiliens et aux soins spécifiques, pour des cheveux souples, sains et lumineux.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: '12px 26px', marginBottom: 38 }}>
          {benefits.map((b) => (
            <span key={b} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-sans)', fontSize: 14.5, fontWeight: 500, color: 'var(--bone-50)' }}>
              <Check size={16} stroke={2.2} style={{ color: 'var(--brand-gold)' }} /> {b}
            </span>
          ))}
        </div>
        <a href="tel:0466773511" style={{
          display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none',
          fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--char-950)',
          background: 'var(--brand-gold)', padding: '15px 30px', borderRadius: 'var(--radius-pill)',
          transition: 'transform var(--dur-fast), background var(--dur-base)',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--brass-400)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--brand-gold)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
          <Phone size={18} stroke={2} /> Réserver un lissage
        </a>
      </div>
    </section>
  );
}
window.Ybera = Ybera;