import styles from './Contact.module.scss';

export default function Contact() {
  return (
    <section id="contact" className={styles.contact}>
      <div className={styles.inner}>
        <div className={styles.header}>
          <span className={styles.sectionNum}>03.</span>
          <h2 className={styles.sectionTitle}>Get in touch</h2>
          <div className={styles.line} />
        </div>

        <div className={styles.body}>
          <p className={styles.lede}>
            Whether you have a project in mind, a question, or just want to talk
            shop — my inbox is open. I'm reasonably fast at responding, unless
            it's a Monday.
          </p>

          <a
            href="mailto:hello@example.com"
            className={styles.emailBtn}
          >
            Say hello ↗
          </a>

          <ul className={styles.socials}>
            {[
              { label: 'GitHub', href: 'https://github.com' },
              { label: 'LinkedIn', href: 'https://linkedin.com' },
              { label: 'Twitter / X', href: 'https://x.com' },
            ].map(({ label, href }) => (
              <li key={label}>
                <a href={href} target="_blank" rel="noreferrer">
                  {label}
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}