"use client";

import { Globe, Mail, Phone, MapPin } from "lucide-react";

export default function Footer({ dict, settings }: { dict: any, settings?: Record<string, string> }) {
  return (
    <footer className="bg-brand-black pt-20 pb-10 border-t border-white/10">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
          
          {/* Brand Info */}
          <div>
            <div className="mb-6">
              <img src="/uploads/logo-white.png" alt="K Creation Logo" className="h-10 object-contain" />
            </div>
            <p className="text-gray-400 text-sm mb-6 leading-relaxed" dangerouslySetInnerHTML={{ __html: settings?.footer_about || dict.footer?.desc || "Broyeurs industriels B2B haut de gamme, systèmes de recyclage et équipements de destruction de données sécurisés pour les gouvernements, les militaires et les entreprises." }} />
            <div className="flex gap-4">
              <a href={settings?.social_facebook || "#"} className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center text-gray-400 hover:bg-brand-accent hover:text-white transition-colors">
                <Globe className="w-5 h-5" />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="text-white font-bold mb-6 tracking-wider text-sm uppercase">{dict.footer?.products || "Produits"}</h4>
            <ul className="space-y-3">
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.productLinks?.[0] || "Destructeurs de bureau"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.productLinks?.[1] || "Broyeurs industriels"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.productLinks?.[2] || "Désintégrateurs HDD & SSD"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.productLinks?.[3] || "Broyeurs de carton"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.productLinks?.[4] || "Haute Sécurité (Approuvé NSA)"}</a></li>
            </ul>
          </div>

          {/* Industries */}
          <div>
            <h4 className="text-white font-bold mb-6 tracking-wider text-sm uppercase">{dict.footer?.industries || "Secteurs"}</h4>
            <ul className="space-y-3">
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.industryLinks?.[0] || "Gouvernement & Militaire"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.industryLinks?.[1] || "Banque & Finance"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.industryLinks?.[2] || "Santé & Hôpitaux"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.industryLinks?.[3] || "Centres de données"}</a></li>
              <li><a href="#" className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{dict.footer?.industryLinks?.[4] || "Centres de recyclage"}</a></li>
            </ul>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="text-white font-bold mb-6 tracking-wider text-sm uppercase">{dict.footer?.contact || "Contact"}</h4>
            <ul className="space-y-4">
              <li className="flex items-start gap-3">
                <MapPin className="w-5 h-5 text-brand-accent flex-shrink-0" />
                <span className="text-gray-400 text-sm" dangerouslySetInnerHTML={{ __html: settings?.footer_address || dict.footer?.address || "Zone Industrielle, Rouiba<br/>Alger, Algérie" }} />
              </li>
              <li className="flex items-center gap-3">
                <Phone className="w-5 h-5 text-brand-accent flex-shrink-0" />
                <a href={`tel:${settings?.footer_phone1 || "+213555123456"}`} className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{settings?.footer_phone1 || "+213 555 123 456"}</a>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="w-5 h-5 text-brand-accent flex-shrink-0" />
                <a href={`mailto:${settings?.footer_email || "sales@k-creation.dz"}`} className="text-gray-400 hover:text-brand-accent text-sm transition-colors">{settings?.footer_email || "sales@k-creation.dz"}</a>
              </li>
            </ul>
          </div>

        </div>

        <div className="pt-8 border-t border-white/10 flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-gray-500 text-sm">
            {dict.footer?.copyright || "© 2026 K CREATION ALGERIA. Tous droits réservés."}
          </p>
          <div className="flex gap-6">
            <a href="#" className="text-gray-500 hover:text-white text-sm transition-colors">{dict.footer?.privacy || "Politique de confidentialité"}</a>
            <a href="#" className="text-gray-500 hover:text-white text-sm transition-colors">{dict.footer?.terms || "Conditions d'utilisation"}</a>
            <a href="#" className="text-gray-500 hover:text-white text-sm transition-colors">{dict.footer?.cookies || "Politique des cookies"}</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
