const Footer = () => (
  <footer>
    <div className="shell">
      <div className="foot-top">
        <div className="foot-brand">
          <div className="overline">Студия маникюра</div>
          <div className="big">Анна<br/><em>Ковалёва</em></div>
          <p style={{color:"var(--muted)", maxWidth:360}}>
            Авторский маникюр в центре Москвы. Запись — на 2–3 недели вперёд, но окна появляются каждый день.
          </p>
        </div>
        <div>
          <h4>Навигация</h4>
          <ul>
            <li><a href="#about">Обо мне</a></li>
            <li><a href="#services">Услуги</a></li>
            <li><a href="#gallery">Портфолио</a></li>
            <li><a href="#reviews">Отзывы</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>
        <div>
          <h4>Связаться</h4>
          <ul>
            <li><a href="tel:+79991234567">+7 (999) 123-45-67</a></li>
            <li><a href="#">WhatsApp</a></li>
            <li><a href="#">Telegram</a></li>
            <li><a href="#">Instagram</a></li>
          </ul>
        </div>
        <div>
          <h4>Адрес</h4>
          <ul>
            <li>Москва</li>
            <li>1-я Тверская-Ямская, 11</li>
            <li>м. Маяковская</li>
            <li style={{color:"var(--muted)"}}>Пн–Сб · 10–21</li>
          </ul>
        </div>
      </div>
      <div className="foot-bot">
        <div>Демо-проект: мастер, отзывы, адрес и&nbsp;цифры вымышлены. Дизайн и&nbsp;вёрстка — <a href="https://pishukod.ru" style={{color:"inherit"}}>pishukod.ru</a></div>
        <div>Сделано с <span style={{color:"var(--blush-2)"}}>♡</span> в Москве</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Footer });