// ============================================================
// COLLECTION — Spirits, with filter + 3D tilt hover
// ============================================================

function useTilt() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const img = el.querySelector("img");
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const x = (e.clientX - r.left) / r.width - 0.5;
      const y = (e.clientY - r.top) / r.height - 0.5;
      if (img) img.style.transform = `scale(1.06) translateY(-4px) rotateY(${x * 16}deg) rotateX(${-y * 10}deg)`;
    };
    const onLeave = () => { if (img) img.style.transform = ""; };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
    };
  }, []);
  return ref;
}

function Bottle({ b }) {
  const ref = useTilt();
  return (
    <article className="bottle" ref={ref} data-hover>
      <div className="bottle-media" style={{perspective: "900px"}}>
        {b.tag && <span className="tag">{b.tag}</span>}
        <span className="rarity">{b.rarity}</span>
        <img src={b.img} alt={b.name} style={{transformStyle: "preserve-3d", transition: "transform 320ms cubic-bezier(.2,.7,.1,1)"}} />
      </div>
      <div className="bottle-body">
        <div className="bottle-origin">{b.origin} · {b.year}</div>
        <div className="bottle-name">{b.name}<span className="en">{b.en}</span></div>
        <div className="bottle-notes">
          {b.notes.map((n) => <span key={n} className="bottle-note">{n}</span>)}
        </div>
        <div className="bottle-foot">
          <div className="bottle-price">₩{b.price}<small>PER BOTTLE · {b.abv}</small></div>
          <button className="bottle-order">룸으로 <I.Arrow className="arr" /></button>
        </div>
      </div>
    </article>
  );
}

function Collection() {
  const ref = useReveal();
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("all");

  const filtered = useMemo(() => {
    return BOTTLES.filter((b) => {
      if (cat !== "all" && b.category !== cat) return false;
      if (q) {
        const s = (b.name + b.en + b.origin).toLowerCase();
        if (!s.includes(q.toLowerCase())) return false;
      }
      return true;
    });
  }, [q, cat]);

  return (
    <section className="section reveal" ref={ref} id="collection" data-screen-label="04 Collection">
      <div className="container">
        <div className="section-head">
          <span className="num">— 03</span>
          <h2 className="title">프리미엄 셀러 <span className="en">The Cellar</span></h2>
          <span className="tail">Curated · Sommelier approved</span>
        </div>

        <div className="coll-controls">
          <label className="coll-search">
            <I.Search />
            <input
              type="text"
              placeholder="보틀, 지역, 빈티지 검색..."
              value={q}
              onChange={(e) => setQ(e.target.value)}
            />
          </label>
          <div className="coll-filters">
            {FILTERS.map((f) => (
              <button
                key={f.id}
                className={"coll-chip " + (cat === f.id ? "on" : "")}
                onClick={() => setCat(f.id)}
              >{f.label}</button>
            ))}
          </div>
        </div>

        <div className="coll-grid">
          {filtered.map((b) => <Bottle key={b.id} b={b} />)}
        </div>
        {filtered.length === 0 && (
          <div style={{textAlign:"center", padding:"80px 0", color:"var(--ink-500)"}}>
            <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:28, color:"var(--gold-300)", marginBottom:8}}>Nothing found</div>
            <div style={{fontSize:13, letterSpacing:".2em", textTransform:"uppercase"}}>Try another vintage</div>
          </div>
        )}
      </div>
    </section>
  );
}
window.Collection = Collection;