import type React from "react"
import Link from "next/link"
import { Phone, Mail, MapPin, Facebook, Instagram, MessageCircle } from "lucide-react"

export function Footer() {
  return (
    <footer className="bg-foreground text-background">
      {/* Payment Band */}
      <div className="bg-primary py-6">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <Shield className="w-8 h-8 text-primary-foreground" />
              <div>
                <h3 className="font-bold text-primary-foreground text-lg">Secure & Flexible Payment Options</h3>
                <p className="text-primary-foreground/80 text-sm">Multiple payment methods for your convenience</p>
              </div>
            </div>
            <div className="flex items-center gap-4 flex-wrap justify-center">
              <PaymentBadge name="EasyPaisa" color="bg-green-500" />
              <PaymentBadge name="JazzCash" color="bg-red-500" />
              <PaymentBadge name="COD" color="bg-amber-500" />
              <PaymentBadge name="Bank Transfer" color="bg-blue-500" />
            </div>
          </div>
        </div>
      </div>

      {/* Discreet Packaging Notice */}
      <div className="bg-accent py-3">
        <div className="container mx-auto px-4">
          <p className="text-center text-accent-foreground font-medium text-sm md:text-base">
            🔒 100% Private & Discreet Packaging - Fast Delivery in Peshawar & All Pakistan
          </p>
        </div>
      </div>

      {/* Main Footer */}
      <div className="py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* About */}
            <div>
              <div className="flex items-center gap-2 mb-4">
                <div className="w-10 h-10 bg-accent rounded-lg flex items-center justify-center">
                  <span className="text-accent-foreground font-bold text-xl">V</span>
                </div>
                <div>
                  <h3 className="font-bold text-lg">Vimax</h3>
                  <p className="text-xs text-background/60">Khan Traders</p>
                </div>
              </div>
              <p className="text-background/70 text-sm leading-relaxed mb-4">
                Your trusted partner for premium health and wellness products. Quality you can trust, service you
                deserve.
              </p>
              <div className="flex gap-3">
                <SocialLink href="https://wa.me/923128627995" icon={MessageCircle} label="WhatsApp" title="WhatsApp" />
                <SocialLink
                  href="https://www.facebook.com/share/1StNmPmBxd/"
                  icon={Facebook}
                  label="Facebook"
                  title="Facebook"
                />
                <SocialLink
                  href="https://www.tiktok.com/@khan.market.place"
                  icon={TikTok}
                  label="TikTok"
                  title="TikTok"
                />
                <SocialIcon icon={Instagram} />
              </div>
            </div>

            {/* Quick Links */}
            <div>
              <h4 className="font-bold text-lg mb-4">Quick Links</h4>
              <ul className="space-y-2">
                <FooterLink href="/about">About Us</FooterLink>
                <FooterLink href="/products">All Products</FooterLink>
                <FooterLink href="/contact">Contact Us</FooterLink>
                <FooterLink href="/faq">FAQ</FooterLink>
                <FooterLink href="/track-order">Track Order</FooterLink>
              </ul>
            </div>

            {/* Categories */}
            <div>
              <h4 className="font-bold text-lg mb-4">Categories</h4>
              <ul className="space-y-2">
                <FooterLink href="/category/multi-vitamin">Multi Vitamins</FooterLink>
                <FooterLink href="/category/timing-tablet">Timing Tablets</FooterLink>
                <FooterLink href="/category/skin-care">Skin Care</FooterLink>
                <FooterLink href="/category/healthcare">Healthcare</FooterLink>
                <FooterLink href="/category/deals-offers">Deals & Offers</FooterLink>
              </ul>
            </div>

            {/* Contact */}
            <div>
              <h4 className="font-bold text-lg mb-4">Contact Us</h4>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <MapPin className="w-5 h-5 text-accent shrink-0 mt-0.5" />
                  <span className="text-background/70 text-sm">Peshawar, Pakistan</span>
                </li>
                <li className="flex items-center gap-3">
                  <Phone className="w-5 h-5 text-accent shrink-0" />
                  <a href="tel:+923128627995" className="text-background/70 text-sm hover:text-background">
                    03128627995
                  </a>
                </li>
                <li className="flex items-center gap-3">
                  <Mail className="w-5 h-5 text-accent shrink-0" />
                  <a href="mailto:tktradar123@gmail.com" className="text-background/70 text-sm hover:text-background">
                    tktradar123@gmail.com
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      {/* Copyright */}
      <div className="border-t border-background/10 py-4">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row items-center justify-between gap-2 text-sm text-background/60">
            <p>© 2025 Vimax by Khan Traders. All rights reserved.</p>
            <div className="flex gap-4">
              <Link href="/privacy" className="hover:text-background transition-colors">
                Privacy Policy
              </Link>
              <Link href="/terms" className="hover:text-background transition-colors">
                Terms of Service
              </Link>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}

function Shield({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 24 24"
      strokeWidth={1.5}
      stroke="currentColor"
      className={className}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
      />
    </svg>
  )
}

function PaymentBadge({ name, color }: { name: string; color: string }) {
  return <span className={`${color} text-white px-4 py-2 rounded-lg text-sm font-semibold shadow`}>{name}</span>
}

function SocialIcon({ icon: Icon }: { icon: React.ComponentType<{ className?: string }> }) {
  return (
    <button className="w-10 h-10 rounded-full bg-background/10 hover:bg-accent flex items-center justify-center transition-colors">
      <Icon className="w-5 h-5" />
    </button>
  )
}

function SocialLink({
  href,
  icon: Icon,
  label,
  title,
}: {
  href: string
  icon: React.ComponentType<{ className?: string }>
  label: string
  title: string
}) {
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      title={title}
      className="w-10 h-10 rounded-full bg-background/10 hover:bg-accent flex items-center justify-center transition-colors"
    >
      <Icon className="w-5 h-5" />
    </a>
  )
}

function FooterLink({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <li>
      <Link href={href} className="text-background/70 hover:text-background hover:pl-1 transition-all text-sm">
        {children}
      </Link>
    </li>
  )
}

function TikTok({ className }: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.68v13.7a2.4 2.4 0 0 1-2.4 2.4 2.4 2.4 0 0 1-2.4-2.4 2.4 2.4 0 0 1 2.4-2.4c.26 0 .52.03.77.1V9.1A5.1 5.1 0 0 0 7.3 9a5.1 5.1 0 0 0-5.1 5.1 5.1 5.1 0 0 0 5.1 5.1 5.1 5.1 0 0 0 5.1-5.1v-5.5a6.85 6.85 0 0 0 6.85-6.85V6.69Z" />
    </svg>
  )
}
