---
import TechIcon from "./TechIcon.astro";
import { stack, softTech, softHuman } from "../data/content";
import { brandColor } from "../lib/techIcons";
---
<section class="section container" id="stack">
  <div class="reveal" style="margin-bottom:36px;">
    <div class="eyebrow">04 / stack</div>
    <h2 class="h2">Stack &amp; compétences</h2>
  </div>

  <div class="reveal stack-grid">
    {stack.map((g) => (
      <div class="stack-group">
        <div class="stack-group-label">{g.label}<span class="stack-group-count">{g.items.length}</span></div>
        <div class="tiles">
          {g.items.map((it) => {
            const c = brandColor(it);
            return (
              <div class="tile" style={c ? `--brand:${c}` : undefined}>
                <TechIcon name={it} /><span class="tile-name">{it}</span>
              </div>
            );
          })}
        </div>
      </div>
    ))}
  </div>

  <div class="reveal soft">
    <div>
      <div class="soft-label">// techniques</div>
      <div class="pills">{softTech.map((s) => <span class="pill">{s}</span>)}</div>
    </div>
    <div>
      <div class="soft-label">// transverses</div>
      <div class="pills">{softHuman.map((s) => <span class="pill">{s}</span>)}</div>
    </div>
  </div>
</section>
