'use client'

import { motion } from 'framer-motion'
import { Shield, Mail, Phone, MapPin } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation'

export default function Footer() {
  const currentYear = new Date().getFullYear()
  const pathname = usePathname()
  const isHomePage = pathname === '/'

  const getNavHref = (href: string) => {
    if (isHomePage) {
      return href
    }
    return `/${href}`
  }

  return (
    <footer className="bg-security-dark border-t border-security-border">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
          {/* Brand */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5 }}
          >
            <div className="flex items-center space-x-3 mb-4">
              <Shield className="w-8 h-8 text-security-accent" />
              <span className="text-2xl font-bold text-white">
                RUNLOCK<span className="text-security-accent">.re</span>
              </span>
            </div>
            <p className="text-gray-400 text-sm leading-relaxed">
              Solutions de gestion de mots de passe sécurisées pour les entreprises. 
              Protégez vos données avec Vaultwarden.
            </p>
          </motion.div>

          {/* Navigation */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
          >
            <h3 className="text-white font-semibold mb-4">Navigation</h3>
            <ul className="space-y-2">
              {[
                { label: 'Accueil', href: '#accueil' },
                { label: 'Services', href: '#services' },
                { label: 'Tarifs', href: '#tarifs' },
                { label: 'FAQ', href: '#faq' },
                { label: 'Contact', href: '#contact' },
              ].map((item) => (
                <li key={item.href}>
                  <a
                    href={getNavHref(item.href)}
                    className="text-gray-400 hover:text-security-accent transition-colors text-sm"
                  >
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Services */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
          >
            <h3 className="text-white font-semibold mb-4">Services</h3>
            <ul className="space-y-2">
              {['Hébergement Cloud', 'Installation NAS', 'Installation Mini PC', 'Support technique'].map((service) => (
                <li key={service}>
                  <a
                    href={getNavHref('#services')}
                    className="text-gray-400 hover:text-security-accent transition-colors text-sm"
                  >
                    {service}
                  </a>
                </li>
              ))}
            </ul>
          </motion.div>

          {/* Contact */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.3 }}
          >
            <h3 className="text-white font-semibold mb-4">Contact</h3>
            <ul className="space-y-3">
              <li className="flex items-center space-x-2 text-gray-400 text-sm">
                <Mail className="w-4 h-4 text-security-accent" />
                <a href="mailto:contact@runlock.re" className="hover:text-security-accent transition-colors">
                  contact@runlock.re
                </a>
              </li>
              <li className="flex items-center space-x-2 text-gray-400 text-sm">
                <Phone className="w-4 h-4 text-security-accent" />
                <a href="tel:0693511558" className="hover:text-security-accent transition-colors">
                  0693 51 15 58
                </a>
              </li>
              <li className="flex items-center space-x-2 text-gray-400 text-sm">
                <MapPin className="w-4 h-4 text-security-accent" />
                <span>La Réunion</span>
              </li>
            </ul>
          </motion.div>
        </div>

        <div className="border-t border-security-border pt-8 mt-8">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <p className="text-gray-400 text-sm">
              © {currentYear} Runlock.re - Tous droits réservés
            </p>
            <div className="flex items-center space-x-6 text-sm">
              <Link href="/mentions-legales" className="text-gray-400 hover:text-security-accent transition-colors">
                Mentions légales
              </Link>
              <Link href="/politique-confidentialite" className="text-gray-400 hover:text-security-accent transition-colors">
                Politique de confidentialité
              </Link>
              <Link href="/rgpd" className="text-gray-400 hover:text-security-accent transition-colors">
                RGPD
              </Link>
            </div>
          </div>
          <p className="text-gray-500 text-xs mt-4 text-center">
            Réalisé par{' '}
            <a 
              href="https://httpdesign.fr" 
              target="_blank" 
              rel="noopener noreferrer"
              className="text-security-accent hover:underline transition-colors"
            >
              Httpdesign.fr
            </a>
          </p>
        </div>
      </div>
    </footer>
  )
}