// 08 Final CTA + footer
const FinalCTA = () => {
  return (
    <section className="final" data-screen-label="08 Final CTA">
      <div className="final__art final__art--l"><div className="final__art-inner"><img src={(window.__r||(p=>p))('images/final-left.jpg')} alt="" /></div></div>
      <div className="final__art final__art--r"><div className="final__art-inner"><img src={(window.__r||(p=>p))('images/final-right.jpg')} alt="" /></div></div>

      <div className="final__inner">
        <div className="final__eyebrow">
          <span className="pill pill--ghost">
            <span className="pill__dot" />
            READY WHEN YOU ARE
          </span>
        </div>
        <h2 className="final__title">
          Ready to build your <br />
          brand's <em className="serif" style={{ color: 'white' }}>AI Studio?</em>
        </h2>
        <div className="final__ctas">
          <button className="btn btn--primary btn--lg" onClick={()=>window.location.href='https://www.stoodio.ai/contact'}>
            Book Demo <Glyph name="arrow" size={18} />
          </button>
        </div>
      </div>
    </section>
  );
};

const Footer = () => {
  return (
    <footer className="footer" data-screen-label="09 Footer">
      <div className="footer__top">
        <div className="footer__brand">
          <img src="/logo-white.png" alt="Stoodio.ai" className="footer__brand-img" />
        </div>
        <div className="footer__social">
          <a href="https://www.instagram.com/stoodioai/" target="_blank" rel="noopener noreferrer">Instagram</a>
          <a href="https://www.linkedin.com/company/stoodio-ai" target="_blank" rel="noopener noreferrer">LinkedIn</a>
        </div>
      </div>
      <div className="footer__cols">
        <div className="footer__col">
          <div className="footer__col-title">Platform</div>
          <a href="#platform">Image Generation</a>
          <a href="#platform">Video Generation</a>
          <a href="#platform">Workflows</a>
          <a href="#platform">Model Database</a>
          <a href="#platform">Asset Management</a>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Solutions</div>
          <a>Ecommerce</a>
          <a>Campaign</a>
          <a>Social</a>
          <a>Print</a>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Company</div>
          <a>About</a>
          <a>Careers</a>
          <a>Press</a>
          <a href="https://www.stoodio.ai/contact">Contact</a>
        </div>
        <div className="footer__col">
          <div className="footer__col-title">Resources</div>
          <a>Case studies</a>
          <a href="https://www.stoodio.ai/blog">Blog</a>
          <a>Help center</a>
          <a>Commercial rights</a>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Stoodio. All rights reserved.</span>
        <span>stoodio.ai</span>
        <span>Privacy · <a href="https://www.stoodio.ai/terms-and-conditions">Terms</a> · Security</span>
      </div>
    </footer>
  );
};

Object.assign(window, { FinalCTA, Footer });