/* ============================================================
   Shared helpers, data, and a placeholder component
   ============================================================ */
const { useState, useEffect, useRef, useCallback } = React;

/* ---- data ----
   Only verified facts are hard-coded. Everything the brief marked UNKNOWN
   (prices, staff, hours, founding year) is rendered as an explicit
   "OWNER TO SUPPLY" placeholder — never invented. */

const SHOP = {
  name: 'The Barber Shop',
  wordmark: 'The Barber Shop · Broadway',
  address1: '950 W Broadway #103',
  address2: 'Vancouver, BC V5Z 1K7',
  addressFull: '950 W Broadway #103, Vancouver, BC V5Z 1K7',
  phoneDisplay: '(604) 620-7811',
  phoneHref: 'tel:+16046207811',
  reviews: '376',
  booksy: 'https://booksy.com',
  mapEmbed: 'https://www.google.com/maps?q=950+W+Broadway+%23103,+Vancouver,+BC+V5Z+1K7&output=embed',
};

/* The Ledger — service names only (brief spec). Prices owner-to-supply. */
const LEDGER = [
  { name:'Cut' },
  { name:'Cut + Style' },
  { name:'Beard trim' },
  { name:'Shave' },
  { name:'Kids cut' },
];

/* staff: count of placeholder slots only — no invented names */
const BARBER_SLOTS = [0,1,2];

Object.assign(window, { SHOP, LEDGER, BARBER_SLOTS });

/* ---- placeholder ---- */
const IMG = (id) => `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&w=1600`;
function Ph({ label, dark, className='', style, img }){
  return (
    <div className={`ph ${dark?'dark-ph':''} ${className}`} style={{position:'relative', overflow:'hidden', ...style}}>
      {img && <img src={img} alt={label} loading="lazy"
        style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover'}}
        onError={(e)=>{ e.currentTarget.style.display='none'; }} />}
      {img && <span aria-hidden="true" style={{position:'absolute', inset:0,
        background:'linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%)'}} />}
      <span className="ph-tag" style={img?{position:'relative', color:'#f3ece0', zIndex:1}:undefined}>{label}</span>
    </div>
  );
}

/* ---- clock probe: detect whether the animation timeline actually advances.
   Some preview/capture contexts freeze rAF/timeline at t=0, which would pin
   any entrance animation on its (hidden) first frame. We only hide-then-reveal
   when the clock is confirmed live; otherwise content stays visible. ---- */
let _clockProbe = null;
function clockAdvances(){
  if(_clockProbe) return _clockProbe;
  _clockProbe = new Promise(res=>{
    let p;
    try{ p = document.body.animate([{opacity:1},{opacity:1}], { duration:4000 }); }
    catch(e){ res(false); return; }
    setTimeout(()=>{
      const ok = ((p.currentTime||0) > 0);
      try{ p.cancel(); }catch(e){}
      res(ok);
    }, 90);
  });
  return _clockProbe;
}

/* ---- reveal hook ---- */
const DELAY_MAP = { d1:90, d2:180, d3:270, d4:360 };
function useReveal(){
  const ref = useRef(null);
  useEffect(()=>{
    const root = ref.current;
    if(!root) return;
    const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
    const els = root.matches?.('.reveal') ? [root] : Array.from(root.querySelectorAll('.reveal'));
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{
        if(!e.isIntersecting) return;
        const el = e.target;
        io.unobserve(el);
        if(reduce) return;
        clockAdvances().then(ok=>{
          if(!ok) return;            // clock frozen → leave visible, no animation
          let delay = 0;
          for(const k in DELAY_MAP){ if(el.classList.contains(k)) delay = DELAY_MAP[k]; }
          el.animate(
            [{opacity:0, transform:'translateY(26px)'},{opacity:1, transform:'translateY(0)'}],
            { duration:820, delay, easing:'cubic-bezier(.16,1,.3,1)', fill:'both' }
          );
        });
      });
    }, { threshold:0.12, rootMargin:'0px 0px -8% 0px' });
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  },[]);
  return ref;
}

Object.assign(window, { Ph, useReveal, clockAdvances, IMG });