const FinalCTA = ({ onShop, onClub, onGift }) => {
  return (
    <section style={{ padding: '100px 0', background: 'var(--sky-300)' }}>
      <div className="container" style={{ textAlign: 'center', maxWidth: 780 }}>
        <CookieMark size={72}/>
        <h2 className="serif" style={{
          fontSize: 'clamp(44px, 5vw, 68px)', fontWeight: 500, margin: '14px 0 14px',
          letterSpacing: '-0.02em', color: '#fff', lineHeight: 1.03,
        }}>
          Ready for your first box?
        </h2>
        <p style={{ color: '#fff', opacity: 0.9, fontSize: 17, maxWidth: 520, margin: '0 auto 32px' }}>
          Pick a path — we'll have warm cookies on a truck before you close this tab.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary btn-lg" onClick={onShop}>
            <Icon name="bag" size={18} stroke="#fff"/> Shop Cookies
          </button>
          <button className="btn btn-lg" onClick={onClub}
            style={{ background: 'var(--cream-50)', color: 'var(--brown-900)' }}>
            <Icon name="sparkle" size={18}/> Join the Club
          </button>
          <button className="btn btn-outline-white btn-lg" onClick={onGift}>
            <Icon name="gift" size={18}/> Send a Gift
          </button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FinalCTA });