// SECTION 1 — HERO
// Full-bleed editorial image, navy overlay, liquid-glass nav.

// ── Shared mobile hook ────────────────────────────────────────────
function useMobile(bp) {
  bp = bp || 768;
  var [m, setM] = React.useState(function() { return window.innerWidth <= bp; });
  React.useEffect(function() {
    function fn() { setM(window.innerWidth <= bp); }
    window.addEventListener("resize", fn, { passive: true });
    return function() { window.removeEventListener("resize", fn); };
  }, [bp]);
  return m;
}
window.useMobile = useMobile;

// ── Global mobile CSS ─────────────────────────────────────────────
(function injectMobileCSS() {
  var existing = document.getElementById("bm-mobile-css");
  if (existing) existing.remove();
  var el = document.createElement("style");
  el.id = "bm-mobile-css";
  el.textContent = `
    @media (max-width: 768px) {

      /* HERO */
      #home { min-height: unset !important; height: 80vh !important; }
      [data-hero-inner] { padding: 0 24px 80px !important; }
      [data-scroll-mark] { display: none !important; }
      [data-hero-img] { object-position: center 35% !important; }

      /* INTRO */
      #intro { padding: 80px 24px !important; }
      [data-intro-inner] { grid-template-columns: 1fr !important; gap: 0 !important; }
      [data-intro-right]  { margin-top: 48px !important; min-height: 320px !important; }

      /* SERVICES */
      #services { padding: 80px 24px !important; }
      [data-services-head] { margin-bottom: 48px !important; }
      [data-services-grid] { grid-template-columns: 1fr !important; }
      [data-service-card]  { min-height: 220px !important; padding: 32px 28px !important; }
      [data-card-title-wrap] { margin-top: 32px !important; }

      /* ABOUT */
      #about { padding: 80px 24px !important; }
      [data-about-inner] { grid-template-columns: 1fr !important; gap: 48px !important; }
      [data-about-left]  { aspect-ratio: 3/4 !important; }
      [data-about-meta]  { grid-template-columns: 1fr !important; gap: 20px !important; }

      /* PORTFOLIO */
      #portfolio { padding: 80px 0 !important; }
      [data-portfolio-head] {
        padding: 0 24px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 32px !important;
        gap: 20px !important;
      }
      [data-masonry] {
        display: flex !important;
        overflow-x: scroll !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        gap: 12px !important;
        padding: 0 24px 4px !important;
        grid-template-columns: unset !important;
        grid-auto-rows: unset !important;
        grid-auto-flow: unset !important;
      }
      [data-masonry]::-webkit-scrollbar { display: none; }
      [data-tile] {
        flex: 0 0 78vw !important;
        height: 440px !important;
        grid-row: unset !important;
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
      }

      /* CONTACT */
      #contact { padding: 80px 24px 0 !important; }
      [data-form-row] { grid-template-columns: 1fr !important; gap: 0 !important; }
      [data-contact-details] {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px 16px !important;
        padding-bottom: 64px !important;
      }

      /* FOOTER */
      footer { padding: 40px 24px !important; }
      [data-footer-inner] {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        gap: 20px !important;
      }
      [data-footer-inner] > * { justify-self: center !important; }
      [data-footer-links] { justify-content: center !important; }
      [data-footer-copy]  { justify-self: center !important; }

      /* TESTIMONIALS */
      [data-ts-h] { font-size: 38px !important; }
    }
  `;
  document.head.appendChild(el);
})();

// ── HeroSection ───────────────────────────────────────────────────
function HeroSection() {
  const mobile = useMobile();
  return (
    <section id="home" style={{ ...s.hero, minHeight: "unset", height: mobile ? "80vh" : "100vh" }}>
      <div style={s.heroBg}>
        <picture>
          <source media="(max-width: 768px)" srcSet="site/assets/bram-header-mobile.jpg" />
          <img
            src="site/assets/bram-header.jpg"
            alt="Bram Marcus by the water, calm landscape"
            style={{ ...s.heroImg, objectPosition: mobile ? "center 35%" : "center top" }}
            data-hero-img
          />
        </picture>
        <div style={s.heroOverlay} />
      </div>

      <Navbar />

      <RevealGroup baseDelay={400} stagger={140} threshold={0.05} style={s.heroInner} data-hero-inner>
        <Reveal as="p" style={s.heroEyebrow}>
          <span style={s.eyebrowDot} />
          Hairstylist · International Certified Colorist
        </Reveal>

        <Reveal as="h1" style={s.heroH1} duration={1300} distance={22}>
          Hair that defines<br />
          <em style={s.heroH1Em}>your character.</em>
        </Reveal>

        <Reveal as="p" style={s.heroSub}>
          Premium hairstyling, personal advice and refined detail by Bram Marcus.
        </Reveal>

        <Reveal style={s.heroCtas}>
          <a href="#contact" style={s.btnPrimaryLight}>Book now</a>
          <a href="#portfolio" style={s.btnSecondaryLight}>Bekijk werk</a>
        </Reveal>

        <Reveal style={s.heroMeta}>
          <span>Amsterdam</span>
          <span style={s.metaDash} />
          <span>By appointment</span>
        </Reveal>
      </RevealGroup>

      <div style={s.scrollMark} data-scroll-mark>
        <span style={s.scrollMarkLabel}>Scroll</span>
        <span style={s.scrollMarkLine} />
      </div>
    </section>
  );
}

