import Link from "next/link";

import { ButtonAnchor } from "@/components/Button";
import { DemoBlock } from "@/components/DemoBlock";
import { RecordTable, type Row } from "@/components/RecordTable";
import { Section } from "@/components/Section";
import { Evidence } from "@/components/Evidence";
import { SulsysLockup } from "@/components/brand/SulsysMark";
import { StructuredData } from "@/components/StructuredData";
import { Trail } from "@/components/Trail";
import { CONTACT, getCompany, getPeople, 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";
import { EVIDENCE_STRINGS, evidenceRecords } from "./evidence";

/**
 * /sulsys — the company page.
 *
 * Blueprint 07: until Kujto supplies his own account, the page carries only
 * verified facts. There is no founding year, no team size and no "20 years"
 * line, because each of those is either UNKNOWN or waiting on his confirmed
 * wording (BLUEPRINT-DELTA D-16) — the fact register holds all three, gated.
 *
 * The People section renders only rows with recorded consent, and there are
 * none, so it is absent rather than empty.
 */
export function CompanyView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const company = getCompany(locale);
  const people = getPeople();
  const evidence = evidenceRecords(locale, "company");

  const factRows: Row[] = company.facts.map((fact) => ({
    id: fact.fact,
    cells: [fact.label, fact.value],
  }));

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

      {/*
        The company's page opens on the company's surface, the same navy the
        home-page masthead uses, so /sulsys reads as the house itself.

        And it is the one page that carries the complete heritage lockup —
        blades, wordmark and "Future at your reach" together, in the
        arrangement and proportions Sulsys has drawn them in since at least
        2012. The tagline is English on a site that is otherwise Albanian and
        Macedonian, so it earns its place only where the subject is the company
        rather than the software. Here it is exactly on subject: this page is
        about who the company is, and that line has been part of who they are
        for twenty years.
      */}
      <PageTitle
        eyebrow={[t("site.companyDescriptor")]}
        title={company.name}
        oneLiner={company.oneLiner}
        aside={
          <p className={styles.heritage}>
            <SulsysLockup />
          </p>
        }
      />

      <Section label={t("label.story")} heading={t("heading.story")} first>
        <div className={styles.split}>
          <div className={styles.prose}>
            {company.story.map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
          </div>
          <div>
            <p className={styles.eyebrow}>{t("label.facts")}</p>
            <RecordTable
              columns={[
                { key: "label", label: t("table.item"), subject: true },
                { key: "value", label: t("table.value") },
              ]}
              rows={factRows}
              caption={t("label.facts")}
            />
          </div>
        </div>
      </Section>

      {/*
        The trail.

        This page is where the continuity argument belongs most: a company page
        with no founding year, no team and no history reads as a company with
        none. Sulsys's own "20 years" line is Sulsys's claim and stays gated
        (D-16) until Kujto confirms the wording — but the dated public record is
        RRYM's to show, and a reader can go and check every row of it.
      */}
      <Section label={t("label.trail")} heading={t("heading.trail")} surface="alt">
        <Trail locale={locale} />
      </Section>

      {/*
        And the rows of that record a reader can open from here. The trail
        establishes that a dated public history exists; this is the part of it
        that is one click away.
      */}
      {evidence.length > 0 ? (
        <Section surface="navy" label={t("evidence.label")} heading={t("evidence.heading")}>
          <Evidence items={evidence} strings={EVIDENCE_STRINGS(locale)} />
        </Section>
      ) : null}

      {/* Services beyond Nexys are gated on Kujto's confirmation (D-08). */}
      {company.services.length > 0 ? (
        <Section label={t("label.services")} heading={t("heading.services")} surface="alt">
          <ul className={styles.features}>
            {company.services.map((service) => (
              <li key={service.text} className={styles.feature}>
                <span className={styles.featureMark} aria-hidden="true">
                  ·
                </span>
                <span>{service.text}</span>
              </li>
            ))}
          </ul>
        </Section>
      ) : null}

      {/* People render only with consent; none is recorded yet. */}
      {people.length > 0 ? (
        <Section label={t("label.people")} heading={t("heading.people")}>
          <RecordTable
            columns={[
              { key: "name", label: t("form.name"), subject: true },
              { key: "role", label: t("table.item") },
            ]}
            rows={people.map((person) => ({
              id: person.name,
              cells: [person.name, person.role],
            }))}
            caption={t("label.people")}
          />
        </Section>
      ) : null}

      <Section label={t("label.products")} heading={company.productsHeading} surface="alt">
        <div className={styles.linkRows}>
          {company.products.map((entry) => (
            <Link key={entry.name} href={href({ key: "nexys" }, locale)} className={styles.linkRow}>
              <span className={styles.linkCode}>01</span>
              <span className={styles.linkName}>{entry.name}</span>
              <span className={styles.linkLine}>{entry.line}</span>
              <span className={styles.linkArrow} aria-hidden="true">
                →
              </span>
            </Link>
          ))}
        </div>
      </Section>

      <Section label={t("label.location")} heading={company.location.heading}>
        {/*
          No map image and no office photograph yet. The Jul 2024 office photo
          exists (ASSET-MANIFEST A-60) but may not ship without Kujto's
          agreement, and a stock photograph or an AI image is forbidden — so
          the section stands on the address rather than holding a slot open.
        */}
        <address className={styles.address}>
          {company.location.address.map((line) => (
            <span key={line}>{line}</span>
          ))}
        </address>
        <div className={styles.addressActions}>
          <ButtonAnchor href={company.location.mapsUrl} external variant="secondary">
            {company.location.directionsLabel}
          </ButtonAnchor>
          <ButtonAnchor href={`tel:${CONTACT.phoneE164}`} variant="quiet" data-event="call_click">
            {CONTACT.phoneDisplay}
          </ButtonAnchor>
        </div>
      </Section>

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