"use client";

import React from "react";
import { Circle, Square, Triangle, ArrowUpRight } from "lucide-react";

const GeometricBauhausFooter: React.FC = () => {
  return (
    <footer className="bg-[#f8f5f0] text-[#1a1a1a] p-4 md:p-10 font-space overflow-hidden">
      <div className="max-w-7xl mx-auto border-4 border-[#1a1a1a] grid grid-cols-1 md:grid-cols-12">
        {/* Brand Block */}
        <div className="md:col-span-5 border-b-4 md:border-b-0 md:border-r-4 border-[#1a1a1a] xl:p-10 md:p-5 p-10 bg-[#FFD700] relative">
          <div className="absolute top-4 right-4 flex gap-2">
            <Circle className="w-4 h-4 fill-black" />
            <Square className="w-4 h-4 fill-black" />
            <Triangle className="w-4 h-4 fill-black" />
          </div>
          <h2 className="xl:text-7xl text-5xl font-black uppercase tracking-tighter leading-none mb-12 transform -rotate-1">
            FORM <br /> FOLLOWS <br />{" "}
            <span className="bg-black text-white px-2">FUNCTION</span>
          </h2>
          <p className="text-lg font-bold uppercase tracking-tight max-w-xs mb-10 leading-none">
            Modernist principles <br /> for digital architecture.
          </p>
          <button className="bg-[#1E90FF] text-white border-[3px] border-black px-8 py-4 font-black uppercase tracking-widest shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all">
            Inquire Now
          </button>
        </div>

        {/* Modular Grid Links */}
        <div className="md:col-span-7 grid grid-cols-1 sm:grid-cols-2 divide-y-4 sm:divide-y-0 sm:divide-x-4 divide-black">
          {/* Section 1 */}
          <div className="flex flex-col">
            <div className="xl:p-10 md:p-5 p-10 border-b-4 border-black flex-1 bg-white hover:bg-[#FF4500] hover:text-white transition-colors group">
              <h4 className="font-black uppercase tracking-widest text-xs mb-8 underline decoration-[3px]">
                Navigation
              </h4>
              <ul className="space-y-4 font-black text-2xl uppercase tracking-tighter">
                {["Works", "Studio", "Archives"].map((item) => (
                  <li key={item} className="flex items-center justify-between">
                    <a href="#">{item}</a>
                    <ArrowUpRight className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </li>
                ))}
              </ul>
            </div>
            <div className="xl:p-10 md:p-5 p-10 bg-[#1E90FF] text-white">
              <h4 className="font-black uppercase tracking-widest text-xs mb-4">
                Newsletter
              </h4>
              <div className="relative">
                <input
                  type="text"
                  placeholder="EMAIL_HERE"
                  className="w-full bg-white border-[3px] border-black px-4 py-3 text-black font-black uppercase focus:outline-none"
                />
              </div>
            </div>
          </div>

          {/* Section 2 */}
          <div className="flex flex-col">
            <div className="p-10 bg-white flex-1 hover:bg-[#FFD700] transition-colors group">
              <h4 className="font-black uppercase tracking-widest text-xs mb-8 underline decoration-[3px]">
                Global Network
              </h4>
              <ul className="space-y-4 font-black text-2xl uppercase tracking-tighter">
                {["London", "Berlin", "Tokyo", "NYC"].map((item) => (
                  <li
                    key={item}
                    className="flex items-center justify-between cursor-pointer"
                  >
                    <span>{item}</span>
                    <span className="text-xs border-2 border-black px-2 group-hover:bg-black group-hover:text-[#FFD700]">
                      ACTIVE
                    </span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="p-10 border-t-4 border-black bg-[#1a1a1a] text-white flex flex-col justify-between">
              <div className="text-4xl font-black italic">BAU_24</div>
              <div className="text-[10px] font-bold uppercase tracking-[0.5em] mt-8 opacity-40">
                Built on principles <br /> Established 1919
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
};
export default GeometricBauhausFooter;
footer40

footer40
