// ReviewsPage.jsx — pagina Recensioni
function ReviewsPage({ onNavigate }) {
  return (
    <main>
      <ReviewsHero />
      <ReviewsGrid />
      <ReviewsNumbers />
      <ReviewsCTA onNavigate={onNavigate} />
    </main>);

}

/* SEZIONE 1 — Headline fiducia */
function ReviewsHero() {
  return (
    <section style={{ background: 'linear-gradient(180deg, #FFFFFF, #F7F3EF)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', opacity: 0.4, pointerEvents: 'none' }} />
      <div className="container" style={{ position: 'relative', padding: '88px 32px 72px' }}>
        <div style={{ maxWidth: 880 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 16 }}>Recensioni · La fiducia</div>
          <h1 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-1.2px', color: '#1A1A1A', marginBottom: 28, textWrap: 'balance' }}>
            Quello che <span className="ds-grad-text">dicono di noi</span>.
          </h1>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: '#3a3a3a', maxWidth: 720 }}>
            Una clientela fidelizzata dal 2009 non si costruisce con la pubblicità. Si costruisce facendo sempre la stessa cosa, fatta bene.
          </p>
        </div>
      </div>
    </section>);

}

/* SEZIONE 2 — Recensioni */
function ReviewsGrid() {
  // Recensioni reali Google — 5 stelle
  const reviews = [
  {
    text: '\u201CSono anni che frequento il solarium di Franco.. lo chiamo così perché non è un centro qualsiasi ma un posto accogliente e familiare\u2026 grande professionalità e igiene.. super consigliato.\u201D',
    name: 'Cliente Google',
    meta: 'Cliente abituale',
    source: 'Google',
    big: true
  },
  {
    text: '\u201CSono cliente da un paio di anni di questo solarium. Gli ambienti sono puliti, moderni e ben curati. Franco è sempre accogliente e disponibile. Lo consiglio vivamente a chi cerca un solarium di qualità e desidera un servizio professionale e rilassante.\u201D',
    name: 'Cliente Google',
    meta: 'Recensione verificata',
    source: 'Google'
  },
  {
    text: '\u201CLocale molto accogliente, titolare competente sull\u2019abbronzatura. Apparecchiature di ultima generazione. Lo consiglio vivamente.\u201D',
    name: 'Cliente Google',
    meta: 'Recensione verificata',
    source: 'Google'
  },
  {
    text: '\u201COttime lampade abbronzanti, locale pulito e curato, titolare simpatico e molto professionale, lo consiglio a tutti \u2014 ci ritornerò sicuramente.\u201D',
    name: 'Cliente Google',
    meta: 'Recensione verificata',
    source: 'Google'
  },
  {
    text: '\u201CAccoglienza perfetta\u2026 pulizia e ordine maniacale\u2026 professionalità impeccabile\u2026 abbronzatura fantastica\u2026. Per chi come me ama l\u2019abbronzatura non può non provare da Deux Soleil.\u201D',
    name: 'Cliente Google',
    meta: 'Cliente fidelizzato',
    source: 'Google'
  }];


  return (
    <section className="section" style={{ background: '#FFFFFF' }}>
      <div className="container">
        <div className="reviews-masonry">
          {reviews.map((r, i) => <BigReviewCard key={i} {...r} index={i} />)}
        </div>
      </div>
    </section>);

}

function BigReviewCard({ text, name, meta, source, index, big }) {
  const sourceColor = {
    'Google': '#1A1A1A',
    'Facebook': '#1A1A1A',
    'Raccolta diretta': '#85240E'
  }[source] || '#1A1A1A';
  return (
    <div style={{
      gridColumn: big ? 'span 2' : 'span 1',
      background: big ? 'var(--ds-grad-alba-diag)' : '#FFFFFF',
      borderRadius: 24,
      padding: big ? '40px 44px' : '32px 30px',
      boxShadow: big ? '0 12px 32px rgba(132,20,16,0.10)' : '0 2px 16px rgba(0,0,0,0.05)',
      border: big ? 'none' : '1px solid #F4EFE7',
      position: 'relative',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column'
    }}>
      {big && <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-light)', opacity: 0.45, pointerEvents: 'none' }} />}
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
        <div style={{ display: 'flex', gap: 4 }}>
          {[0, 1, 2, 3, 4].map((i) => <Icon.Star key={i} size={big ? 18 : 14} color="#F5A623" fill="#F5A623" />)}
        </div>
        <span style={{ padding: '4px 10px', borderRadius: 6, background: '#FFF5E8', color: '#85240E', fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 1.5, textTransform: 'uppercase' }}>5 stelle</span>
      </div>
      <p style={{ position: 'relative', flex: 1, fontFamily: "'League Spartan', sans-serif", fontWeight: 400, fontSize: big ? 26 : 18, lineHeight: 1.4, color: '#1A1A1A', marginBottom: 28, textWrap: 'pretty' }}>
        {text}
      </p>
      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ width: 36, height: 36, borderRadius: 999, background: 'var(--ds-grad-solar)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 14, flexShrink: 0 }}>
            {(name[1] || '?').toUpperCase()}
          </span>
          <div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontWeight: 500, fontSize: 14, color: '#1A1A1A' }}>{name}</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B', marginTop: 1 }}>{meta}</div>
          </div>
        </div>
        <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: sourceColor }}>· {source}</span>
      </div>
    </div>);

}

