// HomePage.jsx — 6 sections from sito.md
function HomePage({ onNavigate }) {
  return (
    <main>
      <HomeHero onNavigate={onNavigate} />
      <HomeProblem />
      <HomeSolution />
      <HomeStorefront />
      <HomeServices onNavigate={onNavigate} />
      <HomeSocialProof />
      <HomeFinalCTA onNavigate={onNavigate} />
    </main>);

}

/* SEZIONE 1 — HERO */
function HomeHero({ onNavigate }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden', background: 'linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 35%, #F7F3EF 100%)' }}>
      <div className="container hero-grid" style={{ paddingTop: 88, paddingBottom: 80, display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '7px 14px', borderRadius: 999, background: '#FFFFFF', border: '1px solid #F0DCC5', boxShadow: '0 2px 8px rgba(0,0,0,0.04)', marginBottom: 24 }}>
            <span style={{ fontSize: 14 }}>☀️</span>
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 900, fontSize: 11, letterSpacing: 2.5, textTransform: 'uppercase', color: '#E8621A' }}>Solarium · Carmagnola · Dal 2009</span>
          </div>
          <h1 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(40px, 5.6vw, 68px)', lineHeight: 1.02, letterSpacing: '-1.5px', color: '#1A1A1A', marginBottom: 24, textWrap: 'balance' }}>
            Il colore che cambia<br />come <span className="ds-grad-text">ti senti</span>.
          </h1>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 18, lineHeight: 1.6, color: '#3a3a3a', marginBottom: 36, maxWidth: 520 }}>
            Deux Soleil nasce nel 2009 come attività di famiglia: Franco e suo fratello Gino, due fratelli con la stessa passione. Oggi è Franco a portarla avanti, calibrando ogni sessione sulla tua pelle — lo stesso risultato ogni volta, senza bruciature e senza sorprese.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
            <button className="btn btn-primary" onClick={() => onNavigate('servizi')}>
              Scopri come funziona <Icon.Arrow size={14} color="#fff" />
            </button>
            <button className="btn btn-secondary" onClick={() => onNavigate('contatti')}>Vieni a trovarci</button>
          </div>

          <div className="hero-trust" style={{ display: 'flex', gap: 36, marginTop: 48, paddingTop: 28, borderTop: '1px solid #E8E0D2', flexWrap: 'wrap' }}>
            {[
            ['2009', 'aperti a Carmagnola'],
            ['1', 'titolare, ti conosce per nome'],
            ['4', 'fototipi guidati']].
            map(([n, l]) =>
            <div key={l}>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 36, lineHeight: 1, color: '#E8621A' }}>{n}</div>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B', marginTop: 6 }}>{l}</div>
              </div>
            )}
          </div>
        </div>

        {/* Hero visual — la pelle al sole, l'esperienza Deux Soleil */}
        <div style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 24, overflow: 'hidden', boxShadow: '0 12px 40px rgba(26,26,26,0.18)' }}>
          <img
            src="assets/photo-spray-orange.jpg"
            alt="Pelle abbronzata al sole — protezione e cura, l'abbronzatura Deux Soleil"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '72% center' }} />

          {/* warm gradient overlay to tie to brand palette */}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0) 50%, rgba(26,26,26,0.6) 100%)', pointerEvents: 'none' }} />
          {/* subtle diagonal pattern signature */}
          <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 14px)', pointerEvents: 'none', mixBlendMode: 'overlay' }} />

          {/* Top-left chip */}
          <div style={{ position: 'absolute', top: 24, left: 24, display: 'inline-flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 999, background: 'rgba(255,255,255,0.95)', boxShadow: '0 4px 16px rgba(0,0,0,0.12)' }}>
            <span style={{ width: 6, height: 6, background: '#3DAA5C', borderRadius: 999 }} />
            <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#E8621A' }}>Aperto adesso</span>
          </div>

          {/* Bottom caption */}
          <div style={{ position: 'absolute', left: 28, bottom: 28, right: 28, color: '#FFFFFF' }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 6 }}>Solarium · Carmagnola</div>
            <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 20, color: '#FFFFFF', textShadow: '0 2px 8px rgba(0,0,0,0.35)' }}>Lun 14–20 · Mar–Sab 9–20</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: 'rgba(255,255,255,0.9)', marginTop: 2, textShadow: '0 1px 4px rgba(0,0,0,0.35)' }}>Corso Sacchirone, 13 — Carmagnola (TO)</div>
          </div>
        </div>
      </div>
    </section>);

}

