import Image from 'next/image';
import { Footer } from '@/components/shared/Footer';

export default function LandingsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {/* Skip to content link for accessibility */}
      <a
        href="#main-content"
        className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-violet-600 focus:text-white focus:rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-400"
      >
        Skip to content
      </a>

      {/* Sticky Header */}
      <header className="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-white/5">
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 py-2 sm:py-3 flex justify-between items-center h-12 sm:h-14 md:h-16">
          <a href="/" className="h-full flex items-center">
            <Image
              src="/banatie-logo-horisontal.png"
              alt="Banatie Logo"
              width={150}
              height={40}
              priority
              className="h-8 sm:h-10 md:h-full w-auto object-contain"
            />
          </a>
          <a
            href="#get-access"
            className="text-xs sm:text-sm text-gray-300 hover:text-white transition-colors"
          >
            Get Access
          </a>
        </nav>
      </header>

      {children}

      <Footer />
    </>
  );
}
