import { useQuery } from "@tanstack/react-query";
import { getSetupStatus } from "../features/setup/api/getSetupStatus";

export function App() {
  const status = useQuery({
    queryKey: ["setup-status"],
    queryFn: getSetupStatus
  });

  return (
    <main className="foundation-shell">
      <section className="foundation-card" aria-labelledby="foundation-title">
        <p className="eyebrow">Foundation phase</p>
        <h1 id="foundation-title">Drive v2</h1>
        <p className="summary">
          The repository, contracts, architecture boundaries, and deployment shell are ready for product development.
        </p>
        <dl className="status-list">
          <div>
            <dt>API</dt>
            <dd>{status.isPending ? "Checking…" : status.isError ? "Unavailable" : "Connected"}</dd>
          </div>
          <div>
            <dt>Owner setup</dt>
            <dd>{status.data?.initialized === true ? "Complete" : "Begins in Phase 1"}</dd>
          </div>
          <div>
            <dt>Build</dt>
            <dd>{status.data?.version ?? "development"}</dd>
          </div>
        </dl>
      </section>
    </main>
  );
}