// Contact section
const Contact = () => {
  const [ref, visible] = window.useReveal();
  const data = window.PORTFOLIO_DATA;

  return (
    <section id="contact" className="contact">
      <div className="glow glow-amber" style={{ width: 500, height: 500, bottom: -100, left: "50%", transform: "translateX(-50%)" }}></div>
      <div className="container">
        <div ref={ref} className={`reveal ${visible ? "visible" : ""}`}>
          <div className="contact-prefix">// 05. let's_build_something</div>
          <h2 className="contact-title">
            Got a project<br />
            <span className="accent">worth shipping?</span>
          </h2>
          <p className="contact-text">
            I'm currently open to <strong style={{ color: "var(--text)" }}>freelance projects</strong> and
            <strong style={{ color: "var(--text)" }}> full-time roles</strong> where I can help teams
            build distributed systems that don't crumble under traffic. The fastest way to reach me
            is email — I usually respond within 24 hours.
          </p>
          <div className="contact-actions">
            <a href={`mailto:${data.email}`} className="btn btn-primary">
              <window.Icon name="mail" size={15} />
              Say hello
            </a>
            <a href={data.linkedin} target="_blank" rel="noreferrer" className="btn btn-ghost">
              <window.Icon name="linkedin" size={15} />
              Connect on LinkedIn
              <window.Icon name="arrowUpRight" size={13} />
            </a>
          </div>
          <div className="contact-channels">
            <a href={`mailto:${data.email}`} className="contact-channel">
              <window.Icon name="mail" />
              {data.email}
            </a>
            <a href={data.github} target="_blank" rel="noreferrer" className="contact-channel">
              <window.Icon name="github" />
              github.com/{data.handle}
            </a>
            <a href={data.linkedin} target="_blank" rel="noreferrer" className="contact-channel">
              <window.Icon name="linkedin" />
              in/{data.handle}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Contact = Contact;