import type { Metadata } from "next";
import { apiSafe } from "@/lib/api";
import { Compass, type CompassData } from "@/components/compass";
import { Empty } from "@/components/ui";

export const metadata: Metadata = { title: "Boussole électorale Québec 2026", description: "48 énoncés, 6 axes. Chaque position de parti est tirée d'un document officiel (page, citation) : vous pouvez voir pourquoi vous correspondez à un parti." };
export const revalidate = 300;

export default async function Page() {
  const data = await apiSafe<CompassData>("/api/compass/questions");
  if (!data) return <Empty title="Boussole indisponible" />;
  return (
    <div className="space-y-6">
      <div>
        <div className="eyebrow">Boussole électorale · {data.questions.length} énoncés · 6 axes</div>
        <h1 className="display text-[40px] md:text-[56px] mt-3">Boussole QC26</h1>
        <p className="text-ink-2 mt-3 max-w-2xl text-[15px] leading-relaxed">Répondez aux énoncés qui vous parlent, pondérez leur importance, puis comparez. Chaque position de parti provient <b>exclusivement</b> de documents officiels ingérés par QC26 (plateforme, programme, engagements) avec page et citation ; quand un document ne permet pas de conclure, la question ne compte pas pour ce parti. Vos réponses restent dans votre navigateur.</p>
      </div>
      <Compass data={data} />
    </div>
  );
}