/**
 * Trouve-KA — page d'accueil (la boîte de recherche)
 * Author: Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 */

import { IndexCounter } from "@/components/index-counter";
import { SearchBar } from "@/components/search-bar";
import { Wordmark } from "@/components/wordmark";

export default function HomePage() {
  return (
    <main
      id="contenu"
      className="flex flex-1 flex-col items-center justify-center px-4 py-14"
    >
      <div className="rise w-full max-w-xl text-center">
        <h1>
          <Wordmark variant="hero" />
        </h1>
        <div className="mt-10">
          <SearchBar
            size="lg"
            autoFocus
            buttonPlacement="below"
            placeholderSuggestions={[
              "plombier Gatineau",
              "subvention thermopompe",
              "cégep Sherbrooke",
              "marché public Trois-Rivières",
              "programme Hydro-Québec",
            ]}
          />
        </div>
        <p className="gk-display mt-9 text-[17px] font-bold tracking-[-0.02em] text-ink">
          Cherche <span className="hl">le Québec</span>.
        </p>
        <div className="mt-9">
          <IndexCounter />
        </div>
      </div>
    </main>
  );
}