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

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

  function onPhoneClick() {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(t.phone.v).then(() => {
        setPhoneCopied(true);
        setTimeout(() => setPhoneCopied(false), 2000);
      }).catch(() => {});
    }
  }

  return (
    <section className="nx-cta-block nx-band nx-band--cta" id="contact">
      <div className="nx-container nx-container--wide">
        <div className="nx-eyebrow nx-eyebrow--on-dark nx-cta-block__eyebrow">{t.eyebrow}</div>
        <div className="nx-cta-block__row">
          <h2 className="nx-cta-block__h">{t.headline}</h2>
          <div className="nx-cta-block__rail">
            <a className="nx-cta-block__pair" href={t.mail.href}>
              <span className="nx-cta-block__k">{t.mail.k}</span>
              <span className="nx-cta-block__v">{t.mail.v}</span>
            </a>
            <a className="nx-cta-block__pair" href={t.phone.href} onClick={onPhoneClick}>
              <span className="nx-cta-block__k">{t.phone.k}</span>
              <span className="nx-cta-block__v">{phoneCopied ? copiedLabel : t.phone.v}</span>
            </a>
            <a className="nx-cta-block__pair" href={t.linkedin.href} target="_blank" rel="noopener">
              <span className="nx-cta-block__k">{t.linkedin.k}</span>
              <span className="nx-cta-block__v">{t.linkedin.v}<span aria-hidden className="nx-cta-block__arrow">↗</span></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}
window.NxContact = NxContact;