"use client";

import { motion } from "framer-motion";
import { heroTitle, heroSubtitle } from "@/lib/animations";
import { useTranslations } from "next-intl";

export default function Hero() {
  const t = useTranslations("ANNUAL_AUCTIONS_SHARING");

  return (
    <section className="text-white bg-gradient-to-br from-green-900 to-green-700 overflow-hidden">
      <div className="max-w-7xl mx-auto px-6 py-10">
        <motion.h1
          className="text-3xl md:text-5xl font-extrabold leading-tight"
          initial="hidden"
          animate="visible"
          variants={heroTitle}
        >
          {t("hero.title")}
        </motion.h1>
        <motion.p
          className="mt-3 text-white/90"
          initial="hidden"
          animate="visible"
          variants={heroSubtitle}
        >
          {t.rich("hero.description", {
            b: (chunks) => <b>{chunks}</b>,
          })}
        </motion.p>
      </div>
    </section>
  );
}