const EXPERTISE = [
  { id: '01', title: 'Network & Infrastructure', desc: 'Cisco IOS-XR and Juniper JunOS at scale — BGP, MPLS, CMTS, OLT, DWDM, IPv6, CGNAT, and BNG across access, core, and service layers.' },
  { id: '02', title: 'AIOps & Analytics', desc: 'Real-time flow analytics on Kafka, ClickHouse, and PostgreSQL; IPFIX/NetFlow and SNMP pipelines; Prophet-based forecasting for capacity and demand.' },
  { id: '03', title: 'Development', desc: 'Python and Flask services, REST APIs, and D3.js dashboards that turn telemetry into something a VP can act on in one meeting.' },
  { id: '04', title: 'Security', desc: 'Building working knowledge of firewall architecture and policy (Fortigate, Palo Alto, SonicWall) to design network access with security as a first-class constraint, not an afterthought.' },
]

export function renderExpertise() {
  const rows = EXPERTISE.map(item => `
    <div class="expertise-row reveal">
      <p class="expertise-id"><span class="expertise-dot"></span>${item.id}</p>
      <h3 class="expertise-title">${item.title}</h3>
      <p class="expertise-desc">${item.desc}</p>
    </div>
  `).join('')

  return `
    <section class="expertise" id="expertise">
      <div class="container">
        <span class="section-kicker">Areas of Expertise</span>
        ${rows}
      </div>
    </section>

    <style>
      .expertise { padding: 64px 0; }
      .section-kicker {
        display: block;
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 24px;
      }
      .expertise-row {
        display: grid;
        grid-template-columns: minmax(48px, 120px) minmax(0, 300px) minmax(0, 1fr);
        gap: 24px;
        align-items: baseline;
        padding: 28px 0;
        border-top: 2px solid var(--border-strong);
      }
      .expertise-id {
        font-family: var(--font-sans);
        font-weight: 800;
        font-size: 0.9rem;
        position: relative;
        padding-left: 20px;
      }
      .expertise-dot {
        position: absolute;
        left: 0;
        top: 6px;
        width: 10px;
        height: 10px;
        background: var(--accent);
      }
      .expertise-title { font-size: 1.35rem; }
      .expertise-desc { font-size: 0.95rem; line-height: 1.6; color: var(--muted-2); max-width: 52ch; }
      @media (max-width: 720px) {
        .expertise-row { grid-template-columns: 1fr; gap: 8px; }
      }
    </style>
  `
}