"use client";

import { useState, useEffect } from 'react';
import styles from './HeroSection.module.css';

const slides = [
  {
    image: '/images/hero-dosa.png',
    title: 'Authentic South Indian',
    highlight: 'Vegetarian Flavours',
    subtitle: 'Welcome to My Dosa Place, where we bring you traditional South Indian cuisine crafted with passion. Every dish tells a story of heritage, flavor, and love.',
    primaryBtn: 'Explore Menu 🍽️',
    secondaryBtn: 'Book a Table',
  },
  {
    image: '/images/south-indian-thali.png',
    title: 'Experience the Royal',
    highlight: 'South Indian Thali',
    subtitle: 'A magnificent feast of 21 authentic items served exclusively on weekends. A true celebration of Southern culinary diversity.',
    primaryBtn: 'View Weekend Specials',
    secondaryBtn: 'Reserve Now',
  },
  {
    image: '/images/crispy-masala.png',
    title: 'Crispy, Golden &',
    highlight: 'Perfectly Spiced',
    subtitle: 'Taste our signature dosas, made fresh every day with our heritage batter and secret spice blends passed down through generations.',
    primaryBtn: 'Order Online',
    secondaryBtn: 'Our Story',
  }
];

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentSlide((prev) => (prev + 1) % slides.length);
    }, 5000); // Change slide every 5 seconds
    return () => clearInterval(timer);
  }, []);

  return (
    <section className={styles.hero}>
      {slides.map((slide, index) => (
        <div
          key={index}
          className={`${styles.slideBg} ${index === currentSlide ? styles.activeBg : ''}`}
          style={{ backgroundImage: `url(${slide.image})` }}
        />
      ))}
      <div className={styles.heroOverlay}></div>
      <div className={styles.heroContent}>
        {slides.map((slide, index) => (
          <div
            key={index}
            className={`${styles.textContent} ${index === currentSlide ? styles.activeText : ''}`}
          >
            <h1 className={styles.heroTitle}>
              {slide.title}<br />
              <span className={styles.highlight}>{slide.highlight}</span> in Waterloo
            </h1>
            <p className={styles.heroSubtitle}>
              {slide.subtitle}
            </p>
            <div className={styles.heroActions}>
              <a href="#menu" className={styles.btnPrimary}>
                {slide.primaryBtn}
              </a>
              <a href="#contact" className={styles.btnSecondary}>
                {slide.secondaryBtn}
              </a>
            </div>
          </div>
        ))}
        <div className={styles.heroMeta}>
          <div className={styles.metaItem}>
            <span className={styles.metaIcon}>⭐</span>
            <span>4.9 Rating</span>
          </div>
          <div className={styles.metaDivider}></div>
          <div className={styles.metaItem}>
            <span className={styles.metaIcon}>🍃</span>
            <span>100% Vegetarian</span>
          </div>
          <div className={styles.metaDivider}></div>
          <div className={styles.metaItem}>
            <span className={styles.metaIcon}>🕐</span>
            <span>Open 7 Days</span>
          </div>
        </div>
        
        {/* Slide Indicators */}
        <div className={styles.indicators}>
          {slides.map((_, index) => (
            <button
              key={index}
              className={`${styles.indicator} ${index === currentSlide ? styles.activeIndicator : ''}`}
              onClick={() => setCurrentSlide(index)}
              aria-label={`Go to slide ${index + 1}`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
