import Link from "next/link";

import { Container } from "./Container";
import { LocaleLinks } from "./LocaleLinks";
import styles from "./Footer.module.css";

import { CONTACT, getModules, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href, MODULES } from "@/lib/routes";

/**
 * The footer, V4.1: a signature, not a second sitemap.
 *
 * The opening introduced the mark, the header carries it, and nothing down
 * here repeats it. The company signs in type — its name, what it is, where —
 * beside the one number its customers actually use. Then the ways to reach
 * it, the product in one line, the four languages and the two channels, and
 * the record line. No column of navigation: the pages that need reaching
 * from the foot of a page are the ones named here.
 */
export function Footer({ locale }: { locale: Locale }) {
  const t = getT(locale);
  const modules = getModules(locale);

  return (
    <footer className={styles.footer} data-surface="ink" aria-label={t("footer.aria")}>
      <Container>
        <div className={styles.sign}>
          <div className={styles.who}>
            <span className={styles.name}>{t("site.companyName")}</span>
            <span className={styles.descriptor}>{t("site.companyDescriptor")}</span>
          </div>
          <a href={`tel:${CONTACT.phoneE164}`} className={styles.phone} data-event="call_click">
            {CONTACT.phoneDisplay}
          </a>
        </div>

        <div className={styles.grid}>
          <div className={styles.block}>
            <p className={styles.heading}>{t("footer.contactColumn")}</p>
            <ul className={styles.list}>
              <li>
                <a
                  href={CONTACT.whatsapp}
                  className={styles.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  data-event="whatsapp_click"
                >
                  {t("cta.whatsapp")}
                </a>
              </li>
              <li>
                <a
                  href={`mailto:${CONTACT.email}`}
                  className={styles.link}
                  data-event="email_click"
                >
                  {CONTACT.email}
                </a>
              </li>
              <li className={styles.address}>
                {CONTACT.street}, {CONTACT.postalCode} {CONTACT.city[locale]}
              </li>
              <li>
                <a
                  href={CONTACT.mapsUrl}
                  className={styles.link}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {t("cta.directions")}
                </a>
              </li>
            </ul>
          </div>

          <div className={styles.block}>
            <p className={styles.heading}>{t("footer.productColumn")}</p>
            <ul className={styles.list}>
              <li>
                <Link href={href({ key: "nexys" }, locale)} className={styles.link}>
                  {t("cta.nexysOverview")}
                </Link>
              </li>
              <li className={styles.products}>
                {MODULES.map((module, index) => {
                  const content = modules.find((m) => m.id === module.id);
                  return (
                    <span key={module.id}>
                      {index > 0 ? <span className={styles.sep}> · </span> : null}
                      <Link
                        href={href({ key: "module", module: module.id }, locale)}
                        className={styles.link}
                      >
                        {content?.name ?? module.brandName}
                      </Link>
                    </span>
                  );
                })}
              </li>
              <li>
                <Link href={href({ key: "support" }, locale)} className={styles.link}>
                  {t("nav.support")}
                </Link>
              </li>
            </ul>
          </div>

          <div className={styles.block}>
            <p className={styles.heading}>{t("nav.langAria")}</p>
            <LocaleLinks
              locale={locale}
              aria={t("nav.langAria")}
              className={styles.langs}
              itemClassName={styles.lang}
              currentClassName={styles.langCurrent}
            />
            <ul className={`${styles.list} ${styles.channels}`}>
              <li>
                <a
                  href={CONTACT.facebook}
                  className={styles.link}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Facebook
                </a>
              </li>
              <li>
                <a
                  href={CONTACT.youtube}
                  className={styles.link}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  YouTube
                </a>
              </li>
            </ul>
          </div>
        </div>

        {/* The record line: who, where, who designed it; privacy and clients. */}
        <div className={styles.record}>
          <div className={styles.recordItems}>
            <span>{t("site.companyName")}</span>
            <span className={styles.recordSep}>·</span>
            <span>{CONTACT.city[locale]}</span>
            <span className={styles.recordSep}>·</span>
            {/*
              The studio's signature: one quiet line, in English in every
              tree, because it is a credit rather than content. The site's
              own motion language — a rule that changes colour on hover —
              and nothing more.
            */}
            <a
              href="https://rrymstudio.com"
              className={styles.credit}
              target="_blank"
              rel="noopener noreferrer external"
            >
              Designed by <span className={styles.creditName}>RRYM STUDIO</span>
              <span className={styles.creditArrow} aria-hidden="true">
                ↗
              </span>
            </a>
          </div>
          <div className={styles.recordItems}>
            <Link href={href({ key: "privacy" }, locale)} className={styles.recordLink}>
              {t("footer.privacy")}
            </Link>
            <Link href={href({ key: "clients" }, locale)} className={styles.recordLink}>
              {t("nav.clients")}
            </Link>
          </div>
        </div>
      </Container>
    </footer>
  );
}