// ServicesPage.jsx — pagina Servizi
function ServicesPage({ onNavigate }) {
  return (
    <main>
      <ServicesIntro />
      <ServiceDetail
        idx={1}
        emoji="\u2600\ufe0f"
        category="Viso, décolleté e mani"
        name="Esafacciale"
        gradient="linear-gradient(135deg, #F5A623, #E8621A, #C8281E)"
        image="assets/machine-esa-facciale.jpg"
        imagePosition="center 30%"
        imageLabel="Ergoline Ultra 8000"
        problem="Viso, décolleté e mani sono le zone più visibili — e le più delicate. Sbagliare la durata significa bruciature, non abbronzatura."
        how="Franco valuta il tuo fototipo e definisce la durata giusta per te, da 10 a 20 minuti. La cabina lavora su viso, mezzo busto e mani — un dettaglio estetico spesso trascurato, ma che si nota. Se torni regolarmente, la progressione delle sessioni è calibrata su come è andata la volta prima."
        result="Viso abbronzato in modo uniforme, décolleté e mani pronti per qualsiasi occasione. Il colore che si vede — senza rossori, senza indovinare."
        zones={['Viso', 'Décolleté', 'Mani']}
      />
      <ServiceDetail
        idx={2}
        reverse
        emoji="\ud83d\udebf"
        category="Cabine verticali"
        name="Doccia Abbronzante"
        gradient="linear-gradient(135deg, #C4780A, #A8420E, #851410)"
        images={[
          { src: 'assets/machine-doccia-ksun-orange-new.jpg', position: 'center center', label: 'Tecnosole Ksun · 01' },
          { src: 'assets/machine-doccia-ksun-viola-new.jpg', position: 'center center', label: 'Tecnosole Ksun · 02' },
        ]}
        splitDirection="horizontal"
        problem="Vuoi un'abbronzatura completa, su tutto il corpo. Ma hai bisogno di qualcosa di pratico, veloce e che funzioni davvero."
        how="Due cabine verticali Ksun a tua disposizione. Sessione da 10 a 20 minuti calibrata sul tuo fototipo. Stai in piedi, ti muovi liberamente. Le lampade coprono tutto il corpo in modo omogeneo — niente zone che rimangono indietro."
        result="Abbronzatura uniforme su tutto il corpo, duratura nel tempo. Adatta a tutti i fototipi, da chi parte da zero a chi vuole mantenere il colore durante tutto l'anno."
        zones={['Corpo intero', 'Posizione verticale', 'Due cabine disponibili']}
      />
      <ServiceDetail
        idx={3}
        emoji="\ud83d\udec1"
        category="Lettini orizzontali"
        name="Lettino Abbronzante"
        gradient="linear-gradient(135deg, #F7F3EF, #E0D0BB, #F0C090)"
        light
        images={[
          { src: 'assets/machine-lettino-ergoline.jpg', position: 'center 28%', label: 'Ergoline Affinity 880 S' },
          { src: 'assets/machine-lettino-ergoline-2.jpg', position: 'center 35%', label: 'Ergoline Avanguard 600' },
        ]}
        problem="Il lettino ha una reputazione: o funziona bene o ti bruci. La differenza la fa chi calibra la sessione sulla tua pelle — non chi ti mette dentro e conta i minuti."
        how="Due lettini Ergoline orizzontali a tua disposizione. Sessione da 10 a 20 minuti in base al tuo fototipo e alla progressione delle sedute precedenti. Franco tiene traccia di come è andata — così ogni sessione parte dal punto giusto, non da zero."
        result="Il colore che ti aspetti, uniforme e duraturo. Lo stesso risultato che ti ha fatto tornare l'ultima volta."
        zones={['Corpo intero', 'Posizione orizzontale', 'Due lettini disponibili']}
      />
      <ServicesProcess onNavigate={onNavigate} />
    </main>
  );
}

