/* Contact.jsx — Section 4: closing CTA */
function Contact() {
  const [copied, setCopied] = React.useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText('zuzana@hrusovska.eu').then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 3000);
    }).catch(() => {
      window.location.href = 'mailto:zuzana@hrusovska.eu';
    });
  };

  const linkedinIcon =
  <svg className="ico" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M6.94 5a2 2 0 11-4-.002 2 2 0 014 .002zM7 8.48H3V21h4V8.48zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.72-2.91l.04-1.68z" />
    </svg>;

  const clipboardIcon =
  <svg className="ico" width="20" height="20" viewBox="0 0 24 24" fill="none">
      <path d="M20 2C21.1046 2 22 2.89543 22 4V16C22 17.1046 21.1046 18 20 18H18V20C18 21.1046 17.1046 22 16 22H4C2.89543 22 2 21.1046 2 20V8C2 6.89543 2.89543 6 4 6H6V4C6 2.89543 6.89543 2 8 2H20ZM4 7.5C3.72386 7.5 3.5 7.72386 3.5 8V20C3.5 20.2761 3.72386 20.5 4 20.5H16C16.2761 20.5 16.5 20.2761 16.5 20V8C16.5 7.72386 16.2761 7.5 16 7.5H4ZM16 6C17.1046 6 18 6.89543 18 8V16.5H20C20.2761 16.5 20.5 16.2761 20.5 16V4C20.5 3.72386 20.2761 3.5 20 3.5H8C7.72386 3.5 7.5 3.72386 7.5 4V6H16Z" fill="currentColor"/>
    </svg>;

  return (
    <div className="contact">
      <div className="contact-eyebrow">Get in touch</div>
      <h2 className="contact-heading">
        Do you want to <mark>chat</mark>? <br />
        Drop me a message
      </h2>
      <div className="contact-ctas">
        <a className="btn primary" href="https://www.linkedin.com/in/zhrusovska-product-design/" target="_blank" rel="noopener noreferrer">{linkedinIcon}<span className="btn-label">LinkedIn</span></a>
        <div className="mail-btn-wrap">
          <button type="button" className={`btn secondary mail-btn${copied ? ' mail-btn--copied' : ''}`} onClick={handleCopy}>
            <span className="btn-label">zuzana@hrusovska.eu</span>
            {clipboardIcon}
          </button>
          <div className={`copied-toast${copied ? ' visible' : ''}`}>Address copied!</div>
        </div>
      </div>
    </div>);

}
window.Contact = Contact;