// Tech stack section — categorized skills with level bars.

function StackMeter({ level }) {
  const segs = 20;
  const active = Math.round((level / 100) * segs);
  return (
    <div className="flex items-center gap-[3px] w-full">
      {Array.from({ length: segs }).map((_, i) => (
        <div
          key={i}
          className="h-[14px] flex-1 rounded-[1px]"
          style={{
            background: i < active ? "var(--accent)" : "rgba(14,21,19,0.08)",
            opacity: i < active ? 0.9 - (i / segs) * 0.25 : 1,
            transition: `all 0.6s cubic-bezier(.2,.8,.2,1) ${i * 30}ms`,
          }}
        />
      ))}
    </div>
  );
}

function StackItem({ item, index }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={index * 0.04}>
      <div
        className="group grid grid-cols-[1fr_auto] items-center gap-6 py-4 hairline-b transition-colors"
        style={{borderColor:"var(--border)"}}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      >
        <div className="min-w-0">
          <div className="flex flex-col gap-0.5">
            <span className="serif text-[24px] md:text-[28px] tracking-[-0.01em] leading-tight">{item.name}</span>
            <span className="mono text-[10.5px] t-dim truncate">{item.note}</span>
          </div>
          <div className="mt-3 max-w-[420px]">
            <StackMeter level={item.level} />
          </div>
        </div>
        <div className="flex items-center gap-4">
          <span className="mono text-[11px] t-mute tabular-nums">{String(item.level).padStart(2,"0")}<span className="t-dim">/100</span></span>
          <Icon name="arrow-right" size={14} className={`transition ${hover ? "t-accent translate-x-0.5" : "t-dim"}`} />
        </div>
      </div>
    </Reveal>
  );
}

function StackGroup({ groupKey, group, items, idx }) {
  const icons = { "lang": "code-2", "viz": "bar-chart-3", "tools": "wrench" };
  const { t } = useT();
  return (
    <div className="col-span-12 lg:col-span-4">
      <Tilt className="rounded-2xl h-full" max={3}>
        <div className="glass rounded-2xl p-6 md:p-7 h-full flex flex-col">
          <div className="flex items-center justify-between">
            <div className="chip"><Icon name={icons[groupKey] || "layers"} size={11} /> {group}</div>
            <span className="mono text-[10px] t-dim">{items.length} {t("stack.skillsSuffix")}</span>
          </div>
          <div className="mt-4">
            {items.map((it, i) => <StackItem key={it.name} item={it} index={i} />)}
          </div>
        </div>
      </Tilt>
    </div>
  );
}

function Stack() {
  const { t } = useT();
  const groups = [
    { key: "lang",  name: t("stack.group.lang"),  items: STACK[0].items },
    { key: "viz",   name: t("stack.group.viz"),   items: STACK[1].items },
    { key: "tools", name: t("stack.group.tools"), items: STACK[2].items },
  ];
  return (
    <section id="stack" className="relative py-28 md:py-36 hairline-t" style={{background:"linear-gradient(180deg, transparent, rgba(34,224,161,0.025), transparent)"}}>
      <div className="max-w-[1320px] mx-auto px-6 md:px-10">
        <Reveal>
          <SectionHeader
            label={t("stack.label")}
            title={<>{t("stack.title.a")} <em className="serif not-italic" style={{color:"var(--accent)"}}>{t("stack.title.em")}</em> {t("stack.title.b")}</>}
            kicker={t("stack.kicker")}
          />
        </Reveal>

        <div className="mt-14 grid grid-cols-12 gap-5 md:gap-6">
          {groups.map((g, i) => <StackGroup key={g.key} groupKey={g.key} group={g.name} items={g.items} idx={i+1} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stack });