/* global React, Eyebrow, Reveal, PhotoBlock, PinkCircle, FloatingStatCard, CTAButton, CTABanner, Mark, LogoWatermark, SectionWatermark, CountUp, Divider */
// Home — Sections 1 through 5 (Hero, Stats, Hai messo te stessa, Puoi ancora, Offerta 4 step)

/* ── 1. HERO ───────────────────────────────────────────────── */
function HomeHero({ onCTA }) {
  return (
    <section className="bg-radial section-hero" style={{
      padding: '120px 30px 60px',
    }}>
      <div className="hero-grid" style={{
        position: 'relative',
        maxWidth: 1370, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 72, alignItems: 'center',
      }}>
        <Reveal>
          <Eyebrow style={{ marginBottom: 18 }}>Sei di Ferrara o dintorni?</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,
            textWrap: 'pretty',
          }}>
            Ritrova un corpo <em style={{ fontStyle: 'italic', color: 'var(--color-primary)' }}>tonico e snello</em> dopo i 40 anni con Progetto Forma
          </h1>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.6,
            color: 'var(--color-text-secondary)', marginTop: 26, maxWidth: 500,
          }}>
            L'unico percorso che unisce nutrizione e allenamento su misura con supporto continuo per farti vedere finalmente bene allo specchio.
          </p>
          <div style={{ marginTop: 36 }}>
            <CTAButton onClick={onCTA} size="lg" />
          </div>
        </Reveal>

        <Reveal delay={120} y={20}>
          <div style={{ position: 'relative', paddingLeft: 40, paddingTop: 30 }}>
            <PinkCircle size={340} style={{ top: 0, right: -30 }} />
            <img className="anim-mask-wipe"
              src="assets/foto/hero-1.webp"
              alt="Cliente di Progetto Forma in studio"
              loading="eager"
              style={{
                position: 'relative', zIndex: 1,
                width: '100%', height: 'auto',
                display: 'block',
                borderRadius: 12,
                boxShadow: '0 24px 60px rgba(26,26,26,0.10)',
              }}
            />
            <FloatingStatCard
              icon={<Mark size={20} />}
              big={<CountUp end={180} suffix="+" />}
              label={<>Donne seguite · <span style={{ color: 'var(--color-primary)' }}>★</span> 5,0 Google</>}
              style={{ position: 'absolute', left: -10, bottom: 16, zIndex: 2 }}
            />
            <div style={{ position: 'absolute', top: 100, right: -8, zIndex: 2, color: 'var(--color-primary)', opacity: 0.85 }}>
              <Mark size={44} />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ── 3. HAI MESSO TE STESSA DA PARTE ───────────────────────── */