/* SEZIONE 2 — PROBLEMA */
function HomeProblem() {
  return (
    <section className="section" style={{ position: 'relative', overflow: 'hidden', background: 'var(--ds-grad-brace-diag)', color: '#FFFFFF' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)', pointerEvents: 'none' }} />
      {/* offset sun mark watermark */}
      <div style={{ position: 'absolute', top: '-12%', right: '-6%', opacity: 0.12, pointerEvents: 'none' }}>
        <LogoMark size={420} style={{ filter: 'brightness(0) invert(1)' }} />
      </div>
      <div className="container problem-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 16 }}>Il problema</div>
          <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#FFFFFF', textWrap: 'balance' }}>
            Vuoi un bel colore. Ma non sai di chi fidarti.
          </h2>
        </div>
        <div>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 18, lineHeight: 1.7, color: 'rgba(255,255,255,0.9)' }}>
            Macchinari che non hai mai visto. Prodotti di cui non sai niente. Il rischio di uscire con una bruciatura invece di un'abbronzatura. Quando si tratta della tua pelle, vuoi certezza — non una scommessa ogni volta.
          </p>
        </div>
      </div>
    </section>);

}

/* SEZIONE 3 — SOLUZIONE */
function HomeSolution() {
  return (
    <section className="section" style={{ background: '#F7F3EF', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', opacity: 0.5, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', maxWidth: 920 }}>
        <div className="ds-eyebrow" style={{ marginBottom: 16 }}>La soluzione</div>
        <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.4vw, 52px)', lineHeight: 1.05, letterSpacing: '-1px', color: '#1A1A1A', marginBottom: 28, textWrap: 'balance' }}>
            Deux Soleil è il posto dove torni sempre.
        </h2>
        <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: '#3a3a3a', maxWidth: 760 }}>
          Dal 2009 a Carmagnola, costruiti sulla costanza. Franco valuta il tuo fototipo, sceglie la durata giusta per la tua pelle, ti guida se è la prima volta. Poi fai il tuo colore — uniforme, duraturo, senza sorprese. Come è andato bene l'ultima volta. Come andrà bene la prossima.
        </p>

        <div className="solution-steps" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {[
          ['01', 'Valuta', 'Franco guarda pelle, capelli, occhi. Definisce il tuo fototipo.', 'assets/photo-hat-face-cream.jpg', 'center 25%'],
          ['02', 'Calibra', 'Durata della sessione tarata su di te. Mai oltre il tuo limite.', 'assets/photo-calibra-spray.png', '35% center'],
          ['03', 'Ripete', 'La prossima volta si riparte da dove eri arrivato. Mai da zero.', 'assets/photo-bikini-tattoo.jpg', 'center 35%']].
          map(([n, t, d, img, pos]) =>
          <div key={n} style={{ borderRadius: 18, background: '#FFFFFF', boxShadow: '0 2px 16px rgba(0,0,0,0.05)', overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
              {/* Image strip with brand-tinted overlay + number badge */}
              <div style={{ position: 'relative', aspectRatio: '5/3', overflow: 'hidden' }}>
                <img src={img} alt={t + ' \u2014 ' + d.split('.')[0]}
                  style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: pos }} />
                {/* warm duotone wash for visual cohesion with brand */}
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg, rgba(245,166,35,0.18), rgba(232,98,26,0.10) 50%, rgba(200,40,30,0.18))', mixBlendMode: 'multiply' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0) 55%, rgba(26,26,26,0.45) 100%)' }} />
                <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 1px, transparent 1px, transparent 14px)', mixBlendMode: 'overlay' }} />
                {/* Number badge */}
                <div style={{ position: 'absolute', top: 14, left: 14, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.95)', boxShadow: '0 4px 14px rgba(0,0,0,0.15)' }}>
                  <span style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 12, letterSpacing: 2, color: '#E8621A' }}>{n}</span>
                </div>
              </div>
              {/* Text body */}
              <div style={{ padding: '22px 24px 26px' }}>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 22, color: '#1A1A1A', marginBottom: 8 }}>{t}</div>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.6, color: '#6B6B6B', margin: 0 }}>{d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* SEZIONE 3.5 — STOREFRONT (foto esterno + interno) */
function HomeStorefront() {
  const photos = [
    {
      src: 'assets/photo-vetrina-exterior.jpg',
      alt: 'Vetrina esterna Deux Soleil — Corso Sacchirone 13, Carmagnola',
      label: 'Da fuori',
      sub: "L\u2019insegna su Corso Sacchirone",
      pos: 'center center'
    },
    {
      src: 'assets/photo-vetrina-interior.jpg',
      alt: 'Ingresso interno Deux Soleil — sala d\u2019attesa',
      label: 'Da dentro',
      sub: "L\u2019ingresso e la sala d\u2019attesa",
      pos: '38% center'
    }];

  return (
    <section className="section" style={{ background: '#FFFFFF', position: 'relative', overflow: 'hidden' }}>
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 48 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>La nostra casa · Carmagnola</div>
          <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', textWrap: 'balance', margin: 0 }}>
            Lo stesso solarium, dal 2009.
          </h2>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.65, color: '#3a3a3a', marginTop: 18, maxWidth: 620 }}>
            A Carmagnola da sempre. Fuori l’insegna che riconosci, dentro lo spazio dove si fa il colore. Lo standard che ti aspetti, ogni volta che entri.
          </p>
        </div>

        <div className="storefront-diptych" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 22 }}>
          {photos.map((p) =>
          <div key={p.label} style={{ position: 'relative', aspectRatio: '4/5', borderRadius: 20, overflow: 'hidden', boxShadow: '0 12px 32px rgba(26,26,26,0.14)' }}>
              <img src={p.src} alt={p.alt}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: p.pos }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0) 50%, rgba(26,26,26,0.6) 100%)', pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 14px)', mixBlendMode: 'overlay', pointerEvents: 'none' }} />
              <div style={{ position: 'absolute', left: 24, bottom: 22, right: 24, color: '#FFFFFF' }}>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: 'rgba(255,255,255,0.78)', marginBottom: 5 }}>{p.sub}</div>
                <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 24, textShadow: '0 1px 6px rgba(0,0,0,0.45)' }}>{p.label}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* SEZIONE 4 — SERVIZI PRINCIPALI */
