import { FigletConverter } from '@/components/converter/FigletConverter';
import { ThemeToggle } from '@/components/layout/ThemeToggle';
import { KeyboardShortcutsHelp } from '@/components/ui/KeyboardShortcutsHelp';

export default function Home() {
  return (
    <main className="min-h-screen p-4 sm:p-8">
      <div className="max-w-7xl mx-auto">
        <header className="mb-8 flex items-start justify-between">
          <div>
            <h1 className="text-3xl sm:text-4xl font-bold mb-2">Figlet UI</h1>
            <p className="text-sm sm:text-base text-muted-foreground">
              ASCII Art Text Generator with 373 Fonts
            </p>
          </div>
          <ThemeToggle />
        </header>

        <FigletConverter />

        <footer className="mt-12 pt-8 border-t text-center text-sm text-muted-foreground">
          <p>
            Powered by{' '}
            <a
              href="https://github.com/patorjk/figlet.js"
              target="_blank"
              rel="noopener noreferrer"
              className="underline hover:text-foreground"
            >
              figlet.js
            </a>
            {' '}&middot;{' '}
            Fonts from{' '}
            <a
              href="https://github.com/xero/figlet-fonts"
              target="_blank"
              rel="noopener noreferrer"
              className="underline hover:text-foreground"
            >
              xero/figlet-fonts
            </a>
          </p>
        </footer>
      </div>

      <KeyboardShortcutsHelp />
    </main>
  );
}