/* Skills - capabilities grid */

const SKILL_GROUPS = [
  {
    title: "Full-stack & AI engineering",
    sub: "Ship features. Synthesize signal.",
    tags: ["React 18", "TypeScript", "Node.js", "Express", "Vite", "Tailwind v4", "Firebase Functions", "Firestore", "Cloud Run"],
  },
  {
    title: "AI infrastructure",
    sub: "Models, retrieval, guardrails.",
    tags: ["Gemini 2.5 Flash", "Vertex AI embeddings", "OpenAI", "Claude", "RAG pipelines", "Prompt engineering", "Agentic workflows", "DLP / behavioral constraints"],
  },
  {
    title: "Enterprise architecture",
    sub: "System integrations. Identity. Isolation.",
    tags: ["SAML 2.0 / OIDC", "SSO + SCIM", "Bidirectional REST APIs", "Webhooks", "Multi-tenancy", "Backend RBAC", "CMEK / TLS 1.3"],
  },
  {
    title: "Strategic account work",
    sub: "Where I started. Still the lens I design with.",
    tags: ["Multi-stakeholder onboarding", "C-level engagement", "Churn prevention", "Renewal & expansion", "QBR design", "Voice of customer"],
  },
  {
    title: "Enterprise ecosystems",
    sub: "Twelve years of integration footprint.",
    tags: ["Salesforce", "HubSpot", "Zendesk", "Jira", "ServiceNow", "ClickUp", "Gainsight", "Slack", "Zoom", "Datadog", "Workday"],
  },
  {
    title: "How I work",
    sub: "Founder-mode by default.",
    tags: ["Direct customer dev", "Spec-driven shipping", "Daily releases", "Founder check-ins", "Trust > polish", "Write the doc first"],
  },
];

function Skills() {
  return (
    <section id="skills">
      <div className="container">
        <Reveal>
          <div className="section-head">
            <span className="mono">04 / Capabilities</span>
            <h2>Bridging <em>deep enterprise context</em> with the engineering to ship from it.</h2>
          </div>
        </Reveal>

        <div className="skills-grid">
          {SKILL_GROUPS.map((g, i) => (
            <Reveal key={g.title} delay={i * 30}>
              <div className="skill-block">
                <h3 dangerouslySetInnerHTML={{ __html: g.title.replace(/AI/g, "<em>AI</em>") }}></h3>
                <div className="skill-sub">{g.sub}</div>
                <div className="tags">
                  {g.tags.map((t) => (
                    <span className="tag" key={t}>{t}</span>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Skills });