/* Gallery — before/after slider + lightbox grid */

const Gallery = () => {
  const items = [
    { id:1, label:'Exterior · Tesla Model S', cat:'Exterior shine',      img:'g2'},
    { id:2, label:'Interior · Range Rover',    cat:'Interior detail',    img:'g1'},
    { id:3, label:'Paint correction · Porsche', cat:'Paint protection',  img:'g3'},
    { id:4, label:'Mobile setup · Beverly Hills', cat:'Mobile setup',    img:'g4'},
    { id:5, label:'Wheels · Mercedes G-Wagon',   cat:'Exterior shine',   img:'g5'},
    { id:6, label:'Leather · Lamborghini Urus',  cat:'Interior detail',  img:'g6'},
  ];
  const [filter, setFilter] = React.useState('All');
  const cats = ['All','Exterior shine','Interior detail','Paint protection','Mobile setup'];
  const [drag, setDrag] = React.useState(50);
  const [touched, setTouched] = React.useState(false);
  const [hinting, setHinting] = React.useState(false);
  const dragRef = React.useRef(null);

  const onMove = (clientX) => {
    if (!dragRef.current) return;
    const r = dragRef.current.getBoundingClientRect();
    const pct = Math.max(2, Math.min(98, ((clientX - r.left)/r.width)*100));
    setDrag(pct);
    if (!touched) setTouched(true);
  };

  // Trigger hint animation when slider scrolls into view
  React.useEffect(() => {
    if (!dragRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !touched) {
          setHinting(true);
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.4 });
    io.observe(dragRef.current);
    return () => io.disconnect();
  }, [touched]);

  // Auto-play preview: slide drag through 50→25→75→50 as a hint
  React.useEffect(() => {
    if (!hinting || touched) return;
    const sequence = [
      { delay:  500, value: 25 },
      { delay: 1500, value: 75 },
      { delay: 2500, value: 50 },
    ];
    const timers = sequence.map(s =>
      setTimeout(() => { if (!touched) setDrag(s.value); }, s.delay)
    );
    return () => timers.forEach(clearTimeout);
  }, [hinting, touched]);

  const filtered = filter === 'All' ? items : items.filter(i => i.cat === filter);

  return (
    <section id="gallery" className="section gallery-section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Gallery · Before & After</span>
          <h2>See the <span className="gold-text">Prestige difference.</span></h2>
          <p>Drag the slider to compare — and browse work from across our LA service area.</p>
        </div>

        {/* Before/After slider */}
        <div
          ref={dragRef}
          className={`ba-slider ${hinting && !touched ? 'is-hinting' : ''} ${touched ? 'is-touched' : ''}`}
          onMouseMove={(e)=> e.buttons === 1 && onMove(e.clientX)}
          onMouseDown={(e)=> onMove(e.clientX)}
          onTouchMove={(e)=> onMove(e.touches[0].clientX)}
        >
          <div className="ba-pane ba-after">
            <img src="assets/despues.png" alt="After"/>
          </div>
          <div className="ba-pane ba-before" style={{clipPath:`inset(0 ${100-drag}% 0 0)`}}>
            <img src="assets/antes.png" alt="Before"/>
          </div>
          <div className="ba-handle" style={{left:`${drag}%`}}>
            <div className="ba-handle-line"></div>
            <div className="ba-handle-knob">
              <Icon name="arrow" size={14}/>
              <Icon name="arrow" size={14} stroke={1.4}/>
            </div>
          </div>
          <div className="ba-tag ba-tag-before mono">BEFORE</div>
          <div className="ba-tag ba-tag-after mono">AFTER</div>
        </div>

        {/* Filter chips */}
        <div className="gallery-filter">
          {cats.map(c => (
            <button key={c} className={`gallery-chip ${filter === c ? 'is-active' : ''}`} onClick={()=>setFilter(c)}>
              {c}
            </button>
          ))}
        </div>

        {/* Grid */}
        <div className="gallery-grid">
          {filtered.map((it, i) => (
            <div key={it.id} className={`gallery-tile ph ph-img gallery-tile-${i % 4}`} data-img={it.img}>
              <span>[ {it.label} ]</span>
              <div className="gallery-tile-cat mono">{it.cat}</div>
            </div>
          ))}
        </div>

        <div style={{display:'flex',justifyContent:'center',marginTop:48}}>
          <a href="#book" className="btn btn-primary" onClick={(e)=>{e.preventDefault(); document.getElementById('book').scrollIntoView({behavior:'smooth'});}}>
            Book your auto spa service <Icon name="arrow" size={14}/>
          </a>
        </div>
      </div>
    </section>
  );
};

window.Gallery = Gallery;