import { Outlet } from "react-router-dom";
import { AppLogo } from "./AppLogo";
import { TravelerBottomNav } from "./TravelerBottomNav";

export function TravelerLayout() {
  return <div className="min-h-screen bg-[#f7f4ed]">
    <header className="sticky top-0 z-30 bg-[#f7f4ed]/90 backdrop-blur-xl">
      <div className="mx-auto flex h-16 max-w-6xl items-center gap-8 px-4 sm:px-6 lg:h-[72px] lg:px-8"><AppLogo /><div className="ml-auto"><TravelerBottomNav variant="desktop" /></div></div>
    </header>
    <main className="mx-auto w-full max-w-6xl pb-[calc(5.5rem+env(safe-area-inset-bottom))] lg:pb-10"><Outlet /></main>
    <TravelerBottomNav variant="mobile" />
  </div>;
}