"use client";
import React from "react";

export function Footer() {
  return (
    <footer className="text-gray-100" style={{ backgroundColor: '#012068'}}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Company Info */}
          <div className="lg:col-span-1">
            <div className="inline-block mb-4">
              <div className="flex items-center">
                <span className="text-2xl font-bold text-gray-100">Department of <br></br>Trauma Surgery</span>
              </div>
            </div>
            <div className="space-y-3 mb-6">
              <a 
                href="mailto:traumasurg@cmcvellore.ac.in" 
                className="block transition-colors duration-200 text-gray-100 hover:text-red-600"
              >
                traumasurg@cmcvellore.ac.in
              </a>
              <p className="text-sm leading-relaxed text-gray-300">
                Department of Trauma Surgery<br />
                Room A601, 6th Floor, A Block<br />
                CMC Vellore Ranipet Campus<br />
                Kilminnal Village, Ranipet - 632517,<br />
                Tamil Nadu
              </p>
              <p className="text-gray-100">0417-2224626</p>
            </div>
          </div>

          {/* Company Links - Two Columns */}
          <div className="md:col-span-1">
            <h3 className="font-semibold text-lg mb-4 text-gray-100">Company</h3>
            <div className="grid grid-cols-2 gap-x-6 gap-y-3">
              <ul className="space-y-3">
                {[
                  { label: 'About CMC', href: '/about' },
                  { label: 'Faculty Team', href: '/teamMember' },
                  { label: 'Academics', href: '/education-training' },
                  { label: 'Research', href: '/research'},
                ].map((link) => (
                  <li key={link.label}>
                    <a 
                      href={link.href}
                      className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
              <ul className="space-y-3">
                {[
                  { label: 'Events', href: '/events' },
                  { label: 'Publications', href: '/publications'},
                  { label: 'Career', href: '/career' },
                  { label: 'Contact us', href: '/contact' },
                ].map((link) => (
                  <li key={link.label}>
                    <a 
                      href={link.href}
                      className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
                    >
                      {link.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Additional Links */}
          <div className="md:col-span-1">
            <h3 className="font-semibold text-lg mb-4 text-gray-100">Links</h3>
            <ul className="space-y-3">
              {[
                { label: 'Help Center', href: '/contact' },
                { label: 'Privacy Policy', href: '#' },
                { label: 'Terms & Conditions', href: '#' },
                { label: 'Blogs', href: '/blogs' },
              ].map((link) => (
                <li key={link.label}>
                  <a 
                    href={link.href}
                    className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
                  >
                    {link.label}
                  </a>
                </li>
              ))}
            </ul>
          </div>

          {/* Newsletter */}
          <div className="md:col-span-2 lg:col-span-1">
            <h3 className="font-semibold text-lg mb-4 text-gray-100">Stay Updated</h3>
            <p className="text-sm mb-4 text-gray-300">
              Follow us on social media for the latest updates and news.
            </p>
            <div className="flex flex-col sm:flex-row gap-2">
              <input
                type="email"
                placeholder="Enter your email"
                className="flex-1 px-4 py-2 rounded-md bg-blue-800 bg-opacity-20 border border-blue-600 text-white placeholder-white transition-all"
              />
              <button className="px-4 py-2 rounded-md bg-red-600 text-gray-100 hover:bg-red-700 transition-all duration-200 whitespace-nowrap">
                Subscribe
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Footer Bottom */}
      <div className="border-t border-gray-600 border-opacity-30">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
            <div className="text-sm text-gray-300">
              <p>
                © {new Date().getFullYear()} Copyright by{" "}
                <a 
                  href="#" 
                  className="text-red-600 hover:text-red-700"
                >
                  CMC
                </a>
                . All Rights Reserved.
              </p>
            </div>
            <div className="flex flex-wrap justify-center space-x-6">
              {[
                { label: 'Privacy Policy', href: '#' },
                { label: 'Terms of Service', href: '#' },
                { label: 'Contact', href: '/contact' },
              ].map((link) => (
                <a
                  key={link.label}
                  href={link.href}
                  className="text-gray-300 hover:text-red-600 transition-all duration-200 text-sm"
                >
                  {link.label}
                </a>
              ))}
            </div>
            <div className="text-sm text-gray-300">
              <p>
                Developed by{" "}
                <span className="text-red-600 font-medium">
                  Rootxwire
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}