sass-mohfarawati/components/layout/home-hero.tsx

"use client";

import { ArrowLeft, ArrowRight, Mail } from "lucide-react";
import Link from "next/link";

import { HeroBadge } from "@/components/layout/hero-badge";
import {
  HeroContentMotion,
  HeroMotionItem,
  HeroShell,
  HeroTitle,
} from "@/components/layout/site-hero";
import { Button } from "@/components/ui/button";

type HeroCta = {
  label: string;
  href: string;
};

type HomeHeroProps = {
  locale: string;
  kicker: string;
  title: string;
  description: string;
  availability?: string;
  primaryCta?: HeroCta;
  secondaryCta?: HeroCta;
};

export function HomeHero({
  locale,
  kicker,
  title,
  description,
  availability,
  primaryCta,
  secondaryCta,
}: HomeHeroProps) {
  const titleLines = title.split("\n").filter(Boolean);
  const isArabic = locale === "ar";
  const DirectionIcon = isArabic ? ArrowLeft : ArrowRight;
  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">
        {availability ? (
          <HeroMotionItem variant="home">
            <span className="inline-flex items-center gap-2.5 rounded-pill border border-foreground/10 bg-background/55 px-3.5 py-1.5 text-caption font-medium text-foreground/70 shadow-[var(--shadow-sm)] backdrop-blur-[18px]">
              <span className="relative flex h-2 w-2">
                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-status-success opacity-70" />
                <span className="relative inline-flex h-2 w-2 rounded-full bg-status-success" />
              </span>
              {availability}
            </span>
          </HeroMotionItem>
        ) : null}

        <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-body text-foreground/68">
            {description}
          </p>
        </HeroMotionItem>

        {primaryCta || secondaryCta ? (
          <HeroMotionItem variant="home">
            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
              {primaryCta ? (
                <Button asChild size="lg" className="w-full sm:w-auto">
                  <Link href={primaryCta.href}>
                    {primaryCta.label}
                    <DirectionIcon className="h-4 w-4" />
                  </Link>
                </Button>
              ) : null}
              {secondaryCta ? (
                <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
                  <Link href={secondaryCta.href}>
                    <Mail className="h-4 w-4" />
                    {secondaryCta.label}
                  </Link>
                </Button>
              ) : null}
            </div>
          </HeroMotionItem>
        ) : null}
      </HeroContentMotion>
    </HeroShell>
  );
}