import React from 'react';
import { Scale, Mail, MapPin, Phone, Instagram, Linkedin } from 'lucide-react';
import { Link } from 'react-router-dom';

export function Footer() {
  return (
    <footer className="bg-brand-blue py-16 text-white text-opacity-80">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 md:grid-cols-4 lg:grid-cols-5">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Link to="/" className="mb-6 flex items-center gap-2">
              <Scale className="h-8 w-8 text-brand-gold" />
              <div className="flex flex-col">
                <span className="font-serif text-2xl font-bold leading-none tracking-tight text-white">
                  Dra. Laura
                </span>
                <span className="text-xs font-medium tracking-widest text-brand-gold">
                  ADVOCACIA HUMANIZADA
                </span>
              </div>
            </Link>
            <p className="mb-6 max-w-xs text-sm leading-relaxed">
              Atendimento direto, acolhedor e estratégico focado na defesa dos seus direitos com sensibilidade e força.
            </p>
            <div className="flex items-center gap-4">
              <a href="#" className="flex h-10 w-10 items-center justify-center rounded-full border border-white/20 transition-colors hover:border-brand-gold hover:text-brand-gold">
                <Instagram className="h-4 w-4" />
              </a>
              <a href="#" className="flex h-10 w-10 items-center justify-center rounded-full border border-white/20 transition-colors hover:border-brand-gold hover:text-brand-gold">
                <Linkedin className="h-4 w-4" />
              </a>
            </div>
          </div>

          {/* Links */}
          <div>
            <h3 className="mb-6 font-serif text-lg font-semibold text-white">Navegação</h3>
            <ul className="flex flex-col gap-3 text-sm">
              <li><Link to="/sobre" className="hover:text-brand-gold transition-colors">Sobre a Advogada</Link></li>
              <li><Link to="/areas" className="hover:text-brand-gold transition-colors">Áreas de Atuação</Link></li>
              <li><Link to="/funcionamento" className="hover:text-brand-gold transition-colors">Como Funciona</Link></li>
              <li><Link to="/blog" className="hover:text-brand-gold transition-colors">Blog Jurídico</Link></li>
              <li><Link to="/contato" className="hover:text-brand-gold transition-colors">Contato</Link></li>
            </ul>
          </div>

          {/* Contact */}
          <div className="lg:col-span-2">
            <h3 className="mb-6 font-serif text-lg font-semibold text-white">Contato Direto</h3>
            <ul className="flex flex-col gap-4 text-sm">
              <li className="flex items-start gap-3">
                <Phone className="h-5 w-5 shrink-0 text-brand-gold" />
                <span>+55 (11) 99999-9999</span>
              </li>
              <li className="flex items-start gap-3">
                <Mail className="h-5 w-5 shrink-0 text-brand-gold" />
                <span>contato@laurasilva.adv.br</span>
              </li>
              <li className="flex items-start gap-3">
                <MapPin className="h-5 w-5 shrink-0 text-brand-gold" />
                <span>Av. Paulista, 1000 - Bela Vista<br />São Paulo - SP, 01310-100</span>
              </li>
            </ul>
          </div>
        </div>

        <div className="mt-16 flex flex-col items-center justify-between border-t border-white/10 pt-8 text-xs sm:flex-row">
          <p>© {new Date().getFullYear()} Laura Silva Advocacia. Todos os direitos reservados.</p>
          <p className="mt-2 sm:mt-0">OAB/SP 123.456</p>
        </div>
      </div>
    </footer>
  );
}