import Link from 'next/link';
import { Mail, Phone, MapPin, Clock } from 'lucide-react';

const navigation = {
  services: [
    { name: 'Public Accounting', href: '/services/public-accounting' },
    { name: 'Federal Income Tax', href: '/services/federal-income-tax' },
    { name: 'Estate Tax Planning', href: '/services/estate-tax-planning' },
    { name: 'Financial Planning', href: '/services/financial-planning' },
    { name: 'Advisory Services', href: '/services/advisory' },
  ],
  company: [
    { name: 'About', href: '/about' },
    { name: 'Pricing', href: '/pricing' },
    { name: 'Reviews', href: '/reviews' },
    { name: 'Contact', href: '/contact' },
  ],
  legal: [
    { name: 'Privacy Policy', href: '/legal/privacy' },
    { name: 'Terms of Service', href: '/legal/terms' },
  ],
};

export function SiteFooter() {
  return (
    <footer className="bg-navy text-cloud" aria-labelledby="footer-heading">
      <h2 id="footer-heading" className="sr-only">
        Footer
      </h2>
      <div className="mx-auto max-w-7xl px-4 pb-6 pt-12 sm:pt-16 lg:px-6 lg:pt-20">
        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
          <div className="space-y-8">
            <div className="text-2xl font-bold">Hampton, Brown & Associates, PC</div>
            <p className="text-sm leading-6 text-slate-300">
              Expert federal income and estate tax services, financial planning, and goal-oriented strategies in Corpus Christi, Texas. 
              We assist our clients with their tax and accounting needs and achieving economic goals.
            </p>
            <div className="space-y-4">
              <div className="flex items-center space-x-3">
                <MapPin className="h-5 w-5 text-teal" />
                <span className="text-sm">Corpus Christi, TX</span>
              </div>
              <div className="flex items-center space-x-3">
                <Phone className="h-5 w-5 text-teal" />
                <span className="text-sm">(361) 888-7711</span>
              </div>
              <div className="flex items-center space-x-3">
                <Mail className="h-5 w-5 text-teal" />
                <span className="text-sm">info@hamptonbrown.com</span>
              </div>
              <div className="flex items-center space-x-3">
                <Clock className="h-5 w-5 text-teal" />
                <span className="text-sm">Mon-Fri 9AM-5PM</span>
              </div>
            </div>
          </div>
          <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
            <div className="md:grid md:grid-cols-2 md:gap-8">
              <div>
                <h3 className="text-sm font-semibold leading-6">Services</h3>
                <ul role="list" className="mt-6 space-y-4">
                  {navigation.services.map((item) => (
                    <li key={item.name}>
                      <Link href={item.href} className="text-sm leading-6 text-slate-300 hover:text-cloud transition-colors">
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="mt-10 md:mt-0">
                <h3 className="text-sm font-semibold leading-6">Company</h3>
                <ul role="list" className="mt-6 space-y-4">
                  {navigation.company.map((item) => (
                    <li key={item.name}>
                      <Link href={item.href} className="text-sm leading-6 text-slate-300 hover:text-cloud transition-colors">
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
            <div className="md:grid md:grid-cols-2 md:gap-8">
              <div>
                <h3 className="text-sm font-semibold leading-6">Legal</h3>
                <ul role="list" className="mt-6 space-y-4">
                  {navigation.legal.map((item) => (
                    <li key={item.name}>
                      <Link href={item.href} className="text-sm leading-6 text-slate-300 hover:text-cloud transition-colors">
                        {item.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="mt-10 md:mt-0">
                <h3 className="text-sm font-semibold leading-6">Resources</h3>
                <ul role="list" className="mt-6 space-y-4">
                  <li>
                    <Link href="/resources" className="text-sm leading-6 text-slate-300 hover:text-cloud transition-colors">
                      Secure Upload
                    </Link>
                  </li>
                  <li>
                    <Link href="/resources" className="text-sm leading-6 text-slate-300 hover:text-cloud transition-colors">
                      Payment Portal
                    </Link>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div className="mt-12 border-t border-slate-700 pt-6 sm:mt-16 lg:mt-20">
          <p className="text-xs leading-5 text-slate-400">
            &copy; {new Date().getFullYear()} Hampton, Brown & Associates, PC. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}