function HomeServices({ onNavigate }) {
  const services = [
  {
    icon: 'Face',
    category: 'Viso, décolleté e mani',
    title: 'Esafacciale',
    desc: 'Dedicato a viso, décolleté e mani. La durata è calibrata sul tuo fototipo — così ottieni il massimo colore possibile, senza rossori e senza rischi.'
  },
  {
    icon: 'Shower',
    category: 'Cabina verticale',
    title: 'Doccia Abbronzante',
    desc: 'Cabina verticale per un\u2019abbronzatura completa e uniforme. Comoda, veloce, efficace — adatta a tutti i fototipi, da chi parte da zero a chi vuole mantenere il colore tutto l\u2019anno.',
    featured: true
  },
  {
    icon: 'Bed',
    category: 'Lettino orizzontale',
    title: 'Lettino Abbronzante',
    desc: 'Il classico che non delude. Il lettino che ti dà colore senza bruciare, con la sessione tarata esattamente sulla tua pelle. Il risultato che ti aspetti — ogni volta.'
  }];


  return (
    <section className="section" style={{ background: '#FFFFFF' }}>
      <div className="container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div style={{ maxWidth: 640 }}>
            <div className="ds-eyebrow" style={{ marginBottom: 14 }}>I servizi</div>
            <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', textWrap: 'balance' }}>Tre modi per abbronzarsi. Stesso standard.

            </h2>
          </div>
          <a href="#servizi" onClick={(e) => {e.preventDefault();onNavigate('servizi');}}
          style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: '#E8621A', fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 14, paddingBottom: 4, borderBottom: '1px solid #E8621A' }}>
            Tutti i servizi <Icon.Arrow size={14} color="#E8621A" />
          </a>
        </div>

        <div className="services-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {services.map((s) => <HomeServiceCard key={s.title} {...s} onClick={() => onNavigate('servizi')} />)}
        </div>
      </div>
    </section>);

}

