path: root/frontend/src/components/footer.tsx

"use client";

import { useEffect } from "react";
import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Facebook,
  Instagram,
  Twitter,
  Youtube,
  Phone,
  Mail,
  MapPin,
  Truck,
  RefreshCw,
  Shield,
  CreditCard,
} from "lucide-react";

export function Footer() {
  // Preload both logo variants
  useEffect(() => {
    const preloadLogos = () => {
      if (typeof window !== 'undefined') {
        const lightLogo = new window.Image();
        const darkLogo = new window.Image();
        lightLogo.src = '/black-logo.png';
        darkLogo.src = '/white-logo.png';
      }
    };
    
    preloadLogos();
  }, []);

  const footerLinks = {
    shop: [
      { name: "Women", href: "/women" },
      { name: "Men", href: "/men" },
      { name: "Kids", href: "/kids" },
      { name: "Sale", href: "/sale" },
      { name: "New Arrivals", href: "/new-arrivals" },
      { name: "Best Sellers", href: "/best-sellers" },
    ],
    company: [
      { name: "About Us", href: "/about" },
      { name: "Careers", href: "/careers" },
      { name: "Press", href: "/press" },
      { name: "Sustainability", href: "/sustainability" },
      { name: "Store Locator", href: "/stores" },
    ],
    help: [
      { name: "Customer Service", href: "/customer-service" },
      { name: "Size Guide", href: "/size-guide" },
      { name: "Shipping & Returns", href: "/shipping-returns" },
      { name: "Track Your Order", href: "/track-order" },
      { name: "FAQ", href: "/faq" },
      { name: "Contact Us", href: "/contact" },
    ],
    legal: [
      { name: "Privacy Policy", href: "/privacy" },
      { name: "Terms of Service", href: "/terms" },
      { name: "Cookie Policy", href: "/cookies" },
      { name: "Accessibility", href: "/accessibility" },
    ],
  };

  return (
    <footer className="bg-neutral-50 dark:bg-neutral-900 border-t dark:border-neutral-800">
      {/* Newsletter Section */}
      <div className="bg-black dark:bg-neutral-950 text-white">
        <div className="container mx-auto px-4 py-12">
          <div className="max-w-2xl mx-auto text-center">
            <h2 className="text-2xl font-bold mb-4">Stay in the loop</h2>
            <p className="text-neutral-300 dark:text-neutral-400 mb-6">
              Subscribe to our newsletter and be the first to know about new arrivals, sales, and exclusive offers.
            </p>
            <div className="flex max-w-md mx-auto gap-3">
              <Input
                placeholder="Enter your email"
                className="bg-white dark:bg-neutral-800 text-black dark:text-white placeholder:text-gray-500 dark:placeholder:text-gray-400 border-neutral-300 dark:border-neutral-600"
              />
              <Button variant="secondary" className="px-8 bg-white dark:bg-neutral-700 text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-600">
                Subscribe
              </Button>
            </div>
            <p className="text-xs text-neutral-400 dark:text-neutral-500 mt-3">
              By subscribing, you agree to our Privacy Policy and Terms of Service.
            </p>
          </div>
        </div>
      </div>

      {/* Main Footer Content */}
      <div className="container mx-auto px-4 py-12">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
          {/* Brand Info */}
          <div className="lg:col-span-2">
            <Link href="/" className="flex items-center space-x-2 mb-4" suppressHydrationWarning>
              {/* Light theme logo - visible by default, hidden in dark mode */}
              <Image
                src="/black-logo.png"
                alt="blcklst"
                width={140}
                height={45}
                className="h-8 w-auto block dark:hidden"
                priority
              />
              {/* Dark theme logo - hidden by default, visible in dark mode */}
              <Image
                src="/white-logo.png"
                alt="blcklst"
                width={140}
                height={45}
                className="h-8 w-auto hidden dark:block"
                priority
              />
            </Link>
            <p className="text-muted-foreground mb-6 max-w-md">
              not everyone gets blcklsted - discover carefully curated fashion pieces that define modern elegance and exclusivity.
            </p>
            
            {/* Contact Info */}
            <div className="space-y-3 mb-6">
              <div className="flex items-center space-x-3 text-sm text-foreground">
                <Phone className="h-4 w-4 text-muted-foreground" />
                <span>+1 (555) 123-4567</span>
              </div>
              <div className="flex items-center space-x-3 text-sm text-foreground">
                <Mail className="h-4 w-4 text-muted-foreground" />
                <span>hello@blcklst.com</span>
              </div>
              <div className="flex items-center space-x-3 text-sm text-foreground">
                <MapPin className="h-4 w-4 text-muted-foreground" />
                <span>123 Fashion St, New York, NY 10001</span>
              </div>
            </div>

            {/* Social Media */}
            <div className="flex space-x-4 mb-4">
              <Link href="#" className="text-muted-foreground hover:text-foreground">
                <Facebook className="h-5 w-5" />
              </Link>
              <Link href="#" className="text-muted-foreground hover:text-foreground">
                <Instagram className="h-5 w-5" />
              </Link>
              <Link href="#" className="text-muted-foreground hover:text-foreground">
                <Twitter className="h-5 w-5" />
              </Link>
              <Link href="#" className="text-muted-foreground hover:text-foreground">
                <Youtube className="h-5 w-5" />
              </Link>
            </div>

            {/* Made with Love */}
            <p className="text-xs text-muted-foreground/80 flex items-center">
              made with ❤️ by{" "}
              <a 
                href="https://mavvisuals.gumroad.com" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-primary/80 hover:text-primary transition-colors mx-1 font-normal"
              >
                maanv
              </a>
              &{" "}
              <a 
                href="https://surgot.in" 
                target="_blank" 
                rel="noopener noreferrer"
                className="text-primary/80 hover:text-primary transition-colors ml-1 font-normal"
              >
                surgot
              </a>
            </p>
          </div>

          {/* Shop Links */}
          <div>
            <h3 className="font-semibold mb-4">Shop</h3>
            <ul className="space-y-3">
              {footerLinks.shop.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Company Links */}
          <div>
            <h3 className="font-semibold mb-4">Company</h3>
            <ul className="space-y-3">
              {footerLinks.company.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Help Links */}
          <div>
            <h3 className="font-semibold mb-4">Help</h3>
            <ul className="space-y-3">
              {footerLinks.help.map((link) => (
                <li key={link.name}>
                  <Link
                    href={link.href}
                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
                  >
                    {link.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Features Section */}
        <div className="mt-12 pt-8 border-t">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div className="flex items-center space-x-3">
              <div className="bg-primary/10 p-2 rounded-full">
                <Truck className="h-5 w-5 text-primary" />
              </div>
              <div>
                <h4 className="font-medium text-sm">Free Shipping</h4>
                <p className="text-xs text-muted-foreground">On orders over $100</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <div className="bg-primary/10 p-2 rounded-full">
                <RefreshCw className="h-5 w-5 text-primary" />
              </div>
              <div>
                <h4 className="font-medium text-sm">Easy Returns</h4>
                <p className="text-xs text-muted-foreground">30-day return policy</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <div className="bg-primary/10 p-2 rounded-full">
                <Shield className="h-5 w-5 text-primary" />
              </div>
              <div>
                <h4 className="font-medium text-sm">Secure Payment</h4>
                <p className="text-xs text-muted-foreground">SSL encrypted checkout</p>
              </div>
            </div>
            <div className="flex items-center space-x-3">
              <div className="bg-primary/10 p-2 rounded-full">
                <CreditCard className="h-5 w-5 text-primary" />
              </div>
              <div>
                <h4 className="font-medium text-sm">Multiple Payment</h4>
                <p className="text-xs text-muted-foreground">Cards, PayPal & more</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Footer */}
      <div className="border-t dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800">
        <div className="container mx-auto px-4 py-6">
          <div className="flex flex-col space-y-4 lg:flex-row lg:justify-between lg:items-center lg:space-y-0 lg:gap-8">
            {/* Left: Copyright and Legal Links */}
            <div className="flex flex-col items-center space-y-3 sm:space-y-2 text-center lg:items-start lg:text-left">
              <p className="text-sm text-muted-foreground">
                © {new Date().getFullYear()} blcklst. All rights reserved.
              </p>
              <div className="flex flex-wrap justify-center lg:justify-start gap-x-4 gap-y-2">
                {footerLinks.legal.map((link) => (
                  <Link
                    key={link.name}
                    href={link.href}
                    className="text-xs text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap"
                  >
                    {link.name}
                  </Link>
                ))}
              </div>
            </div>
            
            {/* Right: Payment Methods */}
            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-2">
              <span className="text-xs text-muted-foreground text-center sm:text-left whitespace-nowrap">We accept:</span>
              <div className="flex flex-wrap justify-center sm:justify-start gap-1 max-w-full">
                {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => (
                  <div
                    key={method}
                    className="bg-white dark:bg-neutral-700 border dark:border-neutral-600 rounded px-1.5 py-1 text-[10px] sm:text-xs font-medium text-foreground whitespace-nowrap flex-shrink-0"
                  >
                    {method}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}