import { DemoBlock } from "@/components/DemoBlock";
import { ReferenceTable } from "@/components/ReferenceTable";
import { Section } from "@/components/Section";
import { StructuredData } from "@/components/StructuredData";
import { TextLink } from "@/components/TextLink";
import { getPublicClients, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href } from "@/lib/routes";

import styles from "./Page.module.css";
import { PageTitle } from "./PageTitle";

/**
 * /klientet — references.
 *
 * Blueprint 04: rows with written permission show the business name; the rest
 * show sector and town. No logos in v1, no counts, no testimonials. The page
 * says plainly why the names are absent, which is more credible than a logo
 * carousel nobody has agreed to.
 */
export function ClientsView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const clients = getPublicClients();

  return (
    <>
      <StructuredData
        locale={locale}
        crumbs={[
          { name: t("nav.home"), target: { key: "home" } },
          { name: t("clients.title"), target: { key: "clients" } },
        ]}
      />

      <PageTitle title={t("clients.title")} oneLiner={t("clients.intro")} />

      <Section label={t("label.references")}>
        <ReferenceTable locale={locale} clients={clients} />
        <p className={styles.note}>
          {t("clients.note")}{" "}
          <TextLink href={href({ key: "contact" }, locale)}>{t("cta.contact")}</TextLink>
        </p>
      </Section>

      <DemoBlock locale={locale} />
    </>
  );
}