import { HeroScrollLink, HeroShell, HeroTitle } from "@/components/layout/site-hero";

type HomeHeroProps = {
  locale: string;
  kicker: string;
  title: string;
  description: string;
};

export function HomeHero({
  locale,
  kicker,
  title,
  description,
}: HomeHeroProps) {
  const titleLines = title.split("\n").filter(Boolean);
  const isArabic = locale === "ar";
  const lines = titleLines.map((line, index) => ({
    text: line,
    tone: isArabic
      ? index === 0
        ? "accent"
        : "default"
      : index === titleLines.length - 1
        ? "accent"
        : index === 0
          ? "soft"
          : "default",
    align: isArabic
      ? "center"
      : index === 1
        ? "end"
        : "start",
  })) as {
    text: string;
    tone: "default" | "accent" | "soft";
    align: "start" | "center" | "end";
  }[];

  return (
    <HeroShell showBridges>
      <p className="max-w-[34rem] text-sm font-medium tracking-[0.12em] text-foreground/62 sm:text-base">
        {kicker}
      </p>
      <HeroTitle locale={locale} lines={lines} />
      <p className="mx-auto mt-7 max-w-[33rem] whitespace-pre-line text-sm leading-7 text-foreground/68 sm:text-base sm:leading-8">
        {description}
      </p>
      <div className="mt-9 flex items-center justify-center">
        <HeroScrollLink
          href="#home-content"
          label="Scroll to content"
          className="text-[hsl(var(--hero-ink)/0.78)] dark:text-foreground/82"
        />
      </div>
    </HeroShell>
  );
}