function HomeIntroEditorial({ onCTA }) {
  const imgRef = React.useRef(null);
  const photoRef = React.useRef(null);
  React.useEffect(() => {
    const el = imgRef.current;
    const photo = photoRef.current;
    if (!el || !photo) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh;
      const seen = vh - r.top;
      const p = Math.max(0, Math.min(1, seen / total));
      // Zoom soft: 1.00 → 1.18 mentre il contenitore attraversa il viewport
      photo.style.transform = `scale(${(1 + 0.18 * p).toFixed(4)})`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section className="intro-section" style={{ background: 'var(--color-background)', padding: '80px 30px' }}>
      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        {/* Titolo + 2 righe a larghezza piena */}
        <div style={{ maxWidth: 880, margin: '0 0 56px' }}>
          <Reveal>
            <h2 className="anim-char-reveal" style={{
              fontFamily: 'Fraunces, serif', fontWeight: 600,
              fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15,
              letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
              margin: '0 0 28px', textWrap: 'pretty',
            }}>Hai messo te stessa da parte per anni. <em style={{ fontStyle: 'italic', color: 'var(--color-primary)' }}>E ora non ti riconosci più.</em></h2>
          </Reveal>
          <Reveal delay={80}>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.7,
              color: 'var(--color-text-secondary)', margin: '0 0 18px', maxWidth: 760,
            }}>Ti sei dedicata alla famiglia, al lavoro, alla casa… e ti sei sempre messa in fondo alla lista. Dopo i 40 anni il corpo ha iniziato a cambiare e oggi allo specchio non vedi più la donna che eri.</p>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.7,
              color: 'var(--color-text-secondary)', margin: 0, maxWidth: 760,
            }}>Hai provato diete, palestra, corsi… ma dopo due settimane mollavi e tornavi punto e a capo.</p>
          </Reveal>
        </div>

        {/* Immagine grande, niente reveal, zoom su scroll. Box frosted-glass in basso a sinistra */}
        <div ref={imgRef} className="intro-img-box" style={{
          position: 'relative', width: '100%',
          minHeight: 'clamp(560px, 78vh, 760px)',
          borderRadius: 16, overflow: 'hidden',
          boxShadow: 'var(--shadow-lg)',
          display: 'flex', alignItems: 'flex-end',
        }}>
          <div ref={photoRef} style={{
            position: 'absolute', inset: 0,
            transformOrigin: 'center center', willChange: 'transform',
          }}>
            <img
              src="assets/foto/il-centro.webp"
              alt="Studio Progetto Forma — Il Centro"
              loading="lazy"
              style={{
                width: '100%', height: '100%',
                objectFit: 'cover', objectPosition: 'center',
                display: 'block',
              }}
            />
          </div>

          {/* Frosted-glass text column */}
          <div className="intro-frosted" style={{
            position: 'relative', zIndex: 1,
            margin: 'clamp(20px, 3.5vw, 56px)',
            maxWidth: 600, padding: 24,
            background: 'rgba(0, 0, 0, 0.7)',
            backdropFilter: 'blur(15px) saturate(120%)',
            WebkitBackdropFilter: 'blur(15px) saturate(120%)',
            borderRadius: 14,
            color: 'var(--color-text-on-dark)',
          }}>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 14,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              color: 'rgba(249, 244, 237,0.7)', marginBottom: 18,
            }}>Magari hai pensato:</div>

            <p style={{
              fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
              fontSize: 'clamp(24px, 2.8vw, 32px)', lineHeight: 1.3,
              color: 'var(--color-text-on-dark)',
              margin: '0 0 24px', textWrap: 'balance',
            }}>“Sono pigra. Sono incostante. Non ce la farò mai.”</p>

            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65,
              color: 'rgba(249, 244, 237,0.88)', margin: '0 0 16px',
            }}><strong style={{ fontWeight: 600, color: 'var(--color-text-on-dark)' }}>Nulla di tutto ciò. Semplicemente eri sola.</strong> Senza un percorso pensato per il tuo corpo e senza qualcuno che ti seguisse davvero.</p>

            <p style={{
              fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
              fontSize: 22, lineHeight: 1.45, color: 'var(--color-text-on-dark)',
              margin: '0 0 24px',
            }}>Ma tranquilla…</p>

            <CTAButton onClick={onCTA} size="lg" light />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── 4. PUOI ANCORA RITROVARE (SCREEN-1 structure) ────────── */
