// Section 08 — Closing manifesto
function SectionManifesto() {
  return (
    <section className="section" data-screen-label="08 Manifesto" style={{ paddingTop: 'clamp(56px, 7vw, 96px)', paddingBottom: 'clamp(80px, 12vw, 160px)' }}>
      <div className="shell">

        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid var(--line)', paddingTop: 18, marginBottom: 'clamp(40px, 6vw, 100px)', fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-mute)' }}>
            <span><span style={{ color: 'var(--ink)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>09</span> &nbsp; Підсумок</span>
          </div>
        </Reveal>

        <Reveal>
          <p className="display" style={{ fontSize: 'clamp(40px, 6.5vw, 104px)', fontWeight: 600, lineHeight: 0.98, letterSpacing: '-0.035em', maxWidth: '20ch', textWrap: 'balance' }}>
            Ми не створюємо ще один продукт.
          </p>
        </Reveal>

        <Reveal delay={300}>
          <p className="display" style={{ fontSize: 'clamp(36px, 5.5vw, 88px)', fontWeight: 500, lineHeight: 1.0, letterSpacing: '-0.03em', marginTop: 'clamp(36px, 4vw, 64px)', maxWidth: '22ch', color: 'var(--ink-soft)', textWrap: 'balance' }}>
            Ми будуємо <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--ink)' }}>систему</span>,<br />
            у якій звичне щоденне споживання стає способом підтримки організму.
          </p>
        </Reveal>

        <Reveal delay={450}>
          <p className="display" style={{ fontSize: 'clamp(28px, 3.4vw, 52px)', fontWeight: 600, lineHeight: 1.0, letterSpacing: '-0.03em', marginTop: 'clamp(28px, 3vw, 44px)', color: 'var(--accent)' }}>
            Приєднуйся до нас.
          </p>
        </Reveal>

        <Reveal delay={600}>
          <div className="manifesto-footer" style={{ marginTop: 'clamp(56px, 8vw, 110px)', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 'var(--gap-wide)', alignItems: 'center', borderTop: '1px solid var(--line)', paddingTop: 24 }}>
            <img src="uploads/mindme-logo.png" alt="MindMe superfood" className="brand-logo" style={{ height: 'clamp(30px, 2.6vw, 40px)', width: 'auto', display: 'block' }} />
            <span style={{ textAlign: 'center', fontSize: 13, color: 'var(--ink-mute)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
              Зроблено в Україні · 2026
            </span>
            <span className="slide-counter" style={{ fontSize: 13, color: 'var(--ink-mute)', letterSpacing: '0.08em' }}>09</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.SectionManifesto = SectionManifesto;