"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Link from "next/link";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import { menuItems, MobileNav } from "@/components/Header";
import { cn } from "@/lib/utils";
import CustomButton from "@/components/CustomButton";

export default function Home1() {
  const heroRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(
      heroRef.current,
      { opacity: 0, y: 50 },
      { opacity: 1, y: 0, duration: 1.2, ease: "power3.out" }
    );
  }, []);

  const features = [
    {
      id: 1,
      title: "Discussion",
      description:
        "  Each project begins with a comprehensive discussion to identify your needs, establish scope, and understand how you want your home to feel and function.",
    },
    {
      id: 2,
      title: "Research",
      description:
        " After exploring your preferences, our team creates a visual concept of your home that will guide the construction, if building, and the overall design direction of your interiors project.",
    },
    {
      id: 3,
      title: "Design",
      description:
        "We develop a schematic or interior design, and collaborate with you to ensure every detail is perfect. This is a visual and tactile process, where your home’s design is refined.",
    },
    {
      id: 4,
      title: "Procurement",
      description:
        " After the overall design has been fully realized, our team facilitates the bidding process with contractors and vendors. Our in-house procurement team orders new furnishings, fixtures, and accessories for your home.",
    },
    {
      id: 5,
      title: "Implementation",
      description:
        "  Our residential building design team facilitates all aspects of your home's construction in this stage. When it comes time for the interior design, our team installs all furnishings, art, and accessories for your home.",
    },
    {
      id: 6,
      title: "Reveal",
      description:
        " Your home has been fully designed, with exceptional care, thoughtfulness, and innovation. When interior design is complete, we have a few surprises left before we pop the bubbly and welcome you home.",
    },
  ];

  const testimonials = [
    {
      quote:
        "A very professional team, focused on details, finished on time, highly recommended!",
      name: "Ali R",
      location: "Rose Bay, NSW",
    },
    {
      quote:
        "Leo and his team renovated our bathroom, very clean and tidy, peace of mind throughout.",
      name: "Johnson S",
      location: "Crows Nest, NSW",
    },
    {
      quote:
        "Nice design me and my daughter loved, surprised at the thoughtful work!",
      name: "Luke W",
      location: "Bondi, NSW",
    },
  ];

  return (
    <div className="h-full flex flex-col bg-neutral-900">
      <div className="relative banner h-[800px] m-4">
        <header className="relative  py-4 flex justify-between items-center  px-4 z-20">
          <Link href="/" className="flex items-center space-x-2">
            <Image
              src="/images/logo-white.png"
              alt="Focux Logo"
              width={120}
              height={40}
              style={{ objectFit: "contain" }}
            />
          </Link>

          <div className="desktop-menu flex gap-2">
            <NavigationMenu viewport={false} className="hidden lg:flex ">
              <NavigationMenuList>
                {menuItems.map((item) =>
                  item.children ? (
                    <NavigationMenuItem key={item.id}>
                      <NavigationMenuTrigger
                        className={
                          "!bg-neutral-400/30 text-neutral-100 !text-base !font-medium !rounded-xl px-4 py-6  hover:!bg-cyan-500 hover:!text-neutral-100 backdrop-blur-sm transition-colors duration-150 ease-linear focus:!text-neutral-100 focux:!bg-cyan-500 data-[state=open]:!text-neutral-100 data-[state=open]:!bg-cyan-500"
                        }
                      >
                        <span>{item.label}</span>
                      </NavigationMenuTrigger>
                      <NavigationMenuContent className=" !w-[200px] gap-2 !rounded-2xl !border-0 !bg-neutral-400/30 text-neutral-100 !backdrop-blur-sm ">
                        <ul>
                          {item.children.map((sub) => (
                            <li key={sub.id} className="">
                              <NavigationMenuLink asChild>
                                <Link
                                  href={sub.href}
                                  className={cn(
                                    "text-neutral-100 !text-base relative block select-none p-3 leading-none no-underline outline-none transition-colors hover:bg-cyan-500 hover:text-neutral-100 active:bg-primary !rounded-xl"
                                  )}
                                >
                                  {sub.label}
                                </Link>
                              </NavigationMenuLink>
                            </li>
                          ))}
                        </ul>
                      </NavigationMenuContent>
                    </NavigationMenuItem>
                  ) : (
                    <NavigationMenuItem key={item.id} className=" ">
                      <NavigationMenuLink asChild>
                        <Link
                          href={item.href}
                          className={cn(
                            "!bg-neutral-400/30 text-neutral-100 !text-base font-medium !rounded-xl !px-4 !py-6 !backdrop-blur-sm !transition-all !duration-150 ease-in-out  hover:!text-neutral-100 hover:!bg-cyan-500 ",
                            navigationMenuTriggerStyle()
                          )}
                        >
                          {item.label}
                        </Link>
                      </NavigationMenuLink>
                    </NavigationMenuItem>
                  )
                )}
              </NavigationMenuList>
            </NavigationMenu>
            <Button className="h-12 rounded-xl bg-neutral-100 hover:bg-cyan-500 hover:text-neutral-100 text-base hidden lg:block">
              Contact Us
            </Button>
          </div>

          <MobileNav className=" text-neutral-900 bg-neutral-200 hover:bg-accent rounded-md size-10 p-2" />
        </header>
        <div className="absolute top-0 left-0 h-[800px] w-full rounded-xl  z-10 ">
          <Image
            src="/images/kitchen/kitchen-3.jpg"
            alt="Focux Logo"
            fill
            style={{ objectFit: "cover" }}
            className="relative rounded-xl mx-auto"
          />
          <div className="overlay absolute inset-0 bg-black/50 z-10 h-[800px] w-full rounded-xl" />
          <div className="z-10 absolute bottom-10 p-4">
            <h2 className="text-8xl max-w-2xl text-white mb-4">
              Home Remodeling & Renovation
            </h2>
            <div className="flex max-w-2xl">
              <div className=" w-1/3">
                <span className="text-lg text-white text-justify ">
                  Kitchen Renovation - Sydney/Australia
                </span>
                <CustomButton
                  className="rounded-xl bg-neutral-100 hover:bg-cyan-500 hover:text-neutral-100 text-base mt-2"
                  text="Explore Now"
                />
              </div>
              <p className="w-2/3 text-lg text-white">
                Whether you’re increasing property value ahead of a sale or
                making a house your own, Focux brings 15+ years of licensed
                excellence in Australia’s residential home industry.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Footer */}
      <footer className="text-gray-300 py-8 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
          <p className="text-base">
            © {new Date().getFullYear()} Focux. All Rights Reserved.
          </p>
          <div className="flex space-x-4 mt-4 md:mt-0">
            <a href="#">Facebook</a>
            <a href="#">WhatsApp</a>
            <a href="#">Instagram</a>
            <a href="#">RedBook</a>
          </div>
        </div>
      </footer>
    </div>
  );
}
