/* global React */
const { useState, useRef } = React;

function BeforeAfter({ before, after, label }) {
  const [pos, setPos] = useState(50);
  const ref = useRef(null);
  const dragging = useRef(false);

  const move = (clientX) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const p = Math.min(100, Math.max(0, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };
  const onDown = (e) => { dragging.current = true; move(e.touches ? e.touches[0].clientX : e.clientX); };
  const onMove = (e) => { if (dragging.current) move(e.touches ? e.touches[0].clientX : e.clientX); };
  const onUp = () => { dragging.current = false; };

  return (
    <div
      ref={ref}
      onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}
      onTouchMove={onMove} onTouchEnd={onUp}
      style={{ position: 'relative', aspectRatio: '16 / 10', overflow: 'hidden', userSelect: 'none', cursor: 'ew-resize', background: 'var(--ink-soft)' }}
    >
      <img src={after} alt={`${label} after`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} draggable={false} />
      <div style={{ position: 'absolute', inset: 0, width: `${pos}%`, overflow: 'hidden' }}>
        <img src={before} alt={`${label} before`} style={{ position: 'absolute', inset: 0, width: 'auto', height: '100%', minWidth: ref.current ? ref.current.getBoundingClientRect().width : '100%', objectFit: 'cover' }} draggable={false} />
        <span style={{ position: 'absolute', left: '14px', top: '12px', fontFamily: 'var(--font-mono)', fontSize: '0.66rem', letterSpacing: '0.14em', color: 'var(--text-inv)', background: 'rgba(12,23,25,0.6)', padding: '4px 8px' }}>BEFORE</span>
      </div>
      <span style={{ position: 'absolute', right: '14px', top: '12px', fontFamily: 'var(--font-mono)', fontSize: '0.66rem', letterSpacing: '0.14em', color: 'var(--ink)', background: 'var(--teal)', padding: '4px 8px' }}>AFTER</span>
      {/* lit-edge handle */}
      <div onMouseDown={onDown} onTouchStart={onDown} style={{ position: 'absolute', top: 0, bottom: 0, left: `${pos}%`, width: '2px', background: 'var(--lit-edge-v)', transform: 'translateX(-1px)' }}>
        <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: '40px', height: '40px', borderRadius: '999px', background: 'var(--ink)', border: '1px solid var(--edge)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 0 1px rgba(159,231,218,0.4)' }}>
          <span style={{ color: 'var(--edge)', fontFamily: 'var(--font-mono)', fontSize: '0.8rem' }}>↔</span>
        </div>
      </div>
    </div>
  );
}

const VLX_GALLERY = [
  { cat: 'Bathrooms', img: 'assets/gallery/bath-1.jpeg' },
  { cat: 'Bathrooms', img: 'assets/gallery/bath-2.jpeg' },
  { cat: 'Bathrooms', img: 'assets/gallery/bath-3.jpeg' },
  { cat: 'Bathrooms', img: 'assets/gallery/bath-4.jpeg' },
  { cat: 'Mirrors', img: 'assets/gallery/mirror-1.jpeg' },
  { cat: 'Mirrors', img: 'assets/gallery/mirror-2.jpeg' },
  { cat: 'Glass Walls', img: 'assets/gallery/wall-1.jpeg' },
  { cat: 'Glass Walls', img: 'assets/gallery/wall-2.jpeg' },
  { cat: 'Table Tops', img: 'assets/gallery/table-1.jpeg' },
  { cat: 'Table Tops', img: 'assets/gallery/table-2.jpeg' },
  { cat: 'Table Tops', img: 'assets/gallery/table-3.jpeg' },
  { cat: 'Windows', img: 'assets/gallery/window-1.jpeg' },
  { cat: 'Windows', img: 'assets/gallery/window-2.jpeg' },
];

