// J Renee Studios — Las Vegas Modern Portraits service page chrome
// NO announcement bar on this page (per spec — MHD lives elsewhere).

const { useState: vpUseState, useEffect: vpUseEffect, useRef: vpUseRef } = React;

const VP_INK   = "#1A1A1A";
const VP_WHITE = "#FFFFFF";
const VP_GOLD  = "#C9A84C";
const VP_BEIGE = "#F6F2EE";
const VP_GREY  = "#8A8580";

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

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

function VpBtn({ 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: VP_GOLD, color: VP_WHITE, borderColor: VP_GOLD },
    "outline-ink":   { background: "transparent", color: VP_INK, borderColor: VP_INK },
    "outline-light": { background: "transparent", color: VP_WHITE, borderColor: "rgba(255,255,255,0.85)" },
  };
  const [hover, setHover] = vpUseState(false);
  const hoverStyle = hover ? (
    variant === "gold"          ? { background: "#b59340", borderColor: "#b59340" } :
    variant === "outline-ink"   ? { background: VP_INK, color: VP_WHITE } :
                                   { background: VP_WHITE, color: VP_INK, borderColor: VP_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>
  );
}

// ---------- Header (no announcement bar above it on this page) ----------
function VpHeader({ scrolled }) {
  const onLightHero = !scrolled;
  return (
    <header style={{
      position: "sticky", top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.94)" : "rgba(0,0,0,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="vp-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 ? VP_INK : VP_WHITE, textDecoration: "none",
          }}>Home</a>
          <a href="/las-vegas/" style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: scrolled ? VP_INK : VP_WHITE, textDecoration: "none",
          }}>Las Vegas</a>
        </div>
        <a href="/" style={{ justifySelf: "center", textAlign: "center", textDecoration: "none" }}>
          <div style={{
            fontFamily: "Gloock, serif", fontSize: 18, letterSpacing: "0.36em",
            color: scrolled ? VP_INK : VP_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 ? VP_GOLD : "rgba(255,255,255,0.85)", marginTop: 4,
          }}>Studios</div>
        </a>
        <div style={{ justifySelf: "end" }} className="vp-nav-cityTag">
          <span style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
            letterSpacing: "0.42em", textTransform: "uppercase",
            color: scrolled ? VP_GOLD : VP_WHITE,
          }}>Modern Portraits</span>
        </div>
      </div>
    </header>
  );
}

// ---------- Footer (single-city pure: Las Vegas only) ----------
function VpFooter() {
  return (
    <footer style={{ background: VP_INK, color: VP_WHITE, padding: "100px 48px 56px", borderTop: `1px solid ${VP_GOLD}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="vp-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: VP_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: VP_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,
            }}>
              Luxury boudoir, portraits, headshots, and maternity photography for women in Las Vegas, Nevada.
            </p>
          </div>
          {[
            { title: "Las Vegas", items: [
              { label: "Modern Boudoir", href: "/las-vegas/boudoir/" },
              { label: "Modern Headshots", href: "/las-vegas/headshots/" },
              { label: "Modern Portraits", href: "/las-vegas/portraits/" },
              { label: "Modern Maternity", href: "/las-vegas/maternity/" },
              { label: "Iconic", href: "/las-vegas/iconic/" },
            ] },
            { title: "The Studio", items: [
              { label: "Home", href: "/" },
              { label: "About Jennifer", href: "/about/" },
              { label: "Las Vegas", href: "/las-vegas/" },
              { 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" },
              { label: "Las Vegas, Nevada", href: null },
            ] },
          ].map(col => (
            <div key={col.title}>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
                letterSpacing: "0.36em", textTransform: "uppercase",
                color: VP_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: "space-between", 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>
          <span>Las Vegas, Nevada</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  VpEyebrow, VpGoldRule, VpBtn, VpHeader, VpFooter,
  VP_INK, VP_WHITE, VP_GOLD, VP_BEIGE, VP_GREY,
  vpUseState, vpUseEffect, vpUseRef,
});