import { NextLink } from "@/components/next-link";
import { createLocaleFunction } from "@/components/server-locale";
import { type Locale, transformPathLocale } from "@/lib/locale";
import { cn } from "@/lib/utils";
import { ArrowRightIcon } from "lucide-react";
import BannerDecorations from "./banner-decorations";
import { renderRemarkInline } from "@/lib/remark-inline";

export default async function HomeHeadingSection({
  locale,
}: {
  locale: Locale;
}) {
  const t = createLocaleFunction(locale);

  return (
    <section className="relative px-4 py-8 mt-8 md:px-12 lg:px-24 lg:py-10 lg:mt-10">
      <BannerDecorations />

      <div className="relative z-1 max-w-(--breakpoint-xl) mx-auto md:px-4 md:px-6 lg:px-8 text-center">
        <div className="font-mono text-xs md:text-sm font-medium px-2 md:px-4 py-1 rounded-full bg-linear-to-r from-blue-100 to-red-100 border border-blue-200 inline-block mx-auto">
          {t("home.tagline")}
        </div>
        <div className="mx-auto">
          <h1 className="text-4xl lg:text-6xl font-bold tracking-tight mt-4 leading-tight">
            {renderRemarkInline(t("home.headline"), true)}
          </h1>
        </div>
        <div className="flex justify-center items-center flex-wrap gap-4 md:gap-8 mt-8">
          <div className="relative">
            <NextLink
              noStyle
              className={cn(
                "group relative overflow-hidden inline-flex cursor-pointer items-center justify-center border border-primary bg-size-[200%] px-8 h-10 font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] bg-origin-border [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
                "bg-primary"
              )}
              href={transformPathLocale("/labs", locale)}
            >
              <span className="absolute left-1/2 bottom-0 h-[40px] w-[40px] -translate-x-1/2 translate-y-1/2 rounded-full bg-[#dc150b] scale-0 transition-all duration-500 ease-out group-hover:scale-[6]" />
              <span className="relative z-10 flex items-center">
                {t("home.start-lab")}
                <ArrowRightIcon className="ml-3 size-4" />
              </span>
            </NextLink>
          </div>
        </div>
      </div>
    </section>
  );
}