"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import { heroSideBanners, heroSlides } from "@/data/home";

export function Hero() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const id = window.setInterval(() => {
      setIndex((i) => (i + 1) % heroSlides.length);
    }, 4500);
    return () => window.clearInterval(id);
  }, []);

  return (
    <section className="section !pb-[30px] !pt-5">
      <div className="container-page">
        <div className="grid items-stretch gap-3 md:grid-cols-12 md:gap-4">
          {/* In RTL: order-1 sits on the right (main slider), order-2 on the left (side banners) */}
          <div className="order-1 min-w-0 md:col-span-8 md:h-full">
            <div className="round-box card-shadow relative aspect-[800/474] w-full overflow-hidden bg-[#f3f3f3] md:aspect-auto md:h-full md:min-h-[280px]">
              {heroSlides.map((slide, i) => (
                <a
                  key={`${slide.title}-${i}`}
                  href="#"
                  title={slide.title}
                  className={`absolute inset-0 transition-opacity duration-500 ${
                    i === index ? "opacity-100" : "opacity-0"
                  }`}
                >
                  <Image
                    src={slide.image}
                    alt={slide.title}
                    fill
                    className="object-cover"
                    sizes="(max-width: 768px) 100vw, 66vw"
                    priority={i === 0}
                  />
                </a>
              ))}

              <div className="absolute bottom-4 left-1/2 z-10 flex -translate-x-1/2 gap-2">
                {heroSlides.map((slide, i) => (
                  <button
                    key={`${slide.image}-${i}`}
                    type="button"
                    aria-label={`Go to slide ${i + 1}`}
                    onClick={() => setIndex(i)}
                    className={`h-2.5 w-2.5 rounded-sm border border-white/80 ${
                      i === index ? "bg-white" : "bg-white/40"
                    }`}
                  />
                ))}
              </div>
            </div>
          </div>

          <div className="order-2 flex flex-col gap-3 md:col-span-4">
            {heroSideBanners.map((banner) => (
              <a
                key={banner.title}
                href={banner.href}
                className="round-box card-shadow relative block aspect-[361/230] overflow-hidden bg-[#f3f3f3]"
                title={banner.title}
              >
                <Image
                  src={banner.image}
                  alt={banner.title}
                  fill
                  className="object-cover"
                  sizes="(max-width: 768px) 100vw, 33vw"
                  priority
                />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
