// Contact + Footer
function Contact({ t, lang }) {
  const [copied, setCopied] = React.useState(false);
  const email = "gui.cavalcante3o@gmail.com";

  const onCopy = (e) => {
    e.preventDefault();
    e.stopPropagation();
    navigator.clipboard?.writeText(email);
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  const links = [
    { name: "GitHub", val: "@GscDtAnalytic", href: "https://github.com/GscDtAnalytic" },
    { name: "LinkedIn", val: "guilherme-cavalcante-dados", href: "https://www.linkedin.com/in/guilherme-cavalcante-dados/" },
  ];

  return (
    <section id="contact">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 32 }}>
          <span className="kicker">{t.contact.kicker}</span>
        </div>
        <div className="contact-wrap">
          <Reveal>
            <h2 className="contact-title">
              {lang === "pt" ? <>Vamos <span className="acc">conversar.</span></> : <>Let's <span className="acc">talk.</span></>}
            </h2>
            <p className="contact-sub">{t.contact.sub}</p>
          </Reveal>

          <Reveal className="contact-side" delay={100}>
            <a className="contact-link" href={`mailto:${email}`}>
              <div>
                <div className="l-name">Email</div>
                <div className="l-val">
                  {email}
                  <button
                    className={`email-copy ${copied ? "ok" : ""}`}
                    onClick={onCopy}
                  >
                    {copied ? t.contact.copied : t.contact.copy}
                  </button>
                </div>
              </div>
              <span className="l-arr">↗</span>
            </a>
            {links.map((l) => (
              <a key={l.name} className="contact-link" href={l.href} target="_blank" rel="noopener">
                <div>
                  <div className="l-name">{l.name}</div>
                  <div className="l-val">{l.val}</div>
                </div>
                <span className="l-arr">↗</span>
              </a>
            ))}
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="wrap" style={{ display: "flex", justifyContent: "space-between", padding: 0, flexWrap: "wrap", gap: 12 }}>
        <span>{t.footer.year}</span>
        <span>{t.footer.built}</span>
        <span className="clock">
          BRASÍLIA/DF · <LiveClock />
        </span>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });