import { useTranslations } from "next-intl";
import HeroButtons from "./HeroButtons";
import HeroTech from "./HeroTech";

export default function Hero() {
  const t = useTranslations("home.hero");

  return (
    <>
      <section className="flex flex-col items-center justify-center max-w-4xl px-4 mx-auto text-center">
        {/* Top Badge */}
        <div className="inline-flex items-center gap-2 px-4 py-2 mb-8 text-sm text-orange-400 border rounded-full border-orange-500/20 bg-orange-500/10">
          <span className="w-2 h-2 bg-orange-500 rounded-full animate-pulse"></span>
          {t("badge")}
        </div>

        {/* Main Title */}
        <h1 className="mb-6 text-5xl font-bold leading-tight md:text-7xl">
          {t("title1")}
          <br />
          {t("title2")}
        </h1>

        {/* Subtitle */}
        <p className="max-w-2xl mb-10 text-lg leading-relaxed text-gray-400 md:text-xl">{t("subtitle")}</p>

        {/* CTA Buttons */}
        <div className="flex flex-col items-center gap-4 sm:flex-row">
          <HeroButtons />
        </div>
      </section>
      <HeroTech />
    </>
  );
}