'use client';

import Link from 'next/link';
import { Shield, Phone, Mail, MessageCircle } from 'lucide-react';

export function Footer() {
  return (
    <footer className="bg-navy text-white">
      <div className="max-w-[1200px] mx-auto px-4 sm:px-6 py-12 md:py-16">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
          {/* Brand */}
          <div>
            <div className="flex items-center gap-2 mb-4">
              <Shield className="w-8 h-8 text-gold" />
              <div>
                <span className="font-display font-bold text-lg">TradeTheMarkets</span>
                <span className="text-gold text-sm">.co.uk</span>
              </div>
            </div>
            <p className="text-white/60 text-sm leading-relaxed">
              Professional investment solutions with transparency, expertise, and a commitment to your financial growth.
            </p>
          </div>

          {/* Quick Links */}
          <div>
            <h4 className="font-display font-semibold text-gold mb-4">Quick Links</h4>
            <div className="space-y-2">
              <Link href="/about" className="block text-white/70 hover:text-gold transition-colors text-sm">About Us</Link>
              <Link href="/services" className="block text-white/70 hover:text-gold transition-colors text-sm">Services</Link>
              <Link href="/contact" className="block text-white/70 hover:text-gold transition-colors text-sm">Contact</Link>
              <Link href="/faq" className="block text-white/70 hover:text-gold transition-colors text-sm">FAQ</Link>
            </div>
          </div>

          {/* Contact Info */}
          <div>
            <h4 className="font-display font-semibold text-gold mb-4">Get In Touch</h4>
            <div className="space-y-3">
              <a href="tel:07847587241" className="flex items-center gap-3 text-white/70 hover:text-gold transition-colors text-sm">
                <Phone className="w-4 h-4 text-gold flex-shrink-0" />
                07847 587241
              </a>
              <a href="mailto:info@TradeTheMarkets.co.uk" className="flex items-center gap-3 text-white/70 hover:text-gold transition-colors text-sm">
                <Mail className="w-4 h-4 text-gold flex-shrink-0" />
                info@TradeTheMarkets.co.uk
              </a>
              <a href="https://wa.me/447847587241" target="_blank" rel="noopener noreferrer" className="flex items-center gap-3 text-white/70 hover:text-gold transition-colors text-sm">
                <MessageCircle className="w-4 h-4 text-gold flex-shrink-0" />
                WhatsApp: +44 7847 587241
              </a>
            </div>
          </div>
        </div>

        {/* Disclaimer */}
        <div className="mt-10 pt-8 border-t border-white/10">
          <div className="bg-navy-light/50 rounded-lg p-4 mb-6">
            <p className="text-white/50 text-xs leading-relaxed text-center">
              <span className="text-gold font-semibold">⚠ Risk Warning:</span> Investments can go down as well as up. Past performance does not guarantee future results. Your capital is at risk. Please invest responsibly.
            </p>
          </div>
          <p className="text-white/40 text-xs text-center">
            © {new Date().getFullYear()} TradeTheMarkets.co.uk — Mus Enver. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}
