/* global React, CLINIC, IconInstagram, IconDoctify */

function Footer({ onBook, onNav }) {
  return (
    <footer className="ftr">
      <div className="container">
        <div className="ftr__grid">
          <div className="ftr__brand">
            <img src="media/logo.webp" alt="Empire Dental Clinic" />
            <p className="ftr__tag">
              Cosmetic & general dentistry in Business Bay, Dubai. Rated 4.98 / 5 by 20 verified patients on Doctify.
            </p>
          </div>
          <div className="ftr__col">
            <h4>Treatments</h4>
            <ul>
              <li><a href="#treatments" onClick={(e) => { e.preventDefault(); onNav("treatments"); }}>Cosmetic dentistry</a></li>
              <li><a href="#treatments" onClick={(e) => { e.preventDefault(); onNav("treatments"); }}>Orthodontics</a></li>
              <li><a href="#treatments" onClick={(e) => { e.preventDefault(); onNav("treatments"); }}>Implants & restoration</a></li>
              <li><a href="#treatments" onClick={(e) => { e.preventDefault(); onNav("treatments"); }}>General & preventive</a></li>
            </ul>
          </div>
          <div className="ftr__col">
            <h4>Clinic</h4>
            <ul>
              <li><a href="#dentists" onClick={(e) => { e.preventDefault(); onNav("dentists"); }}>Our dentists</a></li>
              <li><a href="#reviews" onClick={(e) => { e.preventDefault(); onNav("reviews"); }}>Reviews</a></li>
              <li><a href="#contact" onClick={(e) => { e.preventDefault(); onNav("contact"); }}>Contact & directions</a></li>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onBook(); }}>Book a consultation</a></li>
            </ul>
          </div>
          <div className="ftr__col">
            <h4>Reach us</h4>
            <ul>
              <li><a href={CLINIC.phoneHref}>{CLINIC.phone}</a></li>
              <li>Office 901, Tower B</li>
              <li>Empire Heights, Marasi Dr</li>
              <li>Business Bay, Dubai</li>
            </ul>
            <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
              <a href="#" onClick={e => e.preventDefault()} aria-label="Instagram" style={{ width: 36, height: 36, borderRadius: 999, border: '1px solid rgba(255,255,255,.15)', display: 'grid', placeItems: 'center' }}><IconInstagram /></a>
              <a href={CLINIC.doctify} target="_blank" rel="noreferrer" aria-label="Doctify" style={{ width: 36, height: 36, borderRadius: 999, border: '1px solid rgba(255,255,255,.15)', display: 'grid', placeItems: 'center' }}><IconDoctify /></a>
            </div>
          </div>
        </div>
        <div className="ftr__bottom">
          <div>© 2026 Empire Dental Clinic, LLC · DHA-licensed practice</div>
          <div>Design prototype — content cited from research/ ·  Not yet a live website.</div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;