/* global React, Icon */
const { useState: useTechS } = React;

/* Tech stack STAMINEX — logos reales vía Simple Icons CDN (https://cdn.simpleicons.org)
   Cada item lleva `slug` (logo oficial) + `abbr`/`color` como respaldo si el logo no carga. */
const TECH_GROUPS = [
  {
    icon: "code",
    label: "Frontend",
    desc: "Interfaces rápidas, responsivas y mantenibles.",
    items: [
      { slug: "react", abbr: "Re", name: "React", color: "#1f74d6" },
      { slug: "nextdotjs", abbr: "Nx", name: "Next.js", color: "#15202f" },
      { slug: "typescript", abbr: "Ts", name: "TypeScript", color: "#2f74c0" },
      { slug: "tailwindcss", abbr: "Tw", name: "Tailwind CSS", color: "#2aa7c4" },
    ],
  },
  {
    icon: "server",
    label: "Backend",
    desc: "Lógica de negocio y APIs robustas.",
    items: [
      { slug: "nodedotjs", abbr: "No", name: "Node.js", color: "#3f7d3a" },
      { slug: "express", abbr: "Ex", name: "Express", color: "#3f5d80" },
      { slug: "nestjs", abbr: "Ns", name: "NestJS", color: "#c1304b" },
      { slug: "python", abbr: "Py", name: "Python", color: "#356b9c" },
    ],
  },
  {
    icon: "database",
    label: "Datos & nube",
    desc: "Datos seguros, escalables y desplegados en producción.",
    items: [
      { slug: "postgresql", abbr: "Pg", name: "PostgreSQL", color: "#2a5d9c" },
      { slug: "mongodb", abbr: "Mo", name: "MongoDB", color: "#3f7d3a" },
      { slug: "redis", abbr: "Rd", name: "Redis", color: "#c1304b" },
      { slug: "docker", abbr: "Dk", name: "Docker", color: "#1f74d6" },
      { slug: "vercel", abbr: "Vc", name: "Vercel", color: "#15202f" },
    ],
  },
  {
    icon: "bolt",
    label: "Automatización & APIs",
    desc: "Procesos conectados y atención automática de punta a punta.",
    items: [
      { slug: "n8n", abbr: "n8", name: "n8n", color: "#c1304b" },
      { slug: "whatsapp", abbr: "Wa", name: "WhatsApp Cloud API", color: "#1f9d55" },
      { slug: "git", abbr: "Gi", name: "Git", color: "#d8602f" },
      { slug: null, abbr: "Ap", name: "APIs REST", color: "#5d7188" },
      { slug: null, abbr: "Wh", name: "Webhooks", color: "#5d7188" },
    ],
  },
];

/* Chip con logo real + respaldo automático al badge de letras si el CDN falla */
function TechChip({ item }) {
  const [failed, setFailed] = useTechS(false);
  const useLogo = item.slug && !failed;
  return (
    <span className="tech-chip">
      {useLogo ? (
        <span className="tech-chip__logo">
          <img
            src={"https://cdn.simpleicons.org/" + item.slug}
            alt=""
            loading="lazy"
            width="18"
            height="18"
            onError={() => setFailed(true)}
          />
        </span>
      ) : (
        <span className="tech-chip__badge" style={{ background: item.color }}>{item.abbr}</span>
      )}
      {item.name}
    </span>
  );
}

function TechStack() {
  return (
    <section className="section section--soft" id="tecnologia">
      <div className="container">
        <div className="section-head reveal">
          <span className="eyebrow">Tecnología</span>
          <h2 className="section-title">Construido con tecnología<br />moderna y confiable</h2>
          <p className="section-sub">
            Usamos el mismo stack que las grandes plataformas — <b>React</b>, <b>Node.js</b>,
            <b> PostgreSQL</b> y <b>MongoDB</b> — junto a herramientas de automatización como
            <b> n8n</b> y la <b>API oficial de WhatsApp (Cloud API)</b>, para que tu producto sea
            rápido, seguro y fácil de escalar.
          </p>
        </div>

        <div className="tech-grid">
          {TECH_GROUPS.map((g, i) => (
            <div key={g.label} className={"card tech-card reveal d" + ((i % 4) + 1)}>
              <div className="tech-card__head">
                <span className="tech-card__ic"><Icon name={g.icon} size={22} /></span>
                <div>
                  <h3 className="tech-card__title">{g.label}</h3>
                  <p className="tech-card__desc muted">{g.desc}</p>
                </div>
              </div>
              <div className="tech-card__items">
                {g.items.map((it) => (
                  <TechChip item={it} key={it.name} />
                ))}
              </div>
            </div>
          ))}
        </div>

        <p className="tech-note reveal">
          <Icon name="shield" size={16} /> Elegimos cada tecnología según tu proyecto — no
          imponemos herramientas, las adaptamos a lo que tu negocio necesita.
        </p>
      </div>
    </section>
  );
}

window.TechStack = TechStack;