// components/Footer.jsx
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-display">Hey there, <em>let's babywear.</em></div>
        <div className="footer-grid">
          <div>
            <div className="brand" style={{ color: "var(--cream)", marginBottom: 14 }}>
              <span className="brand-mark" style={{ background: "var(--moss-dark)", color: "var(--cream)", fontSize: 26 }}>👋</span>
              <span className="brand-lockup">
                <span className="brand-greet" style={{ color: "var(--cream)" }}>Hey There,</span>
                <span className="brand-main" style={{ color: "var(--cream)" }}>LET'S BABYWEAR</span>
              </span>
            </div>
            <p style={{ maxWidth: 320, opacity: 0.8, fontSize: 14 }}>
              A little consultancy + community run and supported by Evangelina Galyean. Babywearing educator based in Fallbrook, California. Making REAL LIFE feel doable for every baby, and every kind of family.
            </p>
            <div className="badge-row">
              <span className="badge" style={{ background: "rgba(244,235,221,0.08)", color: "var(--oat)", borderColor: "rgba(244,235,221,0.2)" }}>CBWS Certified</span>
              <span className="badge" style={{ background: "rgba(244,235,221,0.08)", color: "var(--oat)", borderColor: "rgba(244,235,221,0.2)" }}>Infant &amp; Adult CPR Certified</span>
            </div>
          </div>
          <div>
            <h4>Carrier Library <span style={{ opacity: 0.6, fontStyle: "italic", textTransform: "none", letterSpacing: 0 }}>· coming soon</span></h4>
            <ul>
              <li><a href="#">Wraps</a></li>
              <li><a href="#">Ring slings</a></li>
              <li><a href="#">Soft structured</a></li>
              <li><a href="#">Meh dais</a></li>
              <li><a href="#">Onbuhimos</a></li>
            </ul>
          </div>
          <div>
            <h4>Learn</h4>
            <ul>
              <li><a href="classes.html">Workshops <span style={{ opacity: 0.6, fontStyle: "italic", textTransform: "none", letterSpacing: 0 }}>· coming soon</span></a></li>
              <li><a href="carriers.html">Carriers 101</a></li>
              <li><a href="book.html">Book a consult</a></li>
              <li><a href="#">Gift a consult</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Hey There, Let's Babywear · Evangelina Galyean. Made with tea and snacks on repeat.</div>
          <div>
            <a href="https://instagram.com/heythereletsbabywear" target="_blank" rel="noopener" style={{ color: "inherit", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8 }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5" ry="5"></rect>
                <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
              </svg>
              <span>@heythereletsbabywear</span>
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;