import React from "react";

export default function Footer() {
  return (
    <footer className="bg-white text-black border-t border-gray-200 py-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row justify-between items-start gap-8">
          {/* Logo */}
          <div className="space-y-4 w-full md:w-auto">
            <div className="flex items-center">
              <img src="/img/Digitro-Solution.png" className="h-10" alt="Digitro Solutions" />
            </div>
            <p className="text-gray-600 text-sm max-w-xs">
            At Digitro Solution, we help businesses establish a powerful online presence through modern websites, impactful graphics, mobile apps, and ROI-focused digital marketing.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-8 w-full md:w-auto">
            <div className="space-y-3">
              <h4 className="font-medium text-sm uppercase tracking-wider">Company</h4>
              <ul className="space-y-2">
                <li>
                  <a href="#home" className="text-gray-600 text-sm hover:text-black transition-colors">
                    Home
                  </a>
                </li>
                <li>
                  <a href="#about" className="text-gray-600 text-sm hover:text-black transition-colors">
                    About
                  </a>
                </li>
                <li>
                  <a href="#services" className="text-gray-600 text-sm hover:text-black transition-colors">
                    Services
                  </a>
                </li>
              </ul>
            </div>

            <div className="space-y-3">
              <h4 className="font-medium text-sm uppercase tracking-wider">Support</h4>
              <ul className="space-y-2">
                <li>
                  <a href="#team" className="text-gray-600 text-sm hover:text-black transition-colors">
                    Team
                  </a>
                </li>
                <li>
                  <a href="#faq" className="text-gray-600 text-sm hover:text-black transition-colors">
                    FAQ
                  </a>
                </li>
                <li>
                  <a href="#testimonials" className="text-gray-600 text-sm hover:text-black transition-colors">
                    Testimonials
                  </a>
                </li>
                <li>
                  <a href="#contact" className="text-gray-600 text-sm hover:text-black transition-colors">
                    Contact
                  </a>
                </li>
              </ul>
            </div>

            {/* Newsletter  */}
            <div className="space-y-3 col-span-2 md:col-span-1">
              <h4 className="font-medium text-sm uppercase tracking-wider">Newsletter</h4>
              <form className="flex flex-col sm:flex-row gap-2">
                <input
                  type="email"
                  placeholder="Your email"
                  className="border border-gray-300 rounded px-3 py-2 text-sm w-full"
                />
                <button
                  type="submit"
                  className="bg-blue-900 hover:bg-blue-500 text-white rounded px-4 py-2 text-sm font-medium"
                >
                  Subscribe
                </button>
              </form>
            </div>
          </div>
        </div>

        {/* Bottom copyright  */}
        <div className="mt-4 pt-4 border-t border-gray-200">
          <p className="text-sm text-center">
            © 2025 Digitro Solutions. All rights reserved.
          </p>
        </div>
      </div>
    </footer>
  );
}
