/* global React, Eyebrow, Reveal, PhotoBlock, PinkCircle, Mark, CTAButton, CTABanner, SectionWatermark, ParallaxCTASection */
// Page 2 — IL METODO

function MetodoHero() {
  return (
    <section className="bg-radial section-hero" style={{ padding: '120px 30px 90px' }}>
      <div className="metodo-hero-grid" style={{
        maxWidth: 1370, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'center',
      }}>
        <Reveal>
          <Eyebrow style={{ marginBottom: 18 }}>Il metodo</Eyebrow>
          <h1 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(40px, 5.2vw, 72px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', color: 'var(--color-text-primary)',
            margin: 0, textWrap: 'balance',
          }}>Se non riesci a dimagrire, <em style={{ fontStyle: 'italic', color: 'var(--color-primary)' }}>non è colpa tua</em></h1>
        </Reveal>

        <Reveal delay={120}>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.65,
            color: 'var(--color-text-secondary)', margin: 0, maxWidth: 520,
          }}>
            Semplicemente dopo i 40 il corpo cambia.
            <br/><br/>
            Il metabolismo rallenta, perdere peso diventa più difficile e perdi tono muscolare.
            <br/><br/>
            I metodi che hai provato non tengono conto di questi cambiamenti.
            <br/><br/>
            <strong style={{ fontWeight: 600, color: 'var(--color-text-primary)' }}>Un corpo che cambia ha bisogno di un approccio diverso.</strong>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function CompetitorFail({ onCTA }) {
  const cards = [
    { title: 'La dieta da internet',
      body: 'Non è pensata per te. Non tiene conto della menopausa, dei tuoi impegni, della tua vita reale. Quando molli ti senti in colpa — ma non eri tu a sbagliare.' },
    { title: 'Il nutrizionista',
      body: 'Ti vede una volta al mese. Se hai un momento di difficoltà e il prossimo appuntamento è tra tre settimane, sei sola.' },
    { title: 'La palestra',
      body: 'Non è il posto per te. Affollata, rumorosa, nessuno ti segue, nessuno si accorge se sparisci.' },
    { title: 'Le camminate',
      body: 'Da sole non bastano. Senza un piano alimentare e un allenamento mirato, i risultati non arrivano.' },
  ];

  return (
    <section className="bg-radial" style={{ padding: '80px 30px' }}>
      <div className="cmp-fail-grid" style={{
        maxWidth: 1370, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 64, alignItems: 'center',
      }}>
        <Reveal as="div" style={{ display: 'flex', flexDirection: 'column', alignSelf: 'stretch' }}>
          <div className="cf-images-stack" style={{
            position: 'relative', flex: 1, minHeight: 560,
          }}>
            <PinkCircle size={320} style={{ top: -20, left: -30 }} />
            {/* Top image: 90% width, left-aligned, height 60% */}
            <div className="cf-img-top anim-mask-wipe" style={{
              position: 'absolute', top: 0, left: 0,
              width: '90%', height: '60%',
              borderRadius: 12, overflow: 'hidden',
              boxShadow: '0 24px 60px rgba(26,26,26,0.12)',
              zIndex: 1,
            }}>
              <img
                src="assets/foto/il-metodo.webp"
                alt="Il Metodo Progetto Forma"
                loading="lazy"
                style={{
                  width: '100%', height: '100%',
                  objectFit: 'cover', objectPosition: 'center',
                  display: 'block',
                }}
              />
            </div>
            {/* Bottom image: 70% width, right-aligned, height 52% — 12% overlap */}
            <div className="cf-img-bottom anim-mask-wipe" style={{
              position: 'absolute', bottom: 0, right: 0,
              width: '70%', height: '52%',
              borderRadius: 12, overflow: 'hidden',
              boxShadow: '0 24px 60px rgba(26,26,26,0.18)',
              zIndex: 2,
            }}>
              <img
                src="assets/foto/farfilla-111.webp"
                alt="Cliente Progetto Forma"
                loading="lazy"
                style={{
                  width: '100%', height: '100%',
                  objectFit: 'cover', objectPosition: 'center',
                  display: 'block',
                }}
              />
            </div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(28px, 3.8vw, 46px)', lineHeight: 1.15,
            letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
            margin: '0 0 36px', textWrap: 'pretty',
          }}>Perché gli altri metodi falliscono dopo i 40</h2>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {cards.map((c, i) => (
              <article key={i} style={{
                background: 'var(--color-surface-pure)',
                border: '1px solid var(--color-border)', borderRadius: 8,
                padding: '22px 26px',
                boxShadow: 'var(--shadow-xs)',
              }}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                  <span aria-hidden="true" style={{
                    width: 22, height: 22, flexShrink: 0, marginTop: 2,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    borderRadius: '9999px', border: '1.5px solid var(--color-primary)',
                    color: 'var(--color-primary)',
                  }}>
                    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><line x1="1.5" y1="1.5" x2="8.5" y2="8.5"/><line x1="8.5" y1="1.5" x2="1.5" y2="8.5"/></svg>
                  </span>
                  <div>
                    <h4 style={{
                      fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 17,
                      color: 'var(--color-text-primary)', margin: '0 0 6px',
                    }}>{c.title}</h4>
                    <p style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 15, lineHeight: 1.6,
                      color: 'var(--color-text-secondary)', margin: 0,
                    }}>{c.body}</p>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <p style={{
            fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(18px, 2vw, 22px)', lineHeight: 1.5,
            color: 'var(--color-text-primary)',
            margin: '36px 0 0', maxWidth: 600,
          }}>Per ottenere risultati veri dopo i 40 serve un percorso che metta insieme nutrizione, allenamento e supporto continuo. Se manca anche solo uno dei tre, il ciclo si ripete.</p>
        </Reveal>
      </div>

      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        <CTABanner variant="inline" onCTA={onCTA} />
      </div>
    </section>
  );
}

