export default function TenantPanel() {
  return (
    <div className="min-h-screen bg-zinc-50 text-zinc-900 p-8">
      <header className="mb-8 border-b border-zinc-200 pb-4">
        <h1 className="text-3xl font-light tracking-tight text-zinc-800">Customer <span className="font-semibold text-blue-600">Panel</span></h1>
        <p className="text-zinc-500 mt-2">Manage your Hotspot and Firewall settings</p>
      </header>
      
      <main className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white border border-zinc-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-medium">Hotspot Settings</h2>
            <span className="bg-green-100 text-green-700 text-xs font-semibold px-2 py-1 rounded">Active</span>
          </div>
          <p className="text-zinc-500 text-sm mb-4">Configure authentication methods (SMS, TC ID) for your guests.</p>
          <button className="bg-zinc-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
            Configure
          </button>
        </div>
        
        <div className="bg-white border border-zinc-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-medium">Speed Limits</h2>
            <span className="bg-blue-100 text-blue-700 text-xs font-semibold px-2 py-1 rounded">Configured</span>
          </div>
          <p className="text-zinc-500 text-sm mb-4">Manage bandwidth allocation via OPNsense Traffic Shaper.</p>
          <button className="bg-zinc-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-zinc-800 transition-colors">
            Manage Limits
          </button>
        </div>
      </main>
    </div>
  );
}
