// SPDX-FileCopyrightText: 2026 Progmasoft <support@progmasoft.com>
// SPDX-License-Identifier: AGPL-3.0-or-later WITH AdditionRef-Progmasoft-Patent-Grant-1.1

import type { Metadata } from "next";
import { ViGetCatalogSection } from "@/components/ViGetCatalogSection";
import { ViGetFooter } from "@/components/ViGetFooter";
import { ViGetHeader } from "@/components/ViGetHeader";
import { getLocale } from "@/lib/locale.server";
import { getMessages } from "@/lib/localization";
import {
  buildSystemCatalogs,
  buildSystemsHeading,
  catalogText,
  languageCatalogs,
  languagesHeading,
} from "@/lib/viget-catalogs";

export async function generateMetadata(): Promise<Metadata> {
  const { metadata } = getMessages(await getLocale());
  return {
    title: metadata.vigetTitle,
    description: metadata.vigetDescription,
    alternates: { canonical: "https://viget.progmasoft.com/" },
    robots: { index: true, follow: true },
  };
}

export default async function ViGetPage() {
  const locale = await getLocale();
  const { viget } = getMessages(locale);
  const catalogs = catalogText(locale);
  return (
    <div className="viget-surface">
      <ViGetHeader locale={locale} />
      <main>
        {/* The state of the registry comes first: what it holds today and what is open. */}
        <section className="viget-hero" aria-labelledby="viget-status-title">
          <div className="shell viget-hero-grid">
            <div className="viget-hero-copy">
              <p className="eyebrow">{catalogs.statusEyebrow}</p>
              <h1>{viget.homeTitle}</h1>
              <p>{viget.homeDescription}</p>
              <div className="hero-actions">
                <a
                  className="button"
                  href="https://account.progmasoft.com/register"
                >
                  {viget.createAccount}
                </a>
                <a
                  className="button button-secondary"
                  href="https://tazel.net/"
                >
                  {viget.exploreTazel}
                </a>
              </div>
            </div>
            <aside className="viget-availability">
              <div className="viget-status">
                <span aria-hidden="true" />
                {viget.available}
              </div>
              <h2 id="viget-status-title">{viget.emptyTitle}</h2>
              <p>{viget.emptyDescription}</p>
              <dl>
                <div>
                  <dt>{viget.packageFormat}</dt>
                  <dd>.vipkg</dd>
                </div>
                <div>
                  <dt>{viget.publisherIdentity}</dt>
                  <dd>Progmasoft Account</dd>
                </div>
                <div>
                  <dt>{viget.publishing}</dt>
                  <dd>{viget.publishingClosed}</dd>
                </div>
              </dl>
            </aside>
          </div>
        </section>

        <ViGetCatalogSection
          id="languages"
          heading={languagesHeading}
          description={catalogs.languagesDescription}
          catalogs={languageCatalogs}
          locale={locale}
          muted
        />
        <ViGetCatalogSection
          id="build-systems"
          heading={buildSystemsHeading}
          description={catalogs.buildSystemsDescription}
          catalogs={buildSystemCatalogs}
          locale={locale}
        />

        <section className="section section-muted viget-contract">
          <div className="shell viget-contract-grid">
            <div>
              <p className="eyebrow">{viget.contractEyebrow}</p>
              <h2>{viget.contractTitle}</h2>
            </div>
            <ol>
              {viget.principles.map(([title, description], index) => (
                <li key={title}>
                  <span>{String(index + 1).padStart(2, "0")}</span>
                  <div>
                    <strong>{title}</strong>
                    <p>{description}</p>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </section>
      </main>
      <ViGetFooter locale={locale} />
    </div>
  );
}