// Footer — black ink-block

function Footer() {
  return (
    <footer className="ft ink-block">
      <div className="wrap">
        <div className="ft-top">
          <div className="ft-brand">
            <Logo theme="light" />
            <p style={{ maxWidth: '36ch', marginTop: 22, fontSize: 14 }}>
              Агентство органического продвижения на Яндекс.Картах. Работаем по всей России.
            </p>
            <div className="ft-rating">
              <div className="ft-stars">
                {[0, 1, 2, 3, 4].map((i) =>
                <svg key={i} width="12" height="12" viewBox="0 0 12 12" fill="none">
                    <path d="m6 1 1.6 3.3 3.6.5-2.6 2.5.6 3.6L6 9.2l-3.2 1.7.6-3.6L.8 4.8l3.6-.5L6 1Z" fill="#F2B900" />
                  </svg>
                )}
              </div>
              <span><b style={{ color: 'var(--fg)' }}>4.9</b> · 182 отзыва</span>
            </div>
          </div>
          <div className="ft-cols">
            <div className="ft-col">
              <div className="ft-h mono">Услуги</div>
              <a href="#pricing">Лайт — 29 990 ₽</a>
              <a href="#pricing">Стандарт — 49 990 ₽</a>
              <a href="#pricing">Премиум — 79 990 ₽</a>
              <a href="#pricing">Премиум+ — 99 990 ₽</a>
            </div>
            <div className="ft-col">
              <div className="ft-h mono">Компания</div>
              <a href="#results">Кейсы</a>
              <a href="#founder">Команда</a>
              <a href="#faq">Вопросы</a>
              <a href="#cta">Контакты</a>
            </div>
            <div className="ft-col">
              <div className="ft-h mono">Связь</div>
              <a href="tel:+78001234567">+7 800 123 45 67</a>
              <a href="mailto:hi@protochkarosta.ru">hi@protochkarosta.ru</a>
              <a href="#">Telegram</a>
              <a href="#">WhatsApp</a>
            </div>
          </div>
        </div>

        <div className="ft-bot">
          <div>© 2020–2026 ПроТочкаРоста · ИНН 7700000000</div>
          <div className="ft-legal">
            <a href="#">Договор-оферта</a>
            <a href="#">Политика обработки данных</a>
            <a href="#">Реквизиты</a>
          </div>
        </div>
      </div>

      <div className="wrap"><div className="ft-wm">protochkarosta</div></div>

      <style>{`
        .ft{padding:80px 0 32px;background:var(--bg);color:var(--fg-2);position:relative;overflow:hidden}
        .ft-top{display:grid;gap:48px;grid-template-columns:1fr;padding-bottom:48px;border-bottom:1px solid var(--line)}
        @media (min-width:780px){.ft-top{grid-template-columns:1.2fr 2fr;gap:80px}}
        .ft-rating{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:var(--mute)}
        .ft-stars{display:inline-flex;gap:2px}
        .ft-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
        @media (max-width:560px){.ft-cols{grid-template-columns:1fr 1fr;gap:32px 24px}}
        .ft-col{display:flex;flex-direction:column;gap:10px}
        .ft-h{font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin-bottom:6px;font-weight:500}
        .ft-col a{font-size:14px;color:var(--fg-2);transition:color .15s ease}
        .ft-col a:hover{color:var(--fg)}
        .ft-bot{
          padding-top:32px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
          font-size:12px;color:var(--mute);
        }
        .ft-legal{display:flex;gap:24px;flex-wrap:wrap}
        .ft-legal a{color:var(--mute);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
        .ft-legal a:hover{color:var(--fg-2)}

        .ft-wm{
          font-size:clamp(64px,16vw,220px);font-weight:800;letter-spacing:-.06em;
          color:transparent;
          -webkit-text-stroke:1px rgba(255,255,255,.07);
          line-height:.85;margin-top:60px;text-align:center;pointer-events:none;user-select:none;
          font-feature-settings:"ss01";
        }
      `}</style>
    </footer>);

}

window.Footer = Footer;