import type { Icon } from "@tabler/icons-react";
import { IconCalendar } from "@tabler/icons-react";
import { getTranslations } from "next-intl/server";
import { ContactButton } from "@/components/ui/contact-button";

interface HeroServiceHubProps {
  badgeIcon: Icon;
  namespace: string;
}

export async function HeroServiceHub({
  namespace,
  badgeIcon: BadgeIcon,
}: HeroServiceHubProps) {
  const t = await getTranslations(namespace);

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-[#000] to-[#1A2428]">
      <div className="container relative z-10 mx-auto px-4 py-16 sm:px-6 md:py-32 lg:px-8">
        <div className="mx-auto max-w-5xl text-center">
          <div className="mb-8 inline-flex animate-fade-in items-center gap-2 rounded-xl border border-[#FD105E]/20 bg-[#FD105E]/10 px-4 py-2">
            <BadgeIcon className="h-4 w-4 text-[#FD105E]" strokeWidth={2} />
            <span className="font-semibold text-[#FD105E] text-sm uppercase tracking-wide">
              {t("badge")}
            </span>
          </div>

          <h1
            className="mb-8 animate-fade-in font-bold text-3xl text-white leading-tight sm:text-4xl md:text-6xl lg:text-7xl"
            style={{ animationDelay: "0.1s" }}
          >
            {t("heroTitleLine1")}
            <br />
            <span className="text-[#FD105E]">{t("heroTitleLine2")}</span>
          </h1>

          <p
            className="mx-auto mb-8 max-w-3xl animate-fade-in text-base text-neutral-200 leading-relaxed md:mb-12 md:text-xl"
            style={{ animationDelay: "0.2s" }}
          >
            {t("heroDescription")}
          </p>

          <div
            className="flex animate-fade-in items-center justify-center"
            style={{ animationDelay: "0.3s" }}
          >
            <ContactButton>
              <IconCalendar className="h-5 w-5" />
              <span>{t("heroCta")}</span>
            </ContactButton>
          </div>

          <div
            className="mt-12 animate-fade-in border-white/10 border-t pt-8"
            style={{ animationDelay: "0.5s" }}
          >
            <div className="flex flex-wrap items-center justify-center gap-2 text-neutral-300 text-xs sm:gap-4 sm:text-sm md:gap-6">
              <span>{t("trustItem1")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustItem2")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustItem3")}</span>
              <span className="text-[#FD105E]">•</span>
              <span>{t("trustItem4")}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}