import { Outlet } from 'react-router-dom';
import Navbar from './Navbar';
import Sidebar from './Sidebar';

export default function Layout() {
  return (
    <div className="app-shell min-h-screen bg-[linear-gradient(180deg,#f8fbff_0%,#eef6ff_48%,#f7fafc_100%)]">
      <div className="pointer-events-none fixed inset-0 overflow-hidden">
        <div className="absolute left-[-12rem] top-[-10rem] h-[24rem] w-[24rem] rounded-full bg-cyan-200/35 blur-3xl" />
        <div className="absolute right-[-10rem] top-[6rem] h-[22rem] w-[22rem] rounded-full bg-sky-300/20 blur-3xl" />
        <div className="absolute bottom-[-12rem] left-1/2 h-[24rem] w-[30rem] -translate-x-1/2 rounded-full bg-slate-200/40 blur-3xl" />
      </div>
      <Navbar />
      <div className="relative mx-auto flex max-w-[1600px]">
        <Sidebar />
        <main className="flex-1 px-3 pb-28 pt-3 lg:px-5 lg:pb-8 lg:pt-4">
          <div className="rounded-[32px] border border-white/60 bg-white/72 px-4 py-4 shadow-[0_28px_70px_rgba(15,23,42,0.08)] backdrop-blur-xl sm:px-5 lg:min-h-[calc(100vh-8.5rem)] lg:px-6 lg:py-6">
            <Outlet />
          </div>
        </main>
      </div>
    </div>
  );
}
