// Footer
function Footer({ navigate, openTour }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div style={{ filter: 'brightness(1.1)' }}>
              <IdeaLogo size={56} />
            </div>
            <p style={{ color: 'rgba(255,255,255,.65)', fontSize: 14.5, marginTop: 18, maxWidth: 320 }}>
              A KHDA-registered premium early-years centre in Victory Heights, Dubai Sports City. Inspiring children from 9 months to 6 years with the US Creative Curriculum.
            </p>
            <div style={{ marginTop: 20, display: 'flex', gap: 8 }}>
              <a className="btn btn-light btn-sm" href="https://www.facebook.com/IDEAearlylearningcenter" target="_blank" rel="noopener" style={{ background: 'rgba(255,255,255,.08)', color: 'white', borderColor: 'rgba(255,255,255,.15)' }}>
                <Icon.Facebook size={14} /> Facebook
              </a>
            </div>
          </div>
          <div>
            <h4>Visit</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8, fontSize: 14 }}>
              {[
                ['home', 'Home'],
                ['approach', 'Our Approach'],
                ['programmes', 'Programmes & Ages'],
                ['facilities', 'Facilities'],
                ['admissions', 'Admissions & Fees'],
                ['about', 'About'],
                ['contact', 'Contact'],
              ].map(([id, l]) => (
                <li key={id}><button onClick={() => navigate(id)} style={{ color: 'inherit' }}>{l}</button></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>Contact</h4>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10, fontSize: 14 }}>
              <li style={{ display: 'flex', gap: 10 }}><Icon.Pin /> Victory Heights, Dubai Sports City</li>
              <li style={{ display: 'flex', gap: 10 }}><Icon.Phone /> <a href="tel:8004332352">800 4332 352</a></li>
              <li style={{ display: 'flex', gap: 10 }}><Icon.Mail /> <a href="mailto:admissions@ideaelc.ae">admissions@ideaelc.ae</a></li>
              <li style={{ display: 'flex', gap: 10 }}><Icon.Mail /> <a href="mailto:info@ideaelc.ae">info@ideaelc.ae</a></li>
            </ul>
          </div>
          <div>
            <h4>Book a tour</h4>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,.65)', margin: '0 0 14px' }}>
              The best way to know us is to visit. We'd love to show you around.
            </p>
            <button className="btn btn-primary" onClick={openTour}>
              <Icon.Calendar size={14} /> Arrange a Tour
            </button>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} IDEA Early Learning Center · IDEA Education Group · KHDA-registered.</div>
          <div style={{ display: 'flex', gap: 16 }}>
            <a href="#">Privacy</a>
            <a href="#">Safeguarding</a>
            <a href="#">Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;