src/components/Footer.tsx

import React from 'react';
import { Link } from 'react-router-dom';
import { Sparkles, Twitter, Mail, Linkedin } from 'lucide-react';

const Footer: React.FC = () => {
return (
  <footer className="bg-gray-900 dark:bg-gray-950 text-white py-12">    
    <div className="container mx-auto px-4">
      <div className="grid md:grid-cols-4 gap-8">
        {/* Brand */}
        <div className="col-span-2 md:col-span-1">
          <Link to="/" className="flex items-center gap-2 text-xl font-bold mb-4">
            <img
              src="https://ucarecdn.com/baca8c8c-4a8b-4020-82e6-1382cdd3782a/-/format/auto/"
              alt="Humanizer X Footer Logo - AI Text Humanization Tool"
              title="Humanizer X - Advanced AI text humanization and detection tools"
              className="w-10 h-10 object-contain"
            />
            <span className="bg-gradient-to-r from-indigo-500 to-indigo-700 bg-clip-text text-transparent">
              Humanizer X
            </span>
          </Link>
            <p className="text-gray-400 text-sm leading-relaxed">
              Advanced AI text humanization and detection tools for content creators, 
              students, and professionals worldwide.
            </p>
          </div>

{/* Quick Links */}
<div>
  <h3 className="font-semibold mb-4">Tools</h3>
  <ul className="space-y-2">
    <li>
      <Link
        to="/"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        Text Humanizer
      </Link>
    </li>
    <li>
      <Link
        to="/gpt-checker"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        GPT Checker
      </Link>
    </li>
    <li>
      <Link
        to="/word-counter"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        Word Counter
      </Link>
    </li>
  </ul>
</div>

{/* Company */}
<div>
  <h3 className="font-semibold mb-4">Company</h3>
  <ul className="space-y-2">
    <li>
      <Link
        to="/about"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        About Us
      </Link>
    </li>
    <li>
      <Link
        to="/contact"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        Contact
      </Link>
    </li>
    <li>
      <Link
        to="/privacy-policy"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        Privacy Policy
      </Link>
    </li>
    <li>
      <Link
        to="/terms"
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        Terms & Conditions
      </Link>
    </li>
    <li>
      <Link
        to="/disclaimer" 
        className="text-gray-400 hover:text-white transition-colors text-sm"
      >
        Disclaimer
      </Link>
    </li>
  </ul>
</div>

          {/* Social */}
          <div>
            <h3 className="font-semibold mb-4">Connect</h3>
            <div className="flex gap-3">
<a
  href="https://x.com/HumanizerX"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Visit our Twitter profile"
  className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
>
  <Twitter size={16} />
</a>

<a
  href="https://mail.google.com/mail/?view=cm&fs=1&to=humanizerx@gmail.com"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Send us an email"
  className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
>
  <Mail size={16} />
</a>

<a
  href="https://www.linkedin.com/in/humanizer-x/"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Visit our LinkedIn profile"
  className="w-8 h-8 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors"
>
  <Linkedin size={16} />
</a>

            </div>
          </div>
        </div>

        <div className="border-t border-gray-800 pt-8 mt-8">          
          
          <div className="flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 text-sm">
              © 2025 Humanizer X. All rights reserved.
            </p>
            <p className="text-gray-400 text-sm mt-2 md:mt-0">
              Built with advanced AI detection and humanization technology
            </p>
          </div>
        </div>
      </div>
    </footer>
  );
};

export default Footer;