"use client";

import Link from "next/link";
import { Diamond, Mail, Instagram, Twitter } from "lucide-react";

const footerLinks = {
  competition: [
    { href: "/register", label: "Register" },
    { href: "/submit", label: "Submit Art" },
    { href: "/gallery", label: "Gallery" },
    { href: "/rules", label: "Rules" },
  ],
  information: [
    { href: "/about", label: "About" },
    { href: "/faq", label: "FAQ" },
    { href: "/contact", label: "Contact" },
  ],
};

export default function Footer() {
  return (
    <footer className="bg-black text-white">
      {/* Main Footer */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
          {/* Brand */}
          <div className="lg:col-span-2">
            <Link href="/" className="flex items-center gap-2 mb-6">
              <Diamond className="w-8 h-8 text-lime-400" />
              <span className="text-2xl font-black tracking-tight">ARTSPLASH</span>
            </Link>
            <p className="text-zinc-400 max-w-md mb-6 leading-relaxed">
              ArtSplash is SJEC's premier art competition celebrating creativity
              across Digital Art, Paintings, and Poster Making. Join us in this
              vibrant celebration of artistic expression.
            </p>
            <div className="flex gap-4">
              <a
                href="#"
                className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-lime-400 hover:text-black transition-colors"
              >
                <Instagram className="w-5 h-5" />
              </a>
              <a
                href="#"
                className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-lime-400 hover:text-black transition-colors"
              >
                <Twitter className="w-5 h-5" />
              </a>
              <a
                href="mailto:artsplash@sjec.ac.in"
                className="w-10 h-10 rounded-full bg-zinc-800 flex items-center justify-center hover:bg-lime-400 hover:text-black transition-colors"
              >
                <Mail className="w-5 h-5" />
              </a>
            </div>
          </div>

          {/* Competition Links */}
          <div>
            <h3 className="text-lg font-bold mb-4">Competition</h3>
            <ul className="space-y-3">
              {footerLinks.competition.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-zinc-400 hover:text-lime-400 transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>

          {/* Information Links */}
          <div>
            <h3 className="text-lg font-bold mb-4">Information</h3>
            <ul className="space-y-3">
              {footerLinks.information.map((link) => (
                <li key={link.href}>
                  <Link
                    href={link.href}
                    className="text-zinc-400 hover:text-lime-400 transition-colors"
                  >
                    {link.label}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="border-t border-zinc-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
            <p className="text-zinc-500 text-sm">
              © 2026 ArtSplash. All rights reserved.
            </p>
            <div className="flex items-center gap-2 text-zinc-500 text-sm">
              <span>Powered by</span>
              <span className="text-lime-400 font-bold">Sceptix</span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}