/* global React */
const { useState: useStateFt } = React;

function NxFooter({ lang }) {
  const t = window.NX_COPY[lang].footer;
  const [phoneCopied, setPhoneCopied] = useStateFt(false);
  const copiedLabel = lang === "de" ? "Nummer kopiert" : "Number copied";

  function onPhoneClick() {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText("+357 96 916 733").then(() => {
        setPhoneCopied(true);
        setTimeout(() => setPhoneCopied(false), 2000);
      }).catch(() => {});
    }
  }

  const linkTargets = {
    Analyse: "#services",
    Umsetzung: "#services",
    Betrieb: "#services",
    Analysis: "#services",
    Delivery: "#services",
    Run: "#services",
    "Marcel Neumann": "#profile",
    Werdegang: "#career",
    Career: "#career",
    Kontakt: "#contact",
    Contact: "#contact",
    Impressum: "legal-notice.html",
    Imprint: "legal-notice.html",
    Datenschutz: "privacy.html",
    Privacy: "privacy.html",
    Cookies: "cookies.html",
  };

  return (
    <footer className="nx-footer">
      <div className="nx-container nx-container--wide">
        <div className="nx-footer__inner">
          <div className="nx-footer__brand">
            <div className="nx-footer__tagline">{t.tagline}</div>
            <div className="nx-footer__addr">
              <strong style={{ color: "#fff", display: "block", marginBottom: 4 }}>{t.companyLine1}</strong>
              <span className="nx-footer__company-line">{t.companyLine2}</span>
              <span style={{ display: "block", marginTop: 10 }}>
                {t.addressLines.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
              </span>
              <span style={{ display: "block", marginTop: 10 }}>
                {t.meta.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
              </span>
              {t.vatNote && <span className="nx-footer__vat">{t.vatNote}</span>}
            </div>
          </div>
          <div className="nx-footer__cols">
            {t.cols.map((c) => (
              <div key={c.h}>
                <div className="nx-footer__h">{c.h}</div>
                {c.links.map((l) => <a key={l} href={linkTargets[l] || "#top"}>{l}</a>)}
              </div>
            ))}
          </div>
        </div>
        <div className="nx-footer__legal">
          <span>{t.legal}</span>
          <span>
            <a href="mailto:contact@nexentia.ltd" style={{ color: "inherit" }}>contact@nexentia.ltd</a> · <a href="tel:+35796916733" onClick={onPhoneClick} style={{ color: "inherit" }}>{phoneCopied ? copiedLabel : "+357 96 916 733"}</a> · <a href="https://www.linkedin.com/in/marcel-neumann-1a759894/" target="_blank" rel="noopener" style={{ color: "inherit" }}>LinkedIn</a>
          </span>
        </div>
      </div>
    </footer>
  );
}
window.NxFooter = NxFooter;