import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const Home = () => {
  return (
    <div className="max-w-4xl mx-auto">
      <div className="mb-8">
        <h1 className="text-3xl font-bold text-slate-900">Welcome to KROW API Test Harness</h1>
        <p className="text-slate-600 mt-1">
          Your dedicated tool for rapid and authenticated testing of KROW backend services.
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Get Started</CardTitle>
          <CardDescription>
            Use the sidebar navigation to select an API category and then choose a specific endpoint to test.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <p className="text-sm text-slate-700">
            This tool automatically handles Firebase authentication, injecting the necessary ID tokens into your API requests.
            Simply log in, select an API, provide the required parameters, and execute to see the raw JSON response.
          </p>
        </CardContent>
      </Card>
    </div>
  );
};

export default Home;