App.tsx

import React from 'react';
import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom';
import PublicPortal from './components/PublicPortal';
import AdminDashboard from './components/AdminDashboard';
import HomeLanding from './components/HomeLanding';
import Landing from './components/Landing';

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const location = useLocation();

  return (
    <div className="min-h-screen pb-12">
      {/* Navigation Bar */}
      <nav className="sticky top-0 z-50 p-4 bg-white border-b-4 border-black flex flex-col md:flex-row justify-between items-center gap-4">
        <Link to="/" className="flex items-center gap-4 group">
          <div className="w-12 h-12 bg-[#caffbf] rounded-none border-4 border-black flex items-center justify-center neo-brutalism-sm group-hover:bg-[#9bf6ff] transition-colors">
            <span className="font-bold text-2xl">S</span>
          </div>
          <h1 className="retro-title text-5xl font-bold tracking-tighter uppercase">SinSo_Portal</h1>
        </Link>
        
        <div className="flex flex-wrap justify-center gap-4">
          <Link 
            to="/suggest"
            className={`px-6 py-2 font-bold transition-all neo-brutalism-sm neo-brutalism-hover neo-brutalism-active ${location.pathname === '/suggest' ? 'bg-[#ffd6ff]' : 'bg-white'}`}
          >
            SUGGEST_SONG
          </Link>
          <Link 
            to="/admin"
            className={`px-6 py-2 font-bold transition-all neo-brutalism-sm neo-brutalism-hover neo-brutalism-active ${location.pathname === '/admin' ? 'bg-[#a0c4ff]' : 'bg-white'}`}
          >
            ADMIN_CONSOLE
          </Link>
        </div>
      </nav>

      <main className="container mx-auto mt-12 px-4 max-w-7xl">
        {children}
      </main>

      <footer className="fixed bottom-4 right-4 text-xs font-bold bg-white border-2 border-black px-2 py-1 neo-brutalism-sm z-40">
        SINSO_V1.1 // SYSTEM_READY
      </footer>
    </div>
  );
};

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="/suggest" element={<Layout><PublicPortal /></Layout>} />
        <Route path="/admin" element={<Layout><AdminDashboard /></Layout>} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;