function HomeFuture() {
  const bullets = [
    'Farti una foto senza volerla cancellare',
    'Salire le scale o portare la spesa senza problemi',
    'Tornare a dormire bene come non fai da anni',
  ];
  return (
    <section className="bg-radial" style={{ padding: '70px 30px 80px' }}>
      <div className="two-col" style={{
        maxWidth: 1370, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 80, alignItems: 'center',
      }}>
        {/* Image column with pink circle + floating card */}
        <Reveal>
          <div className="future-image-area" style={{ position: 'relative', height: 540 }}>
            <PinkCircle size={300} style={{ bottom: -20, left: -30 }} />
            <div className="future-image-wrap anim-mask-wipe" style={{
              position: 'absolute', left: 30, top: 20, right: 0, bottom: 30, zIndex: 1,
              borderRadius: 12, overflow: 'hidden',
              boxShadow: '0 24px 60px rgba(26,26,26,0.10)',
            }}>
              <img
                src="assets/foto/ritrovare-un-corpo-snello.webp"
                alt="Ritrovare un corpo snello e tonico"
                loading="lazy"
                style={{
                  width: '100%', height: '100%',
                  objectFit: 'cover', objectPosition: 'center',
                  display: 'block',
                }}
              />
            </div>
            <FloatingStatCard
              icon={<Mark size={20} />}
              big={<CountUp end={180} suffix="+" />}
              label={<>Donne seguite · <span style={{ color: 'var(--color-primary)' }}>★</span> 5,0 Google</>}
              style={{ position: 'absolute', right: -16, bottom: 0, zIndex: 2 }}
            />
          </div>
        </Reveal>

        {/* Copy column */}
        <Reveal delay={120}>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(28px, 3.6vw, 44px)', lineHeight: 1.15,
            letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
            margin: '0 0 22px', textWrap: 'pretty',
          }}>Puoi ancora ritrovare un corpo che ti faccia sorridere davanti allo specchio</h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.65,
            color: 'var(--color-text-secondary)', margin: '0 0 26px',
          }}>Un corpo tonico, snello, pieno di energia che ti permetta di:</p>
          <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {bullets.map((b, i) => (
              <li key={i} style={{
                display: 'flex', alignItems: 'flex-start', gap: 14,
                fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.55,
                color: 'var(--color-text-primary)',
              }}>
                <span style={{ color: 'var(--color-primary)', flexShrink: 0, marginTop: 2 }}>
                  <Mark size={18} />
                </span>
                {b}
              </li>
            ))}
          </ul>
        </Reveal>
      </div>
    </section>
  );
}

