/* global React */
/* EgoYüzme · Footer */

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div className="grid">
        <div>
          <img
            src="assets/logos/wordmark-horizontal-white.png"
            alt="EgoYüzme"
            style={{ height: 36, marginBottom: 14 }}
          />
          <p style={{ color: "rgba(255,255,255,0.78)", fontSize: "var(--fs-14)", lineHeight: 1.6, margin: 0 }}>
            EGO Sport Maltepe Yüzme Akademisi · İstanbul Anadolu Yakası'nda 5 şube ile 2 yaş üstü her seviyeye yüzme eğitimi.
          </p>
          <div className="flex gap-2 mt-6" style={{ flexWrap: "wrap" }}>
            <span className="chip chip--outline" style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.3)" }}>TYF lisanslı</span>
            <span className="chip chip--outline" style={{ background: "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.3)" }}>360° video analiz</span>
          </div>
        </div>
        <div>
          <h4>Programlar</h4>
          <ul>
            <li><a href="#/programlar">Temel Eğitim</a></li>
            <li><a href="#/programlar">Teknik Çalışmalar</a></li>
            <li><a href="#/programlar">Performans Grubu</a></li>
            <li><a href="#/programlar">Medikal Yüzme</a></li>
            <li><a href="#/programlar">Özel Gereksinimli</a></li>
            <li><a href="#/programlar">Yetişkin Yüzme</a></li>
          </ul>
        </div>
        <div>
          <h4>Şubeler</h4>
          <ul>
            <li><a href="#/subeler">Maltepe</a></li>
            <li><a href="#/subeler">Pendik</a></li>
            <li><a href="#/subeler">Şerifali</a></li>
            <li><a href="#/subeler">Dragos</a></li>
            <li><a href="#/subeler">Ataşehir</a></li>
          </ul>
        </div>
        <div>
          <h4>İletişim</h4>
          <ul>
            <li><a href="tel:+905551234567">0 555 123 45 67</a></li>
            <li><a href="mailto:info@egoyuzme.com">info@egoyuzme.com</a></li>
            <li><a href="https://wa.me/905551234567" target="_blank" rel="noopener">WhatsApp ile yaz</a></li>
            <li style={{ marginTop: 8, color: "rgba(255,255,255,0.6)", fontSize: "var(--fs-13)" }}>Hafta içi 08:00–22:00</li>
            <li style={{ color: "rgba(255,255,255,0.6)", fontSize: "var(--fs-13)" }}>Hafta sonu 09:00–20:00</li>
          </ul>
        </div>
      </div>
      <div className="bottom">
        <div>© 2026 EGO Sport Maltepe Yüzme Akademisi. Tüm hakları saklıdır.</div>
        <div className="flex gap-4">
          <a href="#">KVKK</a>
          <a href="#">Çerez politikası</a>
          <a href="#">Kullanım koşulları</a>
        </div>
      </div>
    </div>
  </footer>
);

const WhatsAppFAB = ({ phone = "905551234567", onClick }) => (
  <a
    className="fab-wa"
    href={`https://wa.me/${phone}`}
    target="_blank"
    rel="noopener noreferrer"
    aria-label="WhatsApp ile iletişim"
    onClick={e => { if (onClick) { e.preventDefault(); onClick(); } }}
  >
    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
      <path d="M19.11 17.21c-.27-.14-1.61-.79-1.86-.88s-.43-.13-.61.14c-.18.27-.7.88-.86 1.06-.16.18-.32.2-.59.07-1.61-.81-2.67-1.45-3.74-3.28-.28-.49.28-.45.81-1.5.09-.18.05-.33-.02-.47s-.61-1.47-.84-2-.44-.46-.61-.46h-.52c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.26 0 1.34.97 2.62 1.11 2.81.14.18 1.92 2.93 4.66 4.11.65.28 1.16.45 1.55.58.65.21 1.25.18 1.72.11.52-.08 1.61-.66 1.84-1.3.23-.64.23-1.19.16-1.3-.07-.11-.25-.18-.52-.32zM16 4C9.37 4 4 9.37 4 16c0 2.11.55 4.09 1.5 5.81L4 28l6.36-1.67A11.9 11.9 0 0 0 16 28c6.63 0 12-5.37 12-12S22.63 4 16 4zm0 21.79c-1.93 0-3.73-.57-5.24-1.55l-3.66.96.99-3.57A9.79 9.79 0 1 1 25.79 16c0 5.4-4.39 9.79-9.79 9.79z" />
    </svg>
  </a>
);

Object.assign(window, { Footer, WhatsAppFAB });
