export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24 bg-background text-foreground">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm flex">
        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
          Inventory API Status:&nbsp;
          <code className="font-bold">Checking...</code>
        </p>
      </div>

      <div className="flex flex-col items-center gap-8 mt-20">
        <h1 className="text-4xl font-bold flex items-center gap-4">
          <i className="bi bi-box-seam text-primary"></i>
          Inventory PWA
        </h1>
        <p className="text-xl text-center max-w-md">
          Welcome to your unified inventory management system. 
          Ready for mobile scanning and offline operations.
        </p>
        
        <div className="flex gap-4">
          <button className="bg-primary text-white px-6 py-3 rounded-lg shadow-lg hover:bg-blue-600 transition-colors flex items-center gap-2">
            <i className="bi bi-qr-code-scan"></i>
            Start Scanning
          </button>
          <button className="border border-gray-300 px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors flex items-center gap-2">
            <i className="bi bi-list-ul"></i>
            View Inventory
          </button>
        </div>
      </div>
    </main>
  );
}