bayarea/components/Footer.tsx

import React from 'react';
import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';

const Footer: React.FC = () => {
  return (
    <footer className="bg-background-light dark:bg-background-dark border-t border-gray-200 dark:border-white/10 pt-16 pb-8">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-5 gap-12 mb-16">
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center gap-2 mb-6">
              <span className="material-symbols-outlined text-xl text-gray-900 dark:text-white">dns</span>
              <span className="font-display font-bold text-lg tracking-tight text-gray-900 dark:text-white">Bay Area IT</span>
            </div>
            <p className="text-sm text-gray-600 dark:text-gray-400 max-w-xs mb-6">
              Providing reliable IT services and practical technology support to the Coastal Bend community for over 25 years.
            </p>
            <div className="flex flex-wrap gap-3 text-sm text-gray-600 dark:text-gray-400">
              <a href="tel:+13617658400" className="transition-colors hover:text-gray-900 dark:hover:text-white">
                (361) 765-8400
              </a>
              <a href="mailto:info@bayareaaffiliates.com" className="transition-colors hover:text-gray-900 dark:hover:text-white">
                info@bayareaaffiliates.com
              </a>
            </div>
          </div>

          <div>
            <h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Services</h4>
            <ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
              {[
                { label: 'IT Help Desk', to: '/services/it-help-desk' },
                { label: 'Computer Support', to: '/services/computer-support' },
                { label: 'Business Email', to: '/services/business-email-services' },
                { label: 'Domain & DNS', to: '/services/domain-registration-dns-support' },
                { label: 'Web Design', to: '/services/web-design-corpus-christi' },
              ].map((item) => (
                <li key={item.label}>
                  <motion.div whileHover={{ x: 5 }} className="inline-block">
                    <Link to={item.to} className="transition-colors hover:text-gray-900 dark:hover:text-white">
                      {item.label}
                    </Link>
                  </motion.div>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Areas We Serve</h4>
            <ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
              {[
                { label: 'Corpus Christi', to: '/locations/it-support-corpus-christi' },
                { label: 'Portland, TX', to: '/locations/it-support-portland-tx' },
                { label: 'Rockport, TX', to: '/locations/it-support-rockport-tx' },
                { label: 'Aransas Pass', to: '/locations/it-support-aransas-pass-tx' },
                { label: 'Kingsville', to: '/locations/it-support-kingsville-tx' },
              ].map((item) => (
                <li key={item.label}>
                  <motion.div whileHover={{ x: 5 }} className="inline-block">
                    <Link to={item.to} className="transition-colors hover:text-gray-900 dark:hover:text-white">
                      {item.label}
                    </Link>
                  </motion.div>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4 className="text-sm font-bold text-gray-900 dark:text-white mb-6 uppercase tracking-wider">Company</h4>
            <ul className="space-y-4 text-sm text-gray-600 dark:text-gray-400">
              {[
                { label: 'About', to: '/about' },
                { label: 'Blog', to: '/blog' },
                { label: 'Contact', to: '/contact' },
                { label: 'Privacy Policy', to: '/privacy-policy' },
                { label: 'Terms of Service', to: '/terms-of-service' },
              ].map((item) => (
                <li key={item.label}>
                  <motion.div whileHover={{ x: 5 }} className="inline-block">
                    <Link to={item.to} className="transition-colors hover:text-gray-900 dark:hover:text-white">
                      {item.label}
                    </Link>
                  </motion.div>
                </li>
              ))}
              <li>
                <a href="mailto:info@bayareaaffiliates.com" className="hover:text-gray-900 dark:hover:text-white transition-colors">info@bayareaaffiliates.com</a>
              </li>
              <li>(361) 765-8400</li>
            </ul>
          </div>
        </div>

        <div className="border-t border-gray-200 dark:border-white/10 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-xs text-gray-500 dark:text-gray-600">
            © 2026 Bay Area IT. All rights reserved.
          </p>
          <div className="flex flex-wrap items-center justify-center gap-4 text-xs text-gray-500 dark:text-gray-600">
            <Link to="/privacy-policy" className="transition-colors hover:text-gray-900 dark:hover:text-white">
              Privacy Policy
            </Link>
            <Link to="/terms-of-service" className="transition-colors hover:text-gray-900 dark:hover:text-white">
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;