"use client";

import Image from "next/image";
import Link from "next/link";
import { useState, useEffect } from "react";

//Images used in the auto-scrolling slideshow at the top of the home page
const slideshowImages = [
  {id: "slide-1", src: "/images/home/slideshow/pet1.jpg", alt: "Happy pets"},
  {id: "slide-2", src: "/images/home/slideshow/pet2.jpg", alt: "Pet supplies"},
  {id: "slide-3", src: "/images/home/slideshow/pet3.jpg", alt: "Pet grooming"},
  {id: "slide-4", src: "/images/home/slideshow/pet4.jpg", alt: "Pet food"},
];

//Image cards linking to the three main sections of the site
const navImages = [
  {id: "nav-adopt", src: "/images/home/navimages/adopt.jpg", alt: "Adopt a Pet", link: "/adopt", title: "Adopt a Pet"},
  {id: "nav-products", src: "/images/home/navimages/store.jpg", alt: "Online Store", link: "/products", title: "Online Store"},
  {id: "nav-appointments", src: "/images/home/navimages/appointments.jpg", alt: "Appointments", link: "/appointments", title: "Appointments"},
];

//Home page - slideshow, nav image links, and about us section
export default function Home() {
  const [currentSlide, setCurrentSlide] = useState(0);

  //Advances the slideshow every 7.5 seconds
  useEffect(() => {
    const timer = setInterval(() => { setCurrentSlide((prev) => (prev + 1) % slideshowImages.length); }, 7500);
    return () => clearInterval(timer);
  }, []);

  return (
    <main className="min-h-screen">
      {/* Slideshow */}
      <section className="relative w-full h-[500px] overflow-hidden max-[1024px]:h-[400px] max-[768px]:h-[300px] max-[480px]:h-[250px]">
        {slideshowImages.map((image, index) => (
          <div key={image.id} className={`slide ${index === currentSlide ? "active" : ""}`}>
            <Image src={image.src} alt={image.alt} fill priority={index === 0} className="object-cover" sizes="100vw" />
          </div>
        ))}
      </section>

      {/* Title Section */}
      <section className="text-center py-16 px-8 bg-gradient-to-b from-[#f9f9f9] to-white max-[480px]:py-8 max-[480px]:px-4">
        <h1 className="text-5xl font-bold text-[#333] mb-4 tracking-tight max-[1024px]:text-4xl max-[768px]:text-3xl max-[480px]:text-2xl">Welcome to Leon&apos;s Pet Store</h1>
        <p className="text-2xl font-light text-[#666] mb-8 max-[768px]:text-[1.25rem] max-[480px]:text-base">Your One-Stop Shop for All Things Pets</p>
        <div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
      </section>

      {/* Image Hyperlinks */}
      <section className="max-w-[1200px] mx-auto px-8 py-8 max-[768px]:px-4">
        <div className="grid grid-cols-3 gap-8 max-[768px]:grid-cols-2 max-[768px]:gap-6 max-[480px]:grid-cols-1 max-[480px]:gap-4">
          {navImages.map((item) => (
            <Link href={item.link} key={item.id} className="no-underline text-inherit transition-transform duration-300 hover:-translate-y-1.5 flex flex-col items-center group">
              <div className="relative w-full aspect-square rounded-[20px] overflow-hidden shadow-[0_4px_8px_rgba(0,0,0,0.1)] mb-4">
                <Image src={item.src} alt={item.alt} fill className="object-cover transition-transform duration-300 group-hover:scale-110" sizes="(max-width: 768px) 100vw, 25vw" />
              </div>
              <h3 className="text-center text-[1.2rem] font-semibold text-[#333] mt-2">{item.title}</h3>
            </Link>
          ))}
        </div>
      </section>

      {/* About Us */}
      <section className="bg-gradient-to-b from-[#f9f9f9] to-white">
        <div className="text-center px-8 pt-10 pb-6">
          <h2 className="text-[1.6rem] font-bold text-[#333] mb-2 uppercase tracking-[0.08em]">About Us</h2>
          <p className="text-base text-[#888] mb-4 max-w-[520px] mx-auto leading-relaxed">A full-service pet store built on a love for animals and community.</p>
          <div className="w-[100px] h-1 bg-[#e68672] mx-auto mt-8 rounded-sm"></div>
        </div>
        <div className="max-w-[1200px] mx-auto px-8 pb-6 grid grid-cols-3 gap-6 max-[768px]:grid-cols-1">
          <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
            <h3 className="mt-0 mb-4 text-[#222] underline decoration-[#e68672] underline-offset-4 text-[1.3rem] font-bold">What We Do</h3>
            <p>Leon&apos;s Pet Store is a full-service pet shop offering adoptions, grooming, veterinary appointments, and a wide range of supplies to keep your pets happy and healthy.</p>
          </div>
          <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
            <h3 className="mt-0 mb-4 text-[#222] underline decoration-[#e68672] underline-offset-4 text-[1.3rem] font-bold">Our Focus</h3>
            <ul className="m-0 pl-5 grid gap-2 list-disc">
              <li>Support responsible pet adoption</li>
              <li>Provide grooming and care services</li>
              <li>Offer reliable pet supplies</li>
              <li>Create a friendly customer experience</li>
            </ul>
          </div>
          <div className="bg-white rounded-2xl shadow-[0_4px_12px_rgba(0,0,0,0.08)] p-6">
            <h3 className="mt-0 mb-4 text-[#222] underline decoration-[#e68672] underline-offset-4 text-[1.3rem] font-bold">Visit the Store</h3>
            <p>Come visit us in person or explore our services online. Whether you&apos;re a first-time pet owner or a seasoned animal lover, we&apos;re here to help every step of the way.</p>
          </div>
        </div>
      </section>
    </main>
  );
}