// ── Navbar ────────────────────────────────────────────────────────
function Navbar() {
  var [scrolled, setScrolled] = React.useState(false);
  var [open, setOpen]         = React.useState(false);

  React.useEffect(function() {
    var fn = function() { setScrolled(window.scrollY > 24); };
    fn();
    window.addEventListener("scroll", fn, { passive: true });
    return function() { window.removeEventListener("scroll", fn); };
  }, []);

  React.useEffect(function() {
    document.body.style.overflow = open ? "hidden" : "";
    return function() { document.body.style.overflow = ""; };
  }, [open]);

  var navItems = [
    ["Home",      "#home"],
    ["Services",  "#services"],
    ["About",     "#about"],
    ["Portfolio", "#portfolio"],
    ["Contact",   "#contact"],
  ];

  function goTo(href) {
    setOpen(false);
    setTimeout(function() {
      var el = document.querySelector(href);
      if (el) el.scrollIntoView({ behavior: "smooth" });
    }, 340);
  }

  var mobile = useMobile();

  return (
    <>
      {/* ── Floating bar ──────────────────────────────────────── */}
      <div style={{
        ...s.navWrap,
        width: mobile ? "calc(100% - 32px)" : "min(calc(100% - 80px), 1400px)",
      }}>
        <header style={{
          ...s.nav,
          height: mobile ? 62 : 76,
          background: scrolled
            ? "rgba(6,26,46,0.55)"
            : "rgba(6,26,46,0.25)",
          boxShadow: scrolled
            ? "0 4px 32px rgba(6,26,46,0.30)"
            : "0 2px 16px rgba(6,26,46,0.12)",
        }}>
          {/* Brand — always left */}
          <a href="#home" style={s.brand}>
            <span style={s.brandMark}>BM</span>
            <span style={s.brandName}>Bram&nbsp;Marcus</span>
          </a>

          {mobile ? (
            /* Mobile: hamburger right */
            <button
              aria-label={open ? "Menu sluiten" : "Menu openen"}
              onClick={function() { setOpen(function(v) { return !v; }); }}
              style={s.hamburger}
            >
              <span style={s.hamLine} />
              <span style={s.hamLine} />
            </button>
          ) : (
            /* Desktop: nav links center + CTA right */
            <>
              <nav style={s.navLinks}>
                {navItems.map(function([l, h]) {
                  return (
                    <a key={l} href={h} style={s.navLink}
                       onMouseEnter={function(e) { e.currentTarget.style.color = BM.c.paper; }}
                       onMouseLeave={function(e) { e.currentTarget.style.color = "rgba(250,248,244,0.72)"; }}>
                      {l}
                    </a>
                  );
                })}
              </nav>
              <a href="#contact" style={s.navCta}
                 onMouseEnter={function(e) { e.currentTarget.style.background = BM.c.paper; e.currentTarget.style.color = BM.c.navy; }}
                 onMouseLeave={function(e) { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = BM.c.paper; }}>
                Book now
              </a>
            </>
          )}
        </header>
      </div>

      {/* ── Overlay (mobile only) ─────────────────────────────── */}
      {mobile && (
        <div
          onClick={function() { setOpen(false); }}
          style={{
            ...s.drawerOverlay,
            opacity:       open ? 1 : 0,
            pointerEvents: open ? "all" : "none",
          }}
        />
      )}

      {/* ── Drawer (mobile only, slides from right) ──────────── */}
      {mobile && <nav
        aria-label="Hoofdmenu"
        style={{
          ...s.drawer,
          transform: open ? "translateX(0)" : "translateX(100%)",
        }}
      >
        <div style={s.drawerHead}>
          <a href="#home" onClick={function(e){e.preventDefault();goTo("#home");}} style={s.drawerBrand}>
            <span style={s.brandMark}>BM</span>
            <span style={{ ...s.brandName, fontSize: 17 }}>Bram&nbsp;Marcus</span>
          </a>
          <button
            aria-label="Menu sluiten"
            onClick={function() { setOpen(false); }}
            style={s.drawerClose}
          >
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M2 2l14 14M16 2L2 16" stroke="rgba(250,248,244,0.65)" strokeWidth="1.5" strokeLinecap="square"/>
            </svg>
          </button>
        </div>

        <div style={s.drawerLinks}>
          {navItems.map(function([l, h]) {
            return (
              <a
                key={l}
                href={h}
                onClick={function(e) { e.preventDefault(); goTo(h); }}
                style={s.drawerLink}
                onMouseEnter={function(e) { e.currentTarget.style.color = BM.c.paper; e.currentTarget.style.paddingLeft = "6px"; }}
                onMouseLeave={function(e) { e.currentTarget.style.color = "rgba(250,248,244,0.82)"; e.currentTarget.style.paddingLeft = "0"; }}
              >
                {l}
              </a>
            );
          })}
        </div>

        <a
          href="#contact"
          onClick={function(e) { e.preventDefault(); goTo("#contact"); }}
          style={s.drawerCta}
        >
          Book now
        </a>
      </nav>}
    </>
  );
}

