'use client';

import Image from 'next/image';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { ROUTES } from '@/lib/routes';

interface Slide {
  image: string;
  alt: string;
  /** CSS object-position — keeps the artisan in frame when the wide photo is cropped on small screens. */
  focus: string;
  eyebrow: string;
  title: React.ReactNode;
  description: string;
  primaryCta: { label: string; href: string };
  secondaryCta: { label: string; href: string };
}

const SLIDES: Slide[] = [
  {
    image: '/images/hero/wood-carving.jpg',
    alt: 'A Sri Lankan woodcarver chiselling a floral panel with a mallet in his workshop',
    focus: '70% center',
    eyebrow: 'Authentic · Handmade · Sri Lankan',
    title: (
      <>
        Discover the <span className="text-gold-400">Soul</span> of Sri Lankan Crafts
      </>
    ),
    description:
      'Intricate floral panels, elephants and temple-inspired carvings — chiselled by hand in the workshops of master woodcarvers, delivered to your door.',
    primaryCta: { label: 'Shop Now', href: ROUTES.shop },
    secondaryCta: { label: 'Become a Vendor', href: ROUTES.vendorShow },
  },
  {
    image: '/images/hero/handloom-weaving.jpg',
    alt: 'A weaver working a blue and gold handloom textile on a traditional wooden loom',
    focus: '25% center',
    eyebrow: 'Traditional Handloom',
    title: (
      <>
        Woven <span className="text-gold-400">Thread by Thread</span>, Loom by Loom
      </>
    ),
    description:
      'Rich handloom sarongs, sarees, table runners and throws — woven on wooden looms in colours and patterns passed down through generations.',
    primaryCta: { label: 'Shop Handloom', href: ROUTES.shop },
    secondaryCta: { label: 'Meet the Weavers', href: ROUTES.artisans },
  },
  {
    image: '/images/hero/pottery.jpg',
    alt: 'A potter shaping a clay vase by hand on a pottery wheel, with finished pots on the shelves behind',
    focus: '70% center',
    eyebrow: 'Shaped From Island Clay',
    title: (
      <>
        Earthenware Made the <span className="text-gold-400">Timeless</span> Way
      </>
    ),
    description:
      'Cooking pots, vases and lanterns thrown on the wheel and fired in village kilns — every piece carries the mark of the hands that made it.',
    primaryCta: { label: 'Shop Pottery', href: ROUTES.shop },
    secondaryCta: { label: 'Explore Artisans', href: ROUTES.artisans },
  },
  {
    image: '/images/hero/basket-weaving.jpg',
    alt: 'A woman weaving a natural-fibre basket by hand on a veranda, surrounded by finished baskets',
    focus: '25% center',
    eyebrow: 'For Artisans & Makers',
    title: (
      <>
        Turn Your Craft Into a <span className="text-gold-400">Business</span>
      </>
    ),
    description:
      'Weave, carve, throw or stitch? List your handmade products on CeylonHandicrafts.lk — or let us sell for you — and reach customers across the island.',
    primaryCta: { label: 'Become a Vendor', href: ROUTES.vendorShow },
    secondaryCta: { label: 'See Vendor Plans', href: ROUTES.vendorShow },
  },
];

