thermcool/components/layout/Footer.tsx

import Link from "next/link";
import { Phone, Mail, MapPin, Clock, Facebook, Instagram, ShieldCheck } from "lucide-react";
import { companyDetails } from "@/content/company";
import { CookieSettingsTrigger } from "@/components/ui/CookieSettingsTrigger";

export function Footer() {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="bg-primary text-primary-foreground">
      {/* Main Footer Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          {/* Column 1: Company details */}
          <div className="flex flex-col gap-4">
            <Link href="/" className="inline-block">
              <span className="text-2xl font-bold font-heading text-white">
                {companyDetails.shortName}
                <span className="text-accent">.</span>
              </span>
            </Link>
            <p className="text-sm text-slate-300 max-w-xs leading-relaxed">
              Profesjonalne usługi w zakresie klimatyzacji i pomp ciepła dla domów, mieszkań i firm.
            </p>
            <div className="flex flex-col gap-3 mt-2 text-sm text-slate-300">
              <a
                href={`tel:${companyDetails.phoneRaw}`}
                className="flex items-center gap-2.5 hover:text-accent transition-colors"
              >
                <Phone className="size-4 shrink-0 text-accent" />
                <span>{companyDetails.phone}</span>
              </a>
              <a
                href={`mailto:${companyDetails.email}`}
                className="flex items-center gap-2.5 hover:text-accent transition-colors"
              >
                <Mail className="size-4 shrink-0 text-accent" />
                <span>{companyDetails.email}</span>
              </a>
              <div className="flex items-start gap-2.5">
                <MapPin className="size-4 shrink-0 mt-0.5 text-accent" />
                <span>
                  {companyDetails.address.street},<br />
                  {companyDetails.address.zipCode} {companyDetails.address.city}
                </span>
              </div>
              <div className="flex items-start gap-2.5">
                <Clock className="size-4 shrink-0 mt-0.5 text-accent" />
                <span>{companyDetails.hours}</span>
              </div>
              <div className="text-xs text-slate-400 mt-1">
                NIP: {companyDetails.nip}
              </div>
            </div>
          </div>

          {/* Column 2: Services */}
          <div>
            <h3 className="text-base font-semibold font-heading text-white mb-6 uppercase tracking-wider">
              Usługi
            </h3>
            <ul className="flex flex-col gap-3 text-sm text-slate-300">
              <li>
                <Link href="/klimatyzacja" className="hover:text-accent transition-colors">
                  Klimatyzacja i Montaż
                </Link>
              </li>
              <li>
                <Link href="/pompy-ciepla" className="hover:text-accent transition-colors">
                  Pompy Ciepła
                </Link>
              </li>

              <li>
                <Link href="/sklep" className="hover:text-accent transition-colors">
                  Sklep online
                </Link>
              </li>
            </ul>
          </div>

          {/* Column 3: Information */}
          <div>
            <h3 className="text-base font-semibold font-heading text-white mb-6 uppercase tracking-wider">
              Informacje
            </h3>
            <ul className="flex flex-col gap-3 text-sm text-slate-300">
              <li>
                <Link href="/o-nas" className="hover:text-accent transition-colors">
                  O nas
                </Link>
              </li>
              <li>
                <Link href="/realizacje" className="hover:text-accent transition-colors">
                  Realizacje (Portfolio)
                </Link>
              </li>
              <li>
                <Link href="/blog" className="hover:text-accent transition-colors">
                  Blog i Poradniki
                </Link>
              </li>
              <li>
                <Link href="/regulamin" className="hover:text-accent transition-colors">
                  Regulamin
                </Link>
              </li>
              <li>
                <Link href="/polityka-prywatnosci" className="hover:text-accent transition-colors">
                  Polityka prywatności
                </Link>
              </li>
              <li>
                <Link href="/reklamacje" className="hover:text-accent transition-colors">
                  Reklamacje
                </Link>
              </li>
              <li>
                <Link href="/kontakt" className="hover:text-accent transition-colors">
                  Kontakt
                </Link>
              </li>
            </ul>
          </div>

          {/* Column 4: Obsługa Klienta */}
          <div>
            <h3 className="text-base font-semibold font-heading text-white mb-6 uppercase tracking-wider">
              Obsługa Klienta
            </h3>
            <ul className="flex flex-col gap-3 text-sm text-slate-300">
              <li>
                <Link href="/sklep" className="hover:text-accent transition-colors">
                  Sklep online
                </Link>
              </li>
              <li>
                <Link href="/kontakt" className="hover:text-accent transition-colors">
                  Zgłoś awarię / serwis
                </Link>
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-slate-800 bg-slate-950/40 py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row justify-between items-center gap-4">
          <div className="flex flex-col gap-2">
            <p className="text-xs text-slate-400 text-center sm:text-left">
              © {currentYear} {companyDetails.name}. Wszelkie prawa zastrzeżone. Projekt strony i wdrożenie ThermCool.
            </p>
            <CookieSettingsTrigger />
          </div>

          <div className="flex items-center gap-6">
            {/* Social Icons */}
            <div className="flex gap-4">
              <a
                href={companyDetails.socials.facebook}
                target="_blank"
                rel="noopener noreferrer"
                className="text-slate-400 hover:text-white transition-colors"
                aria-label="Odwiedź nasz profil na Facebooku"
              >
                <Facebook className="size-4" />
              </a>
              <a
                href={companyDetails.socials.instagram}
                target="_blank"
                rel="noopener noreferrer"
                className="text-slate-400 hover:text-white transition-colors"
                aria-label="Odwiedź nasz profil na Instagramie"
              >
                <Instagram className="size-4" />
              </a>
            </div>

            {/* Trust Symbol */}
            <div className="flex items-center gap-1.5 text-xs text-slate-400 border-l border-slate-800 pl-6">
              <ShieldCheck className="size-4 text-accent" />
              <span>Bezpieczne płatności SSL</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}