import { NavLink, Outlet, useLocation } from 'react-router-dom';
import { MatrixRain } from './matrix-rain';
import { AuthorCredit } from './author-credit';
import { cn } from '@/lib/utils';

const NAV = [
  { to: '/', label: '~/home', end: true },
  { to: '/about', label: '~/about' },
  { to: '/contact', label: '~/contact' },
];

export function Layout() {
  const { pathname } = useLocation();

  return (
    <div className="scanlines relative min-h-screen overflow-x-hidden">
      <MatrixRain opacity={0.35} />

      {/* top terminal bar */}
      <header className="sticky top-0 z-20 border-b border-primary/20 bg-background/70 backdrop-blur-sm">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-5 py-3">
          <NavLink to="/" className="font-display text-sm font-bold tracking-[0.25em] text-primary text-glow">
            J.SALIMOV<span className="animate-pulse">_</span>
          </NavLink>
          <nav className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
            {NAV.map((item) => (
              <NavLink
                key={item.to}
                to={item.to}
                end={item.end}
                className={({ isActive }) =>
                  cn(
                    'rounded px-2 py-1 transition-colors duration-150 hover:text-primary hover:text-glow',
                    isActive
                      ? 'text-primary text-glow'
                      : 'text-muted-foreground',
                  )
                }
              >
                {item.label}
              </NavLink>
            ))}
          </nav>
        </div>
      </header>

      <main key={pathname} className="relative z-10 mx-auto max-w-5xl px-5 py-10 sm:py-16">
        <Outlet />
      </main>

      <footer className="relative z-10 border-t border-primary/15 py-6 text-center text-xs text-muted-foreground">
        <span className="text-primary/70">SYS:</span> connection stable —
        decoded by Rspack + shadcn/ui
      </footer>

      <AuthorCredit />
    </div>
  );
}