function HomeServiceCard({ icon, category, title, desc, featured, onClick }) {
  const [hover, setHover] = React.useState(false);
  const Glyph = Icon[icon] || Icon.Star;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onClick}
      style={{
        background: featured ? 'linear-gradient(180deg,#FFFFFF, #FFFBF6)' : '#FFFFFF',
        borderRadius: 20,
        padding: '32px 28px 28px',
        boxShadow: hover ? '0 12px 32px rgba(26,26,26,0.10)' : featured ? '0 8px 32px rgba(232,98,26,0.12)' : '0 2px 16px rgba(0,0,0,0.05)',
        border: featured ? '1px solid #F0DCC5' : '1px solid #F4EFE7',
        display: 'flex', flexDirection: 'column', gap: 14,
        position: 'relative',
        transition: 'transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        cursor: 'pointer'
      }}>
      {featured &&
      <span style={{ position: 'absolute', top: 20, right: 20, padding: '4px 10px', borderRadius: 6, background: 'var(--ds-grad-solar)', color: '#fff', fontFamily: "'League Spartan', sans-serif", fontWeight: 900, fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase' }}>Più richiesto</span>
      }
      <div style={{ width: 56, height: 56, borderRadius: 16, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: 'var(--ds-grad-solar)', boxShadow: '0 6px 16px rgba(232,98,26,0.28)' }}>
        <Glyph size={28} color="#FFFFFF" />
      </div>
      <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#E8621A' }}>{category}</div>
      <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 26, color: '#1A1A1A', lineHeight: 1.15 }}>{title}</div>
      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, color: '#6B6B6B', lineHeight: 1.6, flex: 1 }}>{desc}</p>
      <div style={{ height: 1, background: '#F0EBE5', margin: '4px 0' }} />
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B' }}>Da 10′ a 20′ · per fototipo</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#E8621A', fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 13 }}>
          Scopri <Icon.Arrow size={12} color="#E8621A" />
        </span>
      </div>
    </div>);

}

/* SEZIONE 5 — SOCIAL PROOF */
function HomeSocialProof() {
  // Recensioni reali Google — 5 stelle
  const reviews = [
  { name: 'Cliente Google', text: 'Sono anni che frequento il solarium di Franco.. lo chiamo così perché non è un centro qualsiasi ma un posto accogliente e familiare… grande professionalità e igiene.. super consigliato.', source: 'Google · ★★★★★' },
  { name: 'Cliente Google', text: 'Accoglienza perfetta… pulizia e ordine maniacale… professionalità impeccabile… abbronzatura fantastica… Per chi come me ama l\u2019abbronzatura non può non provare da Deux Soleil.', source: 'Google · ★★★★★' }];

  return (
    <section className="section" style={{ background: '#F7F3EF', position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{ position: 'relative' }}>
        <div className="socialproof-head" style={{ display: 'grid', gridTemplateColumns: '1fr 0.85fr', gap: 40, alignItems: 'center', marginBottom: 56 }}>
          <div>
            <div className="ds-eyebrow" style={{ marginBottom: 14 }}>Chi torna, lo dice</div>
            <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.2vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', textWrap: 'balance', margin: 0 }}>
              Chi è venuto una volta, è tornato.
            </h2>
            <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.65, color: '#3a3a3a', marginTop: 18, maxWidth: 480 }}>
              L’abbronzatura si vede. La fiducia, anche. È il motivo per cui dal 2009 i clienti ti chiamano per nome — e tornano.
            </p>
          </div>
          <div className="socialproof-photo" style={{ position: 'relative', aspectRatio: '5/4', borderRadius: 20, overflow: 'hidden', boxShadow: '0 12px 32px rgba(26,26,26,0.14)' }}>
            <img src="assets/photo-friends-beach.jpg" alt="Due amiche al mare — abbronzatura uniforme, sorrisi"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 30%' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(26,26,26,0) 60%, rgba(26,26,26,0.45) 100%)' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px, transparent 1px, transparent 14px)', mixBlendMode: 'overlay' }} />
            <div style={{ position: 'absolute', left: 20, bottom: 18, color: '#FFFFFF' }}>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', marginBottom: 4 }}>Stagione dopo stagione</div>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 18, textShadow: '0 1px 4px rgba(0,0,0,0.4)' }}>Stesso standard. Stesso colore.</div>
            </div>
          </div>
        </div>

        <div className="reviews-grid-2" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 22, marginBottom: 48 }}>
          {reviews.map((r, i) =>
          <ReviewCard key={i} {...r} />
          )}
        </div>

        {/* Trust number */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, padding: '36px 32px', borderRadius: 20, background: '#FFFFFF', boxShadow: '0 2px 16px rgba(0,0,0,0.05)' }} className="trust-row">
          {[
          ['Dal 2009', 'a Carmagnola, da sempre'],
          ['~4.500', 'sessioni l\u2019anno'],
          ['4,9', 'valutazione media Google']].

          map(([n, l], i) =>
          <div key={i} style={{ textAlign: 'center', padding: '8px 0', borderRight: i < 2 ? '1px solid #F0EBE5' : 'none' }}>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 3.4vw, 44px)', lineHeight: 1, color: '#E8621A', marginBottom: 8 }}>{n}</div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13, color: '#6B6B6B' }}>{l}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function ReviewCard({ name, text, source }) {
  return (
    <div style={{ background: '#FFFFFF', borderRadius: 20, padding: '32px 30px', boxShadow: '0 2px 16px rgba(0,0,0,0.05)', position: 'relative' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {[0, 1, 2, 3, 4].map((i) => <Icon.Star key={i} size={16} color="#F5A623" fill="#F5A623" />)}
        </div>
      </div>
      <p style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 400, fontSize: 20, lineHeight: 1.45, color: '#1A1A1A', marginBottom: 22, textWrap: 'pretty' }}>
        “{text}”
      </p>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 14, color: '#1A1A1A' }}>{name}</div>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, color: '#6B6B6B', marginTop: 2 }}>{source}</div>
        </div>
      </div>
    </div>);

}

