// flippy-gear.jsx — Psycho Gear carousel (rebuilt: hoodie first, all COMING SOON)

const PsychoGear = () => {
  const items = [
    {
      img: "assets/flippy/17_gear_hoodie.png",
      name: "ARMY HOODIE",
      sub: "FRONT",
    },
    {
      img: "assets/flippy/17b_gear_hoodie_back.png",
      name: "FLIPPY HOODIE",
      sub: "BACK PRINT",
    },
    {
      img: "assets/flippy/13_gear_cap.png",
      name: "OPERATIVE CAP",
      sub: "TACTICAL FIT",
    },
    {
      img: "assets/flippy/14_gear_stay_psycho.png",
      name: "STAY PSYCHO PATCH",
      sub: "STICKER",
    },
    {
      img: "assets/flippy/15_gear_emblem.png",
      name: "REGIMENT EMBLEM",
      sub: "PATCH",
    },
    {
      img: "assets/flippy/02_flippy_emblem.png",
      name: "COMMANDER PATCH",
      sub: "WOVEN",
    },
  ];

  const trackRef = useRef(null);
  const scroll = (dir) => {
    const t = trackRef.current;
    if (!t) return;
    const step = t.clientWidth * 0.65;
    t.scrollBy({ left: dir * step, behavior: "smooth" });
  };

  return (
    <section className="section gear-section" id="gear">
      <div className="gear-shell">
        <Reveal as="aside" className="gear-title-card" dir="right">
          <img
            src="assets/flippy/12_gear_title.png"
            alt="Psycho Gear — visit the store"
            className="gear-title-img"
          />
        </Reveal>

        <div className="gear-carousel">
          <button className="gear-arrow left" onClick={() => scroll(-1)} aria-label="Scroll left">‹</button>
          <div className="gear-track" ref={trackRef}>
            {items.map((it, i) => (
              <Reveal key={i} delay={i * 70} className="gear-card">
                <span className="gear-badge">COMING SOON</span>
                <div className="gear-img">
                  <img src={it.img} alt={it.name} />
                </div>
                <div className="gear-foot">
                  <div className="gear-name-col">
                    <span className="gear-name">{it.name}</span>
                    <span className="gear-sub">{it.sub}</span>
                  </div>
                  <span className="gear-price">SOON</span>
                </div>
              </Reveal>
            ))}
          </div>
          <button className="gear-arrow right" onClick={() => scroll(1)} aria-label="Scroll right">›</button>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { PsychoGear });