// data.jsx — shop data + shared atoms for The Barber Shop
const { useState, useEffect, useRef } = React;

/* ----------------------------- DATA -----------------------------
   HONEST DRAFT: founder/year, prices, barber names and hours are all UNKNOWN.
   Nothing specific is invented — unknowns render as "$ ?" / "owner to supply".
   Verbatim facts from brief: phone, 4.6★ on 376 reviews, Fairview/W Broadway. */
const PHONE      = "(604) 620-7811";
const PHONE_HREF = "tel:6046207811";
const BOOKSY_URL = "https://booksy.com";
const STUDIO     = "X9 Lab Media";
const RATING     = { score: "4.6", count: "376" };
// Verbatim known facts from the brief — address IS known and must be shown.
const ADDRESS    = "950 W Broadway #103, Vancouver, BC V5Z 1K7";
const ADDRESS_1  = "950 W Broadway #103";
const ADDRESS_2  = "Vancouver, BC V5Z 1K7";
const MAP_SRC    = "https://maps.google.com/maps?q=950+W+Broadway+Vancouver+BC+V5Z+1K7&output=embed&z=15";

// Standard barber offerings — structure only. Rates are owner-supplied ("$ ?").
const SERVICES = [
  { no:"01", name:"Haircut",         sub:"Scissor or clipper" },
  { no:"02", name:"Skin Fade",       sub:"Clipper work, blended" },
  { no:"03", name:"Cut & Beard",     sub:"Full service" },
  { no:"04", name:"Hot-Towel Shave", sub:"Straight razor" },
  { no:"05", name:"Beard Trim",      sub:"Shape & line" },
  { no:"06", name:"Kids’ Cut",       sub:"Under 12" },
];

// No invented names — the team is owner-supplied.
const IMG = (id) => `https://images.pexels.com/photos/${id}/pexels-photo-${id}.jpeg?auto=compress&cs=tinysrgb&w=1600`;
const BARBERS = [
  { chair:"Chair 01", cap:"the fade",        img: IMG(1570807) },
  { chair:"Chair 02", cap:"straight razor",  img: IMG(1319461) },
  { chair:"Chair 03", cap:"scissor cut",     img: IMG(1453005) },
];

const GALLERY = [
  { cap:"the tools",        h:168, img: IMG(1319460) }, { cap:"clippers & pomade", h:132, img: IMG(1570806) },
  { cap:"a fresh cut",      h:132, img: IMG(1453005) }, { cap:"hot-towel kit",     h:168, img: IMG(1319459) },
  { cap:"scissor work",     h:150, img: IMG(3992874) }, { cap:"the line-up",       h:150, img: IMG(7697269) },
];

const HOURS = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"];

/* ----------------------------- ATOMS ----------------------------- */
function Reveal({ children, delay = 0, as = "div", className = "", style = {} }) {
  const Tag = as;
  return <Tag className={"reveal " + className} style={{ transitionDelay: delay + "ms", ...style }}>{children}</Tag>;
}

function Eyebrow({ children, style }) {
  return <div className="eyebrow metal" style={style}>{children}</div>;
}

function DoubleRule({ color = "var(--m2)", style }) {
  return (
    <div className="dbl" style={style} aria-hidden="true">
      <div className="thick metal-line" />
      <div className="thin metal-line" />
    </div>
  );
}

function Ornament({ children = "✦ ✦ ✦", style }) {
  return <div className="ornament" style={style}><span>{children}</span></div>;
}

function Pole({ size = 1 }) {
  return (
    <div className="pole-wrap" style={{ transform: `scale(${size})` }} aria-hidden="true">
      <div className="pole-cap" />
      <div className="pole-glass" style={{ margin: "3px 0" }}>
        <div className="pole-stripes" />
      </div>
      <div className="pole-cap" />
    </div>
  );
}

function Placeholder({ label, onPaper = false, style = {}, className = "", img = null }) {
  return (
    <div className={"ph " + (onPaper ? "on-paper " : "") + 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,.6), rgba(0,0,0,.05) 55%)" }} />}
      <span className="ph-cap f-mono" style={img ? { position:"relative", color:"#f3ece0", zIndex:1 } : undefined}>▣ {label}</span>
    </div>
  );
}

function Stars({ n = 5, size = 13, color = "var(--m2)" }) {
  return (
    <div style={{ display:"flex", gap:3, color, fontSize:size, letterSpacing:"2px" }} aria-label={n+" stars"}>
      {"★★★★★".slice(0, n)}
    </div>
  );
}

// scroll-reveal observer hook — call once at app root.
// Uses the viewport as root (root:null) — an element root set to the device's
// nested flex/overflow scroll container does NOT fire in this environment.
// Includes a safety fallback: if the observer never fires, reveal everything.
function useReveal() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal:not(.in)"));
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { root: null, threshold: 0.12, rootMargin: "0px 0px -5% 0px" });
    els.forEach((el) => io.observe(el));
    // failsafe — if nothing has revealed shortly after mount, the observer
    // isn't firing in this context: show all content rather than a blank screen.
    const t = setTimeout(() => {
      if (!document.querySelector(".reveal.in")) {
        document.querySelectorAll(".reveal").forEach((el) => el.classList.add("in"));
      }
    }, 600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

Object.assign(window, {
  SERVICES, BARBERS, GALLERY, HOURS,
  PHONE, PHONE_HREF, BOOKSY_URL, STUDIO, RATING, ADDRESS, ADDRESS_1, ADDRESS_2, MAP_SRC,
  Reveal, Eyebrow, DoubleRule, Ornament, Pole, Placeholder, Stars, useReveal,
});