export function renderContact() {
  return `
    <section class="contact" id="contact">
      <div class="container">
        <h2 class="contact-title">Let's build something reliable.</h2>
        <p class="contact-sub">
          I take on select network intelligence, AIOps, and infrastructure consulting engagements —
          reach out if that's what you need.
        </p>
        <div class="contact-cta">
          <a class="btn btn-ghost" href="mailto:lugo.carlos@outlook.com">lugo.carlos@outlook.com</a>
          <a class="btn btn-ghost" href="https://www.linkedin.com/in/carlos-lugo-4319b932/" target="_blank" rel="noopener">LinkedIn ↗</a>
        </div>
      </div>
    </section>

    <style>
      .contact { background: var(--accent); color: var(--bg); padding: 80px 0; }
      .contact-title { font-size: clamp(1.9rem, 4.2vw, 3.2rem); color: var(--bg); margin-bottom: 16px; }
      .contact-sub { font-size: 1rem; max-width: 52ch; color: var(--bg); opacity: 0.9; margin-bottom: 32px; }
      .contact-cta { display: flex; gap: 12px; flex-wrap: wrap; }
      .contact .btn-ghost { color: var(--bg); border: 1px solid var(--bg); padding: 10px 18px; }
      .contact .btn-ghost:hover { background: rgba(255,255,255,0.12); }
    </style>
  `
}