window.HeroSection = HeroSection;

const s = window.s = window.s || {};
Object.assign(s, {
  hero: {
    position: "relative",
    minHeight: "100vh",
    width: "100%",
    color: BM.c.paper,
    display: "flex",
    alignItems: "flex-end",
    overflow: "hidden",
    fontFamily: BM.f.sans,
  },
  heroBg: { position: "absolute", inset: 0, zIndex: 0, background: BM.c.navy },
  heroImg: {
    position: "absolute", inset: 0,
    width: "100%", height: "100%",
    objectFit: "cover",
    objectPosition: "center top",
  },
  heroOverlay: {
    position: "absolute", inset: 0,
    background:
      "linear-gradient(90deg, rgba(6,26,46,0.92) 0%, rgba(6,26,46,0.78) 35%, rgba(6,26,46,0.32) 60%, rgba(6,26,46,0.18) 100%), linear-gradient(180deg, rgba(6,26,46,0) 60%, rgba(6,26,46,0.55) 100%)",
  },

  // floating bar wrapper
  navWrap: {
    position: "fixed",
    top: 16,
    left: "50%",
    transform: "translateX(-50%)",
    width: "min(calc(100% - 80px), 1400px)",
    zIndex: 50,
  },
  // bar itself
  nav: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    position: "relative",
    padding: "0 14px 0 18px",
    height: 76,
    borderRadius: 16,
    backdropFilter: "blur(20px) saturate(160%)",
    WebkitBackdropFilter: "blur(20px) saturate(160%)",
    border: "1px solid rgba(250,248,244,0.14)",
    transition: "background 360ms ease, box-shadow 360ms ease",
  },
  brand: { display: "flex", alignItems: "center", gap: 12, color: BM.c.paper, textDecoration: "none" },
  brandMark: {
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    width: 36, height: 36,
    border: "1px solid rgba(250,248,244,0.55)",
    borderRadius: 6,
    fontFamily: BM.f.serif, fontSize: 16, fontWeight: 500, letterSpacing: "0.02em",
    color: BM.c.paper, flexShrink: 0,
  },
  brandName: { fontFamily: BM.f.serif, fontSize: 19, fontWeight: 500, letterSpacing: "0.04em" },

  // desktop nav links
  navLinks: { display: "flex", gap: 36, position: "absolute", left: "50%", transform: "translateX(-50%)" },
  navLink: {
    fontFamily: BM.f.sans, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.72)", textDecoration: "none", fontWeight: 400,
    transition: "color 220ms ease",
  },
  navCta: {
    fontFamily: BM.f.sans, fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
    color: BM.c.paper,
    background: "transparent",
    border: "1px solid rgba(250,248,244,0.45)",
    padding: "11px 22px",
    borderRadius: 8,
    textDecoration: "none", fontWeight: 500,
    transition: "background 240ms ease, color 240ms ease",
  },

  // 2-line hamburger
  hamburger: {
    background: "transparent",
    border: 0,
    padding: "12px 14px",
    cursor: "pointer",
    display: "flex",
    flexDirection: "column",
    gap: 7,
    transition: "opacity 220ms ease",
  },
  hamLine: {
    display: "block",
    width: 26,
    height: 1.5,
    background: BM.c.paper,
  },

  // overlay
  drawerOverlay: {
    position: "fixed",
    inset: 0,
    zIndex: 98,
    background: "rgba(0,0,0,0.50)",
    backdropFilter: "blur(4px)",
    WebkitBackdropFilter: "blur(4px)",
    transition: "opacity 380ms ease",
  },

  // drawer — slides from RIGHT
  drawer: {
    position: "fixed",
    top: 0, right: 0, bottom: 0,
    width: 300,
    zIndex: 99,
    background: BM.c.navy,
    display: "flex",
    flexDirection: "column",
    padding: "0 32px 48px",
    transition: "transform 420ms cubic-bezier(.2,.6,.2,1)",
    borderLeft: "1px solid rgba(250,248,244,0.1)",
  },
  drawerHead: {
    height: 80,
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    borderBottom: "1px solid rgba(250,248,244,0.1)",
    marginBottom: 48,
  },
  drawerBrand: {
    display: "flex", alignItems: "center", gap: 12,
    color: BM.c.paper, textDecoration: "none",
  },
  drawerClose: {
    background: "transparent",
    border: 0,
    cursor: "pointer",
    padding: 6,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
  drawerLinks: {
    display: "flex",
    flexDirection: "column",
    flex: 1,
  },
  drawerLink: {
    fontFamily: BM.f.sans,
    fontSize: 13,
    fontWeight: 400,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "rgba(250,248,244,0.82)",
    textDecoration: "none",
    padding: "15px 0",
    borderBottom: "1px solid rgba(250,248,244,0.08)",
    transition: "color 200ms ease, padding-left 200ms ease",
  },
  drawerCta: {
    marginTop: 40,
    background: BM.c.paper,
    color: BM.c.navy,
    padding: "16px 24px",
    fontFamily: BM.f.sans,
    fontSize: 12,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    fontWeight: 500,
    textDecoration: "none",
    textAlign: "center",
    display: "block",
    borderRadius: 2,
  },

  // hero copy
  heroInner: {
    position: "relative", zIndex: 2,
    padding: "0 80px 96px",
    width: "100%",
    maxWidth: 1480,
    margin: "0 auto",
    boxSizing: "border-box",
  },
  heroEyebrow: {
    display: "flex", alignItems: "center", gap: 14,
    margin: 0, marginBottom: 28,
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.78)", fontWeight: 400,
  },
  eyebrowDot: { width: 6, height: 6, background: BM.c.paper, display: "inline-block" },
  heroH1: {
    margin: 0,
    fontFamily: BM.f.serif,
    fontWeight: 500,
    fontSize: "clamp(52px, 7.6vw, 112px)",
    lineHeight: 0.95,
    letterSpacing: "-0.015em",
    maxWidth: "14ch",
  },
  heroH1Em: { fontStyle: "italic", fontWeight: 400 },
  heroSub: {
    margin: "32px 0 0",
    maxWidth: 520,
    fontSize: 17, lineHeight: 1.6,
    color: "rgba(250,248,244,0.84)",
    fontWeight: 300,
  },
  heroCtas: { marginTop: 44, display: "flex", gap: 16, flexWrap: "wrap" },
  btnPrimaryLight: {
    background: BM.c.paper, color: BM.c.navy,
    padding: "16px 28px",
    fontFamily: BM.f.sans, fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 500,
    textDecoration: "none",
    borderRadius: 2,
    transition: "transform 240ms ease, background 240ms ease",
  },
  btnSecondaryLight: {
    background: "transparent", color: BM.c.paper,
    border: "1px solid rgba(250,248,244,0.55)",
    padding: "15px 28px",
    fontFamily: BM.f.sans, fontSize: 13, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 500,
    textDecoration: "none",
    borderRadius: 2,
    transition: "background 240ms ease, color 240ms ease",
  },
  heroMeta: {
    marginTop: 56, display: "flex", alignItems: "center", gap: 16,
    fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
    color: "rgba(250,248,244,0.6)",
  },
  metaDash: { width: 28, height: 1, background: "rgba(250,248,244,0.4)" },

  scrollMark: {
    position: "absolute", right: 56, bottom: 96, zIndex: 2,
    display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
    color: "rgba(250,248,244,0.6)",
    fontSize: 10, letterSpacing: "0.28em", textTransform: "uppercase",
  },
  scrollMarkLabel: { writingMode: "vertical-rl", transform: "rotate(180deg)" },
  scrollMarkLine: { width: 1, height: 56, background: "rgba(250,248,244,0.55)" },
});