"use client";

import { motion, useReducedMotion } from "framer-motion";

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 reducedMotion = useReducedMotion();
  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={
            <motion.span
              aria-hidden="true"
              className="text-[0.95rem] leading-none"
              initial={reducedMotion ? false : { rotate: 0, scale: 1 }}
              animate={
                reducedMotion
                  ? undefined
                  : {
                      rotate: [0, 16, -10, 16, -4, 0],
                      scale: [1, 1.08, 1.08, 1.08, 1.04, 1],
                    }
              }
              transition={
                reducedMotion
                  ? undefined
                  : {
                      duration: 1.4,
                      delay: 0.5,
                      repeat: Number.POSITIVE_INFINITY,
                      repeatDelay: 2.8,
                      ease: "easeInOut",
                    }
              }
              style={{ transformOrigin: "70% 70%" }}
            >
              👋
            </motion.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>
  );
}