import MainConverter from '@/components/converter/MainConverter';
import { ThemeToggle } from '@/components/ui/ThemeToggle';
import Footer from '@/components/ui/Footer';

export default function Home() {
  return (
    <div className="min-h-screen bg-background flex flex-col">
      {/* Header with theme toggle */}
      <div className="border-b sticky top-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 z-40">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <div className="text-xl font-bold">Units UI</div>
          <ThemeToggle />
        </div>
      </div>

      <main className="container mx-auto px-4 py-8 flex-1">
        <header className="text-center mb-12">
          <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-400 dark:to-indigo-400 bg-clip-text text-transparent">
            Unit Converter
          </h1>
          <p className="text-lg text-muted-foreground">
            Convert between 187 units across 23 measurement categories
          </p>
          <div className="flex items-center justify-center gap-4 mt-3 text-sm text-muted-foreground">
            <span>Press <kbd className="px-2 py-1 bg-muted rounded text-xs">/</kbd> to search</span>
            <span>•</span>
            <span>
              <kbd className="px-2 py-1 bg-muted rounded text-xs">Ctrl</kbd>
              {' + '}
              <kbd className="px-2 py-1 bg-muted rounded text-xs">K</kbd> for commands
            </span>
          </div>
        </header>

        <MainConverter />
      </main>

      <Footer />
    </div>
  );
}