/* Motion · footer. Dark brand-900 background, multi-column.
   Column 1: brand + tagline
   Columns 2–4: link groups (Produkt, Wsparcie, Firma)
   Bottom: social + copyright */

const SISTER_PROJECTS = [
  { label: "Software house", href: "https://cogitech.pl/" },
  { label: "Integrator i outsourcing IT", href: "https://it.cogitech.pl/" },
  { label: "Internet i TV w aglomeracji Poznańskiej", href: "https://ingate.pl/" },
  { label: "Projektowanie i budowa sieci", href: "https://fibergate.pl/" },
];

function Footer() {
  const colProdukt = [
    ...FEATURES_BY_MODULE.flatMap((m) => m.features).filter((f) => f.built).slice(0, 6),
  ];
  return (
    <footer className="mpos-footer">
      <Container>
        <div className="mpos-footer-top">
          <div className="mpos-footer-brand">
            <a href={url("index.html")} className="mpos-logo-link">
              <LogoMark size={32} />
              <span className="mpos-logo-word" style={{ color: "#fff", fontSize: 18 }}>Motion</span>
            </a>
            <p className="mpos-footer-tagline">
              Twój krok w przyszłość. Zarządzaj mądrzej, analizuj szybciej, zarabiaj więcej.
            </p>
            <div className="mpos-footer-sister">
              <h5>Zobacz także</h5>
              <ul>
                {SISTER_PROJECTS.map((p) => (
                  <li key={p.href}>
                    <a href={p.href} target="_blank" rel="noopener noreferrer">
                      <span>{p.label}</span>
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                        <path d="M7 17 17 7" />
                        <path d="M7 7h10v10" />
                      </svg>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="mpos-footer-cols">
            <div className="mpos-footer-col">
              <h5>Funkcje</h5>
              {colProdukt.map((f) => (
                <a key={f.slug} href={featureHref(f.slug)}>{f.name}</a>
              ))}
              <a href={url("index.html#funkcje")}>Wszystkie funkcje</a>
            </div>
            <div className="mpos-footer-col">
              <h5>Produkt</h5>
              <a href={url("cennik.html")}>Cennik</a>
              <a href={url("integracje.html")}>Integracje</a>
              <a href={url("urzadzenia.html")}>Urządzenia</a>
              <a href={url("dokumentacja.html")}>Dokumentacja</a>
              <a href={url("changelog.html")}>Co nowego</a>
            </div>
            <div className="mpos-footer-col">
              <h5>Firma</h5>
              <a href={url("kontakt.html")}>Kontakt</a>
              <a href={url("wsparcie.html")}>Wsparcie</a>
              <a href={url("status.html")}>Status systemu</a>
              <a href={url("regulamin.html")}>Regulamin</a>
              <a href={url("polityka-prywatnosci.html")}>Polityka prywatności</a>
            </div>
          </div>
        </div>
        <div className="mpos-footer-bottom">
          <p className="mpos-footer-legal">
            Właścicielem rozwiązania jest <strong>Cogitech sp. z o.o.</strong>
            <span className="mpos-footer-sep">·</span>
            ul. Grunwaldzka 43/5, 60-784 Poznań
            <span className="mpos-footer-sep">·</span>
            KRS 0001207957
            <span className="mpos-footer-sep">·</span>
            NIP 7792598056
            <span className="mpos-footer-sep">·</span>
            REGON 543352773
          </p>
          <p className="mpos-footer-copy">© {new Date().getFullYear()} Motion</p>
        </div>
      </Container>
    </footer>
  );
}

Object.assign(window, { Footer });