/* ============================================================
   TECH — marquee + categorized grid
   ============================================================ */

function Marquee({ items, reverse = false }) {
  const doubled = [...items, ...items];
  return (
    <div className="marquee-wrap">
      <div className={"marquee " + (reverse ? "reverse" : "")}>
        {doubled.map((t, i) => (
          <span key={i} className="marq-item">
            <span className="sym">◆</span>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
}

function TechSection() {
  const cats = [
    { name: "languages",  list: TECH.languages,  n: "01" },
    { name: "frameworks", list: TECH.frameworks, n: "02" },
    { name: "databases",  list: TECH.databases,  n: "03" },
    { name: "cloud/devops", list: TECH.cloud,    n: "04" },
  ];
  return (
    <section data-screen-label="tech">
      <PromptRow cmd="skills" flags={["--list", "--verbose"]} comment="stack & tooling" />
      <SectionHeader hash="03" title="tech stack" subtitle="what I reach for, roughly in order of use." />

      <Marquee items={TECH_FLAT} />
      <Marquee items={TECH_FLAT.slice().reverse()} reverse />

      <div className="tech-grid">
        {cats.map(c => (
          <div key={c.name} className="tech-cat">
            <div className="head">
              <span>{c.name}</span>
              <span className="n">{c.n}</span>
            </div>
            <div className="list">
              {c.list.map(t => <span key={t} className="t">{t}</span>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function LanguagesSection() {
  const [ref, inView] = useInView();
  return (
    <section data-screen-label="languages" ref={ref}>
      <PromptRow cmd="locale" flags={["--human"]} comment="spoken languages" />
      <SectionHeader hash="04" title="languages" />
      <div className="lang-list">
        {LANGUAGES.map((l, i) => (
          <div key={l.name} className="lang-row">
            <span className="name">{l.name}</span>
            <div className="bar-wrap">
              {inView && (
                <div
                  className="bar-fill"
                  style={{
                    width: `${l.value * 100}%`,
                    animationDelay: `${i * 120}ms`,
                  }}
                />
              )}
            </div>
            <span className="level">{l.level}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

function EducationSection() {
  return (
    <section data-screen-label="education">
      <PromptRow cmd="cat" flags={["education.md"]} />
      <SectionHeader hash="05" title="education" />
      <div className="edu">
        {EDUCATION.map((e, i) => (
          <div key={i} className="edu-card">
            <div className="deg">{e.degree}</div>
            <div className="sch">{e.school}</div>
            <div className="note">{e.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { TechSection, LanguagesSection, EducationSection });