const STATS = [
  { num: '20+', label: 'Years in ISP network engineering' },
  { num: '8-figure', label: 'Core CapEx guided by forecasting models, annually' },
  { num: 'Multiple', label: 'Monitoring, analytics, and DevOps initiatives led in current portfolio' },
  { num: '2', label: 'AI use cases shipped to production' },
]

export function renderHero() {
  const stats = STATS.map(s => `
    <div class="stat">
      <p class="stat-num">${s.num}</p>
      <p class="stat-label">${s.label}</p>
    </div>
  `).join('')

  return `
    <section class="hero">
      <div class="container">
        <span class="hero-kicker reveal">Network Infrastructure &amp; AIOps Consulting</span>
        <h1 class="hero-title reveal">No job is impossible.<br/>You just have to start.</h1>
        <p class="hero-sub reveal">
          I've built my career in tight-budget, high-expectation environments — the kind of terrain that
          forces you to be agile, pragmatic, and all-in when it counts. That's why when something gets
          handed to me, people already expect it to get done.
        </p>
        <div class="hero-cta reveal">
          <a class="btn btn-primary" href="#contact">Start a conversation</a>
          <a class="btn btn-secondary" href="https://www.linkedin.com/in/carlos-lugo-4319b932/" target="_blank" rel="noopener">LinkedIn ↗</a>
          <span class="tag tag-outline">Puerto Rico</span>
        </div>
      </div>
    </section>

    <section class="stats">
      <div class="container stats-grid reveal">
        ${stats}
      </div>
    </section>

    <style>
      .hero { padding: 96px 0 56px; }
      .hero-kicker {
        display: block;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 16px;
      }
      .hero-title {
        font-size: clamp(2.4rem, 5vw, 4rem);
        line-height: 1.1;
        letter-spacing: -0.02em;
        max-width: 22ch;
      }
      .hero-sub {
        font-size: 1.1rem;
        line-height: 1.6;
        max-width: 62ch;
        color: var(--muted-2);
        margin-top: 24px;
      }
      .hero-cta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: center;
        margin-top: 32px;
      }

      .stats { padding: 0 0 64px; }
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 32px 24px;
        border-top: 2px solid var(--border-strong);
        padding-top: 32px;
      }
      @media (max-width: 720px) {
        .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      }
      .stat-num {
        font-family: var(--font-sans);
        font-weight: 800;
        font-size: clamp(1.6rem, 3vw, 2.4rem);
        color: var(--accent);
      }
      .stat-label {
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--muted-2);
        margin-top: 8px;
        max-width: 20ch;
      }
    </style>
  `
}