/* global React, Eyebrow, Reveal, Mark, MapBlock */
// Page — RICHIESTA INVIATA (thank you)

function ThankYouHero() {
  return (
    <section className="bg-radial section-hero" style={{ padding: '150px 30px 90px', textAlign: 'center' }}>
      <div style={{ maxWidth: 720, margin: '0 auto', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <Eyebrow style={{ marginBottom: 16 }}>Grazie</Eyebrow>
        <h1 className="anim-char-reveal" style={{
          fontFamily: 'Fraunces, serif', fontWeight: 600,
          fontSize: 'clamp(40px, 5.4vw, 64px)', lineHeight: 1.05,
          letterSpacing: '-0.02em', color: 'var(--color-text-primary)',
          margin: '0 0 22px', textWrap: 'balance',
        }}>Richiesta inviata</h1>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 19, lineHeight: 1.6,
          color: 'var(--color-text-secondary)', margin: '0 auto', maxWidth: 560,
          textWrap: 'balance',
        }}>A breve verrai ricontattata da un membro del nostro staff per fissare la tua visita gratuita del centro, assicurati di rispondere.</p>
      </div>
    </section>
  );
}

function ThankYouPage() {
  return (
    <>
      <ThankYouHero />
      <MapBlock />
    </>
  );
}

Object.assign(window, { ThankYouHero, ThankYouPage });