// skills.jsx — "05 / Pit stop". Open pit-lane layout so the scrolling car
// stays visible passing through on the right. No enclosing garage frame.
//
// Composition:
//   · Pit board strip at top (lap-style status row)
//   · "PIT IN" cue tag
//   · A simple stack of labelled chip rows — one per skill group
//   · "PIT OUT" cue tag
// All content is width-capped so the track + scrolling car run down the right.

const PIT_GROUPS = [
{
  num: "01",
  name: "Languages",
  items: ["Python", "JavaScript", "TypeScript", "Java", "C++", "C", "SQL", "HTML / CSS"]
},
{
  num: "02",
  name: "Frameworks",
  items: ["React", "Next.js", "Node.js", "Express", "Tailwind", "Pandas", "NumPy"]
},
{
  num: "03",
  name: "Cloud & infra",
  items: ["AWS", "Docker", "Linux", "Git / GitHub", "CI/CD", "REST APIs"]
},
{
  num: "04",
  name: "Data & DBs",
  items: ["PostgreSQL", "MongoDB", "Redis", "Firebase", "SQL Server"]
},
{
  num: "05",
  name: "Specialties",
  items: ["Algorithms / DSA", "Full-stack", "ML fundamentals", "Embedded C", "Computer vision"]
}];


function SkillsSection() {
  return (
    <section className="section skills" id="skills" data-screen-label="Skills">
      <div className="section-head">
        <div>
          <div className="section-num">05 / SKILLS</div>
          <h2 className="section-title">Pit stop.</h2>
        </div>
        <div className="section-sub">Tools under the hood. The core technologies behind my work.


        </div>
      </div>

      {/* Pit board — thin horizontal status strip */}
      <div className="pit-board" aria-hidden="true">
        <span className="pb-lamp" />
        <span className="pb-label">PIT BOARD</span>
        <span className="pb-sep" />
        <span className="pb-stat">
          <span className="pb-k">Crew</span>
          <span className="pb-v">M. Mikhail</span>
        </span>
        <span className="pb-sep" />
        <span className="pb-stat">
          <span className="pb-k">Stop</span>
          <span className="pb-v">2.4s</span>
        </span>
        <span className="pb-sep" />
        <span className="pb-stat">
          <span className="pb-k">Tools</span>
          <span className="pb-v">29</span>
        </span>
      </div>

      <div className="pit-cue cue-in" aria-hidden="true">
        <span className="cue-arrow">◄</span> PIT IN
      </div>

      <div className="pit-rows">
        {PIT_GROUPS.map((g) =>
        <div className="pit-row" key={g.num}>
            <div className="pit-row-label">
              <span className="pr-num">{g.num}</span>
              <span className="pr-name">{g.name}</span>
            </div>
            <div className="pit-row-items">
              {g.items.map((s) =>
            <span className="pit-chip" key={s}>{s}</span>
            )}
            </div>
          </div>
        )}
      </div>

      <div className="pit-cue cue-out" aria-hidden="true">
        PIT OUT <span className="cue-arrow">►</span>
      </div>
    </section>);

}

window.SkillsSection = SkillsSection;