/* global React, Eyebrow, Reveal, PhotoBlock, Mark, CTABanner, CountUp, PinkCircle, CTAButton, VideoTestimonialCard */
// Page 4 — RISULTATI

function RisultatiHero({ onCTA }) {
  const videos = [
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b82d999f3b10088dcf60.mp4',
    null,
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b82d5a7f2177766e0ac4.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b82e5a7f2177766e0adc.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b82ffe894fbda0d17bac.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822999f3b10088dce89.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822fe894fbda0d17994.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b82279d918ba60a0ecab.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b82dfe894fbda0d17b57.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822999f3b10088dce8a.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822c4688ed9cd1fce1d.mp4',
    'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822449f78709ed5a977.mp4',
  ];

  return (
    <section className="bg-radial section-hero" style={{ padding: '120px 30px 80px' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto 72px', textAlign: 'center' }}>
        <Reveal>
          <Eyebrow style={{ marginBottom: 18 }}>Le loro storie</Eyebrow>
          <h1 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(38px, 5.4vw, 68px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', color: 'var(--color-text-primary)',
            margin: 0, maxWidth: 980, marginLeft: 'auto', marginRight: 'auto', textWrap: 'balance',
          }}>Guarda i risultati delle oltre <em style={{ fontStyle: 'italic', color: 'var(--color-primary)' }}><CountUp end={180} /></em> donne che hanno scelto Progetto Forma</h1>
        </Reveal>
      </div>

      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="testi-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {videos.map((src, i) => {
            if (src === null) {
              return (
                <Reveal key={i} delay={i * 40} className="hide-mobile">
                  <article style={{
                    background: 'var(--color-accent-pink)',
                    borderRadius: 12, padding: '28px 28px 26px',
                    aspectRatio: '9 / 16',
                    boxSizing: 'border-box',
                    display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start',
                    gap: 18,
                  }}>
                    <div style={{
                      fontFamily: 'Fraunces, serif', fontWeight: 600, fontSize: 72,
                      lineHeight: 0.6, color: 'var(--color-primary)', opacity: 0.5,
                    }}>"</div>
                    <p style={{
                      fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
                      fontSize: 'clamp(22px, 2.4vw, 30px)', lineHeight: 1.25,
                      color: 'var(--color-text-primary)', margin: 0,
                      textWrap: 'balance',
                    }}>Ascolta le parole di chi ha già scelto.</p>
                  </article>
                </Reveal>
              );
            }
            return (
              <Reveal key={i} delay={i * 40}>
                <VideoTestimonialCard src={src} />
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}


function BeforeAfterMarquee() {
  const photos = Array.from({ length: 21 }, (_, i) => `assets/foto/prima-dopo/p${i + 1}.jpeg`);
  const containerRef = React.useRef(null);
  const swiperRef = React.useRef(null);

  React.useEffect(() => {
    if (!containerRef.current || !window.Swiper) return;
    swiperRef.current = new window.Swiper(containerRef.current, {
      slidesPerView: 'auto',
      spaceBetween: 22,
      loop: true,
      grabCursor: true,
      freeMode: true,
      speed: 8000,
      allowTouchMove: true,
      autoplay: {
        delay: 0,
        disableOnInteraction: false,
        pauseOnMouseEnter: false,
      },
    });
    return () => {
      try { swiperRef.current && swiperRef.current.destroy(true, true); } catch (e) {}
      swiperRef.current = null;
    };
  }, []);

  return (
    <section style={{ background: 'var(--color-background)', padding: '80px 0', overflow: 'hidden' }}>
      <div style={{ padding: '0 30px 56px' }}>
        <Reveal style={{ textAlign: 'center', maxWidth: 940, margin: '0 auto' }}>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(36px, 4.2vw, 50px)', lineHeight: 1.15,
            letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
            margin: 0,
          }}>Le trasformazioni delle nostre clienti</h2>
        </Reveal>
      </div>

      <div style={{
        maxWidth: 1370, margin: '0 auto',
        WebkitMaskImage: 'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
        maskImage:       'linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%)',
      }}>
        <div ref={containerRef} className="swiper pf-marquee-swiper">
          <div className="swiper-wrapper">
            {photos.map((src, i) => (
              <div key={i} className="swiper-slide">
                <div className="pf-marquee-card" style={{
                  borderRadius: 12, overflow: 'hidden',
                  boxShadow: 'var(--shadow-sm)',
                  background: 'var(--color-surface-pure)',
                }}>
                  <img
                    src={src}
                    alt=""
                    draggable={false}
                    style={{
                      width: '100%', height: '100%', objectFit: 'cover',
                      display: 'block', pointerEvents: 'none',
                      userSelect: 'none', WebkitUserSelect: 'none',
                    }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── 4. REVIEW WALL (recensioni Google reali — solo femminili) ─ */
function ReviewWall() {
  const reviews = [
    { name: "Anastasia Cilli", date: "un anno fa", avatar: "rose", text: "Mi sono avvicinata a Progetto Forma oltre un anno fa spinta dalla necessità di riprendere in mano il controllo della mia forma e ho scoperto questi tre baldi giovani pieni di competenze, professionalità e, soprattutto, empatia: Marco che con poche e selezionate parole ha saputo dapprima vincere la mia paura e diffidenza nel mettermi in gioco in un mondo, quello della palestra, a me totalmente estraneo e poi durante il percorso nei momenti salienti ha guidato, dal punto di vista tecnico, ma non solo, la mia evoluzione; Francesco la cui paziente e costante presenza mi ha supportato, nel rispetto dei miei tempi e dei mie limiti, ma sempre nella prospettiva di farmeli superare e, riuscendoci, giorno dopo giorno ma sempre con il sorriso e con grande sensibilità; e infine Davide, che ha l'ingrato compito di dover gestire uno dei grandi piaceri della vita che è il cibo, ma che ha incredibilmente saputo insegnarmi un nuovo modo di approcciarsi alla nutrizione, in un'ottica di equilibrio e di rispetto verso il proprio corpo in una prospettiva di benessere senza rinunciare alla gioia! E quando apro quella porta, posso dire di sentirmi sempre un po' a casa!" },
    { name: "Sara Marescotti", date: "11 mesi fa", avatar: "sand", text: "Vorrei condividere la mia esperienza con Progetto Forma, uno studio di Personal Training e Nutrizione che davvero, ha superato ogni mia aspettativa. Lo staff è composto da professionisti altamente qualificati che seguono ogni cliente con grande attenzione. Non stilano programmi standardizzati, ma realizzano un vero e proprio percorso personalizzato dove ogni dettaglio viene considerato. Ciò che però distingue Progetto Forma è l'atmosfera che si respira: si tratta proprio di una seconda famiglia che ti fa sentire supportato e motivato, sempre." },
    { name: "Irene Maraner", date: "un anno fa", avatar: "taupe", text: "Mi sono trovata subito in un ambiente speciale: un luogo dove non si è solo seguiti da professionisti, ma soprattutto da persone molto empatiche, stimolanti, energiche e, soprattutto, presenti. A Progetto Forma le persone ti seguono passo dopo passo, non ti lasciano mai da solo e ti supportano costantemente, spingendoti a dare sempre qualcosa in più, senza mai farti sentire \"sbagliato\" o sotto pressione. Ogni allenamento è vissuto come un momento di crescita, dove il dialogo e il confronto sono sempre aperti e costruttivi." },
    { name: "Francesca Canella", date: "un anno fa", avatar: "warm", text: "Ho iniziato il percorso in Progetto Forma dopo vari anni di palestra. Mi sono trovata subito bene, sempre ascoltata e affiancata nel comprendere e migliorare gli esercizi, e in breve tempo ho ottenuto risultati mai visti. Marco ha studiato le schede con grande precisione e attenzione ai miei tempi e alle mie capacità, Francesco pazientemente due volte a settimana mi corregge e sorridendo mi sfida a migliorare, Davide segue la mia nutrizione aiutandomi a superare i momenti di sconforto. Mai fatta scelta migliore per la mia salute e il mio fisico." },
    { name: "Giulia Pastorello", date: "un anno fa", avatar: "bronze", text: "Il mio percorso inizia a giugno 2022. Contatto Marco che si rende subito disponibile ad incontrarmi per ascoltare la mia storia e le mie necessità. Dopo neanche una settimana inizio questo percorso piena di paure, incertezze e credendo poco in me stessa e nelle mie potenzialità. Ormai sono passati più di due anni e non avrei mai pensato di raggiungere tanti traguardi sia negli allenamenti sia nella nutrizione; per questo, non posso che ringraziare Marco, Francesco e Davide che grazie alla loro professionalità e pazienza mi hanno sostenuto e accompagnato in questo percorso; e hanno creduto in me quando ancora io non ci credevo. Il team di Progetto Forma mi ha letteralmente salvato la vita." },
    { name: "Benedetta Fergnani", date: "un anno fa", avatar: "rose", text: "Ho iniziato il mio percorso da progetto FORMA quasi un anno fa, inizialmente facendo \"solamente\" palestra, dove finalmente sono riuscita ad avere una vera costanza negli allenamenti grazie alla competenza e alla professionalità dei ragazzi, che ti spingono sempre a dare il meglio. La vera svolta però è avvenuta quando ho deciso di iniziare ad essere seguita anche nell'alimentazione; questa è stata una scelta fondamentale nel mio percorso che mi ha portato ad avere risultati significativi sia in termini di ricomposizione corporea che un miglioramento di benessere generale nella vita di tutti i giorni." },
    { name: "Alessandra Massetti", date: "un anno fa", avatar: "sand", text: "Ho iniziato questo percorso all'incirca due mesi fa, pensando di trovare una realtà come tante altre, invece mi sbagliavo. Entrare a far parte del progetto non si limita a fare gli allenamenti e seguire un piano alimentare, bensì si pone il focus sulla persona e intorno ad essa si costruisce il resto. Tutti i ragazzi che ti seguono — Davide, Francesco e Marco — sono preparati, volenterosi, disponibili e ti fanno sentire bene e mai sbagliata." },
    { name: "Francesca Callegari", date: "un anno fa", avatar: "taupe", text: "Il mio percorso in Progetto Forma è iniziato a settembre. Avevo deciso di investire su me stessa e ho trovato tre Professionisti appassionati del loro lavoro, in grado di guidarmi e aiutarmi a raggiungere i miei obiettivi. Francesco mi segue passo a passo durante gli allenamenti, spronandomi in ogni sessione a superare i miei limiti, sempre con un sorriso e una risata pronti. Davide mi ha cucito addosso un piano alimentare adatto a tutte le mie esigenze, dosando sapientemente severità e incoraggiamenti. Marco rende tutto possibile, non solo a livello logistico ma soprattutto a livello emotivo: quando parli con lui, ogni ostacolo è superabile e ogni sogno raggiungibile. Dopo due giorni ti senti già a casa." },
    { name: "Daniela Grbic", date: "un anno fa", avatar: "warm", text: "Un percorso che ha segnato una svolta definitiva nella mia vita! Prima di iniziare, ero una ragazza con uno stile di vita totalmente sedentario ed iniziare un programma di fitness era una cosa che mi spaventava. Con Progetto Forma ho superato le mie paure e acquisito capacità che mi hanno permesso di cambiare la mia vita. Marco, con la sua empatia straordinaria, è riuscito a trasformare le mie insicurezze in fiducia. Francesco è preparatissimo e incredibilmente paziente: non mi ha mai fatto sentire giudicata. Davide mi ha insegnato a vedere la dieta sotto una nuova luce: non più come una restrizione, ma come uno strumento per volermi bene. Lo consiglio a chiunque voglia riscoprire il proprio potenziale, sentirsi finalmente in armonia con il proprio corpo e trovare quella forza interiore che non sapevi di avere." },
    { name: "Elisa M.", date: "un anno fa", avatar: "bronze", text: "Ho conosciuto Progetto Forma grazie al mio compagno. Inizialmente ero un po' titubante essendo un contesto diverso da quello a cui ero abituata, sia perché non sapevo cosa aspettarmi e soprattutto per la mia ansia e timore nell'affrontare situazioni nuove. Però appena ho conosciuto Marco e successivamente anche Davide e Francesco, mi sono ricreduta. Ti mettono a tuo agio, durante gli allenamenti sei seguita personalmente e corretta ove necessario e il clima è sempre allegro e scherzoso. Pian piano è come entrare a far parte di una nuova \"famiglia\". Ne vale davvero la pena." },
    { name: "Vittoria Bellettato", date: "un anno fa", avatar: "rose", text: "Ho sempre avuto un rapporto altalenante con dieta ed allenamento, ma grazie ai ragazzi di Progetto Forma ho iniziato a seguire un percorso di miglioramento in maniera costante e i risultati sono stati impressionanti. Grazie ad una alimentazione studiata su di me e sulle mie esigenze e due allenamenti a settimana in 6 mesi ho raggiunto una ricomposizione corporea che mai avrei immaginato." },
    { name: "Jessica Stabellini", date: "un anno fa", avatar: "sand", text: "Ho chiesto aiuto a questi ragazzi per essere seguita a 360 gradi prima e dopo un intervento, abbiamo adeguato il piano alimentare, abbiamo rafforzato la muscolatura, senza mai avere problemi con il dolore, una volta eseguito l'intervento l'abbiamo potenziata agevolando così il decorso e quindi la ripresa è stata più veloce e un po' meno avvilente! Mi hanno seguito e mi seguono tutt'ora ascoltando, e creando soluzioni che si sposano perfettamente con il mio stile di vita. Mai avrei pensato di andare in palestra e invece… ho trovato degli obiettivi!" },
    { name: "Katia Brusemini", date: "2 anni fa", avatar: "taupe", text: "Ho iniziato il percorso con Progetto FORMA ormai 7 mesi fa, stanca di cedere alla mia poca costanza nell'attività fisica e alle prese con mal di schiena da posture sbagliate e vita sedentaria. Non mi sono mai sentita a mio agio nelle palestre standard, dove i riferimenti e il supporto sono limitati da logiche di grandi numeri e dove mi sentivo spaesata e spesso inadeguata. Con Francesco e Marco ho cambiato il mio approccio e sono riuscita ad iniziare un percorso serio, con obiettivi possibili e risultati costanti e visibili. Anche l'alimentazione conta e il supporto di un nutrizionista preparato come Davide ha fatto ancora più la differenza!" },
    { name: "Elena R.", date: "un anno fa", avatar: "warm", text: "Mi sono affidata al team di Progetto Forma avendo necessità di essere seguita attentamente durante l'attività sportiva. Abbiamo discusso fin da subito della mia condizione di base, con tutti i limiti che comporta, e loro sono riusciti a cucirmi addosso un percorso, aggirando mano a mano gli ostacoli che abbiamo incontrato, che mi ha portata a guardarmi allo specchio con orgoglio e piena soddisfazione. Oltre alla forma fisica, ne ha tratto beneficio anche lo spirito. Questo è un ambiente molto familiare, appassionante e che spinge ad allenarsi volentieri." },
    { name: "Valeria Solimani", date: "2 anni fa", avatar: "bronze", text: "Ho iniziato il mio percorso al Progetto FORMA quasi un anno fa ed è stato il miglior investimento che potessi fare per la mia salute. Il team costruisce un percorso modellato sulle proprie esigenze (sia tempistiche che fisiche ma anche mentali), ti spronano a fissare obiettivi pretenziosi ma che con il loro lavoro diventano raggiungibili. Mi sono sempre allenata ma con scarsi risultati e con il problema della poca costanza ma, grazie al loro costante supporto, adesso sono sempre spronata a mettermi alla prova e a prendermi cura di me. Allenarmi è diventato un piacere." },
    { name: "Barbara Canetti", date: "un anno fa", avatar: "rose", text: "Ho deciso di intraprendere questo percorso e sono rimasta da subito piacevolmente colpita dalla professionalità del team e dalla capacità di spiegare concetti complessi in modo semplice e chiaro, anche a chi, come me, non è del settore. Non ho mai avuto la sensazione di essere giudicata o trascurata, ma, piuttosto di essere parte di una equipe che si preoccupa sinceramente del mio benessere. Ogni sessione di allenamento è attentamente pianificata e personalizzata in base alle singole esigenze e obiettivi, che ho piacevolmente raggiunto senza problemi e ancor prima del tempo previsto." },
    { name: "Fabrizia Fabbri", date: "un anno fa", avatar: "sand", text: "Professionali, competenti, empatici, hanno il dono di vedere nelle persone le potenzialità che ci dimentichiamo di avere. Massima attenzione ai programmi adattati case by case, dedicati al miglioramento della salute e della forma fisica. La struttura è pulitissima e super confortevole. Davvero una bella scoperta!" },
    { name: "Nicole Bandiera", date: "2 anni fa", avatar: "taupe", text: "Esperienza senza dubbio positiva. Dal primo giorno ho trovato accoglienza, simpatia e disponibilità. I ragazzi sono molto professionali e attenti ai tuoi bisogni e alle tue necessità, curano molto l'esecuzione dell'esercizio in ogni dettaglio. Mi sento di consigliare un percorso con Progetto Forma a chiunque voglia seriamente prendersi cura di sé, anche per chi come me non ha mai messo piede in palestra." },
    { name: "Federica Alogna", date: "un anno fa", avatar: "warm", text: "Frequento progetto Forma da un mese circa, palestra più percorso nutrizione. Che dire, nonostante non abbia mai avuto esperienza, mi sento a mio agio grazie alla professionalità e soprattutto all'empatia di questo meraviglioso team che ti accoglie, ti supporta e ti motiva a far bene. Mi auguro di continuare il percorso e raggiungere grandi obiettivi." },
    { name: "Paola", date: "un anno fa", avatar: "bronze", text: "È bello essere seguiti e monitorati da ragazzi in gamba e professionali come Davide, Marco e Francesco. Grazie ragazzi!" },
    { name: "Sara Tagliani", date: "un anno fa", avatar: "rose", text: "Ottimi professionisti. Buona disponibilità. Consigliato." }
  ];

  return (
    <section className="bg-radial" style={{ padding: '80px 30px' }}>
      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Recensioni Google verificate</Eyebrow>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(36px, 3.8vw, 46px)', lineHeight: 1.15,
            letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
            margin: '0 0 14px',
          }}>Le parole delle nostre donne</h2>
        </Reveal>

        <div className="review-wall-cols" style={{
          columnCount: 3, columnGap: 20,
        }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              breakInside: 'avoid', display: 'block', marginBottom: 20,
            }}>
              <ReviewCard {...r} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ReviewCard({ name, date, avatar, text }) {
  const [hover, setHover] = React.useState(false);
  const avGrad = {
    rose:   'linear-gradient(135deg, #e8c9c4, #b78c87)',
    sand:   'linear-gradient(135deg, #e3d3b6, #a18c6d)',
    taupe:  'linear-gradient(135deg, #bcaea0, #7d6e60)',
    warm:   'linear-gradient(135deg, #d4bca0, #8a7a66)',
    bronze: 'linear-gradient(135deg, #c9a37a, #7d5a3a)',
  }[avatar] || 'linear-gradient(135deg, #F2ECE8, #d3a3a6)';
  const initial = name.trim().charAt(0).toUpperCase();
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--color-surface-pure)',
        border: '1px solid var(--color-border)',
        borderRadius: 14, padding: 22,
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-xs)',
        transform: hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
        <div style={{
          width: 40, height: 40, borderRadius: '9999px', flexShrink: 0,
          background: avGrad,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--color-background)',
          fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 15,
          border: '2px solid var(--color-background)',
        }}>{initial}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14,
            color: 'var(--color-text-primary)', lineHeight: 1.3,
          }}>{name}</div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 12,
            color: 'var(--color-text-muted)', marginTop: 2,
          }}>{date}</div>
        </div>
        <svg viewBox="0 0 48 48" width="16" height="16" aria-hidden="true" style={{ flexShrink: 0 }}>
          <path fill="#FFC107" d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"/>
          <path fill="#FF3D00" d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"/>
          <path fill="#4CAF50" d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"/>
          <path fill="#1976D2" d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"/>
        </svg>
      </div>

      <div style={{ display: 'flex', gap: 2, color: 'var(--color-primary)', marginBottom: 12, fontSize: 14 }}>
        <span>★</span><span>★</span><span>★</span><span>★</span><span>★</span>
      </div>

      <p style={{
        fontFamily: 'Inter, sans-serif', fontSize: 14.5, lineHeight: 1.62,
        color: 'var(--color-text-primary)', margin: 0,
      }}>{text}</p>
    </article>
  );
}

