import { cn } from '@/lib/utils';

/**
 * Blurred crimson light used as section atmosphere. Position and size come
 * from `className`; it is toned down in light mode so text stays crisp.
 */
export default function Glow({ className }: { className?: string }) {
    return (
        <div
            aria-hidden="true"
            className={cn(
                'bg-paj-crimson/20 pointer-events-none absolute rounded-full opacity-40 blur-[130px] dark:opacity-100',
                className,
            )}
        />
    );
}

/** Faint engineering grid pattern for hero backgrounds. */
export function GridPattern({ className }: { className?: string }) {
    return (
        <div
            aria-hidden="true"
            className={cn(
                'pointer-events-none absolute inset-0 [background-image:linear-gradient(to_right,var(--site-on-surface)_1px,transparent_1px),linear-gradient(to_bottom,var(--site-on-surface)_1px,transparent_1px)] [background-size:40px_40px] opacity-[0.04]',
                className,
            )}
        />
    );
}