function GalleryView({ onQuote }) {
  const { Eyebrow, LitEdge } = window.VailuxuryGlassDesignSystem_8a37c5;
  const filters = ['All', 'Bathrooms', 'Mirrors', 'Glass Walls', 'Table Tops', 'Windows'];
  const [filter, setFilter] = useState('All');
  const [lightbox, setLightbox] = useState(null);
  const shown = VLX_GALLERY.filter((g) => filter === 'All' || g.cat === filter);

  return (
    <div>
      <section style={{ background: 'var(--ink)', padding: 'calc(var(--section-y) * 0.8) 0 var(--section-y)' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <Eyebrow tone="dark">Our Work</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 'var(--fs-display-l)', color: 'var(--text-inv)', margin: '16px 0 0', lineHeight: 1.02, maxWidth: '16ch' }}>
            Our Work Speaks for Itself
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body-l)', lineHeight: 1.6, color: 'var(--text-inv)', opacity: 0.9, margin: '20px 0 0', maxWidth: '56ch' }}>
            Browse a selection of our finest installations across Colorado. Every project reflects our commitment to precision, quality, and timeless design.
          </p>
        </div>
      </section>

      {/* before & after */}
      <section style={{ background: 'var(--glass)', padding: 'var(--section-y) 0' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <Eyebrow>Before &amp; After</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, letterSpacing: '-0.02em', fontSize: 'var(--fs-h2)', color: 'var(--ink)', margin: '14px 0 8px' }}>See the transformation</h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', color: 'var(--text-dim)', margin: '0 0 36px', maxWidth: '54ch' }}>Real projects, start to finish — from bare openings to flawless, crystal-clear glass. Drag to witness the transformation.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '40px' }} className="vlx-ba-grid">
            <BeforeAfter label="Frameless Shower" before="assets/gallery/ba-bath-before.jpeg" after="assets/gallery/ba-bath-after.jpeg" />
            <BeforeAfter label="Arched Window" before="assets/gallery/ba-window-before.jpeg" after="assets/gallery/ba-window-after.jpeg" />
          </div>
        </div>
      </section>

      {/* filterable grid */}
      <section style={{ background: 'var(--glass)', padding: '0 0 var(--section-y)' }}>
        <div style={{ maxWidth: 'var(--content-max)', margin: '0 auto', padding: '0 var(--gutter)' }}>
          <LitEdge />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', margin: '40px 0 32px' }}>
            {filters.map((f) => (
              <button key={f} onClick={() => setFilter(f)} style={{
                fontFamily: 'var(--font-mono)', fontSize: '0.72rem', letterSpacing: '0.1em', textTransform: 'uppercase',
                padding: '8px 16px', borderRadius: '999px', cursor: 'pointer',
                border: `1px solid ${filter === f ? 'var(--teal)' : 'var(--chrome)'}`,
                background: filter === f ? 'var(--teal)' : 'transparent',
                color: filter === f ? 'var(--ink)' : 'var(--text-dim)',
                transition: 'all var(--dur-fast) var(--ease-glass)',
              }}>{f}</button>
            ))}
          </div>
          <div style={{ columnCount: 3, columnGap: '20px' }} className="vlx-masonry">
            {shown.map((g, i) => (
              <button key={i} onClick={() => setLightbox(g.img)} style={{ display: 'block', width: '100%', border: 0, padding: 0, marginBottom: '20px', cursor: 'pointer', background: 'none', breakInside: 'avoid' }}>
                <img src={g.img} alt={g.cat} style={{ width: '100%', display: 'block', filter: 'saturate(0.92)' }} />
              </button>
            ))}
          </div>
        </div>
      </section>

      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{ position: 'fixed', inset: 0, background: 'rgba(12,23,25,0.92)', zIndex: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '5vh 5vw' }}>
          <img src={lightbox} alt="" style={{ maxWidth: '100%', maxHeight: '90vh', objectFit: 'contain', border: '1px solid var(--edge)' }} />
          <button onClick={() => setLightbox(null)} aria-label="Close" style={{ position: 'absolute', top: '24px', right: '28px', background: 'none', border: 0, color: 'var(--text-inv)', fontSize: '2.2rem', cursor: 'pointer', lineHeight: 1 }}>×</button>
        </div>
      )}
    </div>
  );
}
window.GalleryView = GalleryView;