"use client";
import HeroBanner from "@/components/HeroBanner";
import React from "react";

import Image from "next/image";
import Testimonials from "@/components/Testimonials";
import Feature from "@/components/Feature";
import LogoSlider from "@/components/LogoSlider";
import GetStartedCTA from "@/components/GetStartedCTA";
import Footer from "@/components/Footer";
import ServiceSlider from "@/components/ServiceSlider";
import CustomCursor from "@/components/CustomCursor";
import Header from "@/components/Header";

const Home = () => {
  const [isHovered, setIsHovered] = React.useState(false);
  console.log(isHovered);
  return (
    <div>
      <Header />
      <CustomCursor hovered={isHovered} />
      <div className="hero banner">
        <HeroBanner />
      </div>

      <div className="about flex flex-col md:flex-row gap-30 w-full pt-32 pb-16 pl-4 pr-4 md:pr-0 max-w-8xl mx-auto ">
        <div className="bg-background  basis-1 md:basis-1/3 flex flex-col items-start justify-center p-8 ">
          <h2 className="text-2xl md:text-4xl text-muted">WELCOME TO FOCUX</h2>
          <h3 className="text-3xl md:text-5xl font-bold mb-4 -mt-8">
            Home Remodeling & Renovation
          </h3>
          <p className="text-lg mb-6">
            Whether you’re looking to increase the property value of your home
            ahead of a sale or closing on a house you can’t wait to make your
            own, chances are there’s a renovation or remodeling project in your
            future. Which means you’ll have a lot of things to consider, not
            least among them how to find a contractor, how to mitigate costs,
            and, no less important, how to translate your ideas into reality.
            Focux is here to help. Focux is a passionate team of a licensed and
            qualified group. For over 15 years, all of our members are driven
            towards achieving excellence in Australia’s residential home
            industry.
          </p>
          <button className="rounded-2xl bg-primary px-6 py-3 font-medium  shadow-lg hover:bg-primary/90 transition">
            Learn More
          </button>
        </div>
        <div className="basis-1 md:basis-2/3 bg-[url(/images/kitchen/kitchen-2.jpg)] bg-cover w-full h-[600px] bg-foreground min-h-[300px] rounded-md "></div>
      </div>
      <div className="bg-[url(/images/kitchen/kitchen-1.jpg)] bg-cover bg-center w-full h-[600px] bg-foreground "></div>

      <div className="services flex flex-row flex-wrap pt-32 pb-16">
        <div className="flex flex-col gap-2 p-4 md:p-24 w-full lg:w-1/3 ">
          <Image
            src="/images/logo.png"
            alt="Focux Logo"
            width={36}
            height={36}
            className="w-24"
            sizes="(max-width: 768px) 100vw, 33vw"
            style={{ objectFit: "contain" }}
          />
          <h2 className="text-2xl md:text-4xl lg:text-5xl font-semibold ">
            Our Services
          </h2>
          <p className="text-lg">
            We are a licensed and qualified team who are driven towards
            achieving excellence in Australia’s residential home industry. We
            are here to organize everything for you.
          </p>
        </div>
        <div
          onMouseEnter={() => {
            setIsHovered(true);
          }}
          onMouseLeave={() => {
            setIsHovered(false);
          }}
          className={`w-full lg:w-2/3 self-center flex flex-col md:flex-row gap-24 md:gap-4 justify-start items-stretch  py-2 h-full  px-4 md:px-2 cursor-none`}
        >
          <ServiceSlider />
        </div>
      </div>

      <Testimonials />

      <Feature />
      <LogoSlider />
      <GetStartedCTA />
      <Footer />
    </div>
  );
};

export default Home;
