"use client";

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

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"},
];

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"},
];

export default function Home() {
  const [currentSlide, setCurrentSlide] = useState(0);

  //Auto-advance slideshow
  useEffect(() => {
    //Change slide every 7.5 seconds
    const timer = setInterval(() => {setCurrentSlide((prev) => (prev + 1) % slideshowImages.length);}, 7500); 

    return () => clearInterval(timer);
  }, []);

  return (
    <main className="home-page">
      {/* Slideshow */}
      <section className="slideshow-container">
        {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="slide-image"
              sizes="100vw"
            />
          </div>
        ))}
      </section>

      {/* Title Section */}
      <section className="centered-title-section">
        <h1 className="main-title">Welcome to Leon's Pet Store</h1>
        <p className="subtitle">Your One-Stop Shop for All Things Pets</p>
        <div className="title-decoration"></div>
      </section>

      {/* Image Hyperlinks */}
      <section className="image-links-section">
        <div className="image-links-container">
          {navImages.map((item, index) => (
            <Link href={item.link} key={item.id} className="image-link-card">
              <div className="image-wrapper">
                <Image
                  src={item.src}
                  alt={item.alt}
                  fill
                  className="linked-image"
                  sizes="(max-width: 768px) 100vw, 25vw"
                />
              </div>
              <h3 className="image-title">{item.title}</h3>
            </Link>
          ))}
        </div>
      </section>

      {/* About Us */}
      <section className="info-page">
        <div className="info-hero">
          <h2 className="info-title">About Leon&apos;s Pet Store</h2>
          <p className="info-subtitle">Your trusted local destination for pet care, adoption, and supplies — built on a love for animals and community.</p>
          <div className="title-decoration"></div>
        </div>
        <div className="info-content">
          <div className="info-card">
            <h3>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="info-card">
            <h3>Our Focus</h3>
            <ul className="info-list">
              <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="info-card">
            <h3>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>
  );
}