// J Renee Studios — Boise Maternity service page chrome (shared primitives + header + footer)
// No announcement bar on this page per spec.

const { useState: vmUseState, useEffect: vmUseEffect, useRef: vmUseRef } = React;

const VM_INK   = "#1A1A1A";
const VM_WHITE = "#FFFFFF";
const VM_GOLD  = "#C9A84C";
const VM_BEIGE = "#F6F2EE";
const VM_GREY  = "#8A8580";

function VmEyebrow({ children, color = VM_GOLD, style }) {
  return (
    <div style={{
      fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11.5,
      letterSpacing: "0.32em", textTransform: "uppercase",
      color, ...style,
    }}>{children}</div>
  );
}

function VmGoldRule({ width = 56, color = VM_GOLD, style }) {
  return <span style={{ display: "inline-block", height: 1, width, background: color, verticalAlign: "middle", ...style }} />;
}

function VmBtn({ children, variant = "gold", onClick, href, style }) {
  const base = {
    padding: "20px 38px",
    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
    letterSpacing: "0.36em", textTransform: "uppercase",
    cursor: "pointer", border: "1px solid", borderRadius: 0,
    transition: "background-color 220ms ease, color 220ms ease, border-color 220ms ease",
    display: "inline-flex", alignItems: "center", gap: 14, textDecoration: "none",
  };
  const variants = {
    "gold":          { background: VM_GOLD, color: VM_WHITE, borderColor: VM_GOLD },
    "outline-ink":   { background: "transparent", color: VM_INK, borderColor: VM_INK },
    "outline-light": { background: "transparent", color: VM_WHITE, borderColor: "rgba(255,255,255,0.85)" },
  };
  const [hover, setHover] = vmUseState(false);
  const hoverStyle = hover ? (
    variant === "gold"          ? { background: "#b59340", borderColor: "#b59340" } :
    variant === "outline-ink"   ? { background: VM_INK, color: VM_WHITE } :
                                   { background: VM_WHITE, color: VM_INK, borderColor: VM_WHITE }
  ) : {};
  const Tag = href ? "a" : "button";
  return (
    <Tag onClick={onClick} href={href}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ ...base, ...variants[variant], ...hoverStyle, ...style }}>{children}</Tag>
  );
}

function BmHeader({ scrolled }) {
  return (
    <header style={{
      position: "sticky", top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.94)" : "rgba(255,255,255,0)",
      backdropFilter: scrolled ? "blur(14px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(26,26,26,0.08)" : "1px solid transparent",
      transition: "all 320ms ease",
      marginBottom: -88,
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "22px 48px",
        display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 32,
      }}>
        <div className="nav-left" style={{ display: "flex", gap: 32, justifySelf: "start" }}>
          <a href="/" style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: scrolled ? VM_INK : VM_WHITE, textDecoration: "none",
          }}>Home</a>
          <a href="/boise/" style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: scrolled ? VM_INK : VM_WHITE, textDecoration: "none",
          }}>Boise</a>
        </div>
        <a href="/" style={{ justifySelf: "center", textAlign: "center", textDecoration: "none" }}>
          <div style={{
            fontFamily: "Gloock, serif", fontSize: 18, letterSpacing: "0.36em",
            color: scrolled ? VM_INK : VM_WHITE, textTransform: "uppercase", lineHeight: 1,
          }}>J&nbsp;Renee</div>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 8.5,
            letterSpacing: "0.5em", textTransform: "uppercase",
            color: scrolled ? VM_GOLD : "rgba(255,255,255,0.85)", marginTop: 4,
          }}>Studios</div>
        </a>
        <div style={{ justifySelf: "end" }} className="nav-cityTag">
          <span style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
            letterSpacing: "0.42em", textTransform: "uppercase",
            color: scrolled ? VM_GOLD : VM_WHITE,
          }}>Modern Maternity</span>
        </div>
      </div>
    </header>
  );
}

function BmFooter() {
  return (
    <footer style={{ background: VM_INK, color: VM_WHITE, padding: "100px 48px 56px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="footer-grid" style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 64, marginBottom: 80,
        }}>
          <div>
            <div style={{
              fontFamily: "Gloock, serif", fontSize: 22, letterSpacing: "0.36em",
              color: VM_WHITE, textTransform: "uppercase", marginBottom: 6,
            }}>J&nbsp;Renee</div>
            <div style={{
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9.5,
              letterSpacing: "0.5em", textTransform: "uppercase", color: VM_GOLD, marginBottom: 28,
            }}>Studios</div>
            <p style={{
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
              lineHeight: 1.7, color: "rgba(255,255,255,0.55)", margin: 0, maxWidth: 280,
            }}>
              Modern boudoir, portraits, and editorial photography for women — based in Boise.
            </p>
          </div>
          {[
            { title: "Boise", items: [
              { label: "Modern Boudoir", href: "/boise/boudoir/" },
              { label: "Modern Headshots", href: "/boise/headshots/" },
              { label: "Modern Portraits", href: "/boise/portraits/" },
              { label: "Modern Maternity", href: "/boise/maternity/" },
            ] },
            { title: "Quick Links", items: [
              { label: "About", href: "/about/" },
              { label: "Inquire", href: "/inquire/" },
              { label: "Journal", href: "/journal/" },
            ] },
            { title: "Connect", items: [
              { label: "Instagram @jrenee_studios", href: "https://www.instagram.com/jrenee_studios", external: true },
              { label: "jennifer@jreneestudios.com", href: "mailto:jennifer@jreneestudios.com" },
            ] },
          ].map(col => (
            <div key={col.title}>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
                letterSpacing: "0.36em", textTransform: "uppercase",
                color: VM_GOLD, marginBottom: 22,
              }}>{col.title}</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 14 }}>
                {col.items.map(it => (
                  <li key={it.label} style={{
                    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
                    letterSpacing: "0.02em",
                  }}>
                    {it.href ? (
                      <a href={it.href}
                         {...(it.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                         style={{ color: "rgba(255,255,255,0.78)", textDecoration: "none" }}>{it.label}</a>
                    ) : (
                      <span style={{ color: "rgba(255,255,255,0.78)" }}>{it.label}</span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.1)",
          display: "flex", justifyContent: "center", alignItems: "center",
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
          letterSpacing: "0.28em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.4)", flexWrap: "wrap", gap: 16,
        }}>
          <span>© 2026 J Renee Studios &nbsp;·&nbsp; <a href="/privacy/" style={{ color: "inherit", textDecoration: "underline" }}>Privacy</a></span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { VmEyebrow, VmGoldRule, VmBtn, BmHeader, BmFooter, VM_INK, VM_WHITE, VM_GOLD, VM_BEIGE, VM_GREY, vmUseState, vmUseEffect, vmUseRef });