const AUTOPLAY_MS = 6000;

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

  useEffect(() => {
    const id = setInterval(() => {
      setIndex((current) => (current + 1) % SLIDES.length);
    }, AUTOPLAY_MS);
    return () => clearInterval(id);
  }, [index]);

  function goTo(next: number) {
    setIndex((next + SLIDES.length) % SLIDES.length);
  }

  // Fills the viewport below the sticky header (5rem on mobile; 165px on lg with the info bar + nav row).
  return (
    <section className="relative isolate h-[calc(100svh-5rem)] min-h-[520px] overflow-hidden bg-navy-800 lg:h-[calc(100svh-10.3125rem)]">
      {SLIDES.map((slide, i) => (
        <div
          key={slide.image}
          aria-hidden={i !== index}
          className={`absolute inset-0 transition-opacity duration-700 ease-in-out ${
            i === index ? 'opacity-100' : 'pointer-events-none opacity-0'
          }`}
        >
          <Image
            src={slide.image}
            alt={slide.alt}
            fill
            priority={i === 0}
            sizes="100vw"
            className="object-cover"
            style={{ objectPosition: slide.focus }}
          />
        </div>
      ))}

      {/* Overlay content */}
      <div className="relative z-10 flex h-full items-center">
        <div className="container-page">
          <div className="mx-auto max-w-2xl text-center [text-shadow:0_2px_12px_rgba(0,0,0,0.65)]">
            <p className="mb-3 text-sm font-semibold uppercase tracking-widest text-gold-400">
              {SLIDES[index].eyebrow}
            </p>
            <h1 className="text-4xl font-serif font-bold leading-tight text-white sm:text-5xl">
              {SLIDES[index].title}
            </h1>
            <p className="mx-auto mt-5 max-w-lg text-white/80">{SLIDES[index].description}</p>
            <div className="mt-8 flex flex-wrap justify-center gap-4">
              <Link href={SLIDES[index].primaryCta.href} className="btn-primary">
                {SLIDES[index].primaryCta.label}
              </Link>
              <Link href={SLIDES[index].secondaryCta.href} className="btn-outline">
                {SLIDES[index].secondaryCta.label}
              </Link>
            </div>

            {/* Trust bullets — constant across every slide */}
            <ul className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs font-medium text-white/80 sm:text-sm">
              <li className="flex items-center gap-1.5">
                <svg viewBox="0 0 24 24" className="h-4 w-4 text-gold-400" fill="none" stroke="currentColor" strokeWidth={2}><path d="m5 13 4 4L19 7" /></svg>
                Authentic Makers
              </li>
              <li className="flex items-center gap-1.5">
                <svg viewBox="0 0 24 24" className="h-4 w-4 text-gold-400" fill="none" stroke="currentColor" strokeWidth={2}><circle cx="12" cy="8" r="4" /><path d="M4 21c1.5-4 5-6 8-6s6.5 2 8 6" /></svg>
                Contact Makers Directly
              </li>
              <li className="flex items-center gap-1.5">
                <svg viewBox="0 0 24 24" className="h-4 w-4 text-gold-400" fill="none" stroke="currentColor" strokeWidth={2}><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7z" /><circle cx="7.5" cy="18" r="1.5" /><circle cx="17.5" cy="18" r="1.5" /></svg>
                Islandwide Delivery
              </li>
            </ul>
          </div>
        </div>
      </div>

      {/* Prev / next arrows */}
      <button
        type="button"
        onClick={() => goTo(index - 1)}
        aria-label="Previous slide"
        className="absolute left-4 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-sm transition hover:bg-white/20 sm:left-6"
      >
        <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2}>
          <path d="m15 18-6-6 6-6" />
        </svg>
      </button>
      <button
        type="button"
        onClick={() => goTo(index + 1)}
        aria-label="Next slide"
        className="absolute right-4 top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/10 text-white backdrop-blur-sm transition hover:bg-white/20 sm:right-6"
      >
        <svg viewBox="0 0 24 24" className="h-5 w-5" fill="none" stroke="currentColor" strokeWidth={2}>
          <path d="m9 18 6-6-6-6" />
        </svg>
      </button>

      {/* Dot indicators */}
      <div className="absolute inset-x-0 bottom-6 z-10 flex justify-center gap-2">
        {SLIDES.map((slide, i) => (
          <button
            key={slide.image}
            type="button"
            onClick={() => goTo(i)}
            aria-label={`Go to slide ${i + 1}`}
            aria-current={i === index}
            className={`h-2.5 rounded-full transition-all ${
              i === index ? 'w-6 bg-gold-500' : 'w-2.5 bg-white/40 hover:bg-white/60'
            }`}
          />
        ))}
      </div>
    </section>
  );
}