"use client";

import { Mail, MapPin, Phone } from "lucide-react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import Image from "next/image";

export default function Footer() {
  return (
    <footer className="bg-gray-900 text-gray-300 pt-12 ">
      <div className="container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-6 max-w-7xl mx-auto">
        {/* Brand */}
        <div>
          <Link href="/" className="flex items-center space-x-2">
            <Image
              src="/images/logo.png"
              alt="Focux Logo"
              width={140}
              height={40}
              style={{ objectFit: "contain" }}
            />
          </Link>
          <p className="mt-3 text-base text-gray-400">
            Looking to increase your property value? Build your dream house?
            Focux are here to help and achieve your dream.{" "}
          </p>
        </div>

        {/* Links */}
        <div>
          <h3 className="text-lg font-semibold text-white mb-3">Quick Links</h3>
          <ul className="space-y-2 text-lg">
            <li>
              <a href="#" className="hover:text-white">
                Home
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-white">
                About
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-white">
                Services
              </a>
            </li>
            <li>
              <a href="#kitchen" className="hover:text-white">
                Testimonials
              </a>
            </li>
            <li>
              <a href="#" className="hover:text-white">
                Contact
              </a>
            </li>
          </ul>
        </div>

        {/* Contact */}
        <div>
          <h3 className="text-lg font-semibold text-white mb-3">Contact</h3>
          <div className="flex gap-4 w-full">
            <Phone className="size-6 text-primary " />
            <div className="c flex flex-col">
              <span className="text-lg font-medium">Call Us</span>
              <Link href="tel: 0433 883 339" className="text-sm">
                0433 883 339
              </Link>
            </div>
          </div>
          <div className="flex gap-4 w-full">
            <Mail className="size-6 text-primary " />
            <div className="flex flex-col">
              <span className="text-lg font-medium">Mail Us</span>
              <Link href="tel: 0433 883 339" className="text-sm">
                info@focux.com.au
              </Link>
            </div>
          </div>
          <div className="flex gap-4 w-full pb-8">
            <MapPin className="size-6 text-primary " />
            <div className="flex flex-col">
              <span className="text-lg font-medium">Location</span>
              <Link href="tel: 0433 883 339" className="text-sm">
                Australia
              </Link>
            </div>
          </div>
        </div>

        {/* Social */}
        <div>
          <h3 className="text-lg font-semibold text-white mb-3">Follow Us</h3>
          <div className="flex gap-3 border-t-1 border-gray-200 pt-4">
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/facebook.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="facebook"
              />
            </Link>
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/instagram.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="instagram"
              />
            </Link>
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/whatsapp.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="whatsapp"
              />
            </Link>
            <Link href="#" target="_blank" rel="noopener noreferrer">
              <Image
                src="/images/svg/xiaohongshu.png"
                width={40}
                height={40}
                className="object-contain filter grayscale-0 hover:grayscale transition-all duration-300"
                alt="xiaohongshu"
              />
            </Link>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div className="flex flex-col md:flex-row justify-between border-t border-gray-800 mt-10 py-4 max-w-7xl mx-auto px-4">
        
        <p className="   text-base text-gray-500">
          © {new Date().getFullYear()} Focux Pty Ltd. All rights reserved.
        </p>
        <p className=" text-base text-gray-500">
          <Link href="https://bracetech.com">
            
            Designed and Developed By BraceTech
          </Link>
        </p>
      </div>
    </footer>
  );
}
