// Contact — one clear ask. Email copy interaction. Then quiet footer.
function Contact() {
  const [copied, setCopied] = React.useState(false);
  const email = 'hello@matthewgrote.com';
  const copy = () => {
    navigator.clipboard?.writeText(email).catch(() => {});
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };
  return (
    <section id="contact" style={{ padding: 'var(--space-32) 0 var(--space-24)', position: 'relative', isolation: 'isolate' }}>
      {/* faint glow to echo the hero */}
      <div style={{
        position: 'absolute', zIndex: -1, top: '20%', left: '50%', transform: 'translateX(-50%)',
        width: 560, height: 360, background: 'var(--glow-silver)', filter: 'blur(110px)', opacity: 0.08, pointerEvents: 'none',
      }} />
      <div className="narrow" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 26, textAlign: 'center' }}>
        <span className="t-mono" style={{ fontFamily: 'var(--font-body)' }}>Contact</span>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600, margin: 0,
          fontSize: 'clamp(1.7rem, 3.2vw, 2.5rem)', lineHeight: 1.32, letterSpacing: '-0.005em',
          color: 'var(--color-ink)', textWrap: 'balance',
        }}>
          Want to work together?<br /><span style={{ fontStyle: 'italic', color: 'var(--accent-strong)' }}>Let's meet.</span>
        </h2>
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center', marginTop: 14 }}>
          <a className="btn-primary" href="https://cal.com/matthew-grote-riqgua/30min" style={{ fontSize: 19, padding: '1.2rem 2.6rem' }}>Book a call</a>
          <a className="btn-ghost" href="https://www.linkedin.com/in/matthew-grote/" target="_blank" rel="noopener" style={{ fontSize: 19, padding: '1.2rem 2.6rem' }}>Connect on LinkedIn</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ padding: 'var(--space-16) 0 var(--space-24)' }}>
      <div className="container" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}>
        <hr className="divider" style={{ width: '100%' }} />
        <span style={{ fontSize: 13, color: 'var(--color-ink-subtle)' }}>© 2026 Matthew T. Grote</span>
      </div>
    </footer>
  );
}
window.Contact = Contact;
window.Footer = Footer;