"use client";

import { useState } from "react";
import Image from "next/image";
import { ArrowUpRight, ChevronLeft, ChevronRight } from "lucide-react";
import { CollectionQuickLinks } from "./collection-quick-links";
import Link from "next/link";
import { shopHref } from "@/data/catalog";

const slides = [
  { image: "/images/hero.webp", alt: "Two men wearing relaxed polo shirts outdoors", label: "THE EVERYDAY EDIT", caption: "Good days start with feeling good.", group: "Men", position: "center" },
  { image: "/images/kurti-large.webp", alt: "Women's everyday collection", label: "YOUR OWN KIND OF STYLE", caption: "A little colour. A little confidence.", group: "Women", position: "center 35%" },
  { image: "/images/kids-large.webp", alt: "Children's clothing collection", label: "SMALL MOMENTS, BIG ADVENTURES", caption: "Made for their everyday adventures.", group: "Kids", position: "center 30%" },
];
export function Hero({ onCollection }: { onCollection: (id: string) => void }) {
  const [index, setIndex] = useState(0);
  const slide = slides[index];
  function move(delta: number) { setIndex((current) => (current + delta + slides.length) % slides.length); }
  return <section className="hero-section" aria-label="Featured collections"><h1 className="sr-only">Fashion Mart — Wear your everyday</h1><div className="hero-photo" role="group" aria-roledescription="carousel" aria-label="Collection highlights" onKeyDown={(event) => { if (event.key === "ArrowLeft" || event.key === "ArrowRight") { event.preventDefault(); move(event.key === "ArrowRight" ? 1 : -1); } }}><Image key={slide.image} src={slide.image} alt={slide.alt} fill priority={index === 0} sizes="(max-width: 900px) 100vw, 85vw" className="hero-image" style={{ objectPosition: slide.position }} /><div className="hero-photo-shade" /><span className="hero-season">{slide.label}<span>{String(index + 1).padStart(2, "0")} / {String(slides.length).padStart(2, "0")}</span></span><div className="hero-photo-caption"><span>{slide.caption}</span><Link href={shopHref(slide.group)} className="photo-link" aria-label={`Shop ${slide.group} collection`}><ArrowUpRight size={22} /></Link></div><div className="hero-slider-controls"><button type="button" aria-label="Previous slide" onClick={() => move(-1)}><ChevronLeft size={19} /></button><div className="hero-slider-dots">{slides.map((item, slideIndex) => <button key={item.group} type="button" aria-label={`Show ${item.group} slide`} aria-pressed={slideIndex === index} onClick={() => setIndex(slideIndex)}><span /></button>)}</div><button type="button" aria-label="Next slide" onClick={() => move(1)}><ChevronRight size={19} /></button></div><p className="sr-only" aria-live="polite">Slide {index + 1} of {slides.length}: {slide.group}</p></div><CollectionQuickLinks onCollection={onCollection} /></section>;
}