// footer.jsx
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <Logo size={20}/>
            <p>
              Zbudujemy, wdrożymy i zautomatyzujemy sklep internetowy dla Twojego sklepu stacjonarnego.
              Bez nowych etatów. Bez chaosu.
            </p>
            <a className="btn btn-primary" href="#contact">
              Umów rozmowę <ArrowRight/>
            </a>
          </div>

          <div className="footer-col">
            <div className="footer-col-h">Produkt</div>
            <a href="#problem">Problem</a>
            <a href="#how">Jak to działa</a>
            <a href="#features">Funkcjonalności</a>
            <a href="#calculator">Kalkulator strat</a>
            <a href="#pricing">Cennik</a>
          </div>

          <div className="footer-col">
            <div className="footer-col-h">Firma</div>
            <a href="#about">O nas</a>
            <a href="#testimonials">Klienci</a>
            <a href="#faq">FAQ</a>
            <a href="#">Blog</a>
            <a href="#">Kariera</a>
          </div>

          <div className="footer-col">
            <div className="footer-col-h">Kontakt</div>
            <a href="tel:+48789022921">+48 789 022 921</a>
            <a href="mailto:contact@softgorillas.com">contact@softgorillas.com</a>
            <div className="footer-addr">
              ul. Jana I Jędrzeja Śniadeckich 20D/7<br/>
              35-006 Rzeszów<br/>
              <span className="muted">Pon–pt 9:00–18:00</span>
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© {new Date().getFullYear()} Gorilla Commerce & Solutions · NIP 0000000000</div>
          <div className="footer-bottom-links">
            <a href="#">Polityka prywatności</a>
            <a href="#">Regulamin</a>
            <a href="#">Cookies</a>
          </div>
        </div>
      </div>

      <style>{`
        .footer{
          padding: 80px 0 32px;
          border-top: 1px solid var(--line);
        }
        .footer-top{
          display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
          gap: 48px;
          margin-bottom: 56px;
        }
        .footer-brand p{
          margin: 20px 0 24px;
          font-size: 14px;
          color: var(--ink-2);
          line-height: 1.55;
          max-width: 320px;
        }
        .footer-col{ display:flex; flex-direction:column; gap: 12px; }
        .footer-col-h{
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--ink-3);
          margin-bottom: 4px;
        }
        .footer-col a{
          font-size: 14px;
          color: var(--ink-2);
          transition: color .2s;
        }
        .footer-col a:hover{ color: var(--ink); }
        .footer-addr{
          font-size: 13.5px;
          color: var(--ink-2);
          line-height: 1.6;
          margin-top: 4px;
        }

        .footer-bottom{
          display:flex; justify-content: space-between;
          padding-top: 24px;
          border-top: 1px solid var(--line);
          font-size: 12.5px;
          color: var(--ink-3);
        }
        .footer-bottom-links{ display:flex; gap: 18px; }
        .footer-bottom-links a:hover{ color: var(--ink); }

        @media (max-width: 900px){
          .footer-top{ grid-template-columns: 1fr 1fr; }
          .footer-brand{ grid-column: 1 / -1; }
        }
        @media (max-width: 540px){
          .footer-top{ grid-template-columns: 1fr; }
          .footer-bottom{ flex-direction: column; gap: 12px; align-items: flex-start; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;