import { Header } from "@/components/header";
import { TileGrid } from "@/components/tile-grid";
import apps from "@/data/apps.json";
import type { AppTile } from "@/components/tile";

export default function Home() {
  return (
    <div className="flex min-h-full flex-col bg-[var(--color-bg-secondary)]">
      <Header />
      <main className="mx-auto flex w-full max-w-7xl flex-1 flex-col gap-7 px-4 py-8 sm:px-8 sm:py-10">
        <section className="flex flex-col gap-2">
          <span className="system-2xs-medium-uppercase text-[var(--color-primary)]">
            Interní AI portál
          </span>
          <h1 className="text-2xl font-semibold tracking-tight text-[var(--color-text-primary)] sm:text-3xl">
            Vaše AI nástroje na jednom místě
          </h1>
          <p className="max-w-2xl text-sm text-[var(--color-text-tertiary)] sm:text-base">
            Vyberte si průvodce úlohou, nebo zahajte volný chat. Vše běží na
            firemních klíčích — s rozpočty, sledováním nákladů a bez exportu
            vašich dat ven.
          </p>
        </section>

        <TileGrid apps={apps as AppTile[]} />
      </main>
      <footer className="mx-auto w-full max-w-7xl px-4 pb-10 pt-2 text-xs text-[var(--color-text-quaternary)] sm:px-8">
        Nevkládejte do AI nástrojů hesla ani neredaktované osobní či citlivé
        údaje.
      </footer>
    </div>
  );
}