"use client";

import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Slider from "@/components/Slider";
import Link from "next/link";
import { DesktopNav, MobileNav } from "@/components/Header";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation, Pagination, Scrollbar } from "swiper/modules";

export default function HomePage() {
  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="min-h-screen flex flex-col">
      {/* Header */}
      <header className="w-full fixed top-0 left-0 bg-white shadow z-50">
        <div className="max-w-7xl mx-auto flex justify-between items-center p-4">
          <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>

          <DesktopNav />
          <MobileNav />
        </div>
      </header>

      {/* Hero Section */}
      <Slider />
      <section
        ref={heroRef}
        className="relative flex  flex-col-reverse  md:flex-row  items-center justify-center pt-0 md:pt-16  text-center h-screen bg-gray-100 container mx-auto pb-16 min-h-max"
      >
        <div className="relative  min-h-[400px] md:min-h-[600px] w-full md:w-1/2">
          <Image
            src="/images/kitchen/kitchen-1.jpg"
            alt="kitchen renovation"
            fill
          />
        </div>
        <div className=" w-full md:w-1/2 text-left py-16 px-4 md:p-16">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">
            WELCOME TO FOCUX
          </h2>
          <p className="text-lg md:text-xl mb-6 ">
            Home Remodeling & Renovation – 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>
          <Button className="py-8 px-16">Learn More</Button>
        </div>
      </section>

      {/* Services */}
      <section id="services" className="container mx-auto py-16">
        <h3 className="text-3xl font-semibold text-center mb-12">
          Our Services
        </h3>
        <div className=" grid md:grid-cols-3 gap-8">
          <div className="p-2 bg-white shadow rounded-2xl">
            <div className="relative min-h-[250px] mb-6">
              <Image
                src="/images/bathroom/bathroom-1.jpg"
                alt="Bathroom renovation"
                fill
                className="rounded-md"
              />
            </div>
            <h4 className="text-xl font-bold mb-1 px-2">Bathroom Renovation</h4>
            <p className="px-2 mb-4">
              Reinvent the most utilitarian room with ideas for powder rooms,
              master baths, and more.
            </p>
          </div>
          <div className="p-2 bg-white shadow rounded-2xl">
            <div className="relative min-h-[250px] mb-6">
              <Image
                src="/images/kitchen/kitchen-1.jpg"
                alt="kitchen renovation"
                fill
                className="rounded-md"
              />
            </div>
            <h4 className="text-xl font-bold mb-1 px-2">Kitchen Renovation</h4>
            <p className="px-2 mb-4">
              We can help you create a kitchen or dining area in your space.
            </p>
          </div>
          <div className="p-2 bg-white shadow rounded-2xl">
            <div className="relative min-h-[250px] mb-6">
              <Image
                src="/images/kitchen/kitchen-3.jpg"
                alt="Full House renovation"
                fill
                className="rounded-md"
              />
            </div>
            <h4 className="text-xl font-bold mb-1 px-2">
              Full House Renovation
            </h4>
            <p className="px-2 mb-4">
              From structural upgrades to fine finishes, we manage full-home
              makeovers end to end.
            </p>
          </div>
        </div>
      </section>

      {/* Projects */}
      <section id="projects" className="py-16 bg-gray-50 px-6">
        <h3 className="text-3xl font-semibold text-center mb-12">
          View Our Latest Projects
        </h3>
        <div className="container mx-auto">
          <Swiper
            slidesPerView={3}
            loop={true}
            pagination={{
              clickable: true,
            }}
            spaceBetween={20}
         
            autoplay={{
              delay: 3000,
              disableOnInteraction: false,
            }}
            modules={[Pagination, Scrollbar, Autoplay]}
            className="mySwiper h-[400px] relative w-full "
          >
            <SwiperSlide className="relative    ">
              <Image
                src="/images/kitchen/kitchen-3.jpg"
                alt="Full House renovation"
                fill
                className="object-cover z-0 rounded-md"
              />
            </SwiperSlide>
            <SwiperSlide className="relative ">
              <Image
                src="/images/bathroom/bathroom-3.jpg"
                alt="Bathroom renovation"
                fill
                className="object-cover z-0 rounded-md"
              />
            </SwiperSlide>
            <SwiperSlide className="relative ">
              <Image
                src="/images/bathroom/bathroom-2.jpg"
                alt="Full House renovation"
                fill
                className="object-cover z-0 rounded-md"
              />
            </SwiperSlide>
             <SwiperSlide className="relative ">
              <Image
                src="/images/kitchen/kitchen-2.jpg"
                alt="Kitchen renovation"
                fill
                className="object-cover z-0 rounded-md"
              />
            </SwiperSlide>
          </Swiper>
        </div>
      </section>

      {/* Testimonials */}
      <section id="testimonials" className="py-16 container mx-auto ">
        <h3 className="text-3xl font-semibold text-center mb-12">
          Testimonials
        </h3>
        <div className="grid md:grid-cols-3 gap-6">
          {testimonials.map((t, i) => (
            <div key={i} className="p-16 bg-white rounded-2xl shadow">
              <p className="italic mb-4 text-lg">“{t.quote}”</p>
              <p className="font-semibold">{t.name}</p>
              <p className="text-sm text-gray-500">{t.location}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Why Focux */}
      <section id="why" className="py-16 bg-gray-100 px-6">
        <h3 className="text-3xl font-semibold text-center mb-12">Why Focux?</h3>
        <p className="text-center max-w-3xl mx-auto mb-12 text-base">
          The creative experience we provide is highly collaborative and deeply
          personal, resulting in sophisticated spaces that reflect how our
          clients love to live.
        </p>
        <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {features.map((feature, i) => (
            <div key={feature.id} className="p-6 bg-white rounded-2xl shadow">
              <h4 className="font-bold text-2xl mb-2">{feature.title}</h4>
              <p className="text-base text-gray-600"> {feature.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Contact CTA */}
      <section
        id="contact"
        className="py-20 text-center bg-black text-white px-6"
      >
        <h3 className="text-3xl md:text-4xl font-bold mb-4">
          Are you ready to get started?
        </h3>
        <p className="mb-6">Call 0433 883 339 or email info@focux.com.au</p>
        <Button variant="secondary" size="lg">
          Want to Know More
        </Button>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 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>
  );
}
