import React from 'react';
import Image from 'next/image';
import Link from 'next/link';

const Footer = () => {
  return (
    <footer className="bg-blue-900 text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Logo Section */}
        <div className="mb-8">
          <div className="flex items-center mb-4">
            <Image 
              src="/images/logo-white.svg" 
              alt="3engine Logo" 
              width={100} height={100}
            />
          </div>
        </div>

        {/* Footer Content Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Tools Section */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Tools</h3>
            <ul className="space-y-2 text-sm">
              <li><Link href="/account" className="hover:text-blue-300">My customer account</Link></li>
              <li><Link href="/api" className="hover:text-blue-300">API</Link></li>
              <li><Link href="/status" className="hover:text-blue-300">Status</Link></li>
            </ul>
            
            <div className="mt-6">
              <h4 className="font-semibold mb-2">Intellectual property</h4>
              <Link href="/trademarks" className="text-sm hover:text-blue-300">Trademarks</Link>
            </div>
          </div>

          {/* Support Section */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Support</h3>
            <ul className="space-y-2 text-sm">
              <li><Link href="/help" className="hover:text-blue-300">Help centre</Link></li>
              <li><Link href="/guides" className="hover:text-blue-300">Guides</Link></li>
              <li><Link href="/glossary" className="hover:text-blue-300">Documentations</Link></li>
            </ul>

            <div className="mt-6">
              <h4 className="font-semibold mb-2">Contact us</h4>
              <p className="text-sm mb-1">3Engine India Customer Service</p>
              {/* <p className="text-sm mb-1">Toll-Free: <strong>000 800 040 4567</strong></p> */}
              <p className="text-sm">Monday to Friday, 9AM to 5PM (GMT +5:30)</p>
            </div>
          </div>

          {/* News Section */}
          
            <div>
              <h4 className="font-semibold mb-3">Social networks</h4>
              <div className="flex space-x-3">
                {/* Social Media Icons */}
                <a href="#" className="hover:text-blue-300">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
                  </svg>
                </a>
                <a href="#" className="hover:text-blue-300">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                  </svg>
                </a>
                
                <a href="#" className="hover:text-blue-300">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                  </svg>
                </a>
              </div>
            </div>
          

          {/* Keep in touch Section */}
          <div>
            <h3 className="text-lg font-semibold mb-4">Keep in touch</h3>
            <p className="text-sm mb-4">Stay tuned by receiving our latest cloud news</p>
            
            <div className="mb-4">
              <input
                type="email"
                placeholder="Your email address"
                className="w-full px-3 py-2 bg-white text-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-blue-300"
              />
              <button className="w-full mt-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded font-medium transition-colors">
                Subscribe
              </button>
            </div>
          </div>
        </div>

        {/* Footer Bottom */}
        <div className="mt-8 pt-8 border-t border-blue-800">
          <div className="flex flex-wrap items-center justify-center text-sm">
            <div className="flex flex-wrap items-center space-x-4">
              <p>
              Copyright © 2024 Rootxwire All Rights Reserved.
            </p>
            </div>
          </div>
          {/* <div className="mt-2 flex flex-wrap items-center space-x-4 text-sm">
            <Link href="/" className="hover:text-blue-300">About 3Engine</Link>
          </div> */}
        </div>
      </div>
    </footer>
  );
};

export default Footer;