/* ── 5. CLOSING EMOTIONAL ─────────────────────────────────── */
function RisultatiClosing({ onCTA }) {
  const fears = ['"E se poi mollo?"', '"Sono troppo fuori forma."', '"Ho già provato tutto."'];
  return (
    <section style={{ background: 'var(--color-surface-pure)', padding: '80px 30px' }}>
      <div className="risultati-closing" style={{ maxWidth: 800, margin: '0 auto', textAlign: 'center' }}>
        <Reveal>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(30px, 4.2vw, 50px)', lineHeight: 1.1,
            letterSpacing: '-0.02em', color: 'var(--color-text-primary)',
            margin: '0 0 40px', textWrap: 'balance',
          }}>Ogni donna che vedi in questa pagina aveva <em style={{ fontStyle: 'italic', color: 'var(--color-primary)' }}>le tue stesse paure</em></h2>
        </Reveal>

        <Reveal delay={120}>
          <div className="fears-row" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            margin: '0 0 48px',
          }}>
            {fears.map((f, i) => (
              <div key={i} style={{
                fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
                fontSize: 'clamp(20px, 2.2vw, 26px)', lineHeight: 1.35,
                color: 'var(--color-primary)',
                padding: '20px 16px',
                borderTop: '1px solid var(--color-border-strong)',
                borderBottom: '1px solid var(--color-border-strong)',
              }}>{f}</div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={180}>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: 'var(--color-text-secondary)', margin: '0 auto 24px', maxWidth: 540,
          }}>Sono partite da lì. E sono arrivate qui. La differenza?</p>

          <ul style={{
            listStyle: 'none', margin: '0 auto 36px', padding: 0,
            display: 'inline-flex', flexDirection: 'column', gap: 12, textAlign: 'left',
          }}>
            {['Un percorso costruito per loro', 'Un team che non le ha mai lasciate sole'].map((t, i) => (
              <li key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 17,
                color: 'var(--color-text-primary)',
              }}>
                <span style={{ color: 'var(--color-primary)' }}><Mark size={18} /></span>
                {t}
              </li>
            ))}
          </ul>

          <h3 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(24px, 2.8vw, 34px)', lineHeight: 1.25,
            letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
            margin: '0 0 32px',
          }}>Lo stesso percorso è pronto per te.</h3>

          <CTABanner variant="inline" onCTA={onCTA} />
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { RisultatiHero, BeforeAfterMarquee, ReviewWall, RisultatiClosing });