WooNooW/customer-spa/src/components/Layout/Footer.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { Facebook, Instagram, Twitter, Youtube, Mail } from 'lucide-react';

export default function Footer() {
  const currentYear = new Date().getFullYear();
  
  // Get logo and store name from WordPress global
  const storeLogo = (window as any).woonoowCustomer?.storeLogo;
  const storeName = (window as any).woonoowCustomer?.storeName || 'My Wordpress Store';
  
  return (
    <footer className="bg-gray-50 border-t border-gray-200 mt-auto">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Main Footer Content */}
        <div className="py-12 lg:py-16">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
            {/* Brand & Description */}
            <div className="lg:col-span-2">
              <Link to="/" className="flex items-center gap-3 mb-4">
                {storeLogo ? (
                  <img src={storeLogo} alt={storeName} className="h-10 w-auto" />
                ) : (
                  <>
                    <div className="w-10 h-10 bg-gray-900 rounded-lg flex items-center justify-center">
                      <span className="text-white font-bold text-xl">W</span>
                    </div>
                    <span className="text-xl font-serif font-light text-gray-900">
                      {storeName}
                    </span>
                  </>
                )}
              </Link>
              <p className="text-sm text-gray-600 leading-relaxed mb-6 max-w-sm">
                Your store description here. Modern e-commerce experience with quality products and exceptional customer service.
              </p>
              
              {/* Social Media */}
              <div className="flex items-center gap-3">
                <a
                  href="#"
                  className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
                >
                  <Facebook className="h-4 w-4" />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
                >
                  <Instagram className="h-4 w-4" />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
                >
                  <Twitter className="h-4 w-4" />
                </a>
                <a
                  href="#"
                  className="w-10 h-10 rounded-full bg-white border border-gray-200 flex items-center justify-center hover:bg-gray-900 hover:text-white transition-all"
                >
                  <Youtube className="h-4 w-4" />
                </a>
              </div>
            </div>
            
            {/* Quick Links */}
            <div>
              <h3 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wider">Shop</h3>
              <ul className="space-y-3">
                <li>
                  <Link to="/" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    All Products
                  </Link>
                </li>
                <li>
                  <Link to="/shop" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    New Arrivals
                  </Link>
                </li>
                <li>
                  <Link to="/shop" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    Best Sellers
                  </Link>
                </li>
                <li>
                  <Link to="/shop" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    Sale
                  </Link>
                </li>
              </ul>
            </div>
            
            {/* Customer Service */}
            <div>
              <h3 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wider">Customer Service</h3>
              <ul className="space-y-3">
                <li>
                  <Link to="/contact" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    Contact Us
                  </Link>
                </li>
                <li>
                  <a href="#" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    Shipping & Returns
                  </a>
                </li>
                <li>
                  <a href="#" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    FAQ
                  </a>
                </li>
                <li>
                  <Link to="/account" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    My Account
                  </Link>
                </li>
                <li>
                  <Link to="/account/orders" className="text-sm text-gray-600 hover:text-gray-900 transition-colors">
                    Track Order
                  </Link>
                </li>
              </ul>
            </div>
            
            {/* Newsletter */}
            <div>
              <h3 className="font-semibold text-gray-900 mb-4 text-sm uppercase tracking-wider">Newsletter</h3>
              <p className="text-sm text-gray-600 mb-4">
                Subscribe to get special offers and updates.
              </p>
              <form className="space-y-2">
                <div className="relative">
                  <input
                    type="email"
                    placeholder="Your email"
                    className="w-full px-4 py-2.5 pr-12 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent"
                  />
                  <button
                    type="submit"
                    className="font-[inherit] absolute right-1.5 top-1.5 p-1.5 bg-gray-900 text-white rounded-md hover:bg-gray-800 transition-colors"
                  >
                    <Mail className="h-4 w-4" />
                  </button>
                </div>
                <p className="text-xs text-gray-500">
                  By subscribing, you agree to our Privacy Policy.
                </p>
              </form>
            </div>
          </div>
        </div>
        
        {/* Payment Methods & Trust Badges */}
        <div className="py-6 border-t border-gray-200">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-4 flex-wrap justify-center md:justify-start">
              <span className="text-xs text-gray-500 uppercase tracking-wider">We Accept</span>
              <div className="flex items-center gap-2">
                <div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
                  <span className="text-xs font-semibold text-gray-700">VISA</span>
                </div>
                <div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
                  <span className="text-xs font-semibold text-gray-700">MC</span>
                </div>
                <div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
                  <span className="text-xs font-semibold text-gray-700">AMEX</span>
                </div>
                <div className="h-8 px-3 bg-white border border-gray-200 rounded flex items-center justify-center">
                  <span className="text-xs font-semibold text-gray-700">PayPal</span>
                </div>
              </div>
            </div>
            
            <div className="flex items-center gap-4 text-xs text-gray-500">
              <a href="#" className="hover:text-gray-900 transition-colors">Privacy Policy</a>
              <span>•</span>
              <a href="#" className="hover:text-gray-900 transition-colors">Terms of Service</a>
              <span>•</span>
              <a href="#" className="hover:text-gray-900 transition-colors">Sitemap</a>
            </div>
          </div>
        </div>
        
        {/* Copyright */}
        <div className="py-6 border-t border-gray-200">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-sm text-gray-600">
              &copy; {currentYear} Your Store. All rights reserved.
            </p>
            <p className="text-xs text-gray-500">
              Powered by <span className="font-semibold text-gray-700">WooNooW</span>
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
}