import {
  HeroContentMotion,
  HeroMotionItem,
  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>
      <HeroContentMotion variant="home">
        <HeroMotionItem variant="home">
          <p className="max-w-[34rem] text-sm font-medium tracking-[0.12em] text-foreground/62 sm:text-base">
            {kicker}
          </p>
        </HeroMotionItem>
        <HeroTitle locale={locale} lines={lines} />
        <HeroMotionItem variant="home">
          <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>
        </HeroMotionItem>
        <HeroMotionItem variant="home" 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"
          />
        </HeroMotionItem>
      </HeroContentMotion>
    </HeroShell>
  );
}
