// SkillsKit — "Inventaire de l'aventurier" / explorer's kit-bag layout
// Three columns ("trousses") on cream paper, each item is a row with: glyph, label,
// a hand-drawn measuring tape gauge (years/level), and a small annotation.
// More journal-like, more aventure, less "boîte d'icônes".

const KIT = {
  intro: {
    title: "Inventaire",
    subtitle: "État du sac à dos · vérifié le 30 avril 2026",
    note: "Tout ce que j'emporte sur le terrain — outils, langues, méthodes — avec leur usure et leur niveau de maîtrise.",
    stats: [
      { k: "OUTILS", v: "16" },
      { k: "ANNÉES", v: "4" },
    ],
  },
  bags: [
    {
      tag: "TROUSSE A",
      title: "Langages",
      caption: "Le pas de base",
      items: [
        { g: "</>", n: "HTML",       note: "structure et sémantique" },
        { g: "✦",  n: "CSS",         note: "design, animations, responsive" },
        { g: "{}",  n: "JavaScript", note: "ES6+, vanilla et modules" },
        { g: "🐘", n: "PHP",         note: "POO, web back-end" },
        { g: "#",  n: "C#",          note: "Blazor et apps .NET" },
        { g: "{}", n: "Java",        note: "POO, projets pédagogiques" },
      ],
    },
    {
      tag: "TROUSSE B",
      title: "Frameworks & CMS",
      caption: "Tente, feu, base de données",
      items: [
        { g: "⚛", n: "React",        note: "SPA, hooks, JSX" },
        { g: "◇", n: "Symfony",      note: "MVC, Doctrine, services" },
        { g: "▲", n: "Laravel",      note: "Eloquent, Blade, API" },
        { g: "▶", n: "Express.js",   note: "API REST sur Node" },
        { g: "◈", n: "Blazor",       note: "C# côté client/serveur" },
        { g: "≡", n: "WordPress",    note: "CMS, thèmes, plugins" },
      ],
    },
    {
      tag: "TROUSSE C",
      title: "BDD & Gestion",
      caption: "Données et méthode",
      items: [
        { g: "⛁", n: "SQL",            note: "requêtes et modélisation" },
        { g: "⛂", n: "PostgreSQL",       note: "relationnel avancé" },
        { g: "⛃", n: "SQL Server (SSMS)", note: "requêtes et procédures" },
        { g: "⎇", n: "Git",              note: "branches et workflow" },
        { g: "↧", n: "GitHub",           note: "collaboration et CI/CD" },
        { g: "↻", n: "Méthode Agile",    note: "Scrum-ban, kanban" },
      ],
    },
  ],
  langs: [
    { n: "Français",  lvl: 5, note: "langue maternelle" },
    { n: "Anglais",   lvl: 4, note: "B2 — lecture, écriture, échanges techniques" },
    { n: "Espagnol",  lvl: 2, note: "A2 — bases" },
  ],
};

function Gauge({ value }) {
  // 5-segment hand-drawn measuring tape
  return (
    <div className="vsk-gauge" role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={5}>
      {[1,2,3,4,5].map(i => (
        <span key={i} className={i <= value ? "tick on" : "tick"}>
          <span className="tick-num">{i}</span>
        </span>
      ))}
    </div>
  );
}

function KitItem({ it }) {
  return (
    <li className="vsk-item">
      <span className="vsk-glyph" aria-hidden="true">{it.g}</span>
      <div className="vsk-row">
        <div className="vsk-row-1">
          <span className="vsk-name">{it.n}</span>
        </div>
        <span className="vsk-note">« {it.note} »</span>
      </div>
    </li>
  );
}

function SkillsKit() {
  return (
    <section className="vm-skills-kit" id="competences" data-screen-label="04 Compétences">
      <div className="vm-section-head">
        <div className="vm-section-km"><span className="vm-section-num">02</span>KM 02 · ÉTAPE 2 / 04</div>
        <div className="vm-section-meta">
          <span>3 TROUSSES</span>
          <span>15 OUTILS</span>
          <span>VÉRIFIÉ · 30.04.26</span>
        </div>
      </div>

      <h2 className="vm-section-title">Inventaire <em>du sac.</em></h2>

      <div className="vsk-intro">
        <p>
          L'inventaire complet du sac : <strong>trois trousses</strong> — langages,
          frameworks, bases de données & méthode.
          Pour chaque outil, j'indique mon niveau de maîtrise et une courte note d'usage.
        </p>
        <dl className="vsk-stats">
          {KIT.intro.stats.map(s => (
            <div key={s.k}><dt>{s.k}</dt><dd>{s.v}</dd></div>
          ))}
        </dl>
      </div>

      {/* main inventory grid */}
      <div className="vsk-grid">
        {KIT.bags.map((bag, i) => (
          <article className="vsk-bag" key={bag.tag} data-idx={i}>
            <header className="vsk-bag-head">
              <span className="vsk-bag-tag">{bag.tag}</span>
              <h3>{bag.title}</h3>
              <span className="vsk-bag-caption">{bag.caption}</span>
            </header>
            <ul className="vsk-list">
              {bag.items.map(it => <KitItem key={it.n} it={it} />)}
            </ul>
            <footer className="vsk-bag-foot">
              <span className="vsk-stamp">VÉRIFIÉ</span>
              <span className="vsk-bag-num">0{i+1} / 03</span>
            </footer>
          </article>
        ))}
      </div>
    </section>
  );
}

window.SkillsKit = SkillsKit;