import { useState } from 'react'
import { Routes, Route, useLocation } from 'react-router-dom'
import Sidebar from './components/Sidebar'
import TopBar from './components/TopBar'
import Glance from './pages/Glance'
import Infrastructure from './pages/Infrastructure'
import BookNest from './pages/BookNest'

function App() {
  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
  const sidebarWidth = sidebarCollapsed ? 64 : 200
  const location = useLocation()
  const showHero = location.pathname === '/infrastructure'

  return (
    <div className="min-h-screen w-screen overflow-hidden bg-page">
      <Sidebar
        collapsed={sidebarCollapsed}
        onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
      />

      <main
        className="relative h-screen overflow-hidden"
        style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
      >
        {showHero && (
          <div className="pointer-events-none absolute left-0 right-0 top-0" style={{ height: '300px', zIndex: 0 }}>
            <img
              src="/archnest-hero-banner.png"
              alt=""
              className="absolute inset-0 h-full w-full"
              style={{
                objectFit: 'cover',
                objectPosition: 'center 5%',
                maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
                WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
              }}
            />
            <div
              className="absolute inset-0"
              style={{
                background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
              }}
            />
          </div>
        )}

        <div className="relative" style={{ zIndex: 1 }}>
          <TopBar />
        </div>

        <section
          className="relative flex w-full flex-col overflow-hidden"
          style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: showHero ? '72px 24px 24px 24px' : '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
        >
          <Routes>
            <Route path="/" element={<Glance />} />
            <Route path="/infrastructure" element={<Infrastructure />} />
            <Route path="/booknest" element={<BookNest />} />
          </Routes>
        </section>
      </main>
    </div>
  )
}

export default App