import { Facebook, Instagram, Linkedin } from 'lucide-react';
import appIcon from '../../../assets/appicon.png';

export function SiteFooter() {
  return (
    <footer className="bg-white/60 backdrop-blur-xl border-t border-white/80 mt-10 pt-16 pb-12 relative z-10 shadow-[0_-10px_40px_rgba(0,0,0,0.02)]">
      <div className="max-w-7xl mx-auto px-6 lg:px-12">
        <div className="mb-16">
          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-10">
            <div>
            <a href="/home" className="flex items-center gap-2 mb-6 group outline-none inline-flex">
              <img
                src={appIcon}
                alt="Arbejd logo"
                className="w-8 h-8 rounded-lg shadow-[0_4px_15px_rgba(49,103,201,0.2)] group-hover:shadow-[0_6px_20px_rgba(49,103,201,0.3)] transition-all group-hover:scale-105 object-cover"
              />
              <span className="text-xl font-normal tracking-tight text-gray-900">Arbejd.com</span>
            </a>
            <p className="text-base text-gray-600 font-normal leading-relaxed max-w-xs mb-6 drop-shadow-sm">
              Arbejd.com
              <br />
              Din hurtigste vej til
              <br />
              dit n&#230;ste job
            </p>
            <div className="mb-6 space-y-1.5 text-sm text-gray-600">
              <p className="font-medium text-gray-800">Arbejd.com IVS</p>
              <p>Telefon: +45 31 53 20 44</p>
              <p>CVR: 39779285</p>
            </div>
            <div className="flex items-center gap-3">
              <a
                href="https://www.facebook.com/arbejd.com1/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Facebook"
                className="w-10 h-10 rounded-xl bg-white/70 border border-white/90 text-gray-500 hover:text-gray-900 hover:bg-white transition-colors inline-flex items-center justify-center shadow-sm"
              >
                <Facebook size={18} strokeWidth={1.8} />
              </a>
              <a
                href="https://www.instagram.com/arbejd.com1/"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram"
                className="w-10 h-10 rounded-xl bg-white/70 border border-white/90 text-gray-500 hover:text-gray-900 hover:bg-white transition-colors inline-flex items-center justify-center shadow-sm"
              >
                <Instagram size={18} strokeWidth={1.8} />
              </a>
              <a
                href="https://www.linkedin.com/company/arbejd-com/posts/?feedView=all"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="LinkedIn"
                className="w-10 h-10 rounded-xl bg-white/70 border border-white/90 text-gray-500 hover:text-gray-900 hover:bg-white transition-colors inline-flex items-center justify-center shadow-sm"
              >
                <Linkedin size={18} strokeWidth={1.8} />
              </a>
            </div>
            </div>

            <div className="min-w-[180px]">
              <h3 className="text-sm font-medium uppercase tracking-wider text-gray-500 mb-4">Links</h3>
              <div className="flex flex-col gap-2">
                <a href="/faq" className="text-base text-gray-700 hover:text-gray-900 transition-colors font-normal">FAQ</a>
                <a href="/kontakt" className="text-base text-gray-700 hover:text-gray-900 transition-colors font-normal">Kontakt</a>
              </div>
            </div>
          </div>
        </div>

        <div className="pt-8 border-t border-gray-200/60 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-gray-400 font-normal">© 2026 Arbejd.com. Alle rettigheder forbeholdes.</p>
          <div className="flex items-center gap-4">
            <a href="/privatlivspolitik" className="text-sm text-gray-400 hover:text-gray-900 transition-colors font-normal">Privatlivspolitik</a>
          </div>
        </div>
      </div>
    </footer>
  );
}