import { ArrowDown } from "lucide-react";

import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";

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";

  return (
    <section className="hero-surface hero-home relative isolate flex min-h-[88vh] items-center justify-center overflow-hidden">
      <HeroMotionBackdrop />
      <div className="hero-header-bridge" />
      <div className="hero-content-bridge" />
      <div className="relative z-10 mx-auto flex w-full max-w-[72rem] flex-col items-center justify-center px-4 pb-12 pt-24 text-center sm:px-6 lg:px-8 lg:pb-16 lg:pt-28">
        <div className="mx-auto flex max-w-[46rem] flex-col items-center overflow-visible">
          <p className="text-base font-medium tracking-[-0.03em] text-[hsl(var(--hero-ink)/0.76)] drop-shadow-[0_10px_24px_rgba(15,23,42,0.16)] sm:text-lg">
            {kicker}
          </p>
          <h1
            className={
              isArabic
                ? "mt-5 flex w-full max-w-[40rem] flex-col overflow-visible pb-[0.1em] text-[3rem] font-bold leading-[1.1] tracking-normal text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.16)] sm:text-[4.25rem] lg:max-w-[48rem] lg:text-[5.35rem]"
                : "mt-4 flex w-full max-w-[37rem] flex-col gap-y-0.5 overflow-visible pb-[0.18em] text-[3.25rem] font-semibold leading-[0.98] tracking-[-0.05em] text-[hsl(var(--hero-ink))] drop-shadow-[0_18px_40px_rgba(15,23,42,0.22)] sm:max-w-[39rem] sm:text-[4.9rem] lg:max-w-[40rem] lg:gap-y-1 lg:pb-[0.2em] lg:text-[6rem]"
            }
          >
            {titleLines.map((line, index) => (
              <span
                key={`${locale}-${index}-${line}`}
                className={
                  isArabic
                    ? index === 1
                      ? "hero-title-line self-center whitespace-nowrap"
                      : "hero-title-line hero-title-accent self-center whitespace-nowrap"
                    : index === 1
                      ? "hero-title-line self-end whitespace-nowrap"
                      : index === titleLines.length - 1
                        ? "hero-title-line hero-title-accent self-start whitespace-nowrap"
                        : "hero-title-line hero-title-accent-soft self-start whitespace-nowrap"
                }
              >
                {line}
              </span>
            ))}
          </h1>
          <p className="mx-auto mt-8 max-w-[30rem] whitespace-pre-line text-sm leading-7 text-[hsl(var(--hero-ink)/0.72)] drop-shadow-[0_8px_18px_rgba(15,23,42,0.12)] sm:text-base">
            {description}
          </p>
          <div className="mt-10 flex items-center justify-center">
            <a href="#home-content" aria-label="Scroll to content" className="hero-scroll-link text-[hsl(var(--hero-ink)/0.74)] dark:text-foreground/82">
              <ArrowDown className="h-5 w-5" />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}