alma-beauti/src/components/HeroSlider.tsx

"use client";

import { useEffect, useState } from "react";

import { site, slides } from "@/data/site";

function pad(n: number) {
  return String(n).padStart(2, "0");
}

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

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((current) => (current + 1) % slides.length);
    }, 5500);
    return () => clearInterval(timer);
  }, []);

  const prev = () => setIndex((current) => (current - 1 + slides.length) % slides.length);
  const next = () => setIndex((current) => (current + 1) % slides.length);

  return (
    <section className="hero container-fluid">
      <h1 className="sr-only">
        {site.name} — {site.tagline}
      </h1>
      <div className="hero-slider">
        {slides.map((slide, i) => (
          <div
            key={slide.image}
            className={`hero-slide${i === index ? " active" : ""}`}
            style={{ backgroundImage: `url(${slide.image})` }}
            role="img"
            aria-label={slide.alt}
          />
        ))}
      </div>

      <div className="hero-bar">
        <div className="hero-scroll">
          <span>اسکرول کنید</span>
          <a href="#about" className="circle-btn" aria-label="اسکرول به درباره ما">
            ↓
          </a>
        </div>
        <div className="hero-count" dir="ltr">
          <b>{pad(index + 1)}</b>
          &nbsp;/&nbsp;
          <span>{pad(slides.length)}</span>
        </div>
        <div className="hero-tools">
          <div className="hero-arrows">
            <button type="button" className="circle-btn" onClick={prev} aria-label="اسلاید قبلی">
              ›
            </button>
            <button type="button" className="circle-btn" onClick={next} aria-label="اسلاید بعدی">
              ‹
            </button>
          </div>
          <div className="hero-social">
            <a href={site.telegram} target="_blank" rel="noreferrer" aria-label="تلگرام">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                <path d="M21.5 3.2 18.3 20.3c-.24 1.05-.86 1.3-1.74.81l-4.82-3.55-2.32 2.23c-.26.26-.47.47-.97.47l.35-4.9L17.7 6.4c.38-.33-.08-.52-.59-.19L7.2 13.7 2.45 12.2c-1.03-.32-1.05-1.03.22-1.53L20.2 3c.86-.33 1.61.2 1.3.2z" />
              </svg>
            </a>
            <a href={site.instagram} target="_blank" rel="noreferrer" aria-label="اینستاگرام">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7">
                <rect x="3.5" y="3.5" width="17" height="17" rx="5" />
                <circle cx="12" cy="12" r="4" />
                <circle cx="17.4" cy="6.6" r="0.8" fill="currentColor" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}