// Home.tsx
import { motion } from "framer-motion";
import CategoriesSection from "./components/categories/CategoriesSection";
import EducatedTeam from "./components/educated_team/EducatedTeam";
import { useTranslation } from "react-i18next";

export default function Home() {
  const { t } = useTranslation();
  return (
    <>
    <section className="relative w-full min-h-[80vh] overflow-hidden rounded-xl shadow-sm">
      {/* Background video */}
      <video
        className="absolute inset-0 h-full w-full object-cover grayscale brightness-75"
        src="/videos/speedup.mp4"
        autoPlay
        muted
        loop
        playsInline
        poster="/assets/garage-poster.jpg"
      />

      {/* Overlay to ensure text readability */}
      <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/70" />

      {/* Content */}
      <div className="relative z-10 mx-auto flex max-w-7xl items-center px-6 py-16 sm:px-8 md:py-24 lg:py-28 min-h-[80vh]">
        <div className="max-w-2xl text-white">
          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="text-4xl font-extrabold tracking-tight sm:text-5xl"
          >
            {t('home.hero.title')}
          </motion.h1>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.15 }}
            className="mt-4 text-lg text-white/90 max-w-xl"
          >
            {t('home.hero.subtitle')}
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="mt-8 flex flex-wrap items-center gap-3"
          >
            <a
              href="#contact"
              className="inline-flex items-center gap-2 rounded-md bg-red-600 px-6 py-3 text-sm font-semibold text-white shadow hover:bg-red-700"
            >
              {t('home.cta.book')}
            </a>
            <a
              href="#services"
              className="inline-flex items-center gap-2 rounded-md bg-white/10 px-6 py-3 text-sm font-semibold text-white ring-1 ring-inset ring-white/30 hover:bg-white/20"
            >
              {t('home.cta.services')}
            </a>
          </motion.div>

          {/* Quick badges */}
          <motion.ul
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.6, delay: 0.45 }}
            className="mt-6 flex flex-wrap gap-2 text-xs text-gray-200"
          >
            <li className="rounded bg-black/30 px-2.5 py-1">{t('home.badges.certified')}</li>
            <li className="rounded bg-black/30 px-2.5 py-1">{t('home.badges.oem')}</li>
            <li className="rounded bg-black/30 px-2.5 py-1">{t('home.badges.warranty')}</li>
          </motion.ul>
        </div>
      </div>

      {/* Optional anchors for nav */}
      <div id="contact" className="relative z-10" />
    </section>
    <CategoriesSection />
    <EducatedTeam />
    </>
  );
}
