// Direction A v2 — refined. Single location. 25% off first visit.
// Kemi-inspired simplicity. Services right under hero. Beefed-up Feed in Motion.

const BOOK_URL = "https://book.squareup.com/appointments/xcgn2naqyzy90d/location/LTS7JF8XYGM24/services?buttonTextColor=ffffff&color=000000&locale=en-AU&referrer=so";
const IG_URL = "https://www.instagram.com/matt.milicia.barber/";
const IG_HANDLE = "@matt.milicia.barber";
const TT_URL = "https://www.tiktok.com/@matt.milicia.barber";
const FB_URL = "https://www.facebook.com/profile.php?id=61574250602170";

// Hero mashup (full intro reel) + desktop feed-section list.
const HERO_MASHUP = 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/6517d17b0953971e3cc7f82b3b96cc84/manifest/video.m3u8';
// Different hero mashup on mobile only — portrait-cropped highlight cut.
const HERO_MASHUP_MOBILE = 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/3fb19bdfaac48b3b97db744606d25fe4/manifest/video.m3u8';

// Single mashup video shown ONLY in the mobile feed section.
const FEED_MASHUP = 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/6517d17b0953971e3cc7f82b3b96cc84/manifest/video.m3u8';
const FEED_TAG = 'Latest cuts';

// Desktop feed section — cycles through these one at a time.
const V2_REELS = [
{ id: 'reel-01', tag: 'Cut — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/5a344fdf92878dfc171c6ff8d70f76d6/downloads/default.mp4', alt: 'Haircut in Ripponlea, Melbourne' },
{ id: 'reel-02', tag: 'Skin fade — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/bd5d983c2bede4da3cd5fc16ac657c87/downloads/default.mp4', alt: 'Skin fade haircut, Matt the Barber, Ripponlea' },
{ id: 'reel-03', tag: 'Cut — Melbourne', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/6f8fa7683947970a1c6f3153eef8ec9f/downloads/default.mp4', alt: 'Modern haircut in Melbourne' },
{ id: 'reel-04', tag: 'Beard — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/295066f9136622b481d95fc5db9fec4c/downloads/default.mp4', alt: 'Beard trim and shape-up, Ripponlea' },
{ id: 'reel-05', tag: 'Cut — St Kilda', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/d61175465c7694bc0e836c00fc92c6f0/downloads/default.mp4', alt: 'Tailored haircut, St Kilda' },
{ id: 'reel-06', tag: 'Mid fade — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/91e949d6aa1958ed2d19f4949867bba1/downloads/default.mp4', alt: 'Mid fade haircut, Ripponlea' },
{ id: 'reel-07', tag: 'Cut — Elsternwick', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/2dff5eb9d0008bb2ce2625133386173d/downloads/default.mp4', alt: 'Modern haircut, Elsternwick' },
{ id: 'reel-08', tag: 'Cut + beard — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/c8998558a9a0436d86a53e4f01a09dd4/downloads/default.mp4', alt: 'Haircut and beard combo, Ripponlea' },
{ id: 'reel-09', tag: 'Cut — Melbourne', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/85df06dbdb6fa8bd309a2ef025300ef5/downloads/default.mp4', alt: 'Mens haircut, Melbourne' },
{ id: 'reel-10', tag: 'Burst fade — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/bdbc5238ad4bf76247fed0f06009058c/downloads/default.mp4', alt: 'Burst fade haircut, Ripponlea' },
{ id: 'reel-11', tag: 'Cut — Balaclava', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/c6d27c20f5e20dfb093767cc6a9fe36d/downloads/default.mp4', alt: 'Classic mens haircut, Balaclava' },
{ id: 'reel-12', tag: 'Cut — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/9ce807b9d172d108d2a8b2d1f1f39f90/downloads/default.mp4', alt: 'Considered haircut, Ripponlea' },
{ id: 'reel-13', tag: 'Scissor cut — Ripponlea', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/c907d2175e32a4d9edb0528a5a27a0dd/downloads/default.mp4', alt: 'Scissor cut, Matt the Barber, Ripponlea' },
{ id: 'reel-14', tag: 'Cut — Melbourne', mp4: 'https://customer-c5wmrhckxpx3olxl.cloudflarestream.com/0f7f4c13e92cdc98f1bb0d722f423666/downloads/default.mp4', alt: 'Mens haircut, Melbourne barber' }];




// Live Google Reviews — fetched via /.netlify/functions/google-reviews
// Cached in localStorage for 6 hours so repeat pageviews don't re-fetch.
function useGoogleReviews() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    let cancelled = false;
    const CACHE_KEY = 'mtb_google_reviews_v1';
    const TTL_MS = 6 * 60 * 60 * 1000;
    try {
      const cached = JSON.parse(localStorage.getItem(CACHE_KEY) || 'null');
      if (cached && Date.now() - cached.at < TTL_MS) {
        setData(cached.data);
        return;
      }
    } catch (e) {}
    // Try the proxy. Falls back silently to null if it 404s / fails — UI keeps
    // showing the static fallback content.
    fetch('/api/reviews', { credentials: 'omit' }).
    then((r) => r.ok ? r.json() : null).
    then((d) => {
      if (cancelled || !d) return;
      setData(d);
      try {localStorage.setItem(CACHE_KEY, JSON.stringify({ at: Date.now(), data: d }));} catch (e) {}
    }).
    catch(() => {});
    return () => {cancelled = true;};
  }, []);
  return data;
}

// Convert a Cloudflare Stream MP4 URL to its HLS manifest URL.
// e.g. https://customer-xxx.cloudflarestream.com/{uid}/downloads/default.mp4
//   -> https://customer-xxx.cloudflarestream.com/{uid}/manifest/video.m3u8
function toHLS(mp4url) {
  if (!mp4url) return null;
  return mp4url.replace('/downloads/default.mp4', '/manifest/video.m3u8');
}

// Load hls.js once and cache the promise.
let _hlsPromise = null;
function loadHlsJs() {
  if (_hlsPromise) return _hlsPromise;
  _hlsPromise = new Promise((resolve) => {
    if (window.Hls) { resolve(window.Hls); return; }
    const s = document.createElement('script');
    s.src = 'https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js';
    s.onload = () => resolve(window.Hls);
    document.head.appendChild(s);
  });
  return _hlsPromise;
}

// Attach HLS or native HLS to a video element.
function attachHls(videoEl, hlsUrl, { onEnded, onTimeUpdate } = {}) {
  if (!videoEl || !hlsUrl) return () => {};
  if (onEnded) videoEl.addEventListener('ended', onEnded);
  if (onTimeUpdate) videoEl.addEventListener('timeupdate', onTimeUpdate);

  // Safari / iOS support HLS natively
  if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
    videoEl.src = hlsUrl;
    videoEl.play().catch(() => {});
    return () => {
      if (onEnded) videoEl.removeEventListener('ended', onEnded);
      if (onTimeUpdate) videoEl.removeEventListener('timeupdate', onTimeUpdate);
    };
  }

  // Everyone else: use hls.js
  let hls = null;
  loadHlsJs().then((Hls) => {
    if (!videoEl.isConnected) return;
    if (Hls.isSupported()) {
      hls = new Hls({ autoStartLoad: true, startLevel: -1 });
      hls.loadSource(hlsUrl);
      hls.attachMedia(videoEl);
      hls.on(Hls.Events.MANIFEST_PARSED, () => videoEl.play().catch(() => {}));
    } else {
      // Last resort fallback
      videoEl.src = hlsUrl;
      videoEl.play().catch(() => {});
    }
  });

  return () => {
    if (hls) { hls.destroy(); hls = null; }
    if (onEnded) videoEl.removeEventListener('ended', onEnded);
    if (onTimeUpdate) videoEl.removeEventListener('timeupdate', onTimeUpdate);
  };
}

// HlsVideo — plays a Cloudflare Stream HLS URL on any browser.
// Safari/iOS uses native HLS; everything else loads hls.js from CDN.
function HlsVideo({ hlsUrl, loop, onEnded, onTimeUpdate, style, ...rest }) {
  const ref = React.useRef(null);
  // Derive poster from HLS URL — Cloudflare Stream provides auto thumbnails
  const poster = hlsUrl ? hlsUrl.replace('/manifest/video.m3u8', '/thumbnails/thumbnail.jpg?time=1s&width=400') : undefined;

  React.useEffect(() => {
    const v = ref.current;
    if (!v || !hlsUrl) return;
    let hls = null;
    if (v.canPlayType('application/vnd.apple.mpegurl')) {
      // Safari / iOS — native HLS
      v.src = hlsUrl;
      v.play().catch(() => {});
    } else {
      // Chrome / Firefox — load hls.js dynamically
      loadHlsJs().then((Hls) => {
        if (!v.isConnected) return;
        if (Hls && Hls.isSupported()) {
          hls = new Hls();
          hls.loadSource(hlsUrl);
          hls.attachMedia(v);
          hls.on(Hls.Events.MANIFEST_PARSED, () => v.play().catch(() => {}));
        } else {
          v.src = hlsUrl;
          v.play().catch(() => {});
        }
      });
    }
    return () => { if (hls) hls.destroy(); };
  }, [hlsUrl]);

  return (
    <video
      ref={ref}
      autoPlay
      muted
      loop={loop}
      playsInline
      poster={poster}
      onEnded={onEnded}
      onTimeUpdate={onTimeUpdate}
      style={style}
      {...rest}
    />
  );
}

// Render a reel — autoplay HLS if available, else fall back to IG iframe.
function ReelMedia({ reel, loop = true, onEnded, ...iframeProps }) {
  const label = reel.alt || iframeProps.title || `Reel ${reel.id}`;
  const hlsUrl = toHLS(reel.mp4);
  if (hlsUrl) {
    return (
      <HlsVideo
        hlsUrl={hlsUrl}
        loop={loop}
        onEnded={onEnded}
        aria-label={label}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', border: 0 }} />
    );
  }
  return <iframe src={`https://www.instagram.com/reel/${reel.id}/embed/`} {...iframeProps} loading="lazy" />;
}

// FeaturedSlot — single video for the desktop Feed-in-Motion stage.
// Plays first 5s + last 5s of each reel (skips middle), then onEnded → advance.
function FeaturedSlot({ reel, onEnded }) {
  const skippedRef = React.useRef(false);
  const hlsUrl = toHLS(reel.mp4);

  const handleTimeUpdate = (e) => {
    const v = e.target;
    if (!skippedRef.current && v.duration > 12 && v.currentTime >= 5) {
      try { v.currentTime = Math.max(5, v.duration - 5); } catch (err) {}
      skippedRef.current = true;
    }
  };

  React.useEffect(() => { skippedRef.current = false; }, [hlsUrl]);

  if (!reel.mp4) {
    return (
      <iframe src={`https://www.instagram.com/reel/${reel.id}/embed/`} title={`reel ${reel.id}`} loading="lazy"
      aria-label={reel.alt || `Reel ${reel.id}`}
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }} />);
  }

  return (
    <HlsVideo
      hlsUrl={hlsUrl}
      onEnded={onEnded}
      onTimeUpdate={handleTimeUpdate}
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', border: 0 }} />
  );
}


