import { DemoBlock } from "@/components/DemoBlock";
import { RecordTable, type Row } from "@/components/RecordTable";
import { Section } from "@/components/Section";
import { StructuredData } from "@/components/StructuredData";
import { CONTACT, getHome, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";

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

/**
 * /kontakt — the demo request is the whole page (Blueprint 04), with the
 * direct channels beside it and one sentence about what happens next.
 */
export function ContactView({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const home = getHome(locale);

  const rows: Row[] = [
    {
      id: "phone",
      cells: [
        t("contact.phoneLabel"),
        <a key="p" href={`tel:${CONTACT.phoneE164}`} data-event="call_click">
          {CONTACT.phoneDisplay}
        </a>,
      ],
    },
    {
      id: "whatsapp",
      cells: [
        t("contact.whatsappLabel"),
        <a
          key="w"
          href={CONTACT.whatsapp}
          target="_blank"
          rel="noopener noreferrer"
          data-event="whatsapp_click"
        >
          {CONTACT.phoneDisplay}
        </a>,
      ],
    },
    {
      id: "email",
      cells: [
        t("contact.emailLabel"),
        <a key="e" href={`mailto:${CONTACT.email}`} data-event="email_click">
          {CONTACT.email}
        </a>,
      ],
    },
    {
      id: "address",
      cells: [
        t("contact.addressLabel"),
        <a key="a" href={CONTACT.mapsUrl} target="_blank" rel="noopener noreferrer">
          {`${CONTACT.street}, ${CONTACT.postalCode} ${CONTACT.city[locale]}`}
        </a>,
      ],
    },
    {
      id: "facebook",
      cells: [
        t("contact.facebookLabel"),
        <a key="f" href={CONTACT.facebook} target="_blank" rel="noopener noreferrer">
          sulsys.net
        </a>,
      ],
    },
    {
      id: "youtube",
      cells: [
        t("contact.youtubeLabel"),
        <a key="y" href={CONTACT.youtube} target="_blank" rel="noopener noreferrer">
          SulSys.net
        </a>,
      ],
    },
  ];

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

      {/* Contacting Sulsys is contacting the company, so this page opens on
          the company's surface too. */}
      <PageTitle
        tone="navy"
        eyebrow={[t("site.companyDescriptor")]}
        title={t("contact.title")}
        oneLiner={t("contact.lead")}
      />

      <Section label={t("label.direct")} heading={t("heading.direct")} first>
        <div className={styles.split}>
          <RecordTable
            columns={[
              { key: "channel", label: t("table.item"), subject: true },
              { key: "value", label: t("table.value") },
            ]}
            rows={rows}
            caption={t("label.direct")}
          />
          <div>
            <p className={styles.eyebrow}>{t("label.whatNext")}</p>
            {/*
              What actually happens to a submission, which is also what the
              privacy notice says. The demo block below carries the invitation;
              repeating it here made the page read as placeholder copy.
            */}
            <p className={styles.note}>{t("contact.whatNext")}</p>
          </div>
        </div>
      </Section>

      <DemoBlock locale={locale} heading={home.demoHeading} />
    </>
  );
}