// Tech stack — marquee only
const Stack = () => {
  const [marqueeRef, marqueeVisible] = window.useReveal();
  const data = window.PORTFOLIO_DATA;

  // Duplicate marquee items so the loop is seamless
  const marqueeItems = [...data.marquee, ...data.marquee];

  return (
    <section id="stack" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div className="container">
        <div className={`marquee reveal ${marqueeVisible ? "visible" : ""}`} ref={marqueeRef} style={{ marginTop: 0 }}>
          <div className="marquee-track">
            {marqueeItems.map((item, i) => (
              <div key={i} className="marquee-item">
                <window.Icon name={item.icon} size={20} />
                <span>{item.name}</span>
                <span className="sep">/</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.Stack = Stack;