/* global React, Eyebrow, Reveal, PhotoBlock, PinkCircle, CTAButton, CTABanner, Mark, LogoWatermark, SectionWatermark, CountUp, VideoTestimonialCard, GHLForm */
// Home — Sections 6 through 10 (Compare table, Testimonials, FAQ, Form, Map)

/* ── 6. COMPARISON TABLE ───────────────────────────────────── */
function CompareTable({ onCTA }) {
  const rows = [
    { criterio: 'Come è fatto',
      nutr: 'Stesso approccio per tutte le età',
      gym:  'Programmi standard per tutti',
      pf:   'Costruito sul corpo della donna dopo i 40' },
    { criterio: 'Nutrizione',
      nutr: 'Personalizzata, ma scollegata dal resto',
      gym:  'Non inclusa',
      pf:   'Su misura e integrata con l\u2019allenamento' },
    { criterio: 'Allenamento',
      nutr: 'Non incluso',
      gym:  'Scheda generica, ti arrangi',
      pf:   'Personal trainer dedicato, che ti insegna da zero' },
    { criterio: 'Ambiente',
      nutr: 'Studio medico',
      gym:  'Affollata, rumorosa, sguardi addosso',
      pf:   'Max 3 persone, riservato, senza giudizio' },
    { criterio: 'Supporto',
      nutr: 'Una visita al mese',
      gym:  'Nessuno ti cerca se sparisci',
      pf:   'Check ogni 2 settimane, ci siamo sempre' },
    { criterio: 'Dopo il percorso',
      nutr: 'Finisce la dieta, finisce tutto',
      gym:  'Molli e torni a zero',
      pf:   'Il tuo modo di mangiare resta per sempre' },
  ];

  const X = () => (
    <span aria-hidden="true" style={{
      width: 18, height: 18, flexShrink: 0, marginTop: 2,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      borderRadius: '9999px', border: '1px solid var(--color-border-strong)',
      color: 'var(--color-text-muted)',
    }}>
      <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.6" 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>
  );
  const Check = () => (
    <span aria-hidden="true" style={{
      width: 18, height: 18, flexShrink: 0, marginTop: 2,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      borderRadius: '9999px',
      background: 'var(--color-background)', color: 'var(--color-primary)',
    }}>
      <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="2.5 6.5 5 9 9.5 3.5"/></svg>
    </span>
  );

  const cell = (children, kind) => (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 10,
      fontFamily: 'Inter, sans-serif',
      fontSize: 15, lineHeight: 1.55,
      fontWeight: kind === 'pf' ? 500 : 400,
      color: kind === 'pf' ? 'var(--color-text-on-dark)' : 'var(--color-text-secondary)',
    }}>
      {kind === 'pf' ? <Check /> : <X />}
      <span>{children}</span>
    </div>
  );

  return (
    <section className="bg-radial" style={{ padding: '80px 30px', overflow: 'hidden' }}>
      <LogoWatermark size={340} bottom={60} left={-40} rotate={-18} opacity={0.05} />
      <div style={{ maxWidth: 1370, margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Confronto</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, maxWidth: 820, marginLeft: 'auto', marginRight: 'auto', textWrap: 'balance',
          }}>Perché Progetto Forma funziona dove gli altri hanno fallito?</h2>
        </Reveal>

        <Reveal delay={80}>
          {/* DESKTOP: grid table */}
          <div className="cmp-table" style={{
            display: 'grid',
            gridTemplateColumns: '0.9fr 1fr 1fr 1.15fr',
            border: '1px solid var(--color-border)', borderRadius: 12, overflow: 'hidden',
            background: 'var(--color-background)',
            position: 'relative',
            maxWidth: 1270, margin: '0 auto',
          }}>
            {/* Header row */}
            <div style={hdrCellStyle('first')}></div>
            <div style={hdrCellStyle()}>Nutrizionista</div>
            <div style={hdrCellStyle()}>Palestra</div>
            <div style={hdrCellStyle('pf')}>
              <img src="assets/logo-forma.png" alt="Progetto Forma" style={{
                height: 32, width: 'auto', verticalAlign: 'middle',
                filter: 'brightness(0) invert(1)',
              }} />
            </div>

            {rows.map((r, i) => (
              <React.Fragment key={i}>
                <div style={rowCellStyle('first', i === rows.length - 1)}>{r.criterio}</div>
                <div style={rowCellStyle('std', i === rows.length - 1)}>{cell(r.nutr, 'std')}</div>
                <div style={rowCellStyle('std', i === rows.length - 1)}>{cell(r.gym, 'std')}</div>
                <div style={rowCellStyle('pf', i === rows.length - 1)}>{cell(r.pf, 'pf')}</div>
              </React.Fragment>
            ))}
          </div>

          {/* MOBILE: ogni riga è una mini-card */}
          <div className="cmp-table-mobile">
            {rows.map((r, i) => (
              <article key={i} style={{
                background: 'var(--color-surface-pure)',
                border: '1px solid var(--color-border)',
                borderRadius: 12,
                overflow: 'hidden',
                boxShadow: 'var(--shadow-xs)',
              }}>
                {/* Card header con il criterio */}
                <div style={{
                  background: 'var(--color-primary)',
                  color: 'var(--color-text-on-dark)',
                  padding: '14px 18px',
                  fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 13,
                  letterSpacing: '0.1em', textTransform: 'uppercase',
                  textAlign: 'center',
                }}>{r.criterio}</div>

                {/* Standard rows (Nutrizionista + Palestra) inside padded container */}
                <div style={{ padding: '4px 16px 0' }}>
                  {[
                    { label: 'Nutrizionista', value: r.nutr },
                    { label: 'Palestra',      value: r.gym  },
                  ].map((it, j) => (
                    <div key={j} style={{
                      padding: '14px 0',
                      borderTop: j > 0 ? '1px solid var(--color-border)' : 'none',
                    }}>
                      <div style={{
                        fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 11,
                        letterSpacing: '0.12em', textTransform: 'uppercase',
                        color: 'var(--color-text-muted)',
                        marginBottom: 8,
                      }}>{it.label}</div>
                      <div style={{
                        display: 'flex', alignItems: 'flex-start', gap: 10,
                        fontFamily: 'Inter, sans-serif',
                        fontSize: 15, lineHeight: 1.55,
                        color: 'var(--color-text-secondary)',
                      }}>
                        <X />
                        <span>{it.value}</span>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Progetto Forma row — full-bleed, same colors as desktop pf column */}
                <div style={{
                  background: 'var(--color-primary-soft)',
                  color: 'var(--color-text-on-dark)',
                  padding: '16px 18px',
                }}>
                  <div style={{
                    fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 11,
                    letterSpacing: '0.12em', textTransform: 'uppercase',
                    color: 'rgba(249, 244, 237, 0.7)',
                    marginBottom: 8,
                  }}>Progetto Forma</div>
                  <div style={{
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                    fontFamily: 'Inter, sans-serif',
                    fontSize: 15, lineHeight: 1.55, fontWeight: 500,
                    color: 'var(--color-text-on-dark)',
                  }}>
                    <span aria-hidden="true" style={{
                      width: 18, height: 18, flexShrink: 0, marginTop: 2,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      borderRadius: '9999px',
                      background: 'var(--color-background)', color: 'var(--color-primary)',
                    }}>
                      <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="2.5 6.5 5 9 9.5 3.5"/></svg>
                    </span>
                    <span>{r.pf}</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </Reveal>

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

function hdrCellStyle(kind) {
  return {
    padding: kind === 'pf' ? '24px 22px' : '22px 22px',
    background: kind === 'pf' ? 'var(--color-primary)' : 'var(--color-surface-alt)',
    borderBottom: kind === 'pf' ? '1px solid var(--color-primary)' : '1px solid var(--color-border-strong)',
    borderLeft: kind === 'pf' ? 'none' : (kind === 'first' ? 'none' : '1px solid var(--color-border)'),
    fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 13,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    color: kind === 'pf' ? 'var(--color-text-on-dark)' : 'var(--color-text-secondary)',
    display: 'flex', alignItems: 'center',
  };
}
function rowCellStyle(kind, isLast) {
  return {
    padding: '22px 22px',
    borderBottom: kind === 'pf'
      ? (isLast ? 'none' : '1px solid rgba(249, 244, 237,0.15)')
      : (isLast ? 'none' : '1px solid var(--color-border)'),
    borderLeft: kind === 'pf' ? 'none' : (kind === 'first' ? 'none' : '1px solid var(--color-border)'),
    background: kind === 'pf' ? 'var(--color-primary-soft)' : 'transparent',
    fontFamily: kind === 'first' ? 'Inter, sans-serif' : 'inherit',
    fontWeight: kind === 'first' ? 600 : 400,
    fontSize: kind === 'first' ? 14 : 15,
    color: kind === 'first' ? 'var(--color-text-primary)' : 'inherit',
    display: 'flex', alignItems: 'center',
  };
}

/* ── 7. TESTIMONIALS (zigzag V-Q-V / Q-V-Q) ── */
function HomeTestimonials({ onCTA }) {
  const v1 = 'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822999f3b10088dce8a.mp4';
  const v2 = 'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822c4688ed9cd1fce1d.mp4';
  const v3 = 'https://assets.cdn.filesafe.space/Tw5KD9LS4ls1TRXc8ZoL/media/6a15b822449f78709ed5a977.mp4';

  const cells = [
    { type: 'video', src: v1 },
    { type: 'quote', tone: 'primary', text: 'Grazie, perché la mia vita è completamente cambiata, me l’avete salvata' },
    { type: 'video', src: v2 },
    { type: 'quote', tone: 'pink',    text: 'Ci sono persone intorno a me che ti supportano e fanno di tutto per migliorarti' },
    { type: 'video', src: v3 },
    { type: 'quote', tone: 'pink',    text: 'Non essere da sola in nessun momento e una persona che si dedicava a me in modo specifico' },
  ];

  return (
    <section className="bg-radial" style={{ padding: '80px 30px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 64 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Oltre <CountUp end={180} /> donne aiutate</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,
          }}>Ecco alcuni dei nostri risultati</h2>
        </Reveal>

        <div className="testi-grid home-testi-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {cells.map((c, i) => (
            <Reveal key={i} delay={i * 40}>
              {c.type === 'video'
                ? <VideoTestimonialCard src={c.src} />
                : <HomeQuoteCard tone={c.tone} text={c.text} />}
            </Reveal>
          ))}
        </div>

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

function HomeQuoteCard({ tone, text }) {
  const isPrimary = tone === 'primary';
  const bg = isPrimary ? 'var(--color-primary-soft)' : 'var(--color-accent-pink)';
  const fg = isPrimary ? 'var(--color-background)'   : 'var(--color-text-primary)';
  const quoteCol = isPrimary ? 'rgba(249, 244, 237, 0.55)' : 'var(--color-primary)';
  return (
    <article className="home-quote-card" style={{
      background: bg, color: fg, borderRadius: 12,
      padding: '32px 30px',
      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: quoteCol, opacity: isPrimary ? 1 : 0.5,
      }}>"</div>
      <p style={{
        fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
        fontSize: 'clamp(20px, 2.2vw, 28px)', lineHeight: 1.25,
        color: fg, margin: 0, textWrap: 'balance',
      }}>{text}</p>
    </article>
  );
}

function PhotoCard({ variant, gridRow, label }) {
  return (
    <Reveal style={{ gridRow }}>
      <PhotoBlock variant={variant} label={label} radius={12}
        style={{ width: '100%', height: '100%' }} />
    </Reveal>
  );
}

function QuoteCard({ bg, gridRow, quote, name, sub, avatar }) {
  const isPrimary = bg === 'primary';
  const isPink    = bg === 'pink';
  const styles = {
    background: isPrimary ? 'var(--color-primary)' : isPink ? 'var(--color-accent-pink)' : 'var(--color-background)',
    border: bg === 'white' ? '1px solid var(--color-border)' : 'none',
    color: isPrimary ? 'var(--color-background)' : 'var(--color-text-primary)',
  };
  const quoteColor = isPrimary ? 'var(--color-background)' : 'var(--color-primary)';
  const subColor   = isPrimary ? 'rgba(249, 244, 237,.7)' : 'var(--color-text-secondary)';

  const av = {
    rose:  'linear-gradient(135deg, #e8c9c4, #b78c87)',
    sand:  'linear-gradient(135deg, #e3d3b6, #a18c6d)',
    taupe: 'linear-gradient(135deg, #bcaea0, #7d6e60)',
    warm:  'linear-gradient(135deg, #d4bca0, #8a7a66)',
  }[avatar] || 'linear-gradient(135deg, #F2ECE8, #d3a3a6)';

  return (
    <Reveal style={{ gridRow }}>
      <article style={{
        ...styles, borderRadius: 12,
        padding: '28px 28px 22px',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        height: '100%', width: '100%',
        boxShadow: bg === 'white' ? 'var(--shadow-sm)' : 'none',
      }}>
        <div>
          <div style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 56, lineHeight: 0.6,
            color: quoteColor, opacity: isPrimary ? 0.5 : 0.55,
            marginBottom: 8,
          }}>"</div>
          <p style={{
            fontFamily: 'Fraunces, serif', fontStyle: 'italic', fontWeight: 400,
            fontSize: 'clamp(17px, 1.5vw, 20px)', lineHeight: 1.4,
            color: styles.color, margin: 0, textWrap: 'pretty',
          }}>{quote}</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 24 }}>
          <div style={{
            width: 36, height: 36, borderRadius: '9999px',
            background: av,
            border: isPrimary ? '2px solid rgba(249, 244, 237,.18)' : '2px solid var(--color-background)',
            flexShrink: 0,
          }} />
          <div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 14, color: styles.color }}>{name}</div>
            <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: subColor }}>{sub}</div>
          </div>
        </div>
      </article>
    </Reveal>
  );
}

