/* global React */
const { useEffect: useEffectFooter, useState: useStateFooter } = React;

// ============================================
// FOOTER — Contact CTA + now playing + local time
// ============================================
function Footer() {
  const [time, setTime] = useStateFooter("");
  const [now, setNow] = useStateFooter({
    label: "Currently building",
    text: "WhyNoSales — a CRO diagnostic tool for e-commerce.",
  });

  useEffectFooter(() => {
    const update = () => {
      const d = new Date().toLocaleTimeString("en-US", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
        timeZone: "America/Sao_Paulo",
      });
      setTime(d);
    };
    update();
    const id = setInterval(update, 1000);
    return () => clearInterval(id);
  }, []);

  return (
    <footer className="footer">
      <div className="container">
        {/* Big CTA */}
        <div className="footer__cta">
          <div className="footer__cta-eyebrow t-eyebrow">Let's talk</div>
          <h2 className="footer__cta-title">
            Have a design problem? <br />
            <span className="footer__cta-accent">I'd love to hear about it.</span>
          </h2>
          <a href="mailto:guilhermepiluski@gmail.com" className="btn btn--primary btn--lg footer__cta-btn" onClick={() => window.track('contact_click', { location: 'footer_cta' })}>
            <span>E-mail me</span>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M7 17L17 7M17 7H9M17 7V15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
        </div>

        {/* Meta strip */}
        <div className="footer__meta">
          <div className="footer__col">
            <span className="t-eyebrow">Based in</span>
            <div className="footer__val">
              Sao Paulo, Brazil
              <span className="footer__time t-mono">{time} BRT</span>
            </div>
          </div>
          <div className="footer__col">
            <span className="t-eyebrow">{now.label}</span>
            <div className="footer__val footer__val--soft">
              <span className="footer__pulse" />
              {now.text}
            </div>
          </div>
          <div className="footer__col footer__col--right">
            <span className="t-eyebrow">Elsewhere</span>
            <div className="footer__links">
              <a href="https://linkedin.com/in/guilherme-piluski" target="_blank" rel="noreferrer" onClick={() => window.track('external_link_click', { destination: 'linkedin' })}>LinkedIn</a>
              <a href="https://docs.google.com/document/d/1C-S2oFPjUkvW27eQRE0mrCZHvkYq6jN7z0WxMR2QURY/edit?usp=sharing" target="_blank" rel="noreferrer" onClick={() => window.track('external_link_click', { destination: 'resume' })}>Resumé</a>
            </div>
          </div>
        </div>

        <div className="footer__bottom">
          <span className="t-small">© 2026 Guilherme Piluski. All rights reserved.</span>
          <span className="t-small t-mono">Built with care.</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;