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

export default function AppsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      {/* Scrollable Header (NOT sticky) */}
      <header className="z-10 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 />
    </>
  );
}