// Real services + direct Square deep-links per service. Discounted first-visit options first.
const V2_SERVICES = [
{
  name: "New Client Haircut",
  price: "$40",
  was: "$55",
  min: "40 min",
  desc: "First time in the chair? Any haircut, 25% off. Built in so we can take the time to figure out what actually suits you - no rush, no pressure to rebook.",
  url: "https://book.squareup.com/appointments/xcgn2naqyzy90d/location/LTS7JF8XYGM24/services/7XTNBNDSVQQOBF4R2CUR3XKB",
  featured: true
},
{
  name: "New Client Haircut & Beard",
  price: "$60",
  was: "$80",
  min: "1 hr",
  desc: "The full sit-down for new clients - 25% off your first visit. Includes consultation, haircut, beard trim and shape, wash and style.",
  url: "https://book.squareup.com/appointments/xcgn2naqyzy90d/location/LTS7JF8XYGM24/services/NQNU7YB5PMSGCG2IKLLCLZLR",
  featured: true
},
{
  name: "Haircut",
  price: "$55",
  min: "40 min",
  desc: "All haircut styles - skin fades, classic cuts, scissor cuts, tapers and modern styles. Tailored to suit your style and preferences. Includes consultation, wash and professional finish.",
  url: "https://book.squareup.com/appointments/xcgn2naqyzy90d/location/LTS7JF8XYGM24/services/I23XYTJYZ7FQ7SIDOP73XFSC"
},
{
  name: "Haircut & Beard",
  price: "$80",
  min: "1 hr",
  desc: "Any haircut tailored to your style, plus a beard trim and shape-up tailored to your face. Includes consultation, wash, style and finish - read as one piece of work, not two.",
  url: "https://book.squareup.com/appointments/xcgn2naqyzy90d/location/LTS7JF8XYGM24/services/WCY6ZNLSJKUVOURIBPWNR5BJ"
}];


