// Gallery — paneles diagonales paralelogramo
const GALLERY_ITEMS = [
  { id: 1, cat: 'black-grey', label: 'Serpiente Botánica', src: 'assets/tattoo-01.png' },
  { id: 2, cat: 'black-grey', label: 'Arcángel', src: 'assets/tattoo-02.png' },
  { id: 8, cat: 'black-grey', label: 'Paisaje Guatemalteco', src: 'assets/tattoo-08.png' },
  { id: 3, cat: 'black-grey', label: 'Poseidón', src: 'assets/tattoo-05.png' },
  { id: 9, cat: 'blackwork', label: 'Poseidón Skull', src: 'assets/tattoo-09.png' },
  { id: 4, cat: 'blackwork', label: 'Kraken Oscuro', src: 'assets/tattoo-06.png' },
  { id: 5, cat: 'blackwork', label: 'Medusa', src: 'assets/tattoo-07.png' },
  { id: 6, cat: 'blackwork', label: 'Neo Japonés', src: 'assets/tattoo-04.png' },
  { id: 7, cat: 'fineline', label: 'Tanjiro', src: 'assets/tattoo-03.png' },
];

const CATS = [
  { id: 'all', label: 'Todos' },
  { id: 'black-grey', label: 'Black & Grey' },
  { id: 'blackwork', label: 'Blackwork' },
  { id: 'fineline', label: 'Fineline' },
];