/* SEZIONE 3 — Numeri e loghi */
function ReviewsNumbers() {
  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' }}>
        <div style={{ maxWidth: 640, marginBottom: 48 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>I numeri</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' }}>Dal 2009, una sessione alla volta.

          </h2>
        </div>

        <div className="reviews-numbers" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 16, marginBottom: 56 }}>
          <div style={{ position: 'relative', overflow: 'hidden', padding: '40px 36px 40px', borderRadius: 20, background: 'var(--ds-grad-solar-diag)', color: '#fff' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)' }} />
            <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.85)', marginBottom: 16 }}>Da quanto siamo qui</div>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(56px, 7vw, 88px)', lineHeight: 0.95, letterSpacing: '-2px', marginBottom: 16 }}>Dal 2009</div>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 22, lineHeight: 1.15 }}>attivi a Carmagnola,<br />da sempre</div>
            </div>
          </div>

          <div style={{ padding: '40px 32px', borderRadius: 20, background: '#FFFFFF', boxShadow: '0 2px 16px rgba(0,0,0,0.05)' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 999, background: '#FFF5E8', marginBottom: 16 }}>
              <Icon.Star size={11} color="#F5A623" fill="#F5A623" />
              <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 10, fontWeight: 900, letterSpacing: 2, textTransform: 'uppercase', color: '#85240E' }}>Google reviews</span>
            </div>
            <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(40px, 5vw, 58px)', lineHeight: 1, color: '#1A1A1A', marginBottom: 14 }}>4,9</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.5, color: '#3a3a3a' }}>Valutazione media Google su recensioni a cinque stelle.</div>
          </div>

          <div style={{ padding: '40px 32px', borderRadius: 20, background: '#FFFFFF', boxShadow: '0 2px 16px rgba(0,0,0,0.05)' }}>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: '#E8621A', marginBottom: 16 }}>Per fototipo</div>
            <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(40px, 5vw, 58px)', lineHeight: 1, color: '#1A1A1A', marginBottom: 14 }}>4</div>
            <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, lineHeight: 1.5, color: '#3a3a3a' }}>Sessioni calibrate sui quattro fototipi della pelle.</div>
          </div>
        </div>

        {/* Loghi partner — Ergoline · Mia Cosmetici · Tecnosole */}
        <div style={{ padding: '32px 36px', borderRadius: 20, background: '#FFFFFF', border: '1px solid #F0EBE5' }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
            <div style={{ maxWidth: 380 }}>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: '#E8621A', marginBottom: 8 }}>I brand che scegliamo</div>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 20, color: '#1A1A1A', marginBottom: 4 }}>Macchinari e prodotti, uno per uno</div>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 13.5, lineHeight: 1.55, color: '#6B6B6B' }}>Lavoriamo solo con marchi che ci convincono: <strong style={{ color: '#1A1A1A', fontWeight: 600 }}>Ergoline</strong> e <strong style={{ color: '#1A1A1A', fontWeight: 600 }}>Tecnosole</strong> per i macchinari, <strong style={{ color: '#1A1A1A', fontWeight: 600 }}>Mia Cosmetici</strong> per i prodotti.</div>
            </div>
            <div className="partner-logos" style={{ display: 'flex', gap: 18, flexWrap: 'wrap', alignItems: 'center' }}>
              {[
              { name: 'Ergoline', src: 'assets/logo-ergoline.png', h: 60 },
              { name: 'Mia Cosmetici Professionali', src: 'assets/logo-mia-cosmetici.png', h: 76 },
              { name: 'Tecnosole', src: 'assets/logo-tecnosole.png', h: 54 }].
              map((b) =>
              <div key={b.name} style={{ width: 180, height: 110, padding: '14px 22px', borderRadius: 12, background: '#FFFFFF', border: '1px solid #F0EBE5', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 10px rgba(0,0,0,0.04)' }}>
                  <img src={b.src} alt={'Logo ' + b.name} style={{ height: b.h, width: 'auto', maxWidth: '100%', objectFit: 'contain', display: 'block' }} />
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* SEZIONE 4 — CTA rassicurante */
function ReviewsCTA({ onNavigate }) {
  return (
    <section style={{ background: '#FFFFFF', padding: '64px 0 88px' }}>
      <div className="container">
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 28, padding: '56px 56px', background: 'var(--ds-grad-brace-diag)', boxShadow: '0 20px 48px rgba(132,20,16,0.22)' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)' }} />
          <div style={{ position: 'absolute', top: -50, right: -50, opacity: 0.18 }}>
            <LogoMark size={320} style={{ filter: 'brightness(0) invert(1)' }} />
          </div>
          <div className="final-cta-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 32, 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: 14 }}>Vuoi essere il prossimo?</div>
              <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(32px, 4.4vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#FFFFFF', marginBottom: 16, textWrap: 'balance' }}>
                Passa da noi senza impegno.
              </h2>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)', maxWidth: 500 }}>
                Ci trovi in Corso Sacchirone 13, a Carmagnola. Prenota la tua seduta.
              </p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
              <button className="btn btn-primary" 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: 14 }}>
                <Icon.Phone size={14} color="rgba(255,255,255,0.9)" /> 011 972 1717
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

Object.assign(window, { ReviewsPage });