function DirectionAv2({ tweakDefaults, lockedPage }) {
  const useTweaks = window.useTweaks;
  const defaults = tweakDefaults || { accent: '#a44a32', headline: 'suits', mosaicSpeed: 9, showTopMarquee: true, showAbout: true, showReviews: true, showLocation: true };
  const [t, setTweak] = useTweaks ? useTweaks(defaults) : [defaults, () => {}];
  const [bookingUrl, setBookingUrl] = React.useState(null);
  const [isMobileContext, setIsMobileContext] = React.useState(false);
  const rootRef = React.useRef(null);

  // Helper: click handler that opens any Square link in our modal.
  // Detects whether the click originated from a mobile-sized container
  // (e.g. iPhone artboard in the design canvas, or real mobile viewport)
  // so the modal can shape itself accordingly even though it portals to body.
  const openBooking = (url) => (e) => {
    e.preventDefault();
    const w = rootRef.current?.offsetWidth || window.innerWidth;
    setIsMobileContext(w < 768);
    setBookingUrl(url || BOOK_URL);
  };

  // Lock body scroll while modal open
  React.useEffect(() => {
    document.body.style.overflow = bookingUrl ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [bookingUrl]);

  // Open an external URL in a new tab, robustly. <a target="_blank">
  // sometimes fails inside sandboxed preview iframes — the navigation
  // falls back to loading in the current frame, where Instagram's
  // X-Frame-Options: DENY gives ERR_BLOCKED_BY_RESPONSE. window.open
  // routes through the browser's popup system and breaks out cleanly.
  const openExternal = (url) => (e) => {
    if (!url) return;
    if (e) {e.preventDefault();e.stopPropagation();}
    let w = null;
    try {w = window.open(url, '_blank', 'noopener,noreferrer');} catch (err) {}
    if (!w) {
      // Popup blocked OR sandbox doesn't allow popups — last resort,
      // navigate the top window so we don't get stuck in a blocked frame.
      try {(window.top || window).location.href = url;}
      catch (err) {window.location.href = url;}
    }
  };

  // ── Multi-page (desktop) ────────────────────────────────────────────
  // On desktop (container ≥ 769px) only one "page" is visible at a time;
  // nav clicks swap pages. On mobile (< 769px) every section renders and
  // the existing anchor-scrolling behaviour applies.
  const PAGES = ['home', 'services', 'work', 'about', 'visit', 'faq'];
  const NAV = [
  { page: 'services', label: 'Services', anchor: '#svc' },
  { page: 'work', label: 'Work', anchor: '#feed' },
  { page: 'about', label: 'About', anchor: '#about' },
  { page: 'visit', label: 'Visit', anchor: '#loc' },
  { page: 'faq', label: 'FAQ', anchor: '#faq' }];

  const readPageFromHash = () => {
    if (lockedPage) return lockedPage;
    if (typeof window === 'undefined') return 'home';
    const m = window.location.hash.match(/page=([a-z]+)/);
    return m && PAGES.includes(m[1]) ? m[1] : 'home';
  };
  const [activePage, setActivePage] = React.useState(readPageFromHash);

  React.useEffect(() => {
    if (lockedPage) {setActivePage(lockedPage);return;}
    const onHash = () => {
      const p = readPageFromHash();
      setActivePage(p);
    };
    window.addEventListener('hashchange', onHash);
    window.addEventListener('popstate', onHash);
    return () => {
      window.removeEventListener('hashchange', onHash);
      window.removeEventListener('popstate', onHash);
    };
  }, [lockedPage]);

  // Scroll nearest scrollable ancestor (and the window) to top — used on
  // page switch so each "page" lands at the top like a real navigation.
  const scrollToTop = React.useCallback(() => {
    let el = rootRef.current?.parentElement;
    while (el && el !== document.body) {
      const o = getComputedStyle(el).overflowY;
      if (o === 'auto' || o === 'scroll') {el.scrollTop = 0;break;}
      el = el.parentElement;
    }
    try {window.scrollTo({ top: 0, behavior: 'instant' });} catch (e) {window.scrollTo(0, 0);}
  }, []);

  const goToPage = React.useCallback((page) => {
    if (lockedPage) return; // pinned previews don't navigate
    setActivePage(page);
    const newHash = page === 'home' ? '' : `#page=${page}`;
    if ((window.location.hash || '') !== newHash) {
      try {window.history.pushState(null, '', newHash || window.location.pathname + window.location.search);}
      catch (e) {window.location.hash = newHash;}
    }
    scrollToTop();
  }, [scrollToTop, lockedPage]);

  // Map page id → in-page anchor for mobile scroll-to-section behaviour.
  const PAGE_ANCHORS = { home: null, services: 'svc', work: 'feed', about: 'about', visit: 'loc', faq: 'faq' };

  // Click handler for nav links: on desktop preventDefault + switch page;
  // on mobile scroll to the matching section anchor inside the root.
  // When lockedPage is set, always preventDefault so previews don't navigate.
  const navClick = (page) => (e) => {
    if (lockedPage) {e.preventDefault();return;}
    const w = rootRef.current?.offsetWidth || window.innerWidth;
    if (w >= 769) {
      e.preventDefault();
      goToPage(page);
      return;
    }
    // Mobile: it's a single scrolling page. Scroll to the right section.
    e.preventDefault();
    const anchorId = PAGE_ANCHORS[page];
    if (!anchorId) {
      // Home → scroll to top of the page (inside the iPhone artboard or window)
      let scroller = rootRef.current?.parentElement;
      while (scroller && scroller !== document.body) {
        const o = getComputedStyle(scroller).overflowY;
        if (o === 'auto' || o === 'scroll') break;
        scroller = scroller.parentElement;
      }
      if (scroller && scroller !== document.body) scroller.scrollTo({ top: 0, behavior: 'smooth' });
      else window.scrollTo({ top: 0, behavior: 'smooth' });
      return;
    }
    const target = rootRef.current?.querySelector(`#${anchorId}`);
    if (!target) return;
    // Find the nearest scrolling ancestor and scroll the target into view by
    // computed offset (NOT scrollIntoView — that scrolls every ancestor incl.
    // the app shell and breaks the canvas).
    let scroller = target.parentElement;
    while (scroller && scroller !== document.body) {
      const o = getComputedStyle(scroller).overflowY;
      if (o === 'auto' || o === 'scroll') break;
      scroller = scroller.parentElement;
    }
    const targetRect = target.getBoundingClientRect();
    const scRect = scroller && scroller !== document.body ? scroller.getBoundingClientRect() : { top: 0 };
    const offset = (scroller && scroller !== document.body ? scroller.scrollTop : window.scrollY) + targetRect.top - scRect.top - 8;
    if (scroller && scroller !== document.body) scroller.scrollTo({ top: offset, behavior: 'smooth' });
    else window.scrollTo({ top: offset, behavior: 'smooth' });
  };

  // True if a section should be hidden on desktop (page-hidden class).
  // `pages` is an array of pages where this section should appear.
  const sectionClass = (pages) => pages.includes(activePage) ? '' : 'v2-page-hidden';

  // Feed in Motion (desktop) — cycles through V2_REELS. Mobile uses a single mashup.
  const [activeReel, setActiveReel] = React.useState(0);
  const advanceReel = React.useCallback(() => {
    setActiveReel((r) => (r + 1) % V2_REELS.length);
  }, []);
  const active = V2_REELS[activeReel];
  const stripReels = V2_REELS.filter((_, i) => i !== activeReel).slice(0, 4);
  const marqueeReels = [...V2_REELS, ...V2_REELS];

  // Live Google Reviews (falls back to static below if proxy not deployed)
  const googleReviews = useGoogleReviews();
  const reviewCount = googleReviews?.total ?? 59;
  const liveReviews = googleReviews?.reviews?.length ? googleReviews.reviews.map((r) => ({
    t: r.text || '',
    n: r.author,
    l: r.relativeTime || 'Google'
  })) : null;


  const css = `
    .v2-root { --bg:#f4ede1; --paper:#ede4d2; --ink:#1a1614; --ink-soft:#5e554d; --line:rgba(26,22,20,0.12); --clay:${t.accent}; --clay-soft:${t.accent}cc; --warm:#e0b87a;
      container-type:inline-size; container-name:v2;
      position:relative; transform:translateZ(0);
      background:var(--bg); color:var(--ink); font-family:'DM Sans',sans-serif; font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; }
    .v2-root *, .v2-root *::before, .v2-root *::after { box-sizing:border-box; }
    .v2-serif { font-family:'Instrument Serif', serif; font-weight:400; }
    .v2-mono { font-family:'DM Mono', ui-monospace, monospace; font-weight:400; }

    /* TICKER bar */
    .v2-marquee { background:var(--ink); color:var(--bg); padding:14px 0; overflow:hidden; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.04em; }
    .v2-marquee .track { display:flex; gap:48px; animation:v2-march 60s linear infinite; white-space:nowrap; width:max-content; }
    .v2-marquee .item { display:inline-flex; align-items:center; gap:14px; }
    .v2-marquee .star { color:var(--warm); letter-spacing:0.1em; }
    .v2-marquee .sep { opacity:0.4; }
    @keyframes v2-march { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* HEADER */
    .v2-nav { display:flex; align-items:center; justify-content:space-between; padding:24px 48px; background:var(--bg); position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); }
    .v2-logo { font-family:'Instrument Serif',serif; font-style:italic; font-size:30px; letter-spacing:-0.01em; line-height:1; }
    .v2-logo b { font-style:normal; font-family:'DM Mono',monospace; font-weight:400; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); margin-left:10px; }
    .v2-navlinks { display:flex; gap:36px; align-items:center; font-size:13px; font-family:'DM Mono',monospace; letter-spacing:0.06em; text-transform:uppercase; }
    .v2-navlinks a { color:var(--ink-soft); text-decoration:none; transition:color 0.15s; }
    .v2-navlinks a:hover { color:var(--ink); }
    .v2-navlinks a.is-active { color:var(--ink); }
    .v2-navlinks a[data-page-link] { position:relative; }
    .v2-navlinks a[data-page-link].is-active::after { content:''; position:absolute; left:0; right:0; bottom:-26px; height:2px; background:var(--clay); }
    .v2-logo-link { display:inline-flex; align-items:center; }
    .v2-cta { background:var(--ink); color:var(--bg)!important; padding:12px 22px; border-radius:999px; text-decoration:none; transition:background 0.15s; }
    .v2-cta:hover { background:var(--clay)!important; }

    /* HERO — kemi-style spacious */
    .v2-hero { padding:64px 48px 72px; display:grid; grid-template-columns:1.4fr 1fr; gap:64px; align-items:center; border-bottom:1px solid var(--line); }
    .v2-eyebrow { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--clay); display:flex; align-items:center; gap:12px; margin-bottom:32px; }
    .v2-eyebrow::before { content:''; width:32px; height:1px; background:var(--clay); }
    .v2-h1 { font-family:'Instrument Serif',serif; font-size:112px; line-height:0.92; letter-spacing:-0.025em; font-weight:400; margin-bottom:36px; }
    .v2-h1 .it { font-style:italic; color:var(--clay); }
    .v2-sub { font-size:18px; color:var(--ink-soft); max-width:500px; margin-bottom:40px; line-height:1.55; }
    .v2-cta-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
    .v2-btn-prim { background:var(--ink); color:var(--bg); padding:18px 30px; border-radius:999px; text-decoration:none; font-family:'DM Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; transition:background 0.15s,transform 0.15s; }
    .v2-btn-prim:hover { background:var(--clay); transform:translateY(-1px); }
    .v2-btn-sec { color:var(--ink); padding:18px 26px; text-decoration:none; font-family:'DM Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; transition:border-color 0.15s; }
    .v2-btn-sec:hover { border-color:var(--ink); }
    .v2-discount { display:inline-flex; align-items:center; gap:8px; font-family:'Instrument Serif',serif; font-size:18px; color:var(--ink-soft); margin-left:6px; }
    .v2-discount::before { content:''; width:24px; height:1px; background:var(--clay); display:block; }
    .v2-discount .it { font-style:italic; color:var(--clay); font-size:22px; }

    .v2-hero-img { position:relative; aspect-ratio:4/5; background:var(--ink); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
    .v2-hero-vignette { position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,22,20,0.35) 0%, rgba(26,22,20,0) 25%, rgba(26,22,20,0) 70%, rgba(26,22,20,0.5) 100%); pointer-events:none; z-index:2; }
    .v2-hero-img-corner { position:absolute; top:20px; left:20px; right:20px; display:flex; justify-content:space-between; font-family:'DM Mono',monospace; font-size:10px; color:#fff; letter-spacing:0.16em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,0.6); z-index:4; pointer-events:none; }
    .v2-hero-img-corner-b { position:absolute; bottom:20px; left:20px; right:20px; display:flex; justify-content:space-between; font-family:'DM Mono',monospace; font-size:10px; color:#fff; letter-spacing:0.16em; text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,0.6); z-index:4; pointer-events:none; }
    .v2-hero-img .frame { position:absolute; inset:14px; border:1px solid rgba(255,255,255,0.16); pointer-events:none; z-index:3; }
    /* Hero video pair — desktop default, mobile shown only via container query */
    .v2-hero-video-mobile { display:none; }

    /* Hero mosaic of reels */
    .v2-mosaic { position:absolute; inset:0; display:grid; grid-template-columns:repeat(2, 1fr); grid-auto-rows:1fr; gap:4px; padding:4px; background:var(--ink); }
    .v2-mosaic-cell { position:relative; overflow:hidden; background:#0a0a0a; border-radius:2px; transition:transform 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease; filter:brightness(0.55) saturate(0.9); transform:scale(1); }
    .v2-mosaic-cell::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,22,20,0.3) 0%, rgba(26,22,20,0) 35%, rgba(26,22,20,0) 65%, rgba(26,22,20,0.35) 100%); pointer-events:none; z-index:2; }
    .v2-mosaic-cell iframe { position:absolute; top:-30px; left:-2px; width:calc(100% + 4px); height:calc(100% + 64px); border:0; pointer-events:none; }
    .v2-mosaic-cell.on { filter:brightness(1) saturate(1); transform:scale(1.02); z-index:2; box-shadow:0 0 0 2px var(--warm), 0 16px 36px -10px rgba(0,0,0,0.6); }
    .v2-mosaic-cell .v2-mosaic-tag { position:absolute; left:8px; bottom:8px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#fff; opacity:0; transition:opacity 0.4s ease; z-index:3; text-shadow:0 1px 4px rgba(0,0,0,0.6); }
    .v2-mosaic-cell.on .v2-mosaic-tag { opacity:1; }
    .v2-mosaic-live { position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:5; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(26,22,20,0.75); backdrop-filter:blur(6px); border-radius:999px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:#fff; }
    .v2-mosaic-live::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--warm); animation:v2-pulse 1.8s ease-in-out infinite; }

    /* META strip */
    .v2-meta { display:flex; border-bottom:1px solid var(--line); }
    .v2-meta-cell { flex:1; padding:28px 32px; border-right:1px solid var(--line); }
    .v2-meta-cell:last-child { border-right:0; }
    .v2-meta-k { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
    .v2-meta-v { font-family:'Instrument Serif',serif; font-size:24px; line-height:1.2; }
    .v2-meta-v .it { font-style:italic; color:var(--clay); }

    /* SERVICES — right under hero. Kemi-style: each service is its own block */
    .v2-svc-wrap { padding:96px 48px 32px; }
    .v2-section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:72px; }
    .v2-section-title { font-family:'Instrument Serif',serif; font-size:80px; line-height:0.95; letter-spacing:-0.025em; max-width:720px; }
    .v2-section-title .it { font-style:italic; color:var(--clay); }
    .v2-section-meta { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); text-align:right; line-height:1.9; max-width:320px; display:flex; flex-direction:column; gap:14px; align-items:flex-end; }
    .v2-section-meta > span { text-wrap:pretty; }
    .v2-section-meta a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:2px; }

    .v2-svc-list { border-top:1px solid var(--ink); }
    .v2-svc-row { display:grid; grid-template-columns:80px 1fr 360px 120px 140px; gap:32px; padding:36px 0; border-bottom:1px solid var(--line); align-items:start; transition:padding 0.18s,background 0.18s; cursor:pointer; position:relative; }
    .v2-svc-row::after { content:'→'; position:absolute; right:-4px; top:50%; transform:translateY(-50%) translateX(-12px); font-family:'DM Mono',monospace; font-size:18px; color:var(--clay); opacity:0; transition:opacity 0.18s, transform 0.18s; pointer-events:none; }
    .v2-svc-row:hover { padding-left:18px; padding-right:18px; background:rgba(164,74,50,0.03); }
    .v2-svc-row:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
    .v2-svc-row .v2-svc-num { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.14em; color:var(--ink-soft); padding-top:14px; }
    .v2-svc-row .v2-svc-name { font-family:'Instrument Serif',serif; font-size:42px; line-height:1; letter-spacing:-0.02em; }
    .v2-svc-row .v2-svc-name .it { font-style:italic; color:var(--clay); }
    .v2-svc-row .v2-svc-desc { font-size:14px; color:var(--ink-soft); line-height:1.65; padding-top:6px; }
    .v2-svc-row .v2-svc-min { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); padding-top:14px; }
    .v2-svc-row .v2-svc-price { font-family:'Instrument Serif',serif; font-size:42px; line-height:1; letter-spacing:-0.02em; text-align:right; }
    .v2-svc-row .v2-svc-price .was { font-family:'DM Mono',monospace; font-size:13px; letter-spacing:0.04em; color:var(--ink-soft); text-decoration:line-through; display:block; margin-bottom:6px; font-style:normal; }
    .v2-svc-row .v2-svc-price .it { font-style:italic; color:var(--clay); font-size:36px; }
    .v2-svc-row.feat .v2-svc-name, .v2-svc-row.feat .v2-svc-price { color:var(--clay); }
    .v2-svc-row.feat .v2-svc-name em { font-style:italic; }
    .v2-svc-row.feat .v2-svc-price .was { color:rgba(164,74,50,0.5); }
    .v2-svc-row.feat { background:rgba(164,74,50,0.04); }
    .v2-svc-foot { padding-top:36px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
    .v2-svc-foot .note { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--ink-soft); text-transform:uppercase; }

    /* FEED IN MOTION — the centerpiece */
    .v2-feed { padding:112px 0 0; background:var(--ink); color:var(--bg); position:relative; overflow:hidden; }
    .v2-feed::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent); }
    .v2-feed-head { padding:0 48px 56px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:flex-end; }
    .v2-feed-title { font-family:'Instrument Serif',serif; font-size:104px; line-height:0.92; letter-spacing:-0.025em; max-width:880px; }
    .v2-feed-title .it { font-style:italic; color:var(--warm); }
    .v2-feed-side { text-align:right; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); line-height:2; }
    .v2-feed-side .handle { color:var(--warm); display:block; font-size:14px; margin-bottom:8px; letter-spacing:0.08em; text-transform:none; }
    .v2-feed-side a { display:inline-flex; align-items:center; gap:8px; color:#fff; text-decoration:none; padding:10px 16px; border:1px solid rgba(255,255,255,0.2); border-radius:999px; margin-top:16px; transition:background 0.15s,border-color 0.15s; }
    .v2-feed-side a:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.4); }

    /* Desktop vs mobile feed wrappers — default desktop on, mobile off. */
    .v2-feed-desktop { display:contents; }
    .v2-feed-mobile { display:none; }

    /* Stage with featured big reel + strip below */
    .v2-stage { padding:0 48px 64px; display:grid; grid-template-columns:480px 1fr; gap:48px; align-items:stretch; }
    .v2-featured { position:relative; aspect-ratio:9/16; background:#000; border-radius:6px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,0.6); }
    .v2-featured iframe { position:absolute; top:-54px; left:0; width:100%; height:calc(100% + 110px); border:0; }
    .v2-featured .v2-now { position:absolute; top:20px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; z-index:3; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; }
    .v2-featured .v2-now .live { display:inline-flex; align-items:center; gap:6px; }
    .v2-featured .v2-now .live::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--warm); animation:v2-pulse 1.8s ease-in-out infinite; }
    @keyframes v2-pulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.4; transform:scale(0.85)} }
    .v2-featured .v2-tag-bottom { position:absolute; bottom:20px; left:20px; right:20px; display:flex; justify-content:space-between; align-items:center; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.16em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; z-index:3; }

    /* Right side: caption + strip */
    .v2-stage-right { display:flex; flex-direction:column; gap:32px; padding-top:8px; min-height:0; }
    .v2-stage-right > div:last-child { margin-top:auto; }
    .v2-now-caption { padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.12); }
    .v2-now-caption .label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:12px; }
    .v2-now-caption .head { font-family:'Instrument Serif',serif; font-size:48px; line-height:1.05; letter-spacing:-0.02em; }
    .v2-now-caption .head .it { font-style:italic; color:var(--warm); }
    .v2-now-caption .meta { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:14px; }

    .v2-strip-label { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; }
    .v2-strip-label .ctrl { display:flex; gap:6px; }
    .v2-strip-label button { width:28px; height:28px; border:1px solid rgba(255,255,255,0.2); background:transparent; color:#fff; cursor:pointer; font-family:'DM Mono',monospace; font-size:12px; transition:background 0.15s,border-color 0.15s; }
    .v2-strip-label button:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5); }

    .v2-strip { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
    .v2-strip .v2-thumb { aspect-ratio:9/14; }
    .v2-thumb { position:relative; aspect-ratio:9/16; background:#000; border-radius:4px; overflow:hidden; cursor:pointer; transition:transform 0.18s,box-shadow 0.18s; opacity:0.6; }
    .v2-thumb iframe { position:absolute; top:-38px; left:0; width:100%; height:calc(100% + 78px); border:0; pointer-events:none; filter:saturate(0.8); }
    .v2-thumb:hover { opacity:1; transform:translateY(-3px); }
    .v2-thumb.on { opacity:1; box-shadow:0 0 0 2px var(--warm); }
    .v2-thumb .v2-thumb-tag { position:absolute; bottom:8px; left:8px; right:8px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; }
    .v2-thumb .v2-thumb-num { position:absolute; top:6px; left:8px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.14em; color:rgba(255,255,255,0.8); }

    /* Auto-scrolling marquee strip below */
    .v2-feed-marquee { padding:48px 0 64px; overflow:hidden; border-top:1px solid rgba(255,255,255,0.1); margin-top:24px; }
    .v2-feed-marquee .row { display:flex; gap:14px; animation:v2-drift 80s linear infinite; width:max-content; }
    .v2-feed-marquee:hover .row { animation-play-state:paused; }
    .v2-feed-marquee .item { width:160px; flex:0 0 160px; aspect-ratio:9/16; background:#000; border-radius:4px; overflow:hidden; position:relative; opacity:0.7; transition:opacity 0.2s; }
    .v2-feed-marquee .item:hover { opacity:1; }
    .v2-feed-marquee .item iframe { position:absolute; top:-32px; left:0; width:100%; height:calc(100% + 66px); border:0; pointer-events:none; }
    @keyframes v2-drift { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    .v2-feed-foot { padding:48px 48px 80px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:24px; border-top:1px solid rgba(255,255,255,0.1); }
    .v2-feed-stats { display:flex; gap:48px; }
    .v2-feed-stats .stat .num { font-family:'Instrument Serif',serif; font-size:48px; line-height:1; letter-spacing:-0.02em; }
    .v2-feed-stats .stat .num .it { font-style:italic; color:var(--warm); }
    .v2-feed-stats .stat .lab { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-top:6px; }
    .v2-feed-cta { display:flex; gap:12px; }
    .v2-feed-cta a { padding:14px 24px; text-decoration:none; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; border-radius:999px; display:inline-flex; align-items:center; gap:8px; }
    .v2-feed-cta a.gold { background:var(--warm); color:var(--ink); }
    .v2-feed-cta a.gold:hover { background:#f5cf90; }
    .v2-feed-cta a.outline { color:#fff; border:1px solid rgba(255,255,255,0.3); }
    .v2-feed-cta a.outline:hover { background:rgba(255,255,255,0.08); }

    /* Trustindex widget container — give it room to render */
    .v2-trustindex { margin-top:32px; min-height:200px; }

    /* REVIEWS — clean wall */
    .v2-rev { padding:96px 48px; background:var(--paper); border-bottom:1px solid var(--line); }
    .v2-rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:32px; }
    .v2-rev-card { background:var(--paper); padding:36px 32px; display:flex; flex-direction:column; min-height:280px; }
    /* First card spans 2 cols for visual rhythm */
    .v2-rev-card:first-child { grid-column:span 2; }
    .v2-rev-card:first-child .v2-rev-text { font-size:28px; line-height:1.3; }
    .v2-rev-stars { color:var(--clay); font-size:13px; letter-spacing:0.2em; margin-bottom:18px; }
    .v2-rev-text { font-family:'Instrument Serif',serif; font-size:22px; line-height:1.35; letter-spacing:-0.005em; margin-bottom:auto; padding-bottom:24px; }
    .v2-rev-text::before { content:'\u201C'; font-family:'Instrument Serif',serif; font-size:42px; line-height:0; vertical-align:-14px; color:var(--clay); margin-right:2px; }
    .v2-rev-by { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
    .v2-rev-by b { color:var(--ink); font-weight:500; }

    /* ABOUT / LOCATION combined */
    .v2-about { padding:96px 48px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
    .v2-about-text h2 { font-family:'Instrument Serif',serif; font-size:80px; line-height:0.95; letter-spacing:-0.025em; margin-bottom:36px; }
    .v2-about-text h2 .it { font-style:italic; color:var(--clay); }
    .v2-about-text p { font-size:17px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px; max-width:520px; }
    .v2-about-text p:last-of-type { margin-bottom:32px; }
    .v2-about-text .v2-handle { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.08em; padding:14px 22px; border:1px solid var(--ink); border-radius:999px; }
    .v2-about-text .v2-handle:hover { background:var(--ink); color:var(--bg); }
    .v2-about-thumb { display:none; width:80px; height:80px; border-radius:50%; overflow:hidden; border:1px solid var(--line); background:var(--paper); }
    .v2-about-thumb img { width:100%; height:100%; object-fit:cover; }
    .v2-about-row { display:contents; }
    .v2-about-img { aspect-ratio:4/5; background:var(--paper); border:1px solid var(--line); border-radius:6px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }

    /* LOCATION + HOURS */
    .v2-loc { padding:96px 48px; background:var(--ink); color:var(--bg); }
    .v2-loc-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-top:48px; }
    .v2-loc-info .name { font-family:'Instrument Serif',serif; font-size:72px; font-style:italic; color:var(--warm); letter-spacing:-0.02em; line-height:1; margin-bottom:14px; }
    .v2-loc-info .addr { font-size:18px; color:rgba(255,255,255,0.75); margin-bottom:32px; line-height:1.55; }
    .v2-loc-info .addr a { color:var(--warm); text-decoration:none; border-bottom:1px solid rgba(224,184,122,0.4); padding-bottom:2px; font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; margin-top:8px; display:inline-block; }
    .v2-loc-hours { font-family:'DM Mono',monospace; font-size:13px; max-width:340px; }
    .v2-loc-hours .row { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(255,255,255,0.1); }
    .v2-loc-hours .row:last-child { border-bottom:0; }
    .v2-loc-hours .day { color:rgba(255,255,255,0.55); letter-spacing:0.12em; text-transform:uppercase; }
    .v2-loc-hours .hrs { color:#fff; letter-spacing:0.04em; }
    .v2-loc-hours .closed { color:rgba(255,255,255,0.3); }
    .v2-loc-map { aspect-ratio:1; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-radius:6px; position:relative; overflow:hidden; }
    .v2-loc-map iframe { width:100%; height:100%; border:0; display:block; filter:invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95); }
    .v2-loc .v2-section-title { color:var(--bg); }
    .v2-loc .v2-section-title .it { color:var(--warm); }
    .v2-loc .v2-section-meta { color:rgba(255,255,255,0.5); }

    /* FAQ */
    .v2-faq { padding:88px 48px; border-bottom:1px solid var(--line); background:var(--bg); }
    .v2-faq-list { border-top:1px solid var(--ink); margin-top:32px; display:grid; grid-template-columns:1fr 1fr; column-gap:48px; }
    .v2-faq-item { border-bottom:1px solid var(--line); }
    .v2-faq-q { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px 4px; cursor:pointer; transition:padding 0.18s, background 0.18s; list-style:none; }
    .v2-faq-q::-webkit-details-marker { display:none; }
    .v2-faq-q:hover { background:rgba(164,74,50,0.03); padding-left:14px; padding-right:14px; }
    .v2-faq-q h3 { font-family:'Instrument Serif',serif; font-size:30px; line-height:1.15; letter-spacing:-0.015em; font-weight:400; margin:0; flex:1; }
    .v2-faq-q .toggle { font-family:'DM Mono',monospace; font-size:18px; color:var(--ink-soft); transition:transform 0.2s; }
    .v2-faq-item[open] .v2-faq-q .toggle { transform:rotate(45deg); color:var(--clay); }
    .v2-faq-a { padding:0 4px 28px; max-width:760px; }
    .v2-faq-a p { font-size:16px; color:var(--ink-soft); line-height:1.65; margin:0; }

    /* CTA */
    .v2-cta-block { padding:128px 48px; text-align:center; background:var(--bg); border-bottom:1px solid var(--line); }
    .v2-cta-block h2 { font-family:'Instrument Serif',serif; font-size:128px; line-height:0.92; letter-spacing:-0.03em; margin-bottom:28px; }
    .v2-cta-block h2 .it { font-style:italic; color:var(--clay); }
    .v2-cta-block p { font-size:18px; color:var(--ink-soft); max-width:500px; margin:0 auto 40px; line-height:1.55; }
    .v2-cta-block .v2-btn-prim { font-size:14px; padding:20px 36px; }
    .v2-cta-note { margin-top:28px; font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
    .v2-cta-note .it { font-family:'Instrument Serif',serif; font-style:italic; color:var(--clay); text-transform:none; font-size:14px; letter-spacing:0; }

    /* FOOTER */
    .v2-footer { padding:64px 48px; background:var(--ink); color:rgba(255,255,255,0.6); }
    .v2-footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.1); }
    .v2-footer-logo { font-family:'Instrument Serif',serif; font-style:italic; font-size:48px; color:var(--bg); line-height:0.95; }
    .v2-footer-col h4 { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--warm); margin-bottom:14px; }
    .v2-footer-col a, .v2-footer-col span { display:block; padding:4px 0; color:rgba(255,255,255,0.65); text-decoration:none; font-size:14px; }
    .v2-footer-col a:hover { color:#fff; }
    .v2-footer-bot { display:flex; justify-content:space-between; padding-top:24px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.3); flex-wrap:wrap; gap:12px; }

    /* MULTI-PAGE (desktop only) — hide non-active sections.
       Container query so the iPhone-frame preview still scroll-renders everything. */
    @container v2 (min-width: 769px) {
      .v2-page-hidden { display:none !important; }
    }

    /* HOME TEASER STRIP — four cards mirroring the nav */
    .v2-teasers { padding:32px 48px 96px; border-bottom:1px solid var(--line); }
    .v2-teasers-head { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:40px; }
    .v2-teasers-title { font-family:'Instrument Serif',serif; font-size:64px; line-height:0.95; letter-spacing:-0.025em; margin:0; }
    .v2-teasers-title .it { font-style:italic; color:var(--clay); }
    .v2-teasers-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
    .v2-teaser { background:var(--bg); padding:32px 28px 28px; display:flex; flex-direction:column; min-height:280px; text-decoration:none; color:inherit; transition:background 0.18s, transform 0.18s; position:relative; }
    .v2-teaser:hover { background:#f9f3e6; }
    .v2-teaser-num { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.14em; color:var(--ink-soft); margin-bottom:auto; padding-bottom:24px; }
    .v2-teaser-title { font-family:'Instrument Serif',serif; font-size:36px; line-height:1.02; letter-spacing:-0.02em; margin:0 0 14px; font-weight:400; }
    .v2-teaser-title .it { font-style:italic; color:var(--clay); }
    .v2-teaser-desc { font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0 0 24px; }
    .v2-teaser-cta { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:10px; transition:gap 0.18s, color 0.18s; }
    .v2-teaser-cta span { display:inline-block; transition:transform 0.18s; }
    .v2-teaser:hover .v2-teaser-cta { color:var(--clay); }
    .v2-teaser:hover .v2-teaser-cta span { transform:translateX(4px); }

    /* BOOKING MODAL */
    .v2-modal-backdrop { position:fixed; inset:0; background:rgba(15,12,10,0.78); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; animation:v2-fade 0.18s ease-out; } }
    @keyframes v2-fade { from{opacity:0} to{opacity:1} }
    .v2-modal { background:var(--bg); width:min(960px, 100%); height:min(820px, calc(100vh - 48px)); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 100px -20px rgba(0,0,0,0.5); animation:v2-pop 0.22s cubic-bezier(0.2,0.9,0.3,1.1); }
    @keyframes v2-pop { from{transform:translateY(8px) scale(0.985); opacity:0} to{transform:none; opacity:1} }
    .v2-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--line); background:var(--paper); flex-shrink:0; }
    .v2-modal-title { font-family:'Instrument Serif',serif; font-size:22px; line-height:1; }
    .v2-modal-title .it { font-style:italic; color:var(--clay); }
    .v2-modal-actions { display:flex; gap:10px; align-items:center; }
    .v2-modal-link { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding:8px 14px; border:1px solid var(--line); border-radius:999px; transition:border-color 0.15s, background 0.15s; }
    .v2-modal-link:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
    .v2-modal-x { appearance:none; border:0; background:transparent; width:32px; height:32px; border-radius:6px; cursor:pointer; font-size:18px; color:var(--ink-soft); transition:background 0.15s, color 0.15s; }
    .v2-modal-x:hover { background:rgba(26,22,20,0.06); color:var(--ink); }
    .v2-modal-body { flex:1; position:relative; background:var(--bg); overflow:hidden; }
    .v2-modal-iframe { width:100%; height:100%; border:0; display:block; background:#fff; position:relative; z-index:2; }
    .v2-modal-fallback { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; text-align:center; gap:18px; z-index:1; }
    .v2-modal-fallback .lbl { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-soft); }
    .v2-modal-fallback .head { font-family:'Instrument Serif',serif; font-size:36px; line-height:1.1; letter-spacing:-0.02em; max-width:420px; }
    .v2-modal-fallback .head .it { font-style:italic; color:var(--clay); }
    .v2-modal-fallback p { color:var(--ink-soft); font-size:15px; max-width:380px; line-height:1.55; }

    /* Mobile-shaped modal — applied when the click originated from a
       mobile-sized container (iPhone artboard or real mobile viewport).
       Lives outside the container query because the modal portals to body. */
    .v2-modal-backdrop.is-mobile { padding:0; align-items:center; justify-content:center; }
    .v2-modal-backdrop.is-mobile .v2-modal { width:402px; max-width:100vw; height:min(820px, 100vh); max-height:100vh; border-radius:0; margin:0 auto; }
    .v2-modal-backdrop.is-mobile .v2-modal-head { padding:14px 16px; padding-top:max(14px, env(safe-area-inset-top, 14px)); }
    .v2-modal-backdrop.is-mobile .v2-modal-title { font-size:16px; }
    .v2-modal-backdrop.is-mobile .v2-modal-link { padding:7px 11px; font-size:10px; letter-spacing:0.06em; }
    .v2-modal-backdrop.is-mobile .v2-modal-x { width:38px; height:38px; font-size:20px; }
    .v2-modal-backdrop.is-mobile .v2-modal-fallback { padding:32px 24px; gap:14px; }
    .v2-modal-backdrop.is-mobile .v2-modal-fallback .head { font-size:26px; }
    .v2-modal-backdrop.is-mobile .v2-modal-fallback p { font-size:14px; }
    /* On a real mobile viewport, go truly full-bleed */
    @media (max-width: 480px) {
      .v2-modal-backdrop.is-mobile { padding:0; align-items:stretch; }
      .v2-modal-backdrop.is-mobile .v2-modal { width:100vw; height:100vh; height:100dvh; }
    }

    /* MOBILE — Safari iPhone responsive (container query so it works inside device frames) */
    @container v2 (max-width: 768px) {
      .v2-marquee { font-size:11px; padding:10px 0; padding-top:max(10px, env(safe-area-inset-top, 0px)); }
      .v2-marquee .item { gap:8px; }

      /* Teaser strip is desktop-only — mobile just scrolls every section. */
      .v2-teasers { display:none; }

      .v2-nav { padding:14px 18px; }
      .v2-logo { font-size:22px; }
      .v2-logo b { display:none; }
      .v2-navlinks > a:not(.v2-cta) { display:none; }
      .v2-cta { padding:8px 14px !important; font-size:11px !important; white-space:nowrap; }

      /* HERO — mashup video above headline, centered */
      .v2-hero { padding:24px 22px 12px; grid-template-columns:1fr; gap:20px; text-align:center; }
      .v2-hero-video-desktop { display:none; }
      .v2-hero-video-mobile { display:block; }
      .v2-hero > div:first-child { order:2; display:flex; flex-direction:column; align-items:center; }
      .v2-hero-img { order:1; aspect-ratio:16/10; width:100%; max-width:360px; margin:0 auto; }
      .v2-hero-img-corner, .v2-hero-img-corner-b { left:14px; right:14px; font-size:9px; text-shadow:0 1px 4px rgba(0,0,0,0.5); }
      .v2-hero-img-corner-b { bottom:12px; }
      .v2-hero-img-corner { top:12px; }
      .v2-hero-img .frame { inset:10px; }
      .v2-mosaic-live { font-size:8px; padding:5px 10px; top:12px; }
      .v2-eyebrow { font-size:9px; margin-bottom:14px; justify-content:center; letter-spacing:0.18em; }
      .v2-eyebrow::before { width:18px; }
      .v2-h1 { font-size:50px; margin-bottom:18px; line-height:1.02; }
      .v2-h1 br { display:none; }
      .v2-sub { font-size:15px; margin:0 auto 22px; max-width:380px; }
      .v2-cta-row { gap:10px; justify-content:center; flex-direction:column; align-items:center; width:100%; max-width:320px; margin:0 auto; }
      .v2-cta-row .v2-btn-prim, .v2-cta-row .v2-btn-sec { width:100%; justify-content:center; padding:15px 22px; font-size:12px; }
      /* 25% off above the buttons */
      .v2-discount { order:-1; font-size:14px; margin:0 0 14px; justify-content:center; flex-basis:auto; }
      .v2-discount::before { display:none; }
      .v2-discount .it { font-size:17px; }

      /* META strip */
      .v2-meta { flex-wrap:wrap; }
      .v2-meta-cell { flex:1 1 100%; padding:18px 22px; border-right:0; border-bottom:1px solid var(--line); }
      .v2-meta-cell:last-child { border-bottom:0; }
      .v2-meta-v { font-size:20px; }

      /* SERVICES */
      .v2-svc-wrap { padding:24px 22px 24px; }
      .v2-section-head { flex-direction:column; align-items:flex-start; gap:18px; margin-bottom:32px; }
      .v2-section-title { font-size:44px; line-height:1; }
      .v2-section-meta { text-align:left; max-width:100%; }
      .v2-svc-row { grid-template-columns:1fr auto; grid-template-areas: "num min" "name price" "desc desc"; gap:6px 14px; padding:22px 0; position:static; }
      .v2-svc-row::after { display:none; }
      .v2-svc-row:hover { padding-left:0; padding-right:0; }
      .v2-svc-row:hover::after { display:none; }
      .v2-svc-row .v2-svc-num { grid-area:num; padding-top:0; font-size:10px; }
      .v2-svc-row .v2-svc-name { grid-area:name; font-size:28px; }
      .v2-svc-row .v2-svc-min  { grid-area:min; padding-top:0; text-align:right; font-size:10px; }
      .v2-svc-row .v2-svc-price { grid-area:price; font-size:26px; text-align:left; }
      .v2-svc-row .v2-svc-price .was { font-size:11px; }
      .v2-svc-row .v2-svc-desc { grid-area:desc; font-size:13px; padding-top:4px; }
      .v2-svc-foot { padding-top:24px; flex-direction:column; align-items:stretch; }
      .v2-svc-foot .v2-btn-prim { width:100%; justify-content:center; }

      /* Feed in motion — desktop layout off, mobile single-mashup on */
      .v2-feed-desktop { display:none !important; }
      .v2-feed-mobile { display:block; }

      /* FEED IN MOTION — centred single video, drop strip + marquee */
      .v2-feed { padding:48px 0 40px; text-align:center; }
      .v2-feed-head { padding:0 22px 24px; flex-direction:column; align-items:center; gap:14px; text-align:center; }
      .v2-feed-title { font-size:40px; line-height:1.02; text-align:center; }
      .v2-feed-title br { display:none; }
      .v2-feed-side { text-align:center; }
      .v2-feed-side a { padding:10px 14px; font-size:11px; margin-top:8px; }

      .v2-stage { padding:0 22px; grid-template-columns:1fr; gap:18px; justify-items:center; }
      .v2-featured { aspect-ratio:9/14; max-width:300px; width:100%; }
      .v2-stage-right { display:none; } /* drop captions + thumbnails on mobile */
      .v2-feed-marquee { display:none; }  /* drop bottom scroller on mobile */

      .v2-feed-foot { padding:28px 22px 0; flex-direction:column; align-items:stretch; gap:20px; border-top:1px solid rgba(255,255,255,0.1); margin-top:24px; }
      .v2-feed-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
      .v2-feed-stats .stat { text-align:center; }
      .v2-feed-stats .stat .num { font-size:26px; line-height:1; white-space:nowrap; }
      .v2-feed-stats .stat .lab { font-size:9px; margin-top:5px; letter-spacing:0.08em; line-height:1.3; }
      .v2-feed-cta { flex-direction:column; align-items:stretch; width:100%; gap:10px; }
      .v2-feed-cta a { text-align:center; justify-content:center; padding:14px 18px; font-size:12px; }

      /* REVIEWS — centered head, horizontal scroll cards */
      .v2-rev { padding:48px 0; text-align:center; }
      .v2-rev .v2-section-head { padding:0 22px; flex-direction:column; align-items:center; gap:14px; text-align:center; }
      .v2-rev .v2-section-title { text-align:center; }
      .v2-rev .v2-section-meta { text-align:center; }
      .v2-rev-grid {
        grid-template-columns:none;
        grid-auto-flow:column;
        grid-auto-columns:82cqw;
        display:grid;
        gap:0;
        background:transparent;
        border:0;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        padding:4px 22px 8px;
        scroll-padding-left:22px;
        scrollbar-width:none;
      }
      .v2-rev-grid::-webkit-scrollbar { display:none; }
      .v2-rev-card { scroll-snap-align:start; min-height:0; border:1px solid var(--line); border-radius:8px; margin-right:10px; padding:22px 20px; text-align:left; }
      .v2-rev-card:first-child { grid-column:auto; }
      .v2-rev-card:first-child .v2-rev-text { font-size:16px; line-height:1.4; }
      .v2-rev-text { font-size:16px; padding-bottom:18px; }

      /* ABOUT — small avatar inline with heading */
      .v2-about { padding:48px 22px; grid-template-columns:1fr; gap:24px; text-align:center; }
      .v2-about-text { display:flex; flex-direction:column; align-items:center; }
      .v2-about-text .v2-about-row { display:flex; align-items:center; gap:14px; margin-bottom:18px; justify-content:center; flex-wrap:nowrap; }
      .v2-about-thumb { display:block; width:56px; height:56px; margin:0; flex-shrink:0; }
      .v2-about-text h2 { font-size:34px; margin:0; line-height:1.05; text-align:left; }
      .v2-about-text h2 br { display:none; }
      .v2-about-text h2 .it { display:block; }
      .v2-about-text p { font-size:15px; text-align:left; }
      .v2-about-img { display:none; }

      /* LOCATION */
      .v2-loc { padding:56px 22px; }
      .v2-loc-grid { grid-template-columns:1fr; gap:24px; margin-top:28px; }
      .v2-loc-info .name { font-size:48px; }
      .v2-loc-info .addr { font-size:15px; }
      .v2-loc-map { aspect-ratio:4/3; }

      /* FAQ — mobile */
      .v2-faq { padding:48px 22px; }
      .v2-faq-list { grid-template-columns:1fr; column-gap:0; }
      .v2-faq-q { padding:22px 0; gap:14px; }
      .v2-faq-q:hover { padding-left:0; padding-right:0; }
      .v2-faq-q h3 { font-size:22px; }
      .v2-faq-a { padding:0 0 22px; }
      .v2-faq-a p { font-size:14px; }

      /* CTA */
      .v2-cta-block { padding:72px 22px; }
      .v2-cta-block h2 { font-size:64px; line-height:1; }
      .v2-cta-block p { font-size:15px; }
      .v2-cta-block .v2-btn-prim { width:100%; max-width:320px; justify-content:center; }

      /* FOOTER */
      .v2-footer { padding:40px 22px; }
      .v2-footer-top { grid-template-columns:1fr 1fr; gap:24px; }
      .v2-footer-logo { font-size:32px; }
      .v2-footer-bot { flex-direction:column; gap:10px; align-items:flex-start; }

      /* MODAL — true fullscreen, cleaner header on phone */
      .v2-modal-backdrop { padding:0; align-items:stretch; }
      .v2-modal { width:100%; height:100vh; height:100dvh; max-height:none; border-radius:0; }
      .v2-modal-head { padding:14px 16px; padding-top:max(14px, env(safe-area-inset-top, 14px)); }
      .v2-modal-title { font-size:16px; }
      .v2-modal-link { padding:7px 11px; font-size:10px; letter-spacing:0.06em; }
      .v2-modal-x { width:38px; height:38px; font-size:20px; }
      .v2-modal-fallback { padding:32px 24px; gap:14px; }
      .v2-modal-fallback .head { font-size:26px; }
      .v2-modal-fallback p { font-size:14px; }
    }
  `;

  const headlineOpts = {
    suits: <>A cut that{' '}<br /><span className="it">suits</span>{' '}the head{' '}<br />it's on.</>,
    sharp: <>Sharp cuts.{' '}<br /><span className="it">Quiet</span>{' '}room.{' '}<br />Ripponlea.</>,
    matt: <>Booked through{' '}<br /><span className="it">Instagram</span>.{' '}<br />Cut in Ripponlea.</>
  };
  const subOpts = {
    suits: "Matt is a barber in Ripponlea, Melbourne - one chair, no upsell, just a careful haircut tailored to you. Skin fades, scissor cuts, classic styles and beard work. Serving St Kilda, Elsternwick, Balaclava and the greater Melbourne area.",
    sharp: "One chair, real-time availability, no upsell. Skin fades, classic cuts, beards and everything in between \u2014 done properly. Servicing St Kilda, Elsternwick, Ripponlea and greater Melbourne.",
    matt: "You probably found Matt on a reel. Same care offline. Single chair, single shop, considered cuts that actually suit you. Servicing St Kilda, Elsternwick, Ripponlea and greater Melbourne."
  };

  const reviews = [
  { t: "One of the best haircuts I've had in years. A real personal approach to understanding my hair and worked with all my needs perfectly. Super approachable guy and would recommend Matt to anyone. Will definitely be coming back!", n: "William Brosnan", l: "Melbourne" },
  { t: "Matt gave me EXACTLY what I wanted and asked for (which is a rare thing to come by). Lovely chilled easygoing vibe and efficient trim! What more could you want — I'll be back for sure!", n: "Nat Anscombe", l: "Local Guide" },
  { t: "Moved to Melbourne over a month ago and put off getting a haircut for too long, found Matt's socials so booked with him. He did a great job and showed what a talented stylist he was! Will defo be back again.", n: "James Jobling", l: "Melbourne" },
  { t: "Matt is my favourite barber in town! He knew what style best suited me and he's super friendly and hilarious. Will be back.", n: "Callum Strafford", l: "Melbourne" },
  { t: "Matt gave me a great haircut! I've been to a lot of barbers that aren't able to translate what I've wanted, but Matt took the time to understand and I'm stoked with the results. I will definitely be back.", n: "Lachie Pern", l: "Melbourne" },
  { t: "Matt is a great newcomer in the area and provides professional barbering services. He offers complimentary hair washing and is a great bloke. Highly recommend.", n: "Lukas Robinson", l: "Ripponlea" },
  { t: "Matt is an easy-going barber that knows his stuff when it comes to cutting hair and what suits you. Highly recommend for a cut.", n: "Nick Richards", l: "Melbourne" }];


  const tickerItems = [...(liveReviews || reviews), ...(liveReviews || reviews)];

  return (
    <div className="v2-root" ref={rootRef}>
      <style dangerouslySetInnerHTML={{ __html: css }} />

      {t.showTopMarquee && <div className="v2-marquee">
        <div className="track">
          {tickerItems.map((r, i) =>
          <div key={i} className="item">
              <span className="star">★★★★★</span>
              <span>"{r.t.slice(0, 80)}"</span>
              <span className="sep">·</span>
              <span>{r.n}, {r.l}</span>
              <span className="sep">·</span>
            </div>
          )}
        </div>
      </div>}

      <nav className="v2-nav">
        <a href="#" onClick={(e) => {if (lockedPage) {e.preventDefault();return;}const w = rootRef.current?.offsetWidth || window.innerWidth;if (w >= 769) {e.preventDefault();goToPage('home');}}} className="v2-logo-link" style={{ textDecoration: 'none', color: 'inherit' }}>
          <div className="v2-logo">Matt <em>the</em> Barber<b>Naarm · Melbourne</b></div>
        </a>
        <div className="v2-navlinks">
          {NAV.map((n) =>
          <a
            key={n.page}
            href={n.anchor}
            onClick={navClick(n.page)}
            className={activePage === n.page ? 'is-active' : ''}
            data-page-link={n.page}>
              {n.label}
            </a>
          )}
          <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)} className="v2-cta">Book Now</a>
        </div>
      </nav>

      <section className={`v2-hero ${sectionClass(['home'])}`}>
        <div>
          <div className="v2-eyebrow">Melbourne · Now taking new clients</div>
          <h1 className="v2-h1">{headlineOpts[t.headline] || headlineOpts.suits}</h1>
          <p className="v2-sub">{subOpts[t.headline] || subOpts.suits}</p>
          <div className="v2-cta-row">
            <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)} className="v2-btn-prim">Book Now <span>→</span></a>
            <a href="#feed" onClick={navClick('work')} className="v2-btn-sec" style={{ opacity: "1" }}>Watch the feed</a>
            <span className="v2-discount"><span className="it" style={{ fontSize: "22px" }}>25%&nbsp;off</span> your first visit</span>
          </div>
        </div>
        <div className="v2-hero-img">
          <HlsVideo
            hlsUrl={HERO_MASHUP}
            loop={true}
            className="v2-hero-video v2-hero-video-desktop"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', border: 0 }}
            aria-label="Matt the Barber — Ripponlea, Melbourne — recent haircuts" />

          <HlsVideo
            hlsUrl={HERO_MASHUP_MOBILE}
            loop={true}
            className="v2-hero-video v2-hero-video-mobile"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', border: 0 }}
            aria-label="Matt the Barber — recent haircuts (mobile)" />

          <div className="v2-hero-vignette"></div>
          <div className="frame"></div>
          <div className="v2-hero-img-corner"><span>FIG. 01</span><span>THE FEED</span></div>
          <div className="v2-hero-img-corner-b"><span>RIPPONLEA</span><span>VIC 2026</span></div>
          <div className="v2-mosaic-live">Matt the Barber</div>
        </div>
      </section>

      {/* HOME teaser strip — desktop multi-page only.
                                                        Mirrors the nav as four cards so people can "explore" rather than scroll. */}
      <section className={`v2-teasers ${sectionClass(['home'])}`} aria-label="Site map">
        <div className="v2-teasers-head">
          <div className="v2-eyebrow"><span>Explore</span></div>
          <h2 className="v2-teasers-title">Pick a <span className="it">door.</span></h2>
        </div>
        <div className="v2-teasers-grid">
          {[
          { page: 'services', num: '01', title: 'Services', italic: 'menu.', desc: 'Skin fades, classic cuts, scissor cuts, beard work. With first-visit pricing.', cta: 'See the menu' },
          { page: 'work', num: '02', title: 'Work in', italic: 'motion.', desc: 'Fourteen recent cuts on a loop, straight from the chair.', cta: 'Watch the feed' },
          { page: 'about', num: '03', title: 'About', italic: 'Matt.', desc: 'A word about who Matt is, plus what real clients leave on Google.', cta: 'Read more' },
          { page: 'visit', num: '04', title: 'Visit the', italic: 'shop.', desc: '38 Glen Eira Rd, Ripponlea. Hours, map and how to get there.', cta: 'Find the shop' },
          { page: 'faq', num: '05', title: 'Quick', italic: 'answers.', desc: 'Where, when, what and how much — and what to do if you can\u2019t find a time.', cta: 'Get answers' }].
          map((card) =>
          <a key={card.page} href={`#page=${card.page}`} onClick={navClick(card.page)} className="v2-teaser">
              <div className="v2-teaser-num">{card.num}</div>
              <h3 className="v2-teaser-title">{card.title}<br /><span className="it">{card.italic}</span></h3>
              <p className="v2-teaser-desc">{card.desc}</p>
              <div className="v2-teaser-cta">{card.cta} <span>→</span></div>
            </a>
          )}
        </div>
      </section>

      {/* SERVICES — directly below hero */}
      <section className={`v2-svc-wrap ${sectionClass(['services'])}`} id="svc" style={{ padding: "0px 48px 32px" }}>
        <div className="v2-section-head">
          <h2 className="v2-section-title">The menu,<br /><span className="it">kept short.</span></h2>
          <div className="v2-section-meta">
            <span>Haircuts in Ripponlea — skin fades, scissor cuts, tapers, classic styles and beard work. Every service includes a consult, wash, hot towel and finish.</span>
            <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)}>View live availability →</a>
          </div>
        </div>
        <div className="v2-svc-list">
          {V2_SERVICES.map((s, i) =>
          <a key={i} href={s.url || BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(s.url || BOOK_URL)} className={`v2-svc-row${s.featured ? ' feat' : ''}`} style={{ textDecoration: 'none', color: 'inherit' }}>
              <div className="v2-svc-num">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="v2-svc-name">{s.featured ? <><em>New Client</em> {s.name.replace('New Client ', '')}</> : s.name}</h3>
              <p className="v2-svc-desc">{s.desc}</p>
              <div className="v2-svc-min">{s.min}</div>
              <div className="v2-svc-price">
                {s.was && <span className="was">{s.was}</span>}
                {s.price}
              </div>
            </a>
          )}
        </div>
        <div className="v2-svc-foot">
          <span className="note">Prices in AUD · GST included</span>
          <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)} className="v2-btn-prim">Book any service <span>→</span></a>
        </div>
      </section>

      {/* FAQ — placed between services and feed for quick answers + SEO */}
      <section className={`v2-faq ${sectionClass(['faq'])}`} id="faq" style={{ padding: "0px 48px 88px" }}>
        <div className="v2-section-head">
          <h2 className="v2-section-title">Quick<br /><span className="it">answers.</span></h2>
          <div className="v2-section-meta">Where, when, what & how much.<br />Anything else — DM on <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)}>Instagram</a>.</div>
        </div>
        <div className="v2-faq-list">
          <details className="v2-faq-item">
            <summary className="v2-faq-q"><h3>Where is the shop?</h3><span className="toggle">+</span></summary>
            <div className="v2-faq-a"><p>38 Glen Eira Rd, Ripponlea - a short walk from Ripponlea Station, easy to reach from St Kilda, Elsternwick and Balaclava.</p></div>
          </details>
          <details className="v2-faq-item">
            <summary className="v2-faq-q"><h3>Do you take walk-ins?</h3><span className="toggle">+</span></summary>
            <div className="v2-faq-a"><p>Walk-ins by chance, bookings preferred. One chair means availability moves quickly - booking online through Square takes about a minute.</p></div>
          </details>
          <details className="v2-faq-item">
            <summary className="v2-faq-q"><h3>What's included in a haircut?</h3><span className="toggle">+</span></summary>
            <div className="v2-faq-a"><p>Every service includes a consultation, wash and finish. No upsell, no rush.</p></div>
          </details>
          <details className="v2-faq-item">
            <summary className="v2-faq-q"><h3>How much is a haircut?</h3><span className="toggle">+</span></summary>
            <div className="v2-faq-a"><p>$55 for a haircut, $80 for a haircut and beard. First-time clients get 25% off ($40 and $60).</p></div>
          </details>
          <details className="v2-faq-item">
            <summary className="v2-faq-q"><h3>What styles do you do?</h3><span className="toggle">+</span></summary>
            <div className="v2-faq-a"><p>Skin fades, classic cuts, scissor cuts, tapers, modern styles and beard work - tailored to suit your hair and face.</p></div>
          </details>
          <details className="v2-faq-item">
            <summary className="v2-faq-q"><h3>How do I book?</h3><span className="toggle">+</span></summary>
            <div className="v2-faq-a"><p>Online through Square (Book Now buttons above), or DM on Instagram <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)} style={{ color: 'var(--clay)', textDecoration: 'underline' }}>@matt.milicia.barber</a>.</p></div>
          </details>
        </div>
      </section>

      {/* FEED IN MOTION — centerpiece */}
      <section className={`v2-feed ${sectionClass(['work'])}`} id="feed" style={{ padding: "0px" }}>
        <div className="v2-feed-head">
          <h2 className="v2-feed-title">The feed,<br /><span className="it"> in motion.</span></h2>
          <div className="v2-feed-side">
            <span className="handle">{IG_HANDLE}</span>
            <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)}>Follow on Instagram →</a>
          </div>
        </div>

        {/* Desktop layout — multi-reel cycling stage + strip + marquee */}
        <div className="v2-feed-desktop">
          <div className="v2-stage">
            <div className="v2-featured">
              <div className="v2-now">
                <span className="live">Now playing</span>
                <span>{String(activeReel + 1).padStart(2, '0')} / {String(V2_REELS.length).padStart(2, '0')}</span>
              </div>
              <FeaturedSlot key={active.id} reel={active} onEnded={advanceReel} />
              <div className="v2-tag-bottom">
                <span>{active.tag}</span>
                <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)} style={{ color: 'inherit', textDecoration: 'none' }}>↗ View on Instagram</a>
              </div>
            </div>

            <div className="v2-stage-right">
              <div className="v2-now-caption">
                <div className="label">From the chair</div>
                <div className="head">Cuts in their <span className="it">natural habitat.</span></div>
                <div className="meta">Updated weekly · {IG_HANDLE}</div>
              </div>

              <div>
                <div className="v2-strip-label">
                  <span>Up next</span>
                  <span className="ctrl">
                    <button onClick={() => setActiveReel((activeReel - 1 + V2_REELS.length) % V2_REELS.length)}>←</button>
                    <button onClick={() => setActiveReel((activeReel + 1) % V2_REELS.length)}>→</button>
                  </span>
                </div>
                <div className="v2-strip">
                  {stripReels.map((r) => {
                    const i = V2_REELS.indexOf(r);
                    return (
                      <div key={i} className={`v2-thumb${i === activeReel ? ' on' : ''}`} onClick={() => setActiveReel(i)}>
                        <div className="v2-thumb-num">{String(i + 1).padStart(2, '0')}</div>
                        <ReelMedia reel={r} title={`thumb ${r.id}`} />
                        <div className="v2-thumb-tag">{r.tag}</div>
                      </div>);

                  })}
                </div>
              </div>
            </div>
          </div>

          {/* Auto-scrolling marquee of all reels */}
          <div className="v2-feed-marquee">
            <div className="row">
              {marqueeReels.map((r, i) =>
              <div key={i} className="item">
                  <ReelMedia reel={r} title={`m ${i}`} />
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Mobile layout — single mashup video, no cycling/strip */}
        <div className="v2-feed-mobile">
          <div className="v2-stage">
            <div className="v2-featured">
              <div className="v2-now">
                <span className="live">Now playing</span>
                <span>{FEED_TAG}</span>
              </div>
              <HlsVideo
                hlsUrl={FEED_MASHUP}
                loop={true}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', border: 0 }}
                aria-label="Matt the Barber — recent haircuts mashup" />
              
              <div className="v2-tag-bottom">
                <span>{FEED_TAG}</span>
                <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)} style={{ color: 'inherit', textDecoration: 'none' }}>↗ View on Instagram</a>
              </div>
            </div>
          </div>
        </div>

        <div className="v2-feed-foot" style={{ padding: "28px 22px 10px" }}>
          <div className="v2-feed-stats">
            <div className="stat"><div className="num">{reviewCount}<span className="it">★</span></div><div className="lab">Five-star Google reviews</div></div>
            <div className="stat"><div className="num">100<span className="it">%</span></div><div className="lab">Clients leave happy</div></div>
            <div className="stat"><div className="num"><span className="it">25%</span></div><div className="lab">Off your first visit</div></div>
          </div>
          <div className="v2-feed-cta">
            <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)} className="outline">Follow on Instagram</a>
            <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)} className="gold">Book Now →</a>
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      {t.showReviews && <section className={`v2-rev ${sectionClass(['about'])}`} id="rev" style={{ padding: "0px 48px 96px" }}>
        <div className="v2-section-head">
          <h2 className="v2-section-title">What the chair<br /><span className="it">leaves behind.</span></h2>
          <div className="v2-section-meta">
            <span>{reviewCount} five-star reviews on Google</span>
            <span>Real clients from Ripponlea, St Kilda, Elsternwick and beyond</span>
          </div>
        </div>
        <div className="v2-rev-grid">
          {(liveReviews || reviews).slice(0, 5).map((r, i) =>
          <div key={i} className="v2-rev-card">
              <div className="v2-rev-stars">★★★★★</div>
              <p className="v2-rev-text">{r.t}</p>
              <div className="v2-rev-by"><b>{r.n}</b> · {r.l}</div>
            </div>
          )}
        </div>
      </section>}

      {/* ABOUT */}
      {t.showAbout && <section className={`v2-about ${sectionClass(['about'])}`} id="about">
        <div className="v2-about-text">
          <div className="v2-about-row">
            <div className="v2-about-thumb">
              <img src="assets/matt.jpeg" alt="Matt the Barber — Ripponlea, Melbourne" />
            </div>
            <h2>Time taken.<br /><span className="it">Cuts considered.</span></h2>
          </div>
          <p>Matt grew up in a family of hairdressers - the chair, the conversation and the craft were always around.</p>
          <p>What you'll actually get in the chair: someone who listens properly, takes the time to figure out what suits you, and builds the cut around it. Whether it's a skin fade, a scissor cut, a classic taper or a beard shape-up - no fade-by-numbers, no rush. This site's just here so you can see the work and book in.</p>
          <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)} className="v2-handle">{IG_HANDLE} ↗</a>
        </div>
        <div className="v2-about-img">
          <img className="photo" src="assets/matt.jpeg" alt="Matt the Barber — Ripponlea, Melbourne portrait" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.03) saturate(1.05)' }} />
          <div className="v2-hero-img-grain"></div>
          <div className="frame"></div>
          <div className="v2-hero-img-corner"><span>FIG. 02</span><span>PORTRAIT</span></div>
          <div className="v2-hero-img-corner-b"><span>RIPPONLEA</span><span>4:5</span></div>
        </div>
      </section>}

      {/* LOCATION */}
      {t.showLocation && <section className={`v2-loc ${sectionClass(['visit'])}`} id="loc" style={{ padding: "0px 48px 96px" }}>
        <div className="v2-section-head">
          <h2 className="v2-section-title">One <span className="it">shop.</span><br />Easy to find.</h2>
          <div className="v2-section-meta">Walk-ins by chance<br />Bookings preferred</div>
        </div>
        <div className="v2-loc-grid">
          <div className="v2-loc-info">
            <div className="name">Ripponlea</div>
            <div className="addr">
              38 Glen Eira Rd<br />
              Ripponlea VIC 3185<br />
              <span style={{ display: 'block', fontSize: 14, color: 'rgba(255,255,255,0.55)', marginTop: 8, marginBottom: 14, lineHeight: 1.45 }}>A short walk from Ripponlea Station - easy to reach from St Kilda, Elsternwick and Balaclava.</span>
              <a href="tel:+61451599228" style={{ color: 'var(--warm)', textDecoration: 'none', display: 'inline-block', marginTop: 8, marginRight: 18, fontFamily: 'DM Mono,monospace', fontSize: 12, letterSpacing: '0.06em' }}>0451 599 228</a>
              <a href="https://www.google.com/maps/search/?api=1&query=38+Glen+Eira+Rd+Ripponlea+VIC+3185" target="_blank" rel="noopener">Open in Google Maps →</a>
            </div>
            <div className="v2-loc-hours">
              <div className="row"><span className="day">Mon</span><span className="hrs">11 — 8</span></div>
              <div className="row"><span className="day">Tue</span><span className="closed">closed</span></div>
              <div className="row"><span className="day">Wed</span><span className="hrs">11 — 8</span></div>
              <div className="row"><span className="day">Thu</span><span className="hrs">11 — 8</span></div>
              <div className="row"><span className="day">Fri</span><span className="hrs">11 — 8</span></div>
              <div className="row"><span className="day">Sat</span><span className="hrs">10 — 6</span></div>
              <div className="row"><span className="day">Sun</span><span className="hrs">11 — 6</span></div>
            </div>
          </div>
          <div className="v2-loc-map">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3149.294151349838!2d144.9959972!3d-37.876803100000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad6698e46428bad%3A0xba83c2743b4bf564!2sMatt%20Milicia%20Barber!5e0!3m2!1sen!2sau!4v1779111399871!5m2!1sen!2sau"
              allowFullScreen=""
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Matt Milicia Barber, 38 Glen Eira Rd, Ripponlea" />
            
          </div>
        </div>
      </section>}

      {/* CTA */}
      <section className={`v2-cta-block ${sectionClass(['visit', 'faq'])}`} style={{ padding: "0px 48px 128px" }}>
        <h2>First visit?<br /><span className="it">25% off.</span></h2>
        <p>One chair, real-time availability, no upsell. Book through Square - should take you a minute.</p>
        <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)} className="v2-btn-prim">Book Now <span>→</span></a>
        <div className="v2-cta-note">Or <span className="it">slide into the DMs</span> · <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)} style={{ color: 'var(--ink)', textDecoration: 'underline' }}>{IG_HANDLE}</a></div>
      </section>

      <footer className="v2-footer">
        <div className="v2-footer-top">
          <div>
            <div className="v2-footer-logo">Matt <em>the</em> Barber</div>
          </div>
          <div className="v2-footer-col">
            <h4>Visit</h4>
            <a href={BOOK_URL} target="_blank" rel="noopener" onClick={openBooking(BOOK_URL)}>Book online</a>
            <a href="#page=visit" onClick={navClick('visit')}>Visit</a>
            <a href="#page=services" onClick={navClick('services')}>Services</a>
          </div>
          <div className="v2-footer-col">
            <h4>Follow</h4>
            <a href={IG_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(IG_URL)}>Instagram</a>
            <a href={TT_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(TT_URL)}>TikTok</a>
            <a href={FB_URL} target="_blank" rel="noopener noreferrer" onClick={openExternal(FB_URL)}>Facebook</a>
            <span>{IG_HANDLE}</span>
          </div>
          <div className="v2-footer-col">
            <h4>Site</h4>
            <a href="#page=work" onClick={navClick('work')}>Work</a>
            <a href="#page=about" onClick={navClick('about')}>About</a>
            <a href="#page=faq" onClick={navClick('faq')}>FAQ</a>
          </div>
        </div>
        <div className="v2-footer-bot">
          <span>© 2026 Matt the Barber · Naarm/Melbourne</span>
          <span>BOOKINGS THROUGH SQUARE</span>
        </div>
      </footer>

      {bookingUrl && ReactDOM.createPortal(
        <div className={`v2-modal-backdrop${isMobileContext ? ' is-mobile' : ''}`} onClick={() => setBookingUrl(null)} onKeyDown={(e) => e.key === 'Escape' && setBookingUrl(null)}>
          <div className="v2-modal" onClick={(e) => e.stopPropagation()}>
            <div className="v2-modal-head">
              <div className="v2-modal-title">Book at <span className="it">Matt the Barber</span></div>
              <div className="v2-modal-actions">
                <a href={bookingUrl} target="_blank" rel="noopener" className="v2-modal-link">Open in new tab ↗</a>
                <button onClick={() => setBookingUrl(null)} className="v2-modal-x" aria-label="Close">✕</button>
              </div>
            </div>
            <div className="v2-modal-body">
              <div className="v2-modal-fallback">
                <div className="lbl">— If the booking page doesn't load below —</div>
                <h3 className="head">Square <span className="it">may block</span> embedding.</h3>
                <p>Some booking pages can't be shown inside another site. If you see this message, click below — opens the live Square booking page in a new tab.</p>
                <a href={bookingUrl} target="_blank" rel="noopener" className="v2-btn-prim">Open Square booking ↗</a>
              </div>
              <iframe
                src={bookingUrl}
                title="Book"
                className="v2-modal-iframe"
                allow="payment *" />
            
            </div>
          </div>
        </div>,
        document.body
      )}

      {useTweaks && window.TweaksPanel &&
      <window.TweaksPanel>
          <window.TweakSection label="Hero" />
          <window.TweakRadio label="Headline"
        value={t.headline}
        options={[
        { value: 'suits', label: 'A cut that suits' },
        { value: 'sharp', label: 'Sharp cuts. Quiet room.' },
        { value: 'matt', label: 'Booked through IG' }]
        }
        onChange={(v) => setTweak('headline', v)} />
          <window.TweakSlider label="Mosaic rotation"
        value={t.mosaicSpeed}
        min={0} max={20} step={1} unit="s"
        onChange={(v) => setTweak('mosaicSpeed', v)} />

          <window.TweakSection label="Accent" />
          <window.TweakColor label="Color"
        value={t.accent}
        options={['#a44a32', '#454f2c', '#1a1614', '#7a4a8a', '#b08040']}
        onChange={(v) => setTweak('accent', v)} />

          <window.TweakSection label="Sections" />
          <window.TweakToggle label="Top review marquee"
        value={t.showTopMarquee}
        onChange={(v) => setTweak('showTopMarquee', v)} />
          <window.TweakToggle label="About section"
        value={t.showAbout}
        onChange={(v) => setTweak('showAbout', v)} />
          <window.TweakToggle label="Reviews wall"
        value={t.showReviews}
        onChange={(v) => setTweak('showReviews', v)} />
          <window.TweakToggle label="Location & hours"
        value={t.showLocation}
        onChange={(v) => setTweak('showLocation', v)} />
        </window.TweaksPanel>
      }
    </div>);

}

window.DirectionAv2 = DirectionAv2;