/* SEZIONE 6 — CTA FINALE */
function HomeFinalCTA({ onNavigate }) {
  return (
    <section style={{ background: '#FFFFFF', padding: '64px 0 80px' }}>
      <div className="container">
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 28, background: 'var(--ds-grad-brace-diag)', boxShadow: '0 20px 48px rgba(132,20,16,0.25)' }}>
          <div className="final-cta-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', alignItems: 'stretch' }}>
            {/* Left: content */}
            <div style={{ position: 'relative', padding: '64px 56px 64px 64px' }}>
              <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)' }} />
              <div style={{ position: 'absolute', top: -60, left: -60, opacity: 0.16, pointerEvents: 'none' }}>
                <LogoMark size={320} style={{ filter: 'brightness(0) invert(1)' }} />
              </div>
              <div style={{ position: 'relative' }}>
                <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginBottom: 16 }}>Pronto a partire</div>
                <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(36px, 4.6vw, 56px)', lineHeight: 1.02, letterSpacing: '-1px', color: '#FFFFFF', marginBottom: 18, textWrap: 'balance' }}>
                  Pronto a fare il tuo colore?
                </h2>
                <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)', maxWidth: 460, marginBottom: 32 }}>
                  Prenota la tua seduta, soprattutto per il lettino. Ci trovi in Corso Sacchirone 13, a Carmagnola — Franco ti aspetta.
                </p>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
                  <button className="btn btn-primary btn-lg" style={{ background: 'linear-gradient(135deg,#FFFFFF,#F0C090)', color: '#85240E' }} onClick={() => onNavigate('contatti')}>
                    Vieni a trovarci <Icon.Arrow size={14} color="#85240E" />
                  </button>
                  <a href="tel:0119721717" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, color: 'rgba(255,255,255,0.9)', fontFamily: "'DM Sans', sans-serif", fontSize: 15 }}>
                    <Icon.Phone size={15} color="rgba(255,255,255,0.9)" /> oppure chiama 011 972 1717
                  </a>
                </div>
              </div>
            </div>

            {/* Right: photo */}
            <div className="final-cta-photo" style={{ position: 'relative', minHeight: 460, overflow: 'hidden' }}>
              <img src="assets/photo-arms-up-waves.jpg"
                alt="Donna al mare, braccia al cielo — abbronzatura e leggerezza"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 35%' }} />
              {/* warm tonal blend toward the brace gradient */}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(132,20,16,0.55) 0%, rgba(132,20,16,0.1) 35%, rgba(132,20,16,0) 100%)', mixBlendMode: 'multiply' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(196,120,10,0.18) 0%, rgba(196,120,10,0) 60%)' }} />
              <div style={{ position: 'absolute', inset: 0, background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 14px)', mixBlendMode: 'overlay' }} />
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { HomePage });