"use client";

import SocialLinks from "@/components/SocialLinks";

export default function Footer() {
  return (
    <footer className="relative bg-[#020c13] text-gray-300 py-8" aria-label="Site footer">
      {/* Gradient border that fades from right to left */}
      <div className="absolute top-0 right-0 w-[85%] h-[1px] bg-gradient-to-l from-[#B87333] to-transparent" />

      <div className="container mx-auto px-4">
        {/* Desktop Layout */}
        <div className="hidden md:flex relative flex-row justify-between items-center">
          {/* Copyright */}
          <div>
            <p className="text-sm">© {new Date().getFullYear()} Nitescape Lighting. All rights reserved.</p>
          </div>

          {/* Design & Code Credit - Absolutely centered */}
          <div className="absolute left-1/2 transform -translate-x-1/2">
            <p className="text-sm text-gray-500 whitespace-nowrap">
              Design & Code by{" "}
              <a
                href="https://kyvo.no?ref=nitescape"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#ff914d] hover:text-[#B87333] transition-colors duration-200 font-medium"
              >
                KYVO
              </a>
            </p>
          </div>

          {/* Social Links */}
          <SocialLinks />
        </div>

        {/* Mobile Layout */}
        <div className="flex md:hidden flex-col items-center space-y-4">
          {/* Copyright */}
          <div>
            <p className="text-sm text-center">
              © {new Date().getFullYear()} Nitescape Lighting. All rights reserved.
            </p>
          </div>

          {/* Design & Code Credit */}
          <div>
            <p className="text-sm text-gray-500 text-center">
              Design & Code by{" "}
              <a
                href="https://kyvo.no?ref=nitescape"
                target="_blank"
                rel="noopener noreferrer"
                className="text-[#ff914d] hover:text-[#B87333] transition-colors duration-200 font-medium"
              >
                KYVO
              </a>
            </p>
          </div>

          {/* Social Links */}
          <SocialLinks />
        </div>
      </div>
    </footer>
  );
}
