import React, { useEffect, useState } from 'react';
import { Outlet, Link, useLocation } from 'react-router-dom';
import MobileDock from '../components/MobileDock';
import MobileLogo from '../components/MobileLogo';

const HEADER_HEIGHT = 86; // px
const DOCK_SCROLL_THRESHOLD = 18;

const MobileLayout = () => {
  const [showDock, setShowDock] = useState(false);
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      setShowDock(window.scrollY > DOCK_SCROLL_THRESHOLD);
    };
    window.addEventListener('scroll', handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener('scroll', handleScroll);
  }, [location.pathname]);

  return (
    <div className="min-h-screen bg-campfire-dark flex flex-col">
      {/* Fixed контейнер для логотипа и Dock */}
      <div
        className="fixed top-0 left-0 w-full z-50 flex items-center justify-center"
        style={{ height: `${HEADER_HEIGHT}px`, minHeight: `${HEADER_HEIGHT}px` }}
      >
        {/* Логотип */}
        <div
          className={`absolute left-0 top-0 w-full h-full flex items-center justify-center transition-transform duration-500 ${showDock ? '-translate-y-full' : 'translate-y-0'}`}
          style={{ willChange: 'transform' }}
        >
          <Link to="/" aria-label="На главную">
            <MobileLogo />
          </Link>
        </div>
        {/* Dock */}
        <div
          className={`absolute left-0 top-0 w-full h-full flex items-center justify-center transition-transform duration-500 ${showDock ? 'translate-y-0' : 'translate-y-full'}`}
          style={{ willChange: 'transform' }}
        >
          <MobileDock />
        </div>
      </div>
      <main className="flex-grow pt-[165px]">
        <Outlet />
      </main>
    </div>
  );
};

export default MobileLayout; 