/* ── 8. FAQ ─────────────────────────────────────────────────── */
function FAQ() {
  const items = [
    { q: 'Ho già provato di tutto e non ha funzionato.',
      a: 'Quei metodi non erano costruiti per il tuo corpo dopo i 40 e non prevedevano nessun supporto. Qui sei seguita ogni due settimane. Non sarai mai sola.' },
    { q: 'Sono troppo fuori forma per iniziare.',
      a: 'Non esiste. Si parte dalla tua situazione reale, qualunque sia. Ogni esercizio insegnato da zero, al tuo ritmo.' },
    { q: 'E se poi mollo?',
      a: 'È normale chiederselo. Per questo esistono i check ogni due settimane: se qualcosa non va, lo vediamo e interveniamo prima che diventi un motivo per mollare.' },
    { q: 'Quanto tempo ci vuole per vedere i primi risultati?',
      a: 'Le prime differenze le senti in poche settimane: più energia, sonno migliore, vestiti che iniziano a stare meglio. I risultati strutturali arrivano nei sei mesi.' },
    { q: 'Devo rinunciare all\u2019aperitivo e alle cene fuori?',
      a: 'No. Il piano alimentare è costruito sulla tua vita reale. Niente diete da fame ma un\u2019abitudine sana che resta anche dopo il percorso.' },
    { q: 'Quanto costa?',
      a: 'Ne parliamo in consulenza perché il percorso è personalizzato. Il costo è rateizzato, senza finanziaria e senza vincolo.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: 'var(--color-surface-alt)', padding: '80px 30px', position: 'relative', overflow: 'hidden' }}>
      <LogoWatermark size={380} top={60} right={-30} rotate={14} opacity={0.04} />
      <div style={{ maxWidth: 880, margin: '0 auto', position: 'relative' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 56 }}>
          <Eyebrow style={{ marginBottom: 14 }}>Ultimi dubbi?</Eyebrow>
          <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,
          }}>Ecco le risposte alle domande più frequenti</h2>
        </Reveal>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <Reveal key={i} delay={i * 40}>
                <div style={{
                  background: isOpen ? 'var(--color-accent-pink)' : 'var(--color-surface-pure)',
                  border: `1px solid ${isOpen ? 'var(--color-border-strong)' : 'var(--color-border)'}`,
                  borderRadius: 10, overflow: 'hidden',
                  boxShadow: isOpen ? 'var(--shadow-sm)' : 'var(--shadow-xs)',
                  transition: 'background 280ms cubic-bezier(.22,1,.36,1), border-color 280ms, box-shadow 280ms',
                }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    aria-expanded={isOpen}
                    style={{
                      width: '100%', background: 'transparent', border: 'none', cursor: 'pointer',
                      padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                      textAlign: 'left', fontFamily: 'inherit',
                    }}>
                    <span style={{
                      fontFamily: 'Inter, sans-serif', fontWeight: 700, fontSize: 17,
                      color: 'var(--color-text-primary)',
                    }}>{it.q}</span>
                    <span style={{
                      width: 28, height: 28, flexShrink: 0,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      color: isOpen ? 'var(--color-primary)' : 'var(--color-text-primary)',
                      transition: 'transform 320ms cubic-bezier(.22,1,.36,1), color 200ms',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                    }}>
                      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    </span>
                  </button>
                  <div style={{
                    display: 'grid',
                    gridTemplateRows: isOpen ? '1fr' : '0fr',
                    opacity: isOpen ? 1 : 0,
                    transition: 'grid-template-rows 480ms cubic-bezier(.4, 0, .2, 1), opacity 320ms cubic-bezier(.4, 0, .2, 1) ' + (isOpen ? '160ms' : '0ms'),
                  }}>
                    <div style={{ overflow: 'hidden', minHeight: 0 }}>
                      <p style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 16, lineHeight: 1.7,
                        color: 'var(--color-text-secondary)',
                        margin: 0, padding: '0 24px 22px', maxWidth: 720,
                      }}>{it.a}</p>
                    </div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ── 9. CTA + FORM ─────────────────────────────────────────── */
