/* Footer */

const Footer = () => {
  return (
    <footer className="footer">
      <style>{`
        .footer { background: var(--paper-2); border-top: 1px solid var(--ink-10); padding: 72px 0 32px; }
        .footer-grid {
          display: grid;
          grid-template-columns: 1.6fr 1fr 1fr 1fr;
          gap: 48px;
          padding-bottom: 56px;
          border-bottom: 1px solid var(--ink-20);
        }
        @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
        @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

        .footer-brand { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
        .footer-brand .logo { font-family: var(--font-display); font-size: 32px; font-weight: 380; letter-spacing: -0.015em; }
        .footer-brand p { color: var(--ink-60); font-size: 14px; line-height: 1.55; margin: 0; }
        .footer-cert {
          display: flex; align-items: center; gap: 14px;
          margin-top: 12px;
          padding: 14px 16px;
          background: var(--snow);
          border: 1px solid var(--ink-10);
          border-radius: var(--r-md);
          color: var(--ink);
        }
        .footer-cert .jci-mark { color: var(--ink-80); }
        .footer-cert .ck { font-size: 13px; color: var(--ink-80); line-height: 1.4; }
        .footer-cert .ck strong { display:block; color: var(--ink); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }

        .footer-col h4 {
          font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
          color: var(--ink-60); font-weight: 600; margin: 0 0 20px;
        }
        .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
        .footer-col li { font-size: 14px; color: var(--ink-80); line-height: 1.4; display: flex; align-items: flex-start; gap: 10px; }
        .footer-col li .fc-ic { color: var(--ink-40); flex-shrink: 0; margin-top: 1px; line-height: 0; }
        .footer-col li.fc-meta { color: var(--ink-60); }
        .footer-col a { color: inherit; transition: color 0.15s; }
        .footer-col a:hover { color: var(--clay-dark); }

        .footer-bottom {
          display: flex; justify-content: space-between; align-items: center;
          padding-top: 28px;
          font-size: 12px; color: var(--ink-60);
          flex-wrap: wrap; gap: 16px;
        }
        .footer-bottom nav { display: flex; gap: 20px; }
        .lang-toggle-footer { display:flex; gap:0; font-size:12px; color: var(--ink-60); }
        .lang-toggle-footer span:not(.sep) { cursor: pointer; padding: 4px 6px; }
        .lang-toggle-footer .active { color: var(--ink); border-bottom: 1px solid var(--clay); }
      `}</style>

      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="logo"><img src="assets/assuta_logo_en.svg" alt="Assuta" style={{height:56,width:'auto',display:'block'}}/></div>
            <p>Ведущий центр координации медицинских услуг в Израиле. Помогаем пациентам из СНГ получить лучшее лечение с 2015 года.</p>
            <div className="footer-cert">
              <span className="jci-mark"><I.JCI size={44}/></span>
              <div className="ck">
                <strong>Международный сертификат качества</strong>
                JCI · Joint Commission International, США
              </div>
            </div>
          </div>

          <div className="footer-col">
            <h4>Информация</h4>
            <ul>
              <li><a href="#about">О клинике</a></li>
              <li><a href="#process">Как это работает</a></li>
              <li><a href="#doctors">Врачи</a></li>
              <li><a href="#reviews">Отзывы</a></li>
              <li><a href="#pricing">Стоимость</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Направления</h4>
            <ul>
              <li><a href="#">Онкология</a></li>
              <li><a href="#">Кардиология</a></li>
              <li><a href="#">Неврология</a></li>
              <li><a href="#">Ортопедия</a></li>
              <li><a href="#">Гинекология</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>Контакты</h4>
            <ul>
              <li><span className="fc-ic"><I.Phone size={14}/></span><a href="tel:+972526512654">+972-52-651-2654</a></li>
              <li><span className="fc-ic"><I.WhatsApp size={14}/></span><a href="https://api.whatsapp.com/send?phone=972526512654&text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5%21%20%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%B5%D1%81%D1%83%D0%B5%D1%82%20%D0%BB%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D0%B5%20%D0%B2%20%D0%BA%D0%BB%D0%B8%D0%BD%D0%B8%D0%BA%D0%B5%20%D0%90%D1%81%D1%81%D1%83%D1%82%D0%B0." target="_blank" rel="noopener">WhatsApp</a></li>
              <li><span className="fc-ic"><I.Email size={14}/></span><a href="mailto:Office@hospitalassuta.org">Office@hospitalassuta.org</a></li>
              <li className="fc-meta"><span className="fc-ic"><I.MapPin size={14}/></span>HaBarzel St 20, Tel Aviv-Yafo</li>
              <li className="fc-meta"><span className="fc-ic"><I.Clock size={14}/></span>Ежедневно · 8:00–20:00</li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 Assuta Medical Center · Все права защищены.</div>
          <nav>
            <a href="#">Политика конфиденциальности</a>
            <a href="#">Условия использования</a>
            <a href="#">Медицинская лицензия</a>
          </nav>
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;