"use client";

import { useTranslation } from "@turbostarter/i18n";
import { cn } from "@turbostarter/ui";
import { buttonVariants } from "@turbostarter/ui-web/button";

import { pathsConfig } from "~/config/paths";
import { WhyRatingLogo } from "~/modules/common/whyrating-logo";
import { TurboLink } from "~/modules/common/turbo-link";
import { CtaButton } from "~/modules/marketing/layout/cta-button";

import { MobileNavigation } from "./navigation/mobile-navigation";
import { Navigation } from "./navigation/navigation";

const links = [
  {
    label: "marketing:howItWorks.label",
    href: "/#how-it-works",
  },
  {
    label: "marketing:pricing.navLabel",
    href: "/#pricing",
  },
  {
    label: "marketing:contact.label",
    href: pathsConfig.marketing.contact,
  },
  {
    label: "marketing:blog.label",
    href: pathsConfig.marketing.blog.index,
  },
] as const;

export const Header = () => {
  const { t } = useTranslation("marketing");

  return (
    <header className="bg-background sticky top-[var(--banner-height)] z-40 w-full py-3 lg:bg-background/80 lg:backdrop-blur-sm">
      <div className="flex items-center justify-between px-6 pr-4 sm:container">
        <TurboLink
          href={pathsConfig.index}
          className="flex shrink-0 items-center gap-3"
          aria-label="whyrating.com"
        >
          <WhyRatingLogo />
        </TurboLink>

        <Navigation links={links} />

        <div className="flex items-center justify-center gap-2">
          <TurboLink
            href={pathsConfig.demo.report}
            className={cn(
              buttonVariants({ variant: "outline", size: "sm" }),
              "hidden lg:inline-flex",
            )}
          >
            {t("demoLabel")}
          </TurboLink>
          <CtaButton className="hidden lg:inline-flex" />
          <MobileNavigation links={links} />
        </div>
      </div>
    </header>
  );
};
