/* BottomCta + Footer */

const BottomCta = () => (
  <section className="bottom-cta">
    <h2>Ready to start<br/><em>your next project?</em></h2>
    <p>Join thousands of homeowners who are transforming their spaces, one Saturday at a time. No experience necessary — just a willingness to try.</p>
    <a href="/" className="go">Start exploring →</a>
  </section>
);

const Footer = ({ logo }) => {
  const Logo = logo === "stamp" ? window.LogoStamp : logo === "mono" ? window.LogoMonogram : window.LogoOriginal;
  return (
    <footer className="site-footer">
      <div className="wrap-wide">
        <div className="footer-grid">
          <div className="footer-brand">
            <Logo />
            <p>We believe that everyone has the ability to create a home they love. Our mission is to provide the guidance, inspiration, and community to make it happen.</p>
          </div>
          <div>
            <h4>Explore</h4>
            <ul>
              <li><a href="/about/">About The Network</a></li>
              <li><a href="/contact/">Contact Us</a></li>
              <li><a href="/disclaimer/">Disclaimer</a></li>
              <li><a href="/privacy/">Privacy Policy</a></li>
            </ul>
          </div>
          <div>
            <h4>Part of The HowTo Network</h4>
            <ul>
              <li><a href="https://howtofoodedition.com" target="_blank" rel="noopener noreferrer">HowTo: Food Edition</a></li>
              <li><a href="https://howtobeautyedition.com" target="_blank" rel="noopener noreferrer">HowTo: Beauty Edition</a></li>
              <li><a href="https://howtotraveledition.com" target="_blank" rel="noopener noreferrer">HowTo: Travel Edition</a></li>
              <li><a href="https://howtotechedition.com" target="_blank" rel="noopener noreferrer">HowTo: Tech Edition</a></li>
              <li><a href="https://howtofamilyedition.com" target="_blank" rel="noopener noreferrer">HowTo: Family Edition</a></li>
              <li><a href="https://howtofinanceedition.com" target="_blank" rel="noopener noreferrer">HowTo: Finance Edition</a></li>
            </ul>
          </div>
          <div className="join">
            <h4>Join Us</h4>
            <p>Get weekly project inspiration delivered to your inbox.</p>
            <form className="footer-join-form" onSubmit={e => e.preventDefault()}>
              <input type="email" placeholder="Your email" aria-label="Email address"/>
              <button type="submit">Join</button>
            </form>
          </div>
        </div>
      </div>
    </footer>
  );
};

window.BottomCta = BottomCta;
window.Footer    = Footer;