// === Contact ===
function Contact() {
  const [copied, setCopied] = useState(false);
  const email = "shubhamchawre@hotmail.com";

  const copy = () => {
    navigator.clipboard.writeText(email);
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  const links = [
    { l: 'linkedin', u: 'https://www.linkedin.com/in/shubhamchawre/' },
    { l: 'email', u: 'mailto:shubhamchawre@hotmail.com' },
    { l: 'phone', u: 'tel:+61432558182' },
    { l: 'brisbane, au', u: 'https://maps.google.com/?q=St+Lucia+QLD+4067' },
  ];

  return (
    <section id="contact" data-screen-label="Contact">
      <div className="wrap">
        <div className="contact-card">
          <div className="contact-eyebrow eyebrow">Get in touch</div>
          <h2 className="contact-h2" data-split-words>
            Let's turn data into better decisions — say hello.
          </h2>

          <div className="contact-actions fade-up">
            <button data-magnetic className="email-btn" onClick={copy}>
              <span className="email-text">{email}</span>
              <span className="email-cta mono">{copied ? '✓ COPIED' : 'COPY →'}</span>
            </button>
          </div>

          <div className="contact-links fade-up">
            {links.map(l => (
              <a key={l.l} href={l.u} target="_blank" rel="noopener" data-magnetic className="contact-link">
                <span className="contact-link-l">{l.l}</span>
                <span className="contact-link-arrow">↗</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;