"use client";

import { useEffect, useRef, useState } from "react";
import type { Locale } from "@/content/site";

const heroTitles: Record<Locale, string> = {
  fr: "YASHAL — AGENCE DE COMMUNICATION",
  en: "YASHAL — MARKETING AGENCY",
  ar: "YASHAL — وكالة تسويق واتصال",
};

const scrollLabels: Record<Locale, string> = {
  fr: "Découvrir la suite de la page",
  en: "Explore the rest of the page",
  ar: "اكتشف بقية الصفحة",
};

export function HeroVideo({
  locale,
  nextSectionId,
}: {
  locale: Locale;
  nextSectionId: string;
}) {
  const [reduceMotion, setReduceMotion] = useState(true);
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
    const updatePreference = () => setReduceMotion(media.matches);
    updatePreference();
    media.addEventListener("change", updatePreference);
    return () => media.removeEventListener("change", updatePreference);
  }, []);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
    if (reduceMotion) {
      video.pause();
      return;
    }
    void video.play().catch(() => undefined);
  }, [reduceMotion]);

  return (
    <div className="hero-media">
      <video
        ref={videoRef}
        autoPlay={!reduceMotion}
        muted
        loop
        playsInline
        preload="metadata"
        aria-label="YASHAL Studios marketing agency hero video"
      >
        <source src="/assets/videos/hero.mp4" type="video/mp4" />
      </video>
      <h1
        id="home-title"
        className="hero-overlay-title"
        lang={locale}
        dir={locale === "ar" ? "rtl" : "ltr"}
      >
        {heroTitles[locale]}
      </h1>
      <a
        className="hero-scroll-cue"
        href={`#${nextSectionId}`}
        aria-label={scrollLabels[locale]}
      >
        <span aria-hidden="true">⌄</span>
      </a>
    </div>
  );
}