function ContactForm({ onCTA }) {
  return (
    <section id="prenota" className="bg-radial" style={{ padding: '80px 30px' }}>
      <div className="form-grid" style={{
        maxWidth: 1370, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 80, alignItems: 'center',
      }}>
        <Reveal>
          <Eyebrow style={{ marginBottom: 18 }}>Cosa aspetti ancora?</Eyebrow>
          <h2 className="anim-char-reveal" style={{
            fontFamily: 'Fraunces, serif', fontWeight: 600,
            fontSize: 'clamp(32px, 4.2vw, 56px)', lineHeight: 1.05,
            letterSpacing: '-0.02em', color: 'var(--color-text-primary)',
            margin: '0 0 22px', textWrap: 'pretty',
          }}>Anche tu meriti del tempo per te stessa</h2>
          <p style={{
            fontFamily: 'Inter, sans-serif', fontSize: 18, lineHeight: 1.6,
            color: 'var(--color-text-secondary)', margin: '0 0 32px', maxWidth: 460,
          }}>Compila il modulo e prenota una consulenza GRATUITA della durata di 45 minuti.</p>
          <CTAButton onClick={onCTA} size="lg" />
        </Reveal>

        <Reveal delay={120}>
          <div style={{
            background: 'var(--color-background)', borderRadius: 12,
            border: '1px solid var(--color-border)',
            padding: '32px 32px', display: 'flex', flexDirection: 'column', gap: 20,
            boxShadow: 'var(--shadow-md)',
          }}>
            {[
              { label: '45 min', sub: 'di consulenza, in studio o in call' },
              { label: 'Gratuita', sub: 'nessun costo, nessuna sorpresa' },
              { label: 'Nessun vincolo', sub: 'decidi tu se proseguire' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                <span style={{ color: 'var(--color-primary)', marginTop: 2 }}><Mark size={22} /></span>
                <div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 16, color: 'var(--color-text-primary)' }}>{r.label}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: 'var(--color-text-secondary)' }}>{r.sub}</div>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ── 10. MAP + HOURS ───────────────────────────────────────── */
function MapBlock() {
  const sectionRef = React.useRef(null);
  const bgRef = React.useRef(null);

  React.useEffect(() => {
    const sec = sectionRef.current;
    const bg = bgRef.current;
    if (!sec || !bg) return;
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = sec.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = (vh - r.top - r.height / 2 - vh / 2) / (vh + r.height);
      bg.style.transform = `translateY(${(p * 180).toFixed(2)}px) scale(1.30)`;
    };
    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 ref={sectionRef} className="bg-parallax" style={{
      position: 'relative', overflow: 'hidden',
      padding: '80px 30px',
    }}>
      <div ref={bgRef} style={{
        position: 'absolute', inset: 0, zIndex: 0, willChange: 'transform',
      }}>
        <img src="assets/foto/il-centro.webp" alt="" aria-hidden="true"
          style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', display: 'block' }} />
      </div>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(to bottom, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.65) 100%)',
        pointerEvents: 'none',
      }} />

      <div className="map-grid" style={{
        position: 'relative', zIndex: 2,
        maxWidth: 1370, margin: '0 auto',
        display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48, alignItems: 'stretch',
      }}>
        <Reveal>
          <div style={{
            borderRadius: 12, overflow: 'hidden',
            border: '1px solid rgba(255,255,255,0.12)',
            boxShadow: '0 24px 60px rgba(0,0,0,0.35)',
            height: '100%', minHeight: 440,
          }}>
            <iframe
              title="Mappa Progetto Forma Ferrara"
              src="https://www.google.com/maps?q=Progetto+Forma+Via+Borgo+dei+Leoni+71%2FA+44121+Ferrara&z=16&output=embed"
              style={{ border: 0, width: '100%', height: '100%', display: 'block', filter: 'grayscale(0.35) saturate(0.9)' }}
              loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="studio-card" style={{
            background: 'rgba(255,255,255,0.95)',
            backdropFilter: 'blur(14px) saturate(150%)',
            WebkitBackdropFilter: 'blur(14px) saturate(150%)',
            border: '1px solid rgba(255,255,255,0.6)',
            borderRadius: 12,
            padding: '40px 36px', height: '100%', boxSizing: 'border-box',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 24,
            boxShadow: '0 24px 60px rgba(0,0,0,0.35)',
          }}>
            <div>
              <Eyebrow style={{ marginBottom: 12 }}>Lo studio</Eyebrow>
              <h3 className="anim-char-reveal" style={{
                fontFamily: 'Fraunces, serif', fontWeight: 600,
                fontSize: 'clamp(30px, 4.5vw, 32px)', lineHeight: 1.15, letterSpacing: '-0.01em',
                color: 'var(--color-text-primary)', margin: '0 0 18px',
              }}>Ecco dove trovi Progetto Forma</h3>
              <p style={{
                fontFamily: 'Inter, sans-serif', fontSize: 15.5, lineHeight: 1.65,
                color: 'var(--color-text-secondary)', margin: 0,
              }}>Via Borgo dei Leoni, 71/A<br/>44121 Ferrara (FE)<br/>366 392 1782</p>
            </div>

            <div style={{ paddingTop: 22, borderTop: '1px solid var(--color-border-strong)' }}>
              <div style={{
                fontFamily: 'Inter, sans-serif', fontWeight: 600, fontSize: 11,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--color-text-muted)', marginBottom: 12,
              }}>Orari di apertura</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, fontFamily: 'Inter, sans-serif', fontSize: 14.5, color: 'var(--color-text-primary)' }}>
                <div style={hourRow}><span>Lun – Ven</span><span>09:00 – 21:00</span></div>
                <div style={hourRow}><span>Sabato</span><span>09:00 – 14:00</span></div>
                <div style={hourRow}><span style={{ color: 'var(--color-text-muted)' }}>Domenica</span><span style={{ color: 'var(--color-text-muted)' }}>Chiuso</span></div>
              </div>
            </div>

            <a href="https://www.google.com/maps/place/Progetto+Forma+%E2%80%93+Personal+Trainer+%26+Studio+Ricomposizione+Corporea+Ferrara"
               target="_blank" rel="noopener noreferrer"
               style={{
                 alignSelf: 'flex-start',
                 fontFamily: 'Inter, sans-serif', fontWeight: 500, fontSize: 14,
                 color: 'var(--color-primary)', textDecoration: 'none',
                 display: 'inline-flex', alignItems: 'center', gap: 8,
                 borderBottom: '1px solid var(--color-primary)', paddingBottom: 3,
               }}>
              Apri in Google Maps
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polyline points="7 17 17 7"/><polyline points="7 7 17 7 17 17"/></svg>
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
const hourRow = { display: 'flex', justifyContent: 'space-between', gap: 24 };

Object.assign(window, { CompareTable, HomeTestimonials, FAQ, ContactForm, MapBlock });