function Gallery() {
  const [filter, setFilter] = useState('all');
  const [lightbox, setLightbox] = useState(null);
  const trackRef = useRef(null);

  const filtered = useMemo(
    () => filter === 'all' ? GALLERY_ITEMS : GALLERY_ITEMS.filter(g => g.cat === filter),
    [filter]
  );

  const scroll = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * 280, behavior: 'smooth' });
  };

  return (
    <section id="portafolio">
      <Reveal><div className="label-tag">Portafolio</div></Reveal>
      <Reveal delay={0.1}>
        <h2 style={{ fontSize: 'clamp(36px, 6vw, 84px)', marginTop: 16, lineHeight: 1 }}>
          Cada tatuaje cuenta <br/>
          <em style={{ color: 'var(--ink-red-bright)' }}>una historia.</em>
        </h2>
      </Reveal>

      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 36, marginBottom: 36, borderBottom: '1px solid rgba(139,0,0,0.25)', paddingBottom: 16 }}>
        {CATS.map(c => (
          <button
            key={c.id}
            onClick={() => setFilter(c.id)}
            className="btn"
            style={{
              padding: '10px 18px', fontSize: 12,
              background: filter === c.id ? 'var(--ink-red)' : 'transparent',
              color: filter === c.id ? 'var(--white)' : 'var(--gray)',
              border: filter === c.id ? '1px solid var(--ink-red)' : '1px solid transparent',
            }}
          >{c.label}</button>
        ))}
      </div>

      {/* Diagonal panels track + side buttons */}
      <div style={{ position: 'relative' }}>
        <button
          onClick={() => scroll(-1)}
          aria-label="Anterior"
          className="diag-arrow diag-arrow-left"
        >
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M15 6l-6 6 6 6"/>
          </svg>
        </button>
        <button
          onClick={() => scroll(1)}
          aria-label="Siguiente"
          className="diag-arrow diag-arrow-right"
        >
          <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M9 6l6 6-6 6"/>
          </svg>
        </button>

        <div ref={trackRef} className="diag-track" style={{
          display: 'flex', gap: 12,
          overflowX: 'auto', overflowY: 'hidden',
          padding: '32px 60px',
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
          scrollbarWidth: 'none',
        }}>
        {filtered.map((item, i) => (
          <motion.div
            key={item.id}
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: i * 0.05 }}
            onClick={() => setLightbox(item)}
            className="diag-panel"
            style={{
              flex: '0 0 auto',
              width: 260,
              height: 480,
              transform: 'skewX(-12deg)',
              marginLeft: i === 0 ? 0 : -20,
              cursor: 'pointer',
              position: 'relative',
              overflow: 'hidden',
              scrollSnapAlign: 'start',
              boxShadow: '0 12px 40px rgba(0,0,0,0.5)',
              border: '1px solid rgba(139,0,0,0.3)',
              background: '#0a0a0a',
            }}
            whileHover={{ y: -8, zIndex: 10 }}
          >
            <div style={{
              position: 'absolute', inset: 0,
              transform: 'skewX(12deg) scale(1.25)',
              transformOrigin: 'center',
            }}>
              <img
                src={item.src}
                alt={item.label}
                loading="lazy"
                style={{
                  width: '100%', height: '100%',
                  objectFit: 'cover', filter: 'brightness(0.9) contrast(1.05)'
                }}
              />
            </div>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.1) 50%, transparent 100%)',
              transform: 'skewX(12deg) scale(1.25)',
            }}/>
            <div style={{
              position: 'absolute', bottom: 28, left: 28, right: 8,
              transform: 'skewX(12deg)',
              zIndex: 2,
            }}>
              <div className="label-tag" style={{ fontSize: 10 }}>
                {CATS.find(c => c.id === item.cat)?.label}
              </div>
              <div style={{
                fontFamily: 'var(--font-heading)', fontStyle: 'italic',
                fontSize: 22, color: 'var(--white)', marginTop: 6, lineHeight: 1.1,
              }}>{item.label}</div>
            </div>
          </motion.div>
        ))}
        </div>
      </div>

      <div style={{ textAlign: 'center', marginTop: 16 }}>
        <span className="italic-lead" style={{ fontSize: 13 }}>← Desliza o usa las flechas →</span>
      </div>

      {/* Lightbox */}
      <AnimatePresence>
        {lightbox && (
          <motion.div
            initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
            onClick={() => setLightbox(null)}
            style={{
              position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.95)',
              zIndex: 9000, display: 'grid', placeItems: 'center', padding: '5vw',
            }}
          >
            <motion.div
              initial={{ scale: 0.9 }} animate={{ scale: 1 }} exit={{ scale: 0.9 }}
              onClick={(e) => e.stopPropagation()}
              style={{ position: 'relative', maxWidth: 800, width: '100%' }}
            >
              <button
                onClick={() => setLightbox(null)}
                style={{ position: 'absolute', top: -50, right: 0, color: 'var(--white)' }}
                aria-label="Cerrar"
              ><Icon.Close/></button>
              <img
                src={lightbox.src}
                alt={lightbox.label}
                style={{ width: '100%', height: 'auto', maxHeight: '80vh', objectFit: 'contain' }}
              />
              <div style={{ marginTop: 16, textAlign: 'center' }}>
                <div className="label-tag">{CATS.find(c => c.id === lightbox.cat)?.label}</div>
                <div style={{ fontFamily: 'var(--font-heading)', fontStyle: 'italic', fontSize: 24, color: 'var(--white)' }}>
                  {lightbox.label}
                </div>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      <style>{`
        .diag-track { scrollbar-width: none; }
        .diag-track::-webkit-scrollbar { display: none; }
        .diag-arrow {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          width: 56px;
          height: 100px;
          background: linear-gradient(90deg, rgba(10,10,10,0.95), rgba(10,10,10,0.7));
          color: var(--white);
          display: grid;
          place-items: center;
          z-index: 20;
          cursor: pointer;
          border: 1px solid rgba(139,0,0,0.4);
          transition: all 0.25s ease;
        }
        .diag-arrow:hover {
          background: var(--ink-red);
          color: var(--white);
          border-color: var(--ink-red-bright);
          box-shadow: 0 0 20px rgba(204,0,0,0.5);
          width: 64px;
        }
        .diag-arrow-left { left: 0; clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%); }
        .diag-arrow-right { right: 0; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%); }
        @media (max-width: 700px) {
          .diag-panel { width: 200px !important; height: 380px !important; }
          .diag-arrow { width: 40px; height: 80px; }
          .diag-arrow:hover { width: 44px; }
        }
      `}</style>
    </section>
  );
}

window.Gallery = Gallery;