// sections.jsx — page sections for VIP Turkish Barbers.
// All exposed via window.* so app.jsx can compose them.

// ─── Analytics helper ────────────────────────────────────────────────────────
function track(action, category, label) {
  if (typeof gtag === 'function') {
    gtag('event', action, { event_category: category, event_label: label });
  }
}

const PHONE_DISPLAY = "07466 287117";
const PHONE_HREF = "tel:+447466287117";
const ADDRESS = "49 Ward's End, Loughborough LE11 3HB";
const MAPS_URL = "https://www.google.com/maps/place/VIP+Turkish+Barbers/@52.7683432,-1.2107441,17z/data=!3m1!4b1!4m6!3m5!1s0x4879e158c5f73daf:0x310aafda0b35c6a9!8m2!3d52.7683432!4d-1.2081692!16s%2Fg%2F11vdq78zz5?entry=ttu&g_ep=EgoyMDI2MDUxMC4wIKXMDSoASAFQAw%3D%3D";
const BOOK_HREF = "#book";

// ─── Before / After slider ────────────────────────────────────────────────
function BeforeAfterSlider({ imgBefore, imgAfter }) {
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const [tileW, setTileW] = React.useState(0);
  const dragging = React.useRef(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver(([e]) => setTileW(e.contentRect.width));
    ro.observe(ref.current);
    return () => ro.disconnect();
  }, []);

  function getPercent(e) {
    const rect = ref.current.getBoundingClientRect();
    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
    return Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100));
  }

  // Use refs so event listeners always call the latest version (no stale closures)
  const onMoveRef = React.useRef(null);
  const onUpRef   = React.useRef(null);

  onMoveRef.current = function(e) { if (dragging.current) setPos(getPercent(e)); };
  onUpRef.current   = function()  { dragging.current = false; };

  function onDown(e) { dragging.current = true; e.preventDefault(); e.stopPropagation(); }

  React.useEffect(() => {
    const handleMove = (e) => onMoveRef.current(e);
    const handleUp   = ()  => onUpRef.current();
    window.addEventListener("mousemove", handleMove);
    window.addEventListener("mouseup",   handleUp);
    window.addEventListener("touchmove", handleMove, { passive: false });
    window.addEventListener("touchend",  handleUp);
    return () => {
      window.removeEventListener("mousemove", handleMove);
      window.removeEventListener("mouseup",   handleUp);
      window.removeEventListener("touchmove", handleMove);
      window.removeEventListener("touchend",  handleUp);
    };
  }, []);

  return (
    <div ref={ref} className="ba-slider" onMouseDown={onDown} onTouchStart={onDown}>
      {/* After — full width underneath */}
      <img src={imgAfter} alt="After" className="ba-slider__img ba-slider__img--after" />
      {/* Before — container clips, image keeps full tile width, no zoom */}
      <div className="ba-slider__before" style={{ width: `${pos}%` }}>
        <img src={imgBefore} alt="Before" className="ba-slider__img"
             style={{ width: tileW || "100%", maxWidth: "none", transform: "none", objectPosition: "30% top" }} />
      </div>
      {/* Draggable handle */}
      <div className="ba-slider__handle" style={{ left: `${pos}%` }}>
        <div className="ba-slider__line" />
        <div className="ba-slider__grip">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
            <path d="M7 5l-4 5 4 5M13 5l4 5-4 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div className="ba-slider__line" />
      </div>
      <span className="ba-slider__lbl ba-slider__lbl--before">Before</span>
      <span className="ba-slider__lbl ba-slider__lbl--after">After</span>
    </div>
  );
}

