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

"use client";

import type { ReactNode } from "react";

import { ArrowDown } from "lucide-react";
import { motion, useReducedMotion } from "framer-motion";

import { Container } from "@/components/layout/container";
import { HeroMotionBackdrop } from "@/components/layout/hero-motion-backdrop";
import { cn } from "@/lib/utils";

type HeroTone = "default" | "accent" | "soft";
type HeroLineAlign = "start" | "center" | "end";

type HeroTitleSegment = {
  text: string;
  tone?: HeroTone;
};

type HeroTitleLine = {
  text: string;
  segments?: HeroTitleSegment[];
  tone?: HeroTone;
  align?: HeroLineAlign;
};

type HeroShellProps = {
  children: ReactNode;
  className?: string;
  compactBackdrop?: boolean;
  containerClassName?: string;
  contentClassName?: string;
  showBridges?: boolean;
  size?: "default" | "narrow" | "wide";
  variant?: "home" | "page";
};

type HeroTitleProps = {
  lines: HeroTitleLine[];
  locale?: string;
  variant?: "home" | "page";
  className?: string;
};

type HeroScrollLinkProps = {
  href: string;
  label: string;
  className?: string;
};

type HeroContentMotionProps = {
  children: ReactNode;
  className?: string;
  variant?: "home" | "page";
};

const toneClasses: Record<HeroTone, string> = {
  default: "",
  accent: "hero-title-accent",
  soft: "hero-title-accent-soft",
};

const lineAlignClasses: Record<HeroLineAlign, string> = {
  start: "self-center text-center lg:self-start lg:text-start",
  center: "self-center text-center",
  end: "self-center text-center lg:self-end lg:text-end",
};

export type HeroTitleLineValue = HeroTitleLine;

export function HeroShell({
  children,
  className,
  compactBackdrop = false,
  containerClassName,
  contentClassName,
  showBridges = false,
  size = "default",
  variant = "home",
}: HeroShellProps) {
  return (
    <section
      className={cn(
        "hero-surface relative isolate overflow-hidden",
        variant === "home"
          ? "hero-home flex min-h-[92svh] items-center justify-center"
          : "hero-page flex min-h-[44svh] items-center sm:min-h-[48svh]",
        className,
      )}
    >
      <HeroMotionBackdrop compact={compactBackdrop} />
      {showBridges ? <div className="hero-header-bridge" /> : null}
      {showBridges ? <div className="hero-content-bridge" /> : null}

      <Container
        size={size}
        className={cn(
          "relative z-10 w-full",
          variant === "home"
            ? "pb-12 pt-24 sm:pb-14 sm:pt-28 lg:pb-16 lg:pt-32"
            : "py-20 sm:py-24 lg:py-28",
          containerClassName,
        )}
      >
        <div
          className={cn(
            "mx-auto flex w-full flex-col items-center text-center",
            variant === "home" ? "max-w-[68rem]" : "max-w-[46rem]",
            contentClassName,
          )}
        >
          {children}
        </div>
      </Container>
    </section>
  );
}

export function HeroContentMotion({
  children,
  className,
  variant = "home",
}: HeroContentMotionProps) {
  const reducedMotion = useReducedMotion();

  if (reducedMotion) {
    return <div className={className}>{children}</div>;
  }

  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={{
        hidden: {},
        visible: {
          transition: {
            staggerChildren: variant === "home" ? 0.07 : 0.05,
            delayChildren: variant === "home" ? 0.08 : 0.04,
          },
        },
      }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

export function HeroMotionItem({
  children,
  className,
  variant = "home",
}: HeroContentMotionProps) {
  const reducedMotion = useReducedMotion();

  return (
    <motion.div
      initial={reducedMotion ? false : { opacity: 0, y: variant === "home" ? 14 : 10, filter: "blur(6px)" }}
      animate={reducedMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
      transition={{
        duration: variant === "home" ? 0.48 : 0.38,
        ease: [0.22, 1, 0.36, 1],
      }}
      className={className}
    >
      {children}
    </motion.div>
  );
}

export function HeroTitle({
  lines,
  locale = "en",
  variant = "home",
  className,
}: HeroTitleProps) {
  const isArabic = locale === "ar";
  const reducedMotion = useReducedMotion();

  return (
    <motion.h1
      initial={reducedMotion ? false : { opacity: 0, y: variant === "home" ? 18 : 12, filter: "blur(8px)" }}
      animate={reducedMotion ? undefined : { opacity: 1, y: 0, filter: "blur(0px)" }}
      transition={{
        duration: variant === "home" ? 0.56 : 0.42,
        delay: variant === "home" ? 0.06 : 0.04,
        ease: [0.22, 1, 0.36, 1],
      }}
      className={cn(
        "text-balance font-semibold text-[hsl(var(--hero-ink))]",
        variant === "home"
          ? isArabic
            ? "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.85rem,11vw,5.9rem)] leading-[1.06] tracking-[-0.03em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
            : "mt-6 flex w-full max-w-[26rem] flex-col gap-y-1 px-4 text-[clamp(2.7rem,12vw,6.3rem)] leading-[0.94] tracking-[-0.045em] sm:max-w-[30rem] sm:px-0 md:max-w-[36rem] lg:max-w-[32rem]"
          : "mt-4 flex w-full max-w-[30rem] flex-col gap-y-1 px-4 text-[clamp(2.55rem,9vw,4.9rem)] leading-[0.96] tracking-[-0.05em] sm:px-0 md:max-w-[36rem] lg:max-w-[40rem]",
        className,
      )}
    >
      {lines.map((line, index) => (
        <span
          key={`${index}-${line.text}`}
          className={cn(
            "hero-title-line",
            lineAlignClasses[line.align ?? "center"],
          )}
        >
          {line.segments?.length
            ? line.segments.map((segment, segmentIndex) => (
                <span
                  key={`${index}-${segmentIndex}-${segment.text}`}
                  className={cn(toneClasses[segment.tone ?? "default"])}
                >
                  {segment.text}
                </span>
              ))
            : (
                <span className={cn(toneClasses[line.tone ?? "default"])}>
                  {line.text}
                </span>
              )}
        </span>
      ))}
    </motion.h1>
  );
}

export function HeroScrollLink({
  href,
  label,
  className,
}: HeroScrollLinkProps) {
  const reducedMotion = useReducedMotion();

  return (
    <motion.a
      href={href}
      aria-label={label}
      initial={reducedMotion ? false : { opacity: 0, y: 10 }}
      animate={reducedMotion ? undefined : { opacity: 1, y: 0 }}
      transition={{ duration: 0.34, delay: 0.16, ease: [0.22, 1, 0.36, 1] }}
      whileHover={reducedMotion ? undefined : { y: 2 }}
      className={cn("hero-scroll-link", className)}
    >
      <ArrowDown className="h-5 w-5" />
    </motion.a>
  );
}