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

"use client";

import type { ReactNode } from "react";

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

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

const heroItemVariants = {
  hidden: { opacity: 0, y: 16 },
  visible: {
    opacity: 1,
    y: 0,
    transition: { duration: 0.54, ease: [0.22, 1, 0.36, 1] as [number, number, number, number] },
  },
};

const heroContainerVariants = {
  hidden: {},
  visible: {
    transition: { staggerChildren: 0.13, delayChildren: 0.08 },
  },
};

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-[76svh] items-center justify-center"
          : "hero-page flex min-h-[34svh] items-center sm:min-h-[38svh]",
        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-10 pt-20 sm:pb-12 sm:pt-24 lg:pb-14 lg:pt-28"
            : "py-16 sm:py-20 lg:py-24",
          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,
}: HeroContentMotionProps) {
  return (
    <motion.div
      className={className}
      initial="hidden"
      animate="visible"
      variants={heroContainerVariants}
    >
      {children}
    </motion.div>
  );
}

export function HeroMotionItem({
  children,
  className,
}: HeroContentMotionProps) {
  return (
    <motion.div className={className} variants={heroItemVariants}>
      {children}
    </motion.div>
  );
}

export function HeroTitle({
  lines,
  locale = "en",
  variant = "home",
  className,
}: HeroTitleProps) {
  const isArabic = locale === "ar";
  const titleClassName = 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,
  );

  return (
    <motion.h1 className={titleClassName} variants={heroItemVariants}>
      {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) {
  return (
    <a
      href={href}
      aria-label={label}
      className={cn("hero-scroll-link", className)}
    >
      <ArrowDown className="h-5 w-5" />
    </a>
  );
}