import React from "react";
import { Link } from "react-router-dom";
import {
  Mail,
  Phone,
  MapPin,
  Facebook,
  Twitter,
  Instagram,
  Linkedin,
} from "lucide-react";

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <footer className="border-t border-border bg-card mt-auto">
      <div className="max-w-7xl mx-auto px-4 md:px-8 py-12 md:py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-12">
          {/* Brand */}
          <div className="space-y-4">
            <Link
              to="/"
              className="flex items-center gap-2"
              data-testid="footer-logo"
            >
              <img
                src="/logo.png"
                alt="PromptTech Solutions"
                className="w-12 h-12 rounded-lg object-contain"
              />
              <span className="font-bold text-xl tracking-tight font-['Outfit']">
                PromptTech Solutions
              </span>
            </Link>
            <p className="text-sm text-muted-foreground leading-relaxed">
              Your trusted destination for premium electronics and professional
              repair services. Quality products, expert solutions.
            </p>
            <div className="flex gap-3">
              <a
                href="#"
                className="w-9 h-9 rounded-full border border-border flex items-center justify-center hover:bg-accent hover:border-primary transition-colors"
                data-testid="social-facebook"
              >
                <Facebook className="h-4 w-4" />
              </a>
              <a
                href="#"
                className="w-9 h-9 rounded-full border border-border flex items-center justify-center hover:bg-accent hover:border-primary transition-colors"
                data-testid="social-twitter"
              >
                <Twitter className="h-4 w-4" />
              </a>
              <a
                href="#"
                className="w-9 h-9 rounded-full border border-border flex items-center justify-center hover:bg-accent hover:border-primary transition-colors"
                data-testid="social-instagram"
              >
                <Instagram className="h-4 w-4" />
              </a>
              <a
                href="#"
                className="w-9 h-9 rounded-full border border-border flex items-center justify-center hover:bg-accent hover:border-primary transition-colors"
                data-testid="social-linkedin"
              >
                <Linkedin className="h-4 w-4" />
              </a>
            </div>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-semibold text-base mb-4 font-['Outfit']">
              Quick Links
            </h4>
            <ul className="space-y-3">
              <li>
                <Link
                  to="/products"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-products"
                >
                  Products
                </Link>
              </li>
              <li>
                <Link
                  to="/services"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-services"
                >
                  Services
                </Link>
              </li>
              <li>
                <Link
                  to="/about"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-about"
                >
                  About Us
                </Link>
              </li>
              <li>
                <Link
                  to="/contact"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-contact"
                >
                  Contact
                </Link>
              </li>
            </ul>
          </div>

          {/* Categories */}
          <div>
            <h4 className="font-semibold text-base mb-4 font-['Outfit']">
              Categories
            </h4>
            <ul className="space-y-3">
              <li>
                <Link
                  to="/products?category=phones"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-phones"
                >
                  Phones
                </Link>
              </li>
              <li>
                <Link
                  to="/products?category=laptops"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-laptops"
                >
                  Laptops
                </Link>
              </li>
              <li>
                <Link
                  to="/products?category=tablets"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-tablets"
                >
                  Tablets
                </Link>
              </li>
              <li>
                <Link
                  to="/products?category=accessories"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  data-testid="footer-accessories"
                >
                  Accessories
                </Link>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-semibold text-base mb-4 font-['Outfit']">
              Contact Us
            </h4>
            <ul className="space-y-3">
              <li className="flex items-start gap-3">
                <MapPin className="h-4 w-4 mt-0.5 text-muted-foreground flex-shrink-0" />
                <span className="text-sm text-muted-foreground">
                  Belmopan City, Belize
                </span>
              </li>
              <li className="flex items-center gap-3">
                <Phone className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                <a
                  href="tel:+5016386318"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  (501) 638-6318
                </a>
              </li>
              <li className="flex items-center gap-3">
                <Mail className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                <a
                  href="mailto:prompttechbz@gmail.com"
                  className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                >
                  prompttechbz@gmail.com
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="border-t border-border mt-10 pt-6 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-sm text-muted-foreground">
            © {currentYear} PromptTech Solutions. All rights reserved.
          </p>
          <div className="flex gap-6">
            <Link
              to="/privacy"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Privacy Policy
            </Link>
            <Link
              to="/terms"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Terms of Service
            </Link>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default React.memo(Footer);
