// ============ STACK CONSTELLATION ============
function Stack() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  // pre-compute positions: cluster by category in zones, with jitter
  const positions = React.useMemo(() => {
    const zones = {
      Lang:     { cx: 18, cy: 30 },
      Frontend: { cx: 45, cy: 22 },
      AI:       { cx: 75, cy: 35 },
      Backend:  { cx: 70, cy: 70 },
      DevOps:   { cx: 40, cy: 78 },
      HW:       { cx: 12, cy: 70 },
      Tools:    { cx: 50, cy: 50 }
    };
    const out = {};
    const counts = {};
    window.STACK.forEach(s => { counts[s.cat] = (counts[s.cat] || 0) + 1; });
    const idx = {};
    return window.STACK.map((s, i) => {
      const zone = zones[s.cat] || { cx: 50, cy: 50 };
      idx[s.cat] = (idx[s.cat] || 0);
      const k = idx[s.cat]; idx[s.cat]++;
      const n = counts[s.cat];
      const angle = (k / n) * Math.PI * 2 + (i * 0.7);
      const radius = 10 + (k % 2) * 6;
      const x = zone.cx + Math.cos(angle) * radius;
      const y = zone.cy + Math.sin(angle) * radius * 0.7;
      return { x: Math.max(2, Math.min(90, x)), y: Math.max(4, Math.min(92, y)), delay: i * 0.12 };
    });
  }, []);

  return (
    <section id="stack" ref={ref}>
      <div className="container">
        <div className="fade-up">
          <span className="kicker">{t.stack.kicker}</span>
          <h2 className="section-title">{t.stack.h2}</h2>
        </div>
        <div className="stack-wrap fade-up d1">
          {window.STACK.map((s, i) => (
            <div
              key={s.name}
              className="stack-node"
              style={{
                left: `${positions[i].x}%`,
                top: `${positions[i].y}%`,
                animationDelay: `${positions[i].delay}s`
              }}
              title={`${s.cat} · ${s.name}`}
              data-hover
            >
              <span className="glyph">{s.name[0]}</span>
              {s.name}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ CAFÉ TEC ============
function Cafe() {
  const { t } = window.useLang();
  const ref = window.useReveal();
  return (
    <section id="cafe" ref={ref}>
      <div className="container">
        <div className="fade-up">
          <span className="kicker">{t.cafe.kicker}</span>
          <h2 className="section-title">{t.cafe.h2}</h2>
        </div>
        <div className="cafe-card glass-strong fade-up d1" style={{marginTop: 30}}>
          <div className="cafe-cover">
            <img src="assets/cafetec.jpg" alt="Café Tecnológico" />
            <div className="ovl" />
            <div className="icon">☕</div>
          </div>
          <div className="cafe-body">
            <span className="kicker">MENSUAL · UAI</span>
            <h3>Café Tecnológico</h3>
            <p style={{color:'var(--muted)', fontSize:16, maxWidth:520}}>{t.cafe.desc}</p>
            <div className="cafe-roles">
              {t.cafe.roles.map((r, i) => <span key={i} className="cafe-role">{r}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Stack = Stack;
window.Cafe = Cafe;