import type { ElementType, ReactNode } from "react";
import { cn } from "@/lib/utils";

/**
 * HeroReveal — CSS-driven hero entrance (see globals.css `.hero-reveal`).
 *
 * Runs on every page load/refresh with NO JavaScript, no hydration flag, and no
 * LCP penalty: pass `lcp` for the largest text element and it animates POSITION
 * only (never opacity), so it paints immediately. Reduced-motion falls back to
 * the fully visible default. `order` sets the stagger step (× ~70ms). Server
 * component — deterministic, no client bundle cost.
 */
export function HeroReveal({
  order = 0,
  lcp = false,
  as: Tag = "div",
  className,
  children,
}: {
  order?: number;
  lcp?: boolean;
  as?: ElementType;
  className?: string;
  children: ReactNode;
}) {
  return (
    <Tag
      className={cn(lcp ? "hero-reveal-lcp" : "hero-reveal", className)}
      style={order ? { animationDelay: `${order * 70}ms` } : undefined}
    >
      {children}
    </Tag>
  );
}