function FourPillars({ onCTA }) {
  const cards = [
    {
      n: '01',
      title: 'Anamnesi e check iniziale',
      body: 'Dove prendiamo le tue circonferenze, composizione corporea, peso, valutazione posturale, obiettivi. Da qui costruiamo il tuo percorso.',
      photo: 'assets/foto/step-01.webp',
      photoLabel: 'Anamnesi · check iniziale',
    },
    {
      n: '02',
      title: 'Nutrizione personalizzata',
      body: 'Non una dieta restrittiva ma un piano alimentare sulle cose che ti piacciono. Ogni sei settimane il nutrizionista adatta il piano in base a come rispondi.',
      photo: 'assets/foto/step-02.webp',
      photoLabel: 'Nutrizione · piano personalizzato',
    },
    {
      n: '03',
      title: 'Allenamento in small group',
      body: 'Massimo tre persone, due volte a settimana, con personal trainer dedicato. Ogni esercizio insegnato da zero, in un ambiente riservato.',
      photo: 'assets/foto/step-03.webp',
      photoLabel: 'Studio · Massimo 3 persone',
    },
    {
      n: '04',
      title: 'Check continui',
      body: 'Non sarai mai da sola grazie al supporto costante. Quando hai un momento difficile, noi lo vediamo e interveniamo prima che diventi un motivo per mollare.',
      photo: 'assets/foto/step-04.webp',
      photoLabel: 'Check ogni 2 settimane',
    },
  ];
  return (
    <section className="bg-radial" style={{ padding: '80px 30px' }}>
      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 64 }}>
          <Eyebrow style={{ marginBottom: 14 }}>I 4 pilastri</Eyebrow>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(28px, 3.8vw, 46px)', lineHeight: 1.15,
            letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
            margin: '0 0 16px',
          }}>Ecco come Progetto Forma ti dà i risultati che cerchi</h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: 'var(--color-text-secondary)',
            margin: '0 auto', maxWidth: 620,
          }}>Il metodo costruito su 4 pilastri che lavorano insieme per 6 mesi.</p>
        </Reveal>

        {/* Sticky stack di 4 card — identico al pattern degli step home */}
        <div style={{ maxWidth: 1370, margin: '0 auto' }}>
          {cards.map((s, i) => (
            <div key={i} style={{
              position: 'sticky',
              top: `calc(120px + ${i * 14}px)`,
              marginBottom: i < cards.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: 420,
                border: '1px solid var(--color-border-strong)',
                boxShadow: '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 */}
                  <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(26px, 3vw, 38px)', lineHeight: 1.1,
                      letterSpacing: '-0.01em', color: 'var(--color-text-primary)',
                      margin: '0 0 18px', 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: photo 4:3 */}
                <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>
      </div>
    </section>
  );
}

/* ── CTA finale Metodo: parallax + form ───────────────────────── */
function MetodoCTAFinal({ onCTA }) {
  return (
    <ParallaxCTASection
      onCTA={onCTA}
      bgSrc="assets/foto/il-centro.webp"
      eyebrow="Inizia ora"
      title="Vuoi capire se Progetto Forma è il percorso giusto per te?"
      subtitle="Compila il modulo e prenota una consulenza GRATUITA della durata di 45 minuti."
    />
  );
}

Object.assign(window, { MetodoHero, CompetitorFail, FourPillars, MetodoCTAFinal });