/**
 * Footer — closing identity moment.
 *
 * Centered, oversized wordmark + a single email line with copy-to-clipboard,
 * one social affordance (Telegram), and a privacy stub. Inspired by the
 * minimal "studio site outro" pattern: one strong piece of typography,
 * one address, no marketing footer farm.
 */

const TelegramIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path
      d="M21.943 4.367c.293-1.355-.495-1.886-1.343-1.567L1.79 9.92c-1.282.499-1.262 1.218-.219 1.539l4.86 1.516 11.27-7.114c.531-.314 1.014-.142.616.172l-9.122 8.235-.353 5.155c.5 0 .72-.215.985-.47l2.366-2.286 4.91 3.628c.9.497 1.55.241 1.773-.835l3.067-14.093z"
      fill="currentColor"
    />
  </svg>
);

const CopyIcon = () => (
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
  </svg>
);

const Footer = ({ lang }) => {
  const [copied, setCopied] = React.useState(false);
  const email = 'hi@codaro.studio';

  const onCopy = async (e) => {
    e.preventDefault();
    try {
      await navigator.clipboard.writeText(email);
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    } catch {
      window.location.href = `mailto:${email}`;
    }
  };

  return (
    <footer className="footer">
      <div className="container footer__inner">
        <div className="footer__mark" aria-label="Codaro">
          <span className="footer__mark-back" aria-hidden="true">CODARO</span>
          <span className="footer__mark-front">CODARO</span>
        </div>

        <a href={`mailto:${email}`} onClick={onCopy} className="footer__email">
          <span>{email.toUpperCase()}</span>
          <span className="footer__email-icon">
            <CopyIcon />
          </span>
          <span className={`footer__copied ${copied ? 'is-on' : ''}`}>
            {T(lang, 'СКОПИРОВАНО', 'COPIED')}
          </span>
        </a>

        <div className="footer__socials">
          <a
            href="https://t.me/codaro_it"
            aria-label="Telegram · @codaro_it"
            className="footer__social"
            target="_blank" rel="noreferrer"
          >
            <TelegramIcon />
          </a>
        </div>

        <a href="/privacy.html" className="footer__privacy">
          {T(lang, 'ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ', 'PRIVACY POLICY')}
        </a>

        <div className="footer__legal">
          {T(lang,
            '© 2026 Codaro Studio · Бишкек',
            '© 2026 Codaro Studio · Bishkek')}
        </div>
      </div>
    </footer>
  );
};

window.Footer = Footer;