/* ── 5. OFFERTA IN 4 STEP (sticky-stack cards) ─────────────── */
function HomeMethodSteps({ onCTA }) {
  const steps = [
    {
      n: '01',
      title: 'Tornare in forma è un piacere',
      body: 'Grazie ad allenamenti su misura per te, che costruiremo dopo un check iniziale. Nessun approccio generico.',
      photoVariant: 'rose',
            photo: 'assets/foto/step-01.webp',
photoLabel: 'Sessione di allenamento',
    },
    {
      n: '02',
      title: 'Mangiare bene diventa semplice',
      body: 'Basta diete da fame. Avrai un piano alimentare sostenibile che non ti toglie la cena fuori, l\u2019aperitivo con le amiche o il pranzo della domenica.',
      photoVariant: 'sand',
            photo: 'assets/foto/step-02.webp',
photoLabel: 'Nutrizione su misura',
    },
    {
      n: '03',
      title: 'Non ti senti più giudicata o fuori posto',
      body: 'Massimo 3 persone per sessione, due volte a settimana con un personal trainer dedicato che ti segue in ogni momento. Dimentica le palestre affollate e gli sguardi addosso.',
      photoVariant: 'bronze',
            photo: 'assets/foto/step-03.webp',
photoLabel: 'Studio · Massimo 3 persone',
    },
    {
      n: '04',
      title: 'Non sei mai sola, neanche nei giorni difficili',
      body: 'Grazie al supporto continuo e ai check in call o in studio. Se c\u2019è qualche problema lo risolviamo prima che diventi un motivo per mollare.',
      photoVariant: 'warm',
            photo: 'assets/foto/step-04.webp',
photoLabel: 'Check ogni 2 settimane',
    },
  ];
  return (
    <section className="bg-radial" style={{ padding: '80px 30px 110px' }}>
      <LogoWatermark size={420} top={48} right={40} opacity={0.045} />
      {/* Header row a tutta larghezza */}
      <div style={{ maxWidth: 1370, margin: '0 auto 72px' }}>
        <div className="method-header" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'flex-end',
        }}>
          <Reveal>
            <Eyebrow style={{ marginBottom: 18 }}>Ti basta affidarti a</Eyebrow>
            <h2 className="anim-char-reveal" style={{
              fontFamily: 'Fraunces, serif', fontWeight: 600,
              fontSize: 'clamp(56px, 6.4vw, 96px)', lineHeight: 1, letterSpacing: '-0.03em',
              color: 'var(--color-text-primary)', margin: 0, textWrap: 'balance',
            }}>Progetto <span style={{ color: 'var(--color-primary)' }}>Forma</span></h2>
          </Reveal>
          <Reveal delay={80}>
            <p style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(20px, 1.7vw, 24px)', lineHeight: 1.55, fontWeight: 500,
              color: 'var(--color-text-primary)', margin: 0, maxWidth: 540,
            }}>L'unico metodo a Ferrara e dintorni che ti permette di ritrovare un corpo snello e tonico dopo i 40 in <strong style={{ fontWeight: 700, color: 'var(--color-primary)' }}>4 fasi</strong>.</p>
          </Reveal>
        </div>
      </div>

      {/* Sticky stack di 4 card */}
      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        {steps.map((s, i) => (
          <div key={i} style={{
            position: 'sticky',
            top: `calc(88px + ${i * 14}px)`,
            marginBottom: i < steps.length - 1 ? 24 : 0,
          }}>
            <article className="method-step-card" style={{
              background: 'var(--color-surface-alt)',
              color: 'var(--color-text-primary)',
              borderRadius: 20,
              padding: 'clamp(28px, 3.6vw, 56px)',
              display: 'grid', gridTemplateColumns: '1fr 1fr',
              gap: 'clamp(24px, 3vw, 56px)', alignItems: 'stretch',
              minHeight: 'min(72vh, 540px)',
              border: '1px solid var(--color-border-strong)',
              boxShadow: '0 -10px 24px rgba(56, 32, 20, 0.06), var(--shadow-md)',
              overflow: 'hidden',
              position: 'relative',
            }}>
              {/* LEFT: copy */}
              <div className="method-step-copy" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32, minHeight: 0, position: 'relative' }}>
                {/* Numero gigante traslucido in basso a destra della colonna testo */}
                <div aria-hidden="true" style={{
                  position: 'absolute',
                  bottom: 'clamp(-48px, -3vw, -24px)',
                  right: 'clamp(-12px, -1vw, -4px)',
                  fontFamily: 'Fraunces, serif', fontWeight: 700,
                  fontSize: 'clamp(160px, 18vw, 260px)', lineHeight: 0.85,
                  letterSpacing: '-0.06em',
                  color: 'var(--color-primary)', opacity: 0.04,
                  userSelect: 'none', pointerEvents: 'none', zIndex: 0,
                }}>{s.n}</div>
                <div style={{ position: 'relative' }}>
                  <h3 className="anim-char-reveal" style={{
                    position: 'relative', zIndex: 1,
                    fontFamily: 'Fraunces, serif', fontWeight: 600,
                    fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.1,
                    letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
                    margin: '0 0 22px', textWrap: 'balance',
                  }}>{s.title}</h3>
                  <p style={{
                    position: 'relative', zIndex: 1,
                    fontFamily: 'Inter, sans-serif', fontSize: 17, lineHeight: 1.65,
                    color: 'var(--color-text-secondary)', margin: 0, maxWidth: 480,
                  }}>{s.body}</p>
                </div>
                <div style={{ position: 'relative', zIndex: 1 }}>
                  <CTAButton size="md" onClick={onCTA}>Prenota la tua consulenza GRATUITA</CTAButton>
                </div>
              </div>

              {/* RIGHT: visual */}
              <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
                <div className="anim-mask-wipe" style={{
                  width: '100%', aspectRatio: '4 / 3',
                  borderRadius: 14, overflow: 'hidden',
                  boxShadow: '0 16px 36px rgba(26,26,26,0.18)',
                }}>
                  <img
                    className="anim-mask-wipe"
                    src={s.photo}
                    alt={s.photoLabel}
                    loading="lazy"
                    style={{
                      width: '100%', height: '100%',
                      objectFit: 'cover', objectPosition: 'center',
                      display: 'block',
                    }}
                  />
                </div>
              </div>
            </article>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HomeHero, HomeIntroEditorial, HomeFuture, HomeMethodSteps });