// Tech Stack Showcase — categorized grid of production tools.
// Logos from devicon CDN; falls back to text if asset fails to load.

function TechStack() {
  // Re-render on language change
  const [lang, setLang] = React.useState((window.i18n && window.i18n.lang) || "en");
  React.useEffect(() => {
    if (!window.i18n) return;
    return window.i18n.onChange(setLang);
  }, []);
  const t = (k) => (window.i18n ? window.i18n.t(k) : k);

  // category → tools
  const groups = [
    {
      key: "languages", labelKey: "tech.cat.languages",
      items: [
        ["JavaScript", "javascript"],
        ["TypeScript", "typescript"],
        ["Python", "python"],
        ["Java", "java"],
        ["C++", "cplusplus"],
        ["Swift", "swift"],
        ["Kotlin", "kotlin"],
        ["PHP", "php"],
        ["Dart", "dart"],
        ["Go", "go"],
      ],
    },
    {
      key: "frameworks", labelKey: "tech.cat.frameworks",
      items: [
        ["React", "react"],
        ["Next.js", "nextjs"],
        ["Node.js", "nodejs"],
        ["Flutter", "flutter"],
        ["Laravel", "laravel"],
        ["Express", "express"],
        ["Django", "django"],
        ["React Native", "react"],
        ["Tailwind", "tailwindcss"],
        ["Vue.js", "vuejs"],
      ],
    },
    {
      key: "databases", labelKey: "tech.cat.databases",
      items: [
        ["PostgreSQL", "postgresql"],
        ["MongoDB", "mongodb"],
        ["MySQL", "mysql"],
        ["Redis", "redis"],
        ["Firebase", "firebase"],
        ["Supabase", "supabase"],
        ["SQLite", "sqlite"],
        ["Elasticsearch", "elasticsearch"],
      ],
    },
    {
      key: "cloud", labelKey: "tech.cat.cloud",
      items: [
        ["AWS", "amazonwebservices"],
        ["Google Cloud", "googlecloud"],
        ["Azure", "azure"],
        ["Vercel", "vercel"],
        ["Cloudflare", "cloudflare"],
        ["Docker", "docker"],
        ["Kubernetes", "kubernetes"],
        ["Nginx", "nginx"],
        ["GitHub", "github"],
        ["GitLab", "gitlab"],
      ],
    },
    {
      key: "ai", labelKey: "tech.cat.ai",
      items: [
        ["OpenAI", "openai"],
        ["TensorFlow", "tensorflow"],
        ["PyTorch", "pytorch"],
        ["LangChain", null],
        ["Pinecone", null],
        ["Anthropic", null],
        ["Llama", null],
        ["HuggingFace", null],
      ],
    },
    {
      key: "design", labelKey: "tech.cat.design",
      items: [
        ["Figma", "figma"],
        ["Photoshop", "photoshop"],
        ["Illustrator", "illustrator"],
        ["After Effects", "aftereffects"],
        ["Premiere", "premierepro"],
        ["Blender", "blender"],
        ["Spline", null],
        ["Lottie", null],
      ],
    },
  ];

  // Tools without devicons get a custom inline mark
  const customMarks = {
    "LangChain": "🦜",
    "Pinecone": "⚲",
    "Anthropic": "✦",
    "Llama": "𓃥",
    "HuggingFace": "🤗",
    "Spline": "◯",
    "Lottie": "▲",
  };

  const iconSrc = (slug) =>
    slug ? `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${slug}/${slug}-original.svg` : null;

  // Track image load errors per-tool to switch to text fallback
  const [errored, setErrored] = React.useState({});

  return (
    <section className="s" id="tech">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow eyebrow-dot">{t("tech.eyebrow")}</span>
            <h2>
              {t("tech.h2.l1")}<br/>
              <span className="stroke">{t("tech.h2.l2a")}</span>{" "}
              <span className="accent">{t("tech.h2.l2b")}</span>
              <span className="accent">.</span>
            </h2>
          </div>
          <p className="lead">{t("tech.lead")}</p>
        </div>
        <div className="tech-wrap reveal">
          {groups.map(g => (
            <div className="tech-row" key={g.key}>
              <div className="tech-row-label">
                <span className="tech-row-num">{(groups.indexOf(g)+1+"").padStart(2,"0")}</span>
                <span className="tech-row-name">{t(g.labelKey)}</span>
                <span className="tech-row-line"></span>
                <span className="tech-row-count">{String(g.items.length).padStart(2,"0")}</span>
              </div>
              <div className="tech-row-items">
                {g.items.map(([name, slug], i) => {
                  const key = g.key + ":" + name + ":" + i;
                  const src = iconSrc(slug);
                  const hasError = errored[key];
                  return (
                    <div className="tech-chip" key={key} title={name}>
                      <div className="tech-chip-icon">
                        {src && !hasError ? (
                          <img
                            src={src}
                            alt={name + " logo"}
                            loading="lazy"
                            onError={() => setErrored(s => ({...s, [key]: true}))}
                          />
                        ) : (
                          <span className="tech-chip-glyph">
                            {customMarks[name] || name.slice(0, 1).toUpperCase()}
                          </span>
                        )}
                      </div>
                      <span className="tech-chip-name">{name}</span>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.TechStack = TechStack;