import { motion } from "framer-motion";
import CategoriesGrid from "./CategoriesGrid";
import { useTranslation } from "react-i18next";

export default function CategoriesSection() {
  const { t } = useTranslation();
  return (
    <section id="services" className="relative mx-auto max-w-7xl px-6 sm:px-8 py-12 md:py-16">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.3 }}
        transition={{ duration: 0.5 }}
        className="mb-8 md:mb-10"
      >
        <h2 className="text-2xl md:text-3xl font-extrabold tracking-tight text-white">
          {t('categories.title')}
        </h2>
        <p className="mt-2 text-white/70 max-w-2xl">
          {t('categories.subtitle')}
        </p>
      </motion.div>
      <CategoriesGrid />
    </section>
  );
}
