/* 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 = {
    "Nexentia AI":         "/ai",
    "Nexentia Consulting": "/consulting",
    "Kontakt":             "/#contact",
    "Contact":             "/#contact",
    "Impressum":           "/legal-notice",
    "Imprint":             "/legal-notice",
    "Datenschutz":         "/privacy",
    "Privacy":             "/privacy",
    "Cookies":             "/cookies",
  };

  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) => {
                  const href = linkTargets[l] || "#";
                  return <a key={l} href={href}>{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 noreferrer" style={{ color: "inherit" }}>LinkedIn</a>
          </span>
        </div>
      </div>
    </footer>
  );
}
window.NxFooter = NxFooter;