// L'Aqua Fure — Hero (full screen, dark ambiance)
function Hero({ onNav }) {
  const { Phone, Star, Chevron } = window.Icons;
  return (
    <section id="accueil" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
      {/* Ambient photo */}
      <img src="assets/photos/salon-interior.png" alt="Intérieur du salon L'Aqua fure" style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
      }} />
      {/* Protection gradient */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(18,19,17,0.78) 0%, rgba(18,19,17,0.35) 38%, rgba(18,19,17,0.62) 72%, rgba(18,19,17,0.94) 100%)' }} />

      <div style={{ position: 'relative', maxWidth: 'var(--container-xl)', width: '100%', margin: '0 auto', padding: '0 var(--gutter-page) clamp(56px, 9vh, 110px)' }}>
        <div style={{ maxWidth: 720 }}>
          <div className="lf-fade" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '8px 14px 8px 10px', borderRadius: 'var(--radius-pill)', background: 'rgba(247,245,239,0.1)', border: '1px solid var(--border-deep)', backdropFilter: 'blur(6px)', marginBottom: 26 }}>
            <span style={{ display: 'inline-flex', gap: 1, color: 'var(--brand-gold)' }}>
              {[0,1,2,3,4].map(i => <Star key={i} size={15} />)}
            </span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--bone-50)' }}>4,7/5</span>
            <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text-on-deep-muted)' }}>· 35 avis Google</span>
          </div>

          <p className="lf-fade lf-d1" style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.26em', textTransform: 'uppercase', color: 'var(--brand-bright)', margin: '0 0 18px' }}>
            Salon de coiffure mixte · Le Grau-du-Roi
          </p>
          <h1 className="lf-fade lf-d1" style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(52px, 9vw, 104px)', lineHeight: 1.02, letterSpacing: '-0.02em', color: 'var(--bone-50)', margin: '0 0 22px' }}>
            L'Aqua&nbsp;fure
          </h1>
          <p className="lf-fade lf-d2" style={{ fontFamily: 'var(--font-sans)', fontSize: 'clamp(17px, 2.2vw, 21px)', lineHeight: 1.6, color: 'var(--text-on-deep)', margin: '0 0 38px', maxWidth: 560 }}>
            Coupe, couleur &amp; mèches, lissages brésiliens et soins d'exception dans un écrin
            noir et végétal. Un accueil chaleureux signé Ingrid &amp; Christophe.
          </p>

          <div className="lf-fade lf-d3" style={{ display: 'flex', flexWrap: 'wrap', gap: 14 }}>
            <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-bright)', padding: '16px 28px', borderRadius: 'var(--radius-pill)',
              transition: 'transform var(--dur-fast), background var(--dur-base)',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--teal-300)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--brand-bright)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              <Phone size={18} stroke={2} /> Appeler le salon
            </a>
            <button onClick={() => onNav('prestations')} style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 600, color: 'var(--bone-50)',
              background: 'rgba(247,245,239,0.08)', border: '1px solid var(--border-deep)',
              padding: '16px 26px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', backdropFilter: 'blur(6px)',
              transition: 'background var(--dur-base)',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(247,245,239,0.16)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(247,245,239,0.08)'}>
              Voir les prestations
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;