import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react";
import { Button } from "./ui/button";
import { Link, NavLink } from "react-router";

const Footer = () => {
  return (
    <footer className="bg-red-700 text-white/90 pb-10 pt-90 mt-20">
      <div className="lg:flex items-center bg-white shadow-sm max-w-7xl mx-auto rounded-lg mb-10 mx-10 p-8 lg:p-14 -mt-120">
        <div className="w-full lg:w-7/10 text-center lg:text-left">
          <p className="uppercase font-bold text-black text-xl md:text-4xl/10"><span className="text-red-800">Your brand has a mission.</span><br/> We'll help the World to see it.</p>
          <p className="text-gray-900 mt-3 font-semibold block mt-6 md:mt-0">Let's align your brand with the impact you're here to make</p>
        </div>
        <div className="w-full lg:w-3/10 block mt-10 md:mt-6 items-center text-center">
          <Button variant="link" className="bg-red-700 text-white lg:px-12 py-8 rounded-full font-semibold hover:bg-red-800 hover:no-underline">
            <NavLink to={"/schedule"} className="px-12 py-8">Book a Discovery Call</NavLink></Button>
        </div>
      </div>
      <div className="md:flex">
        <div className="w-full md:w-2/4 px-10 mt-20 md:mt-0 text-center md:text-left">
          <h4 className="font-bold text-lg">About Us</h4>
          <p className="mt-2">We are a team of passionate individuals...</p>
          <div className="items-center my-4 pr-2 flex gap-2 justify-center md:justify-start">
            <a
              href="#"
              title="Facebook Link"
              className="relative rounded-full p-2 border bg-red-700 "
            >
              <Facebook size={15} />
            </a>
            <a
              href="#"
              title="Twitter Link"
              className="relative rounded-full p-2 border bg-red-700"
            >
              <Twitter size={15} />
            </a>
            <a
              href="#"
              title="Instagram Link"
              className="relative rounded-full p-2 border bg-red-700"
            >
              <Instagram size={15} />
            </a>
            <a
              href="#"
              title="LinkedIn Link"
              className="relative rounded-full p-2 border bg-red-700"
            >
              <Linkedin size={15} />
            </a>
          </div>
        </div>
        <div className="w-full md:w-1/4 px-10 mt-16 md:mt-0 text-center md:text-left">
          <h4 className="font-bold text-lg mb-4">Contact Us</h4>
          <div className="mt-2 space-y-2 text-sm">
            <address className="not-italic">123 Main St, Bulawayo, Zimbabwe</address>
            <div>Email: contact@visworks365.com</div>
          </div>
        </div>
        <div className="hidden md:block w-1/4 px-10">
          <h4 className="font-bold text-lg mb-4">Services</h4>
          <ul className="mt-2 space-y-2 text-sm">
            <li>
              <a href="#" className="hover:no-underline">Brand Strategy &amp; Positioning</a>
            </li>
            <li>
              <a href="#" className="hover:no-underline">Visual Identity &amp; Design Systems</a>
            </li>
            <li>
              <a href="#" className="hover:no-underline">Purpose-Driven Execution</a>
            </li>
          </ul>
        </div>
        <div className="hidden md:block w-1/5 px-10">
          <h4 className="font-bold text-lg mb-4">Quick Links</h4>
          <ul className="mt-2 space-y-2 text-sm">
            <li>
              <Link to="/"  className="hover:no-underline">Home</Link>
            </li>
            <li>  
              <Link to="/about" className="hover:no-underline">About</Link>
            </li>
            <li>
              <Link to="/projects" className="hover:no-underline">Projects</Link>
            </li>
            <li>
              <Link to="/blog" className="hover:no-underline">Blog</Link>
            </li>
          </ul>
        </div>
      </div>
      <div className="border-t border-red-600 mt-10 mx-10 pt-4 text-center space-y-2">
        <small className="block">
          &copy; {new Date().getFullYear()} Visworks365. All rights reserved.
        </small>
        <small className="block text-white/70">
          Website by{" "}
          <a 
            href="https://sycamore.co.zw" 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-white hover:text-white/90 underline hover:no-underline font-medium"
          >
            Sycamore Systems
          </a>
          {" "}— helping organisations scale with confidence.
        </small>
      </div>
    </footer>
  );
};

export { Footer };
