Frontend-Smart_Ticketing/src/components/Footer.tsx

import { Facebook, Instagram, Mail, MessageCircle } from "lucide-react";

export default function Footer() {
  return (
    <footer className="bg-brutal-blue border-t-4 border-black pt-20 pb-10 px-4 sm:px-6 lg:px-8">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
          {/* Brand Col */}
          <div className="col-span-1 md:col-span-2">
            <div className="flex items-center mb-6">
              <span className="font-display font-black text-4xl text-black tracking-tight uppercase bg-white brutal-border px-4 py-2 brutal-shadow-sm inline-block">
                SMART
                <span className="text-brutal-pink brutal-text-shadow">
                  TICKET
                </span>
              </span>
            </div>
            <p className="text-black font-bold text-lg leading-relaxed max-w-sm mb-8 p-4 bg-brutal-yellow brutal-border brutal-shadow-sm">
              PLATFORM TIKET KONSER DAN EVENT TERPERCAYA DI INDONESIA.
              PEMBAYARAN ONLINE LEBIH GAMPANG, CEPAT, DAN AMAN.
            </p>

            <div className="flex items-center gap-4">
              <a
                href="#"
                className="w-14 h-14 bg-brutal-pink text-black flex items-center justify-center brutal-btn hover:bg-white transition-colors"
              >
                <Facebook className="w-6 h-6 stroke-[3]" />
              </a>
              <a
                href="#"
                className="w-14 h-14 bg-brutal-yellow text-black flex items-center justify-center brutal-btn hover:bg-white transition-colors"
              >
                <Instagram className="w-6 h-6 stroke-[3]" />
              </a>
              <a
                href="#"
                className="w-14 h-14 bg-white text-black flex items-center justify-center brutal-btn hover:bg-brutal-pink transition-colors"
              >
                <Mail className="w-6 h-6 stroke-[3]" />
              </a>
              <a
                href="#"
                className="w-14 h-14 bg-brutal-orange text-black flex items-center justify-center brutal-btn hover:bg-white transition-colors"
              >
                <MessageCircle className="w-6 h-6 stroke-[3]" />
              </a>
            </div>
          </div>

          {/* Links Col 1 */}
          <div>
            <h4 className="font-display font-black text-white text-2xl mb-6 uppercase tracking-widest brutal-text-shadow">
              PLATFORM
            </h4>
            <ul className="space-y-4">
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  BERANDA
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  EVENT TERBARU
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  SEMUA EVENT
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  KATEGORI
                </a>
              </li>
            </ul>
          </div>

          {/* Links Col 2 */}
          <div>
            <h4 className="font-display font-black text-white text-2xl mb-6 uppercase tracking-widest brutal-text-shadow">
              BANTUAN
            </h4>
            <ul className="space-y-4">
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  HUBUNGI KAMI
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  SYARAT KETENTUAN
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  PRIVASI
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="text-black hover:text-white transition-colors text-lg font-bold uppercase underline decoration-4 underline-offset-4 hover:bg-black px-2 py-1 inline-block"
                >
                  FAQ
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div className="pt-8 border-t-4 border-black flex flex-col md:flex-row items-center justify-between gap-6">
          <p className="text-black text-lg font-black uppercase bg-white px-4 py-2 brutal-border">
            &copy; {new Date().getFullYear()} SMART TICKET. ALL RIGHTS RESERVED.
          </p>
        </div>
      </div>
    </footer>
  );
}