// ─── Hero ─────────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section className="hero" aria-label="Hero">
      {/* Full-bleed background photo */}
      <div className="hero__media">
        <img src={`hero.png?v=${Date.now()}`} alt="VIP Turkish Barbers interior" className="hero__photo" />
      </div>

      {/* Copy — constrained width, vertically centred */}
      <div className="hero__wrap">
        <div className="hero__copy">
          <div className="hero__no">
            <span className="hero__no__dash">—</span>
            <div className="hero__no__loc">
              <span>Est. 2020</span>
              <span>Loughborough</span>
            </div>
            <span className="hero__no__sep">•</span>
            <span className="hero__no__open">Open 7 Days</span>
          </div>
          <h1 className="display hero__title">
            Premium<br />
            Turkish<br />
            barber<br />
            experience<br />
            <em>in</em><br />
            <em>Loughborough.</em>
          </h1>
          <p className="hero__sub">
            Skin fades, beard grooming &amp; the traditional<br/>
            hot‑towel service. Walk‑ins welcome,<br/>
            students looked after.
          </p>
          <div className="hero__ctas">
            <a className="btn btn--gold" href={PHONE_HREF}>
              <Icon.Phone s={15} /> Call Now
            </a>
            <a className="btn btn--ghost" href={MAPS_URL}>
              <Icon.Pin s={15} /> Get Directions
            </a>
          </div>
        </div>
      </div>

      {/* Trust badges — full-width bar pinned to the bottom of the hero */}
      <div className="trust trust--badges">
      <div className="trust__inner">
        <div className="trust__badge trust__badge--rating">
          <div className="trust__icon"><Icon.Star s={36} outline /></div>
          <div className="trust__text">
            <div className="trust__val">5.0</div>
            <div className="trust__lbl">Google Rating</div>
          </div>
        </div>
        <span className="trust__dot" />
        <div className="trust__badge trust__badge--reviews">
          <div className="trust__icon"><Icon.Shield s={36} /></div>
          <div className="trust__text">
            <div className="trust__val">160+</div>
            <div className="trust__lbl">Verified Reviews</div>
          </div>
        </div>
        <span className="trust__dot" />
        <div className="trust__badge trust__badge--hours">
          <div className="trust__icon"><Icon.Clock s={36} /></div>
          <div className="trust__text">
            <div className="trust__val">Open 7 Days</div>
            <div className="trust__lbl">A Week</div>
          </div>
        </div>
        <span className="trust__dot" />
        <div className="trust__badge trust__badge--student">
          <div className="trust__icon"><Icon.GradCap s={36} /></div>
          <div className="trust__text">
            <div className="trust__val">Student</div>
            <div className="trust__lbl">Friendly</div>
          </div>
        </div>
      </div>
      </div>

      <div className="ticker" aria-hidden="true">
        <div className="ticker__track">
          {Array.from({ length: 2 }).map((_, k) => (
            <React.Fragment key={k}>
              <span><strong>Skin Fade Specialists</strong></span>
              <span className="dot">✦</span>
              <span>Hot Towel Service</span>
              <span className="dot">✦</span>
              <span>Beard Grooming</span>
              <span className="dot">✦</span>
              <span><strong>Walk‑Ins Welcome</strong></span>
              <span className="dot">✦</span>
              <span>Student Friendly</span>
              <span className="dot">✦</span>
              <span>Open Every Day</span>
              <span className="dot">✦</span>
              <span><strong>Turkish Barber Tradition</strong></span>
              <span className="dot">✦</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Services ─────────────────────────────────────────────────────────────
const SERVICES = [
  { no: "I",    name: "Skin Fade",          desc: "Razor‑sharp, blended fade tailored to your hair type and head shape.", price: "£15", time: "30 min" },
  { no: "II",   name: "Signature Haircut",  desc: "Consultation, scissor or clipper cut, finished with hot towel and styling.", price: "£15", time: "30 min" },
  { no: "III",  name: "Beard Trim",         desc: "Sculpted lines, hot towel softening, beard oil and a clean finish.", price: "£8",  time: "20 min" },
  { no: "IV",   name: "Hot Towel Shave",    desc: "Traditional Turkish shave — cushion of lather, fresh blade, calming balm.", price: "£15", time: "30 min" },
  { no: "V",    name: "Hair + Beard Combo", desc: "Full grooming — fade or cut paired with a sculpted beard service.", price: "£22", time: "45 min" },
  { no: "VI",   name: "Kids Haircut",       desc: "Patient, careful cuts for ages 12 and under. Step‑up booster available.", price: "£10", time: "25 min" },
  { no: "VII",  name: "Taper Fade",         desc: "A clean, graduated taper — precision blended at the neckline and sides for a sharp, polished finish.", price: "£15", time: "30 min" },
  { no: "VIII", name: "Threading",          desc: "Precise thread work for clean lines — brows, forehead or face. Quick, accurate and long‑lasting.", price: "£5",  time: "15 min" },
  { no: "IX",   name: "Hot Wax",            desc: "Hot wax treatment for nose and ears — quick and thorough. Nose or ears £3 each, or both for £6.", price: "£3", time: "10 min" },
  { no: "X",    name: "Full Service",       desc: "Haircut, beard sculpt, ear & nose wax, hair wash and beard conditioning. The complete treatment.", price: "£45", time: "45 min" },
  { no: "XI",   name: "Special Steamer",    desc: "The full ritual — haircut, beard, face wax, ear & nose wax, black mask, steamer treatment, ear fire, hair wash, face cleanser and head massage.", price: "£70", time: "60–90 min" },
];

const SUPABASE_URL = 'https://agqsiuebqnxgszpdwcjw.supabase.co';
const SUPABASE_KEY = 'sb_publishable_0S9wZJhKqlOt24yJe-VFnQ_UZS4QVfN';

function Services() {
  const [svcs, setSvcs] = React.useState(SERVICES);

  React.useEffect(() => {
    if (!window.supabase) return;
    const db = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
    db.from('services').select('*').order('sort_order').then(({ data, error }) => {
      if (!error && data && data.length > 0) {
        setSvcs(data.map(s => ({ no: s.no, name: s.name, desc: s.description, price: s.price, time: s.duration })));
      }
    });
  }, []);

  return (
    <section className="services" id="services" aria-label="Services">
      <div className="wrap">
        <div className="head">
          <div>
            <span className="rule rule--single">Services</span>
            <h2 className="display head__title" style={{ marginTop: 18 }}>
              Cuts, fades<br/><em>&amp; the full ritual.</em>
            </h2>
          </div>
          <p className="lede lede--muted">
            Every service is delivered the Turkish way — unhurried, precise, and finished with the
            small touches that turn a haircut into a ritual. Students get a discount — just mention it to your barber when you come in.
          </p>
        </div>
      </div>

      <div className="wrap">
        <div className="svc-grid">
          {svcs.map((s, i) => (
            <article key={s.no} className="svc">
              <div className="svc__head">
                <span className="svc__no">No. {s.no}</span>
                <span className="svc__time">{s.time}</span>
              </div>
              <h3 className="svc__name">{s.name}</h3>
              <p className="svc__desc">{s.desc}</p>
              <div className="svc__bottom">
                <div className="svc__price"><small>From</small>{s.price}</div>
              </div>
            </article>
          ))}
          <article className="svc" style={{ background: "var(--ink-2)", justifyContent: "center" }}>
            <span className="svc__no">XII — Student</span>
            <h3 className="svc__name">Student Friendly.</h3>
            <p className="svc__desc">Are you a student? Just mention it to your barber when you sit down — they'll let you know your discount. Loughborough Uni &amp; College welcome.</p>
            <div className="svc__bottom">
              <span className="svc__time">Mon – Sun · All day</span>
            </div>
          </article>
        </div>

        {/* Single CTA below the grid */}
        <div style={{ textAlign: "center", marginTop: 48 }}>
          <p style={{ fontFamily: "var(--sans)", color: "var(--muted)", fontSize: 15, marginBottom: 16 }}>
            Questions about a service? Just give us a call — we're happy to help.
          </p>
          <a className="btn btn--gold" href={PHONE_HREF}>
            <Icon.Phone s={15} /> {PHONE_DISPLAY}
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── Why choose us ───────────────────────────────────────────────────────
const REASONS = [
  { no: "01", name: "Precision Fades",      desc: "Skin, taper or burst — drawn cleanly, blended seamlessly, set to last." },
  { no: "02", name: "Experienced Barbers",  desc: "Years on the chair. Every cut comes from muscle memory, not hesitation." },
  { no: "03", name: "Turkish Hospitality",  desc: "Cola, Diet Cola, water or tea on arrival — plus sweets while you wait. Conversation when wanted, silence when needed." },
  { no: "04", name: "Relaxed Atmosphere",   desc: "Music low, mirrors big, no rush. The shop is a moment of your day." },
  { no: "05", name: "Attention to Detail",  desc: "Outlines, neckline, eyebrows, ear‑cleanup — the small things that finish a look." },
  { no: "06", name: "Fast Turnaround",      desc: "Walk‑ins handled efficiently. We respect your lunch break and your evening." },
];

function Why() {
  return (
    <section className="why" id="why" aria-label="Why choose us">
      <div className="wrap">
        <div className="head">
          <div>
            <span className="rule rule--single">Why VIP</span>
            <h2 className="display head__title" style={{ marginTop: 18 }}>
              Six reasons<br/><em>regulars stay regulars.</em>
            </h2>
          </div>
          <p className="lede">
            We earned 160+ five‑star reviews the long way — by getting the same haircut right,
            again and again, for the same people, every two weeks.
          </p>
        </div>
        <div className="why-grid">
          {REASONS.map((r) => (
            <div key={r.no} className="why__item">
              <div className="why__no">{r.no}</div>
              <h3 className="why__name">{r.name}</h3>
              <p className="why__desc">{r.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Gallery ─────────────────────────────────────────────────────────────
const TILES = [
  // Col 1 rows 1-2: Interior tall | cols 2-4 row 1: B/A, Skin Fade, Beard Trim
  { lbl: "The Interior", v: "dark",  span: true,  img: "gallery-shop-interior.jpg", objPos: "center 60%" },
  { lbl: "",             v: "dark",  span: false, split: true, imgBefore: "gallery-before.jpg", imgAfter: "gallery-after.jpg" },
  { lbl: "Skin Fade",    v: "dark",  span: false, split: true, imgBefore: "gallery-curls.jpg",  imgAfter: "gallery-curl-fade.jpg" },
  { lbl: "Beard Trim",   v: "light", span: false, img: "gallery-beard-trim.jpg",   objPos: "center 20%" },
  // Row 2 cols 2-3: Detail + Hot Towel | col 4 rows 2-3: VIP Barbers tall (explicit)
  { lbl: "Detail",       v: "dark",  span: false, img: "gallery-detail.jpg" },
  { lbl: "Hot Towel",    v: "light", span: false, img: "gallery-hot-towel.jpg" },
  // Row 3 cols 1-3: Relax, Tools, Lounge
  { lbl: "Relax",        v: "light", span: false, img: "gallery-relax.jpg" },
  { lbl: "Tools",        v: "dark",  span: false, img: "gallery-tools.jpg" },
  { lbl: "Lounge",       v: "light", span: false, img: "gallery-lounge.jpg" },
  // VIP Barbers tall — pinned to col 4, rows 2-3 on desktop only
  { lbl: "VIP Barbers",  v: "dark",  span: true,  img: "gallery-vip-front.jpg", objPos: "center 40%", pinnedBR: true },
];

function Gallery() {
  const [tiles, setTiles] = React.useState(TILES);

  React.useEffect(() => {
    if (!window.supabase) return;
    const db = window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY);
    db.from('gallery_tiles').select('*').order('sort_order').then(({ data, error }) => {
      if (!error && data && data.length > 0) {
        setTiles(data.map(t => ({
          lbl:       t.label,
          v:         t.label_variant,
          span:      t.is_tall,
          pinnedBR:  t.is_pinned_br,
          split:     t.is_split,
          img:       t.img_url       || undefined,
          imgBefore: t.img_before_url || undefined,
          imgAfter:  t.img_after_url  || undefined,
          objPos:    t.obj_pos || undefined,
        })));
      }
    });
  }, []);

  return (
    <section id="gallery" aria-label="Gallery">
      <div className="wrap">
        <div className="head">
          <div>
            <span className="rule rule--single">Gallery</span>
            <h2 className="display head__title" style={{ marginTop: 18 }}>
              Work from the chair,<br/><em>shot this week.</em>
            </h2>
          </div>
          <p className="lede lede--muted">
            See the latest fades, beard work and shop life on
            <a href="https://www.instagram.com/vipbarbers49/" style={{ color: "var(--accent)", marginLeft: 6 }}>
              @vipturkishbarbers
            </a>.
          </p>
        </div>

        <div className="gallery-grid">
          {tiles.map((t, i) => (
            <div key={i} className={`gtile${t.span ? " gtile--tall" : ""}${t.pinnedBR ? " gtile--pinned-br" : ""}`}>
              {t.split ? (
                <BeforeAfterSlider imgBefore={t.imgBefore} imgAfter={t.imgAfter} />
              ) : t.img ? (
                <img src={t.img} alt={t.lbl} className="gtile__photo"
                     style={t.objPos ? { objectPosition: t.objPos } : undefined} />
              ) : (
                <Photo variant={t.v} label={t.lbl} caption="Photo placeholder" />
              )}
              {t.lbl && (
                <div className="gtile__overlay">
                  <div className="gtile__lbl">{t.lbl}</div>
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Reviews ─────────────────────────────────────────────────────────────
const REVIEWS = [
  { name: "James W.",   meta: "Regular · 2 yrs",
    quote: "Best fade I've had since moving to Loughborough. Always consistent, always finished properly. Worth the trip across town." },
  { name: "Hassan A.",  meta: "Loughborough Uni",
    quote: "Walked in on a Saturday afternoon and was sat down in 10 minutes. Fade was sharp, beard line was perfect. Easily a 5." },
  { name: "Tom R.",     meta: "Local",
    quote: "Hot towel shave is the real deal. Proper Turkish service, clean shop, friendly staff. Become my regular barber now." },
];

function Reviews() {
  return (
    <section className="reviews" id="reviews" aria-label="Reviews">
      <div className="wrap">
        <div className="head">
          <div>
            <span className="rule rule--single">Loved Locally</span>
            <h2 className="display head__title" style={{ marginTop: 18 }}>
              <em>5.0</em> on Google,<br/>across 160+ reviews.
            </h2>
          </div>
          <p className="lede lede--muted">
            A few of the kind words — straight from the listing. Read every one of them on{" "}
            <a href={MAPS_URL} style={{ color: "var(--accent)" }}>Google Maps →</a>
          </p>
        </div>

        <div className="reviews-grid">
          {REVIEWS.map((r, i) => (
            <article key={i} className="rcard">
              <div className="rcard__g">G · Google</div>
              <div className="rcard__stars">
                {[0,1,2,3,4].map(j => <Icon.Star key={j} s={14} />)}
              </div>
              <p className="rcard__quote">"{r.quote}"</p>
              <div className="rcard__author">
                <div className="rcard__avatar">{r.name[0]}</div>
                <div>
                  <div className="rcard__name">{r.name}</div>
                  <div>{r.meta}</div>
                </div>
              </div>
            </article>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 32 }}>
          <a href={MAPS_URL} className="btn btn--ghost">
            <Icon.Star s={14} /> Read all 160+ reviews
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── About ───────────────────────────────────────────────────────────────
function About() {
  return (
    <section id="about" aria-label="About">
      <div className="wrap">
        <div className="about-grid">
          <div className="about__media">
            <img src="about.png" alt="Turkish VIP Barbers — Ward's End, Loughborough" className="about__photo" />
            <div className="seljuk-bg" />
          </div>
          <div>
            <span className="rule rule--single">Our Story</span>
            <h2 className="display about__title" style={{ marginTop: 18 }}>
              A barber shop is more than<br/>
              <em>just a haircut.</em>
            </h2>
            <p className="about__body">
              Since 2020, VIP Turkish Barbers has brought the rhythm of the old Anadolu shops —
              tea, conversation, and the careful, unhurried craft of a proper trim — to Ward's End, Loughborough.
            </p>
            <p className="about__body" style={{ marginTop: 16 }}>
              Over five years on the chair, one standard has never changed: every cut is finished
              by hand, every fade is checked twice, and every customer leaves looking sharper than
              they walked in.
            </p>
            <div className="about__sig">— The VIP Team</div>

            <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
              <a className="btn btn--gold" href={PHONE_HREF}>
                <Icon.Phone s={15} /> Call us
              </a>
              <a className="btn btn--ghost" href={MAPS_URL}>
                <Icon.Pin s={15} /> Get directions
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Products ────────────────────────────────────────────────────────────
const PRODUCTS = [
  {
    no: "12", cat: "Cologne", brand: "The Shave Factory",
    name: "Arctic", row: 1,
    sub: "Cool, clean and sharp. A fresh post-shave staple.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/2F88F57E-93F9-4C03-A347-29E2931932D5_700x700.png?v=1750270543",
  },
  {
    no: "04", cat: "Cologne", brand: "The Shave Factory",
    name: "Caribbean", row: 1,
    sub: "Tropical warmth — light, uplifting and lasting.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/79D51796-A73B-4705-AF67-8E398E7763AE_700x700.png?v=1750269661",
  },
  {
    no: "05", cat: "Cologne", brand: "The Shave Factory",
    name: "Mediterranean", row: 1,
    sub: "Citrus-forward, sun-dried and effortlessly smooth.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/E031AA1D-41D0-4BE8-8327-DB3C8639698D_700x700.png?v=1750267508",
  },
  {
    no: "08", cat: "Cologne", brand: "The Shave Factory",
    name: "Tyrrhenian", row: 1,
    sub: "Deep sea-salt and marine notes — bold and clean.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/542D74DD-85C3-4755-872F-0EC655963E85_700x700.png?v=1750269976",
  },
  {
    no: "10", cat: "Cologne", brand: "The Shave Factory",
    name: "Indian", row: 1,
    sub: "Warm spice and sandalwood — rich and long-lasting.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/9048E37C-7FF1-4C54-B5EB-CB0C734130B5_700x700.png?v=1750268415",
  },
  {
    no: "03", cat: "Cologne", brand: "The Shave Factory",
    name: "Arabian", row: 1,
    sub: "Oud and amber — the scent of the traditional barbershop.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/558629B0-9EA2-4E4C-A53A-4783BE8214ED_700x700.png?v=1750266826",
  },
  {
    no: "03", cat: "Cologne", brand: "The Shave Factory",
    name: "Caspian", row: 1,
    sub: "Aquatic freshness with an earthy, sophisticated edge.",
    price: "£4.75",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/FF3B07D9-D295-4124-965E-2BF8EB6B1C14_700x700.png?v=1750268117",
  },
  {
    no: "400ml", cat: "Cologne", brand: "Sinep",
    name: "After Shave — Amber",
    sub: "Warm amber fragrance with a cooling effect. Classic barbershop finish.",
    price: "", row: 1,
    img: "https://www.waxwinkel.eu/cdn/shop/files/SINEPREFRESHINGAFTERSHAVECOLOGNE400ML.webp?v=1776364156",
  },
  {
    no: "400ml", cat: "Cologne", brand: "Sinep",
    name: "After Shave — Lemon",
    sub: "Crisp citrus and lemon — bright, energising and long-lasting.",
    price: "", row: 1,
    img: "https://www.waxwinkel.eu/cdn/shop/files/SINEPAFTERSHAVECOLOGNELEMON400ML_1400x.webp?v=1776364163",
  },
  /* ── Row 2: Styling ── */
  {
    no: "P1", cat: "Powder", brand: "Nish Man",
    name: "Flaming",
    sub: "Matte volume powder — light texture, strong hold, no residue.",
    price: "", row: 2,
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/files/IMG-5746_700x700.jpg?v=1771062580",
  },
  {
    no: "5", cat: "Hair Spray", brand: "Borthe",
    name: "Extreme Hair Spray",
    sub: "Maximum strong hold spray — locks your style all day.",
    price: "", row: 2,
    img: "https://hairwaxshop.com/cdn/shop/files/BortheProfessionalExtremeHairSprayMaximumStrong5400ml_1400x.png?v=1707666603",
  },
  {
    no: "300g", cat: "Mousse", brand: "Borthe",
    name: "Hair Mousse",
    sub: "Maximum strong hold mousse — volume and control without the weight.",
    price: "", row: 2,
    img: "https://hairwaxshop.com/cdn/shop/files/0CEE023D-B873-4F9A-9250-E14E04721E4A_1400x.png?v=1766227054",
  },
  /* ── Row 2: Hair Care ── */
  {
    no: "500ml", cat: "Hair Tonic", brand: "The Shave Factory",
    name: "Hair Tonic",
    sub: "Ultra strong, rapid cooling with menthol. Refreshes the scalp instantly.",
    price: "", row: 2,
    img: "https://www.theshavefactory.com/cdn/shop/files/Hair_Tonic.png?v=1691142625",
  },
  {
    no: "200ml", cat: "Spray", brand: "Magic Cosmetics",
    name: "Sea Salt Spray",
    sub: "Texturising beach spray — natural volume and effortless waves.",
    price: "", row: 2,
    img: "https://magiccosmetics.co.uk/cdn/shop/files/Z62_9722_eb9e6230-ee3f-40af-ae64-bdcce784cb87_1024x.jpg?v=1770830804",
  },
  {
    no: "200ml", cat: "Cream", brand: "Magic Cosmetics",
    name: "Curl Cream",
    sub: "Softens and moisturises curls — all curl types, all day definition.",
    price: "", row: 2,
    img: "https://magiccosmetics.co.uk/cdn/shop/files/Z62_9723_e8d2ac57-227f-4943-a8c3-f2000e105565_1024x.jpg?v=1770830114",
  },
  {
    no: "21g", cat: "Fiber", brand: "The Shave Factory",
    name: "Keratin Fiber", row: 2,
    sub: "Hair building keratin fibers — instant volume for thinning hair. Dark Brown.",
    price: "",
    img: "https://www.mcrbarbersupplies.co.uk/cdn/shop/products/Fibres_700x700.jpg?v=1624553544",
  },
];


function Products() {
  const railRef = React.useRef(null);
  const [canLeft,  setCanLeft]  = React.useState(false);
  const [canRight, setCanRight] = React.useState(true);

  function updateArrows() {
    const el = railRef.current;
    if (!el) return;
    setCanLeft(el.scrollLeft > 8);
    setCanRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 8);
  }

  function scroll(dir) {
    const el = railRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * 280, behavior: "smooth" });
    setTimeout(updateArrows, 350);
  }

  return (
    <section className="products" id="products" aria-label="Products">
      <div className="wrap">
        <div className="head" style={{ marginBottom: 12 }}>
          <div>
            <span className="rule rule--single">Grooming</span>
            <h2 className="display head__title" style={{ marginTop: 18 }}>
              A small, considered<br/><em>shelf in‑store.</em>
            </h2>
          </div>
          <p className="lede lede--muted">
            What we use on the chair, available at the till. Curated, not stocked.
            Ask the barber for a recommendation — we'll match it to your hair.
          </p>
        </div>

        <div className="prod-rail-wrap">
          <button
            className={`prod-arrow prod-arrow--left${canLeft ? "" : " prod-arrow--hidden"}`}
            onClick={() => scroll(-1)} aria-label="Scroll left">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M15 18l-6-6 6-6"/></svg>
          </button>

          <div className="prod-rail" ref={railRef} onScroll={updateArrows}>
            {PRODUCTS.map((p, i) => (
              <article key={i} className="prod">
                <div className="prod__img">
                  <img src={p.img} alt={p.name} className="prod__photo" />
                </div>
                <div className="prod__no">
                  <span>No. {p.no}</span>
                  <span className="prod__cat">{p.cat}</span>
                </div>
                <div className="prod__brand">{p.brand}</div>
                <h3 className="prod__name">{p.name}</h3>
                <div className="prod__sub">{p.sub}</div>
                <div className="prod__divider" />
                <div className="prod__footer">
                  <div className="prod__avail"><i /> In store</div>
                </div>
              </article>
            ))}
          </div>

          <button
            className={`prod-arrow prod-arrow--right${canRight ? "" : " prod-arrow--hidden"}`}
            onClick={() => scroll(1)} aria-label="Scroll right">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M9 18l6-6-6-6"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

// ─── Visit ───────────────────────────────────────────────────────────────
const HOURS = [
  ["Monday",    "9:00 — 19:00"],
  ["Tuesday",   "9:00 — 19:00"],
  ["Wednesday", "9:00 — 19:00"],
  ["Thursday",  "9:00 — 19:00"],
  ["Friday",    "9:00 — 19:00"],
  ["Saturday",  "9:00 — 19:00"],
  ["Sunday",    "10:00 — 16:00"],
];

function Visit() {
  return (
    <section className="visit" id="visit" aria-label="Visit us">
      <div className="wrap">
        <div className="head">
          <div>
            <span className="rule rule--single">Visit</span>
            <h2 className="display head__title" style={{ marginTop: 18 }}>
              Find us on<br/><em>Ward's End.</em>
            </h2>
          </div>
          <p className="lede lede--muted">
            Two minutes from the bus station, three from the Market Place.
            Walk‑ins welcome — just turn up and we'll take care of the rest.
          </p>
        </div>

        <div className="visit-grid">
          <a className="map" href={MAPS_URL} aria-label="Open in Google Maps">
            <FakeMap />
          </a>

          <div className="visit__info">
            <div className="visit__row">
              <div className="visit__lbl">Address</div>
              <div className="visit__val">
                49 Ward's End<br/>Loughborough, LE11 3HB
              </div>
              <div style={{ display: "flex", gap: 10, marginTop: 14, flexWrap: "wrap" }}>
                <a href="https://www.google.com/maps/dir/?api=1&destination=VIP+Turkish+Barbers,+49+Ward%27s+End,+Loughborough+LE11+3HB&destination_place_id=ChIJrz33xVjheUgRqcY1C9qvCjE&travelmode=driving" target="_blank" rel="noopener noreferrer" className="btn btn--ghost btn--sm" style={{ minWidth: 140, justifyContent: "center" }} onClick={() => track('directions_click', 'engagement', 'google_maps')}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                  Google Maps
                </a>
                <a href="https://www.waze.com/live-map/directions/gb/england/vip-turkish-barbers?navigate=yes&to=place.ChIJrz33xVjheUgRqcY1C9qvCjE" target="_blank" rel="noopener noreferrer" className="btn btn--ghost btn--sm" style={{ minWidth: 140, justifyContent: "center" }} onClick={() => track('directions_click', 'engagement', 'waze')}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}><path d="M20.54 6.63C19.08 3.8 16.29 2 13.22 2c-1.7 0-3.37.52-4.77 1.48C5.28 5.27 3.5 8.5 3.5 12c0 1.1.18 2.18.52 3.2L2.2 20.54a.75.75 0 0 0 .93.93l5.35-1.82c1 .34 2.06.52 3.15.52 4.88 0 8.87-3.9 8.87-8.7 0-1.83-.58-3.6-1.66-5.02l-.3-.42zM13.6 18.37c-.9 0-1.78-.16-2.62-.46l-.37-.13-3.84 1.3 1.32-3.82-.14-.38A7.2 7.2 0 0 1 7.5 12c0-2.77 1.5-5.3 3.9-6.72A6.47 6.47 0 0 1 13.6 4.5c3.6 0 6.56 2.84 6.56 6.37 0 3.56-2.94 7.5-6.56 7.5zm3.9-9.23c-.2-.1-1.16-.57-1.34-.64-.18-.07-.3-.1-.43.1-.13.19-.5.64-.62.77-.11.13-.23.15-.42.05-.2-.1-.83-.3-1.58-.97-.58-.52-.97-1.16-1.09-1.36-.11-.2-.01-.3.09-.4l.38-.44c.1-.11.13-.2.2-.33.06-.13.03-.24-.02-.34-.05-.1-.43-1.04-.59-1.42-.16-.38-.32-.33-.43-.33h-.37c-.13 0-.34.05-.52.24-.18.2-.68.66-.68 1.61s.7 1.87.8 2c.1.13 1.37 2.1 3.33 2.94.46.2.83.32 1.11.41.47.15.9.13 1.23.08.37-.06 1.16-.47 1.32-.93.16-.46.16-.85.11-.93-.05-.08-.18-.13-.38-.23z"/></svg>
                  Waze
                </a>
              </div>
            </div>

            <div className="visit__row">
              <div className="visit__lbl">Phone</div>
              <div className="visit__val">{PHONE_DISPLAY}</div>
              <a href={PHONE_HREF} className="btn btn--gold btn--sm" style={{ marginTop: 14 }} onClick={() => track('phone_click', 'engagement', 'call_now')}>
                <Icon.Phone s={13} /> Call Now
              </a>
            </div>

            <div className="visit__row">
              <div className="visit__lbl">Hours</div>
              <div className="hours" style={{ marginTop: 8 }}>
                {HOURS.map(([d, h]) => (
                  <React.Fragment key={d}>
                    <strong>{d}</strong>
                    <span>{h}</span>
                  </React.Fragment>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Stylised map placeholder — abstract street grid + pin.
function FakeMap() {
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      <svg viewBox="0 0 600 450" width="100%" height="100%" preserveAspectRatio="xMidYMid slice"
           style={{ position: "absolute", inset: 0, background: "#0e0e0e" }} aria-hidden="true">
        <defs>
          <pattern id="g" width="80" height="80" patternUnits="userSpaceOnUse">
            <path d="M0 40 H80 M40 0 V80" stroke="#1f1d18" strokeWidth="0.7" />
          </pattern>
        </defs>
        <rect width="600" height="450" fill="url(#g)" />
        {/* roads */}
        <g stroke="#2a2620" strokeWidth="14" fill="none" strokeLinecap="round">
          <path d="M-20 280 Q140 240 320 260 T640 220" />
          <path d="M120 -20 Q160 200 220 240 T260 480" />
          <path d="M380 -20 Q360 160 420 220 T520 480" />
        </g>
        <g stroke="#403a2c" strokeWidth="1" fill="none">
          <path d="M-20 280 Q140 240 320 260 T640 220" />
          <path d="M120 -20 Q160 200 220 240 T260 480" />
          <path d="M380 -20 Q360 160 420 220 T520 480" />
        </g>
        {/* blocks */}
        <g fill="#15130f" stroke="#1f1d18" strokeWidth="0.5">
          <rect x="40" y="60" width="60" height="80" />
          <rect x="60" y="170" width="40" height="60" />
          <rect x="240" y="60" width="120" height="120" />
          <rect x="260" y="290" width="80" height="60" />
          <rect x="440" y="60" width="100" height="120" />
          <rect x="430" y="260" width="80" height="100" />
        </g>
        {/* shop pin */}
        <g transform="translate(300 215)">
          <circle r="38" fill="rgba(201,165,90,0.18)" />
          <circle r="22" fill="rgba(201,165,90,0.32)" />
          <g transform="translate(0 -2)">
            <path d="M0 -14 Q12 -14 12 -2 Q12 8 0 18 Q-12 8 -12 -2 Q-12 -14 0 -14 Z"
                  fill="#c9a55a" />
            <circle cy="-2" r="4" fill="#0a0a0a" />
          </g>
        </g>
        <g transform="translate(300 264)" textAnchor="middle"
           fontFamily="Cormorant Garamond, serif" fill="#c9a55a">
          <text fontSize="14" letterSpacing="2" fontWeight="600">VIP TURKISH BARBERS</text>
          <text y="16" fontSize="10" fill="#9a958a" letterSpacing="2">49 WARD'S END · LE11 3HB</text>
        </g>
      </svg>
      <div className="ph__corner">Tap to open Google Maps</div>
      <div className="ph__corner ph__corner--br">↗</div>
    </div>
  );
}

// ─── Footer ──────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer aria-label="Footer">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
              <BrandMark size={36} />
              <div>
                <div className="brand__name">Turkish <span className="brand__vip">VIP</span> Barbers</div>
                <div className="brand__sub">Est. 2020 · Loughborough</div>
              </div>
            </div>
            <p style={{ color: "var(--muted)", maxWidth: "38ch", fontSize: 14, lineHeight: 1.6 }}>
              Premium Turkish barber experience on Ward's End. Walk‑ins welcome, students looked
              after, open seven days.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
              <a href="https://www.instagram.com/vipbarbers49/" className="btn btn--ghost btn--sm" onClick={() => track('social_click', 'engagement', 'instagram')}>
                <Icon.Instagram s={13} /> Instagram
              </a>
            </div>
          </div>

          <div>
            <div className="foot__title">Visit</div>
            <div className="foot__list">
              <span>49 Ward's End</span>
              <span>Loughborough</span>
              <span>LE11 3HB</span>
              <a href={MAPS_URL}>Get directions →</a>
            </div>
          </div>

          <div>
            <div className="foot__title">Hours</div>
            <div className="foot__list">
              <span>Mon — Sat · 9:00–19:00</span>
              <span>Sunday · 10:00–16:00</span>
              <span style={{ color: "var(--accent)" }}>Open 7 days</span>
            </div>
          </div>

          <div>
            <div className="foot__title">Contact</div>
            <div className="foot__list">
              <a href={PHONE_HREF}>{PHONE_DISPLAY}</a>
              <a href={PHONE_HREF}>Call Us</a>
              <a href="#services">Services</a>
              <a href="#reviews">Reviews</a>
              <a href="#about">About</a>
            </div>
          </div>
        </div>

        <div className="foot__bot">
          <span>© {new Date().getFullYear()} VIP Turkish Barbers · Loughborough</span>
          <span>
            Like this website?{" "}
            <a
              href="https://wa.me/447549119705"
              target="_blank"
              rel="noopener noreferrer"
              style={{ color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: 3 }}
            >
              Get in touch
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}

// ─── Top bar ────────────────────────────────────────────────────────────
function TopBar() {
  const [menuOpen, setMenuOpen] = React.useState(false);
  function closeMenu() { setMenuOpen(false); }

  // Close menu on scroll
  React.useEffect(() => {
    if (!menuOpen) return;
    const onScroll = () => setMenuOpen(false);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [menuOpen]);

  return (
    <React.Fragment>
      <header className="topbar" aria-label="Top navigation">
        <div className="topbar__row">
          <a href="#" className="brand" aria-label="VIP Turkish Barbers home">
            <BrandMark size={48} />
            <div>
              <div className="brand__name">Turkish <span className="brand__vip">VIP</span> Barbers</div>
              <div className="brand__sub">Loughborough · Est. 2020</div>
            </div>
          </a>
          {/* Desktop nav */}
          <nav className="nav" aria-label="Primary">
            <a href="#services">Services</a>
            <a href="#why">Why VIP</a>
            <a href="#gallery">Gallery</a>
            <a href="#reviews">Reviews</a>
            <a href="#products">Grooming</a>
            <a href="#visit">Visit</a>
          </nav>
          {/* Desktop CTA */}
          <div className="topbar__cta">
            <a href={PHONE_HREF} className="btn btn--ghost btn--sm" aria-label={`Call ${PHONE_DISPLAY}`}>
              <Icon.Phone s={13} />
            </a>
            <a href={MAPS_URL} className="btn btn--gold btn--sm">
              <Icon.Pin s={13} /> Find Us
            </a>
          </div>
          {/* Hamburger — mobile only */}
          <button
            className={"hamburger" + (menuOpen ? " hamburger--open" : "")}
            onClick={() => setMenuOpen(function(o){ return !o; })}
            aria-label="Toggle navigation menu"
            aria-expanded={menuOpen}
          >
            <span /><span /><span />
          </button>
        </div>
      </header>

      {/* Mobile slide-down menu */}
      <div className={"mobile-nav" + (menuOpen ? " mobile-nav--open" : "")} aria-hidden={!menuOpen}>
        <nav aria-label="Mobile navigation">
          <a href="#services" onClick={closeMenu}>Services</a>
          <a href="#why" onClick={closeMenu}>Why VIP</a>
          <a href="#gallery" onClick={closeMenu}>Gallery</a>
          <a href="#reviews" onClick={closeMenu}>Reviews</a>
          <a href="#products" onClick={closeMenu}>Grooming</a>
          <a href="#visit" onClick={closeMenu}>Visit</a>
        </nav>
      </div>
    </React.Fragment>
  );
}

// ─── Sticky mobile CTA ──────────────────────────────────────────────────
function StickyCTA() {
  return (
    <div className="sticky-cta" role="region" aria-label="Quick actions">
      <a className="btn btn--ghost" href={PHONE_HREF}>
        <Icon.Phone s={14} /> Call
      </a>
      <a className="btn btn--gold" href={MAPS_URL}>
        <Icon.Pin s={14} /> Directions
      </a>
    </div>
  );
}

Object.assign(window, {
  Hero, Services, Why, Gallery, Reviews, About, Products, Visit, Footer, TopBar, StickyCTA,
});