// Tech stack using real Simple Icons via CDN.
// simpleicons.org — 3000+ verified brand SVG logos.

const TECH_STACK = [
  {
    group: "Languages",
    items: [
      { name: "Python",      slug: "python",     color: "#3776AB" },
      { name: "TypeScript",  slug: "typescript", color: "#3178C6" },
      { name: "JavaScript",  slug: "javascript", color: "#F7DF1E" },
      { name: "Solidity",    slug: "solidity",   color: "#363636" },
      { name: "PostgreSQL",  slug: "postgresql", color: "#4169E1" }
    ]
  },
  {
    group: "ML / AI",
    items: [
      { name: "PyTorch",      slug: "pytorch",     color: "#EE4C2C" },
      { name: "HuggingFace",  slug: "huggingface", color: "#FFD21E" },
      { name: "NumPy",        slug: "numpy",       color: "#013243" },
      { name: "Pandas",       slug: "pandas",      color: "#150458" },
      { name: "scikit-learn", slug: "scikitlearn", color: "#F7931E" },
      { name: "Cohere",       slug: "cohere",      color: "#39594D" }
    ]
  },
  {
    group: "Frontier Models",
    items: [
      { name: "Kimi K2.5",       text: "Kimi",    color: "#1f2937" },
      { name: "DeepSeek V3.2",   text: "DeepSeek",color: "#4D6BFE" },
      { name: "Qwen 3.5+",       text: "Qwen",    color: "#615CED" },
      { name: "MiniMax M2.1",    text: "MiniMax", color: "#F26D6D" },
      { name: "GLM 4.7",         text: "GLM",     color: "#0b6efd" },
      { name: "Anthropic",       slug: "anthropic", color: "#191919" }
    ]
  },
  {
    group: "Web / Backend",
    items: [
      { name: "React",         slug: "react",         color: "#61DAFB" },
      { name: "Vite",          slug: "vite",          color: "#646CFF" },
      { name: "Tailwind CSS",  slug: "tailwindcss",   color: "#06B6D4" },
      { name: "FastAPI",       slug: "fastapi",       color: "#009688" },
      { name: "Node.js",       slug: "nodedotjs",     color: "#5FA04E" },
      { name: "Framer Motion", slug: "framer",        color: "#0055FF" }
    ]
  },
  {
    group: "Cloud / Infra",
    items: [
      { name: "AWS",          slug: "amazonwebservices", color: "#FF9900" },
      { name: "Amazon S3",    slug: "amazons3",          color: "#569A31" },
      { name: "Amazon RDS",   slug: "amazonrds",         color: "#527FFF" },
      { name: "CloudFront",   slug: "amazoncloudfront",  color: "#8C4FFF" },
      { name: "Docker",       slug: "docker",            color: "#2496ED" },
      { name: "GitHub",       slug: "github",            color: "#181717" }
    ]
  },
  {
    group: "Methods / Protocols",
    items: [
      { name: "Sparse Autoencoders", text: "SAE",     color: "#8b5cf6" },
      { name: "LoRA / PEFT",         text: "LoRA",    color: "#6366F1" },
      { name: "GRPO",                text: "GRPO",    color: "#F59E0B" },
      { name: "Contrastive",         text: "Contrast",color: "#14B8A6" },
      { name: "MCP",                 text: "MCP",     color: "#D97757" },
      { name: "RAG",                 text: "RAG",     color: "#0ea5e9" }
    ]
  }
];

function TechTile({ item }) {
  const hasIcon = !!item.slug;
  return (
    <div className="tech-tile" style={{ "--tile-color": item.color }}>
      <div className="tech-tile-icon">
        {hasIcon ? (
          <img
            src={`https://cdn.simpleicons.org/${item.slug}/${item.color.replace("#", "")}`}
            alt={item.name}
            width="22"
            height="22"
            loading="lazy"
            onError={(e) => { e.target.style.display = "none"; e.target.nextSibling.style.display = "flex"; }}
          />
        ) : null}
        <div
          className="tech-tile-fallback"
          style={{
            background: item.color,
            color: "#fff",
            display: hasIcon ? "none" : "flex"
          }}
        >
          {(item.text || item.name.slice(0, 2)).slice(0, 4)}
        </div>
      </div>
      <div className="tech-tile-name">{item.name}</div>
    </div>
  );
}

function TechStack() {
  return (
    <div className="tech-v2">
      {TECH_STACK.map((section, idx) => (
        <div key={section.group} className="tech-section">
          <div className="tech-section-head">
            <span className="tech-section-num mono">{String(idx + 1).padStart(2, "0")}</span>
            <span className="tech-section-label mono">{section.group}</span>
            <span className="tech-section-count mono">{section.items.length}</span>
            <span className="tech-section-rule" />
          </div>
          <div className="tech-grid">
            {section.items.map(item => <TechTile key={item.name} item={item} />)}
          </div>
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { TechStack });