import { Camera } from 'lucide-react'

function App() {
  return (
    <div className="min-h-screen bg-rig-dark-900">
      {/* Header */}
      <header className="border-b border-rig-dark-700 bg-rig-dark-800/50 backdrop-blur-sm">
        <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-3">
            <Camera className="h-7 w-7 text-rig-accent" />
            <h1 className="text-xl font-bold tracking-tight text-rig-dark-50">
              RemoteRig
            </h1>
            <span className="ml-2 rounded-full bg-rig-accent/10 px-2.5 py-0.5 text-xs font-medium text-rig-accent">
              Dashboard
            </span>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-rig-dark-600 bg-rig-dark-800/30 py-24 text-center">
          <Camera className="mb-4 h-12 w-12 text-rig-dark-500" />
          <h2 className="text-lg font-semibold text-rig-dark-200">
            Dashboard Coming Soon
          </h2>
          <p className="mt-2 max-w-sm text-sm text-rig-dark-400">
            Camera monitoring and remote control interface — under construction.
          </p>
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-rig-dark-700 bg-rig-dark-800/30">
        <div className="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
          <p className="text-center text-xs text-rig-dark-500">
            RemoteRig v0.1.0 &mdash; Multi-Camera Remote Monitoring System
          </p>
        </div>
      </footer>
    </div>
  )
}

export default App