// waiv-collection.jsx — draggable gallery of the real waiv product range.
// Images are pulled live from getwaiv.com; each card has a tuned gradient
// fallback (shown if the photo can't load) so the section never looks broken.

const WAIV_PRODUCTS = [
  { name: 'Midnight Gold', cat: 'Standard', price: '₹899', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Midnight-Gold-Standard-Networking-Card.webp', grad: 'linear-gradient(150deg,#0a1730,#23386a 55%,#05040c)', glow: '#caa45a', sub: 'Navy metal · gold leaf' },
  { name: 'Scarlet', cat: 'Custom', price: '₹1,249', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Scarlet-custom-networking-card-895x1024.webp', grad: 'linear-gradient(150deg,#2a0608,#8c1117 55%,#1a0305)', glow: '#e3454d', sub: 'Fully bespoke print' },
  { name: 'Sphinx', cat: 'Custom', price: '₹1,249', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Sphinx-Gold-custom-networking-card-895x1024.webp', grad: 'linear-gradient(150deg,#2a2310,#9c7e34 55%,#16110a)', glow: '#d8b256', sub: 'Brushed gold' },
  { name: 'Sea Frost', cat: 'Custom', price: '₹1,249', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Sea-Frost-Custom-Networking-Card.webp', grad: 'linear-gradient(150deg,#9fc4cd,#eef6f8 50%,#86acb6)', glow: '#bfe0e6', sub: 'Frosted steel', light: true },
  { name: 'Sapphire', cat: 'Standard', price: '₹899', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Sapphire-Standard-Networking-Card-scaled.webp', grad: 'linear-gradient(150deg,#06143f,#2554c4 55%,#040d2b)', glow: '#4f86ff', sub: 'Electric blue metal' },
  { name: 'Onyx', cat: 'Standard', price: '₹899', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Onyx-Standard-Networking-Card.webp', grad: 'linear-gradient(150deg,#0a0a0c,#34363c 55%,#060608)', glow: '#7d818c', sub: 'Matte black' },
  { name: 'Bumblebee', cat: 'Custom', price: '₹1,249', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Bumblebee-Custom-Networking-Card-895x1024.webp', grad: 'linear-gradient(150deg,#241c02,#caa207 55%,#15100a)', glow: '#ffd527', sub: 'Signal yellow' },
  { name: 'Cobalt Waves', cat: 'Standard', price: '₹899', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Cobalt-Waves-Standard-Networking-Card.webp', grad: 'linear-gradient(150deg,#04122f,#1f57b8 55%,#03102c)', glow: '#3f7bff', sub: 'Rippled cobalt' },
  { name: 'Heritage Cruiser', cat: 'Standard', price: '₹899', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Heritage-Cruiser-Standard-Networking-Card.webp', grad: 'linear-gradient(150deg,#26220f,#7a6838 55%,#15110a)', glow: '#c4a85e', sub: 'Vintage olive · gold' },
  { name: 'Obsidian', cat: 'Standard', price: '₹899', img: 'https://getwaiv.com/wp-content/uploads/2023/08/Obsidian-Standard-Networking-Card-895x1024.webp', grad: 'linear-gradient(150deg,#0a0712,#2e2540 55%,#070510)', glow: '#8b6fd0', sub: 'Volcanic black' },
  { name: 'Ivory', cat: 'Custom', price: '₹1,249', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Ivory-Custom-Networking-Card.webp', grad: 'linear-gradient(150deg,#cfc6b4,#f7f2e6 50%,#bdb29c)', glow: '#ece2cf', sub: 'Warm ivory', light: true },
  { name: 'Monochrome', cat: 'Custom', price: '₹1,249', img: 'https://getwaiv.com/wp-content/uploads/2023/09/Monochrome-Custom-Networking-Card.webp', grad: 'linear-gradient(150deg,#101013,#46484e 55%,#0a0a0c)', glow: '#9a9da6', sub: 'Greyscale custom' },
];

function Collection() {
  const vpRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const barRef = React.useRef(null);
  const [bounds, setBounds] = React.useState({ min: 0, ratio: 1 });
  const off = React.useRef(0);
  const drag = React.useRef(null);
  const STEP = 296 + 26;

  const apply = (smooth) => {
    const t = trackRef.current; if (!t) return;
    t.style.transition = smooth ? 'transform .5s cubic-bezier(.2,.7,.3,1)' : 'none';
    t.style.transform = `translate3d(${off.current}px,0,0)`;
    if (barRef.current && bounds.min < 0) {
      barRef.current.style.left = (off.current / bounds.min) * (100 - bounds.ratio * 100) + '%';
    }
  };

  const measure = () => {
    const vp = vpRef.current, t = trackRef.current; if (!vp || !t) return;
    const min = Math.min(0, vp.clientWidth - t.scrollWidth);
    const ratio = Math.min(1, vp.clientWidth / t.scrollWidth);
    setBounds({ min, ratio });
    off.current = Math.max(min, off.current);
    apply(false);
  };

  React.useEffect(() => {
    const id = setTimeout(measure, 60);
    window.addEventListener('resize', measure);
    return () => { clearTimeout(id); window.removeEventListener('resize', measure); };
  }, []);
  React.useEffect(() => { apply(false); }, [bounds]);

  const clampOff = (v) => Math.max(bounds.min, Math.min(0, v));
  const nudge = (dir) => { off.current = clampOff(off.current - dir * STEP * 1.4); apply(true); };

  // pointer drag
  const onDown = (e) => {
    drag.current = { x: e.clientX, start: off.current, moved: false };
    vpRef.current.classList.add('is-drag');
  };
  const onMove = (e) => {
    if (!drag.current) return;
    const dx = e.clientX - drag.current.x;
    if (Math.abs(dx) > 3) drag.current.moved = true;
    off.current = clampOff(drag.current.start + dx);
    apply(false);
  };
  const onUp = () => { if (drag.current) { drag.current = null; vpRef.current.classList.remove('is-drag'); } };
  const onWheel = (e) => {
    if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
      off.current = clampOff(off.current - e.deltaX); apply(false);
    }
  };

  React.useEffect(() => {
    window.addEventListener('pointermove', onMove);
    window.addEventListener('pointerup', onUp);
    return () => { window.removeEventListener('pointermove', onMove); window.removeEventListener('pointerup', onUp); };
  });

  return (
    <section className="coll" id="cards">
      <div className="coll-head">
        <div className="wv-sec-head" data-reveal>
          <div className="wv-kicker"><span className="wv-kicker-mark" />THE COLLECTION</div>
          <h2 className="wv-sec-title">Pick a card people <em>won’t put down.</em></h2>
          <p className="wv-sec-lede">Standard finishes ship in days. Custom cards are printed to your exact design — same secure chip inside every one. Drag to explore the range.</p>
        </div>
        <div className="coll-arrows" data-reveal data-reveal-delay="1">
          <button className="coll-arrow" onClick={() => nudge(-1)} aria-label="Previous">
            <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" /></svg>
          </button>
          <button className="coll-arrow" onClick={() => nudge(1)} aria-label="Next">
            <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" /></svg>
          </button>
        </div>
      </div>

      <div className="coll-viewport" ref={vpRef} onPointerDown={onDown} onWheel={onWheel} data-reveal data-reveal-delay="1">
        <div className="coll-track" ref={trackRef}>
          {WAIV_PRODUCTS.map((p, i) => (
            <div className="coll-card" key={i}>
              <div className="coll-shot" style={{ background: p.grad }}>
                <span className="coll-shot-glow" style={{ background: `radial-gradient(closest-side, ${p.glow}88, transparent 70%)` }} />
                <div className={`coll-fallback ${p.light ? 'is-light' : ''}`}>
                  <span className="coll-fb-mark">waiv</span>
                  <span className="coll-fb-name">{p.name}</span>
                </div>
                <span className={`coll-tag ${p.cat === 'Custom' ? 'is-custom' : ''}`}>{p.cat}</span>
                <img className="coll-img" src={p.img} alt={`${p.name} waiv card`} draggable="false"
                  referrerPolicy="no-referrer" decoding="async"
                  onError={(e) => { e.target.style.display = 'none'; }} />
              </div>
              <div className="coll-meta">
                <h3 className="coll-name">{p.name}</h3>
                <span className="coll-price">{p.price}</span>
              </div>
              <p className="coll-sub">{p.sub}</p>
            </div>
          ))}
        </div>
      </div>

      <div className="coll-progress">
        <div className="coll-progress-bar" ref={barRef} style={{ width: (bounds.ratio * 100) + '%' }} />
      </div>
    </section>
  );
}

window.Collection = Collection;