"use client";

import { HeroBadge } from "@/components/layout/hero-badge";
import {
  HeroContentMotion,
  HeroMotionItem,
  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 = isArabic
    ? [
        {
          text: titleLines[0] ?? "",
          align: "center" as const,
          segments: [
            { text: "مطوّر ", tone: "accent" as const },
            { text: "واجهات", tone: "soft" as const },
            { text: " ويب", tone: "accent" as const },
          ],
        },
        {
          text: titleLines[1] ?? "",
          align: "center" as const,
          segments: [
            { text: "ومصمّم ", tone: "soft" as const },
            { text: "جرافيك", tone: "accent" as const },
          ],
        },
      ]
    : [
        {
          text: titleLines[0] ?? "",
          tone: "soft" as const,
          align: "start" as const,
        },
        {
          text: titleLines[1] ?? "",
          tone: "accent" as const,
          align: "end" as const,
        },
        {
          text: titleLines[2] ?? "",
          segments: [
            { text: "& ", tone: "accent" as const },
            { text: "designer", tone: "soft" as const },
          ],
          align: "start" as const,
        },
      ];

  return (
    <HeroShell showBridges>
      <HeroContentMotion variant="home">
        <HeroMotionItem variant="home">
          <HeroBadge
            trailing={
            <span
              aria-hidden="true"
              className="text-[0.95rem] leading-none"
            >
              👋
            </span>
            }
          >
            {kicker}
          </HeroBadge>
        </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>
      </HeroContentMotion>
    </HeroShell>
  );
}