/* SEZIONE 1 — Intro */
function ServicesIntro() {
  return (
    <section style={{ background: 'var(--ds-grad-brace-diag)', color: '#FFFFFF', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)', pointerEvents: 'none' }} />
      {/* watermark sole — stessa firma di Home/Prodotti */}
      <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" style={{ position: 'relative', padding: '88px 32px 80px' }}>
        <div style={{ maxWidth: 880 }}>
          <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 16 }}>I servizi</div>
          <h1 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(38px, 5vw, 64px)', lineHeight: 1.02, letterSpacing: '-1.2px', color: '#FFFFFF', marginBottom: 28, textWrap: 'balance' }}>
            Cosa possiamo fare per te.
          </h1>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 19, lineHeight: 1.7, color: 'rgba(255,255,255,0.92)', maxWidth: 780 }}>
            Forse hai già provato altri solarium e non ti ha convinto il risultato. O forse è la prima volta e non sai da dove iniziare. In entrambi i casi, il punto di partenza è lo stesso: capire la tua pelle, scegliere la sessione giusta, e ottenere il colore che cerchi — senza bruciature e senza sorprese.
          </p>
          <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontStyle: 'italic', color: 'rgba(255,255,255,0.7)', marginTop: 18 }}>
            Il servizio è riservato ai maggiori di 18 anni.
          </p>

          {/* Anchor list */}
          <div className="anchor-list" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              ['#esa', 'Face', 'Esafacciale', 'Viso, décolleté e mani'],
              ['#doccia', 'Shower', 'Doccia Abbronzante', 'Due cabine verticali'],
              ['#lettino', 'Bed', 'Lettino Abbronzante', 'Due lettini orizzontali'],
            ].map(([href, ic, t, sub]) => {
              const Glyph = Icon[ic] || Icon.Star;
              return (
              <a key={href} href={href}
                 onClick={(e) => { e.preventDefault(); const el = document.querySelector(href); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }}
                 style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 20px', borderRadius: 14, background: '#FFFFFF', border: '1px solid rgba(255,255,255,0.35)', boxShadow: '0 4px 14px rgba(132,20,16,0.18)', transition: 'transform 240ms, box-shadow 240ms' }}
                 onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 8px 22px rgba(132,20,16,0.28)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 4px 14px rgba(132,20,16,0.18)'; }}>
                <span style={{ width: 40, height: 40, borderRadius: 12, background: '#FFF3E8', border: '1px solid #F4E4D2', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Glyph size={21} color="#E8621A" />
                </span>
                <span style={{ flex: 1 }}>
                  <span style={{ display: 'block', fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 15, color: '#1A1A1A' }}>{t}</span>
                  <span style={{ display: 'block', fontFamily: "'DM Sans', sans-serif", fontSize: 12, color: '#6B6B6B', marginTop: 2 }}>{sub}</span>
                </span>
                <Icon.Arrow size={14} color="#E8621A" />
              </a>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* Generic service detail block */
function ServiceDetail({ idx, reverse, emoji, category, name, gradient, light, image, imagePosition, imageLabel, images, splitDirection, problem, how, result, zones }) {
  const anchorId = { 1: 'esa', 2: 'doccia', 3: 'lettino' }[idx];
  const bg = idx % 2 === 0 ? '#F7F3EF' : '#FFFFFF';
  const photos = (images && images.length > 1) ? images : (image ? [{ src: image, position: imagePosition, label: imageLabel }] : []);
  const isHorizontal = splitDirection === 'horizontal';
  return (
    <section id={anchorId} className="section" style={{ background: bg, scrollMarginTop: 80 }}>
      <div className="container service-detail" style={{ display: 'grid', gridTemplateColumns: reverse ? '1.05fr 0.95fr' : '0.95fr 1.05fr', gap: 56, alignItems: 'center' }}>
        {/* Visual side — single photo or diptych */}
        <div style={{ order: reverse ? 2 : 1, position: 'relative', aspectRatio: '4/5', borderRadius: 24, overflow: 'hidden', background: '#1A1A1A', boxShadow: light ? '0 12px 32px rgba(26,26,26,0.10)' : '0 12px 40px rgba(26,26,26,0.18)' }}>
          {photos.length === 1 && (
            <React.Fragment>
              <img src={photos[0].src} alt={'Macchinario ' + name + ' \u2014 Deux Soleil'}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: photos[0].position || 'center' }} />
              {photos[0].label && (
                <div style={{ position: 'absolute', top: 18, left: 18, padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.95)', boxShadow: '0 4px 14px rgba(0,0,0,0.18)' }}>
                  <span style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 12, letterSpacing: 1.5, color: '#E8621A' }}>{photos[0].label}</span>
                </div>
              )}
            </React.Fragment>
          )}
          {photos.length >= 2 && (
            <div style={{ position: 'absolute', inset: 0, display: 'grid', gridTemplateColumns: isHorizontal ? '1fr 1fr' : '1fr', gridTemplateRows: isHorizontal ? '1fr' : '1fr 1fr', gap: 3, background: light ? '#FFFFFF' : '#1A1A1A' }}>
              {photos.slice(0, 2).map((p, i) => (
                <div key={i} style={{ position: 'relative', overflow: 'hidden' }}>
                  <img src={p.src} alt={'Macchinario ' + name + ' (' + (i + 1) + ' di 2) \u2014 Deux Soleil'}
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: p.position || 'center' }} />
                  {p.label && (
                    <div style={{ position: 'absolute', top: 14, left: 14, padding: '5px 11px', borderRadius: 999, background: 'rgba(255,255,255,0.95)', boxShadow: '0 4px 12px rgba(0,0,0,0.18)' }}>
                      <span style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 11, letterSpacing: 1.5, color: '#E8621A' }}>{p.label}</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}
        </div>

        {/* Content side */}
        <div style={{ order: reverse ? 1 : 2 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>{category}</div>
          <h2 style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(34px, 4vw, 48px)', lineHeight: 1.05, letterSpacing: '-0.8px', color: '#1A1A1A', marginBottom: 32, textWrap: 'balance' }}>
            {name}
          </h2>

          <ServiceQA label="Il problema" body={problem} />
          <ServiceQA label="Come funziona" body={how} />
          <ServiceQA label="Il risultato" body={result} accent />

          {/* Zone tags */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 28 }}>
            {zones.map(z => (
              <span key={z} style={{ padding: '7px 14px', borderRadius: 999, background: bg === '#FFFFFF' ? '#F7F3EF' : '#FFFFFF', border: '1px solid #F0EBE5', color: '#1A1A1A', fontFamily: "'DM Sans', sans-serif", fontSize: 12.5, fontWeight: 500 }}>{z}</span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ServiceQA({ label, body, accent }) {
  return (
    <div style={{ position: 'relative', paddingLeft: 22, marginBottom: 22 }}>
      <span style={{ position: 'absolute', left: 0, top: 8, bottom: 8, width: 3, borderRadius: 2, background: accent ? 'var(--ds-grad-solar)' : '#E8E0D2' }} />
      <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 2.5, textTransform: 'uppercase', color: accent ? '#E8621A' : '#6B6B6B', marginBottom: 8 }}>{label}</div>
      <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 16, lineHeight: 1.65, color: '#1A1A1A' }}>{body}</p>
    </div>
  );
}

/* SEZIONE FINALE — Come lavoriamo */
function ServicesProcess({ onNavigate }) {
  const steps = [
    { n: '01', t: 'Prenota', d: 'Chiama Franco al 011 972 1717 oppure scrivici su Instagram. Bastano due righe per fissare il momento giusto.' },
    { n: '02', t: 'Entri e ti accoglie Franco', d: 'Se è la prima volta, valuta il tuo fototipo — pelle, capelli, occhi — e definisce la durata di partenza giusta per te. Nessun modulo, nessuna procedura complicata.' },
    { n: '03', t: 'Scegli la sessione', d: 'Lettino, doccia o Esafacciale. Se vuoi, Franco ti consiglia il prodotto giusto da usare prima o dopo, in base alla tua pelle.' },
    { n: '04', t: 'Esci con il tuo colore', d: 'Fai la tua sessione, esci con il tuo colore. E la prossima volta, si riparte esattamente da dove si era arrivati.' },
  ];
  return (
    <section className="section" style={{ background: '#FFFFFF' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <div className="ds-eyebrow" style={{ marginBottom: 14 }}>Come lavoriamo</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' }}>
            Come funziona venire da noi.
          </h2>
        </div>

        <div className="process-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginBottom: 56 }}>
          {steps.map((s, i) => (
            <div key={s.n} style={{ position: 'relative', padding: '32px 30px 32px', borderRadius: 20, background: '#F7F3EF', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'var(--ds-grad-solar)' }} />
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 56, lineHeight: 1, color: 'transparent', WebkitTextStroke: '1.5px #E8621A', marginBottom: 22, marginTop: 6 }}>{s.n}</div>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 700, fontSize: 22, color: '#1A1A1A', marginBottom: 10 }}>{s.t}</div>
              <p style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, lineHeight: 1.65, color: '#3a3a3a' }}>{s.d}</p>
            </div>
          ))}
        </div>

        {/* CTA bar */}
        <div style={{ position: 'relative', overflow: 'hidden', borderRadius: 24, padding: '40px 48px', background: 'var(--ds-grad-tramonto-d)', boxShadow: '0 12px 40px rgba(132,20,16,0.20)' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'var(--ds-pattern-dark)' }} />
          <div className="process-cta" style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
            <div style={{ maxWidth: 560 }}>
              <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: 11, fontWeight: 900, letterSpacing: 3, textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 10 }}>Indirizzo</div>
              <div style={{ fontFamily: "'League Spartan', sans-serif", fontWeight: 800, fontSize: 'clamp(24px, 3vw, 32px)', lineHeight: 1.1, color: '#fff', textWrap: 'balance' }}>
                Vieni a trovarci in Corso Sacchirone 13, Carmagnola.
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" style={{ background: 'linear-gradient(135deg,#FFFFFF,#F0C090)', color: '#85240E' }} onClick={() => onNavigate('contatti')}>
                Contatti e mappa <Icon.Arrow size={14} color="#85240E" />
              </button>
              <a href="tel:0119721717" className="btn" style={{ background: 'transparent', color: '#fff', border: '2px solid rgba(255,255,255,0.35)', padding: '11px 22px' }}>
                <Icon.Phone size={14} color="#fff" /> 011 972 1717
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesPage });