'use client';

import Image from 'next/image';
import { LabScrollProvider, useLabScroll } from '@/contexts/lab-scroll-context';

const LabHeader = () => {
  const { isScrolled } = useLabScroll();

  return (
    <header
      className={`
        relative z-10 border-b border-white/10 backdrop-blur-sm shrink-0
        transition-all duration-300 ease-in-out
        ${isScrolled ? 'h-0 opacity-0 overflow-hidden border-b-0' : 'h-16 opacity-100'}
      `}
    >
      <nav className="max-w-7xl mx-auto px-6 py-3 flex justify-between items-center h-16">
        <div className="h-full flex items-center">
          <Image
            src="/banatie-logo-horisontal.png"
            alt="Banatie Logo"
            width={150}
            height={40}
            priority
            className="h-full w-auto object-contain"
          />
        </div>
        <a
          href="#waitlist"
          className="text-sm text-gray-300 hover:text-white transition-colors"
        >
          Join Beta
        </a>
      </nav>
    </header>
  );
};

export default function LabLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <LabScrollProvider>
      <div className="h-screen overflow-hidden flex flex-col">
        <LabHeader />
        <div className="flex-1 min-h-0">
          {children}
        </div>
      </div>
    </LabScrollProvider>
  );
}
