import Image from "next/image";
import Link from "next/link";

const footerLinks = {
  navigation: [
    { href: "#home", label: "Home" },
    { href: "#about", label: "About Us" },
    { href: "#certifications", label: "Certifications" },
    { href: "#customers", label: "Our Customers" },
    { href: "#profile", label: "Our Profile" },
    { href: "#contact", label: "Contact Us" },
  ],
  products: [
    { href: "#", label: "T-Shirts" },
    { href: "#", label: "Polo Shirts" },
    { href: "#", label: "Sweatshirts" },
    { href: "#", label: "Hoodies" },
    { href: "#", label: "Kids Wear" },
  ],
};

export function Footer() {
  return (
    <footer className="bg-foreground text-background py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-4 gap-12">
          {/* Logo & Description */}
          <div className="md:col-span-1">
            <Image
              src="/logo.png"
              alt="BD Knit Design Ltd."
              width={140}
              height={50}
              className="h-10 w-auto mb-4 brightness-0 invert"
            />
            <p className="text-background/70 text-sm leading-relaxed mb-4">
              A sister concern of Polestar Group. 100% export-oriented knitwear 
              manufacturer committed to quality and excellence.
            </p>
            <p className="text-background/70 text-sm">
              854/1, Sharifpur, National University,<br />
              Gazipur, Bangladesh
            </p>
          </div>

          {/* Navigation */}
          <div>
            <h4 className="font-semibold text-background mb-4">Quick Links</h4>
            <ul className="space-y-3">
              {footerLinks.navigation.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-background/70 hover:text-background transition-colors text-sm"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Products */}
          <div>
            <h4 className="font-semibold text-background mb-4">Products</h4>
            <ul className="space-y-3">
              {footerLinks.products.map((link) => (
                <li key={link.label}>
                  <Link
                    href={link.href}
                    className="text-background/70 hover:text-background transition-colors text-sm"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Contact */}
          <div>
            <h4 className="font-semibold text-background mb-4">Contact</h4>
            <ul className="space-y-3 text-sm text-background/70">
              <li>
                <Link href="mailto:info@bdknitdesign.com" className="hover:text-background transition-colors">
                  info@bdknitdesign.com
                </Link>
              </li>
              <li>
                <Link href="mailto:sales@bdknitdesign.com" className="hover:text-background transition-colors">
                  sales@bdknitdesign.com
                </Link>
              </li>
              <li>
                <Link href="tel:+8801234567890" className="hover:text-background transition-colors">
                  +880 1XXX-XXXXXX
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="border-t border-background/20 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
          <p className="text-background/60 text-sm">
            © {new Date().getFullYear()} BD Knit Design Ltd. All rights reserved.
          </p>
          <p className="text-background/60 text-sm">
            A Sister Concern of <span className="text-background">Polestar Group</span>
          </p>
        </div>
      </div>
    </footer>
  );
}
