---
/**
 * SkillGrid.astro
 * ---------------------------------------------------------------------------
 * Renders the spec's three skill tiers (Core Competencies, Technical Stack,
 * Emerging & Exploring) as categorized cards. The spec lists some items as
 * "[Fill in]" for languages/frameworks/tools; those are surfaced as Placeholder
 * slots rather than invented content.
 *
 * Items map to mdi icons for visual texture. The Core tier uses a subtle bar
 * treatment (decorative, not a proficiency claim) to feel like the spec's
 * "visual skill bars" suggestion without implying false metrics.
 */
import Icon from "@components/Icon.astro";
import Placeholder from "@components/layout/Placeholder.astro";

const core = [
  { icon: "cloud", label: "Cloud Architecture & Development" },
  { icon: "cellphone-link", label: "Mobile Application Development" },
  { icon: "server-network", label: "SAP Business Technology Platform (BTP)" },
  { icon: "account-group", label: "Team Leadership & Technical Mentorship" },
  { icon: "translate", label: "Cross-functional Communication" },
];

const emerging = [
  { icon: "chart-line", label: "SAP BTP deep-dive (active expansion)" },
  { icon: "robot", label: "Cutting edge AI-powered development tooling" },
  {
    icon: "cog-refresh",
    label: "Advanced automation and workflow engineering",
  },
];

// Technical stack mixes known items (from spec context) with explicit gaps.
const techStack = [
  {
    icon: "code-braces",
    label: "Languages",
    value:
      "JavaScript, TypeScript, Java, Python, C#, C, SQL, HTML, CSS, and many more.",
    hint: "JavaScript, TypeScript, Java, Python, C#, C, SQL, HTML, CSS, and many more.",
  },
  {
    icon: "cube-outline",
    label: "Frameworks",
    value: "React, Vue, Astro, Flask",
    hint: "Add your primary frameworks here.",
  },
  {
    icon: "microsoft-azure-devops",
    label: "Cloud Platforms",
    value: "SAP BTP, Google Cloud Platform, AWS",
    hint: "List the cloud platforms you ship on.",
  },
  {
    icon: "git",
    label: "Tools",
    value:
      "PostgreSQL, VSCode, Unity, XCode, Android Studio, Git, Gitea, CI/CD pipelines",
    hint: "Add the rest of your toolchain.",
  },
  {
    icon: "brain",
    label: "AI/ML",
    value:
      "Hands-on experience with machine learning frameworks and LLM integration and agent harnesses like ClaudeCode, Hermes, and OpenClaw",
    hint: null,
  },
];
---

<div class="flex flex-col gap-8">
  <!-- Core Competencies -->
  <div class="flex flex-col gap-4">
    <h3 class="font-display" style="color: var(--color-text);">
      Core Competencies
    </h3>
    <ul class="grid gap-3 sm:grid-cols-2">
      {
        core.map((item, i) => (
          <li
            class="reveal card flex items-center gap-3"
            data-reveal
            style={`transition-delay:${i * 60}ms`}
          >
            <span
              class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg"
              style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
              aria-hidden="true"
            >
              <Icon name={item.icon} class="h-5 w-5" />
            </span>
            <span class="text-sm font-medium" style="color: var(--color-text);">
              {item.label}
            </span>
            {/* Decorative bar; intentionally not a % so we never imply false metrics. */}
            <span
              class="ml-auto hidden h-1.5 w-16 overflow-hidden rounded-full sm:block"
              style="background: var(--color-border);"
              aria-hidden="true"
            >
              <span
                class="block h-full w-full"
                style="background: var(--color-accent);"
              />
            </span>
          </li>
        ))
      }
    </ul>
  </div>

  <!-- Technical Stack -->
  <div class="flex flex-col gap-4">
    <h3 class="font-display" style="color: var(--color-text);">Technical Stack</h3>
    <div class="grid gap-4 sm:grid-cols-2">
      {
        techStack.map((item) => (
          <div class="card flex flex-col gap-2">
            <div class="flex items-center gap-3">
              <span
                class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
                style="background: color-mix(in srgb, var(--color-secondary) 18%, transparent); color: var(--color-secondary);"
                aria-hidden="true"
              >
                <Icon name={item.icon} class="h-5 w-5" />
              </span>
              <span
                class="font-sans text-sm font-semibold"
                style="color: var(--color-text);"
              >
                {item.label}
              </span>
            </div>
            {item.value ? (
              <p class="text-sm" style="color: var(--color-text-muted);">
                {item.value}
              </p>
            ) : (
              <Placeholder
                label={item.label}
                hint={item.hint ?? ""}
                class="mt-1"
              />
            )}
          </div>
        ))
      }
    </div>
  </div>

  <!-- Emerging & Exploring -->
  <div class="flex flex-col gap-4">
    <h3 class="font-display" style="color: var(--color-text);">
      Emerging &amp; Exploring
    </h3>
    <ul class="grid gap-3 sm:grid-cols-3">
      {
        emerging.map((item, i) => (
          <li
            class="reveal card flex items-start gap-3"
            data-reveal
            style={`transition-delay:${i * 70}ms`}
          >
            <span
              class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg"
              style="background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent);"
              aria-hidden="true"
            >
              <Icon name={item.icon} class="h-5 w-5" />
            </span>
            <span class="text-sm" style="color: var(--color-text);">
              {item.label}
            </span>
          </li>
        ))
      }
    </ul>
  </div>
</div>