// Footer.jsx — order CTA banner + footer columns + sign-off
const Footer = ({ onOrder }) => {
  return (
    <React.Fragment>
      <section id="order" className="psd-order-cta">
        <div className="psd-order-cta-inner psd-reveal">
          <div className="psd-script psd-order-script">Hungry?</div>
          <h2 className="psd-order-title">Don't wait — order online.</h2>
          <p className="psd-order-lede">Pickup in as little as 15 minutes. Pay ahead, skip the line.</p>
          <button className="psd-btn psd-btn--primary psd-btn--lg" onClick={onOrder}>
            Start an Order <span aria-hidden="true">→</span>
          </button>
        </div>
      </section>

      <footer className="psd-footer">
        <div className="psd-footer-grid">
          <div>
            <img src="assets/logo-nav.svg" alt="Puerto Rican Deli" className="psd-footer-logo" />
            <p className="psd-footer-tag psd-script">Thanks for stopping by. — The Puerto Rican Deli Family</p>
          </div>
          <div>
            <div className="psd-footer-h">Visit</div>
            <p>123 Main Street<br />Manchester, CT 06040</p>
            <p><a href="tel:5551233634">(555) 123-3634</a></p>
          </div>
          <div>
            <div className="psd-footer-h">Hours</div>
            <p>Mon–Fri · 8am – 3pm<br />Sat · 8am – 2pm · Sun Closed</p>
          </div>
          <div>
            <div className="psd-footer-h">Follow</div>
            <p>
              <a href="#" target="_blank" rel="noopener">Instagram</a><br />
              <a href="#" target="_blank" rel="noopener">Facebook</a>
            </p>
          </div>
        </div>
        <div className="psd-footer-bar">
          <span>© {new Date().getFullYear()} Puerto Rican Deli</span>
          <span>Manchester, CT · 🇵🇷</span>
        </div>
      </footer>
    </React.Fragment>
  );
};

window.Footer = Footer;