// J Renee Studios — Inquire page chrome (header + footer + shared primitives)
// Header is "always light" because the Inquire hero has a white/beige background, not an image.

const { useState: jUseState, useEffect: jUseEffect, useMemo: jUseMemo, useRef: jUseRef } = React;

const J_INK   = "#1A1A1A";
const J_WHITE = "#FFFFFF";
const J_GOLD  = "#C9A84C";
const J_BEIGE = "#F6F2EE";
const J_GREY  = "#8A8580";
const J_GREY_SOFT = "#B7B2AC";

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

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

function JBtn({ children, variant = "gold", onClick, href, type, 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: J_GOLD, color: J_WHITE, borderColor: J_GOLD },
    "outline-ink":   { background: "transparent", color: J_INK, borderColor: J_INK },
    "outline-light": { background: "transparent", color: J_WHITE, borderColor: "rgba(255,255,255,0.85)" },
  };
  const [hover, setHover] = jUseState(false);
  const hoverStyle = hover ? (
    variant === "gold"          ? { background: "#b59340", borderColor: "#b59340" } :
    variant === "outline-ink"   ? { background: J_INK, color: J_WHITE } :
                                   { background: J_WHITE, color: J_INK, borderColor: J_WHITE }
  ) : {};
  const Tag = href ? "a" : "button";
  return (
    <Tag onClick={onClick} href={href} type={type}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ ...base, ...variants[variant], ...hoverStyle, ...style }}>{children}</Tag>
  );
}

// Header — always light because the Journal hero is on white/beige.
function JHeader({ scrolled }) {
  const linkStyle = {
    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
    letterSpacing: "0.32em", textTransform: "uppercase",
    color: J_INK, textDecoration: "none",
  };
  return (
    <header style={{
      position: "sticky", top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.94)" : J_WHITE,
      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",
    }}>
      <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={linkStyle}>Home</a>
          <a href="/about/" style={linkStyle}>About</a>
          <a href="/boise/" style={linkStyle}>Boise</a>
          <a href="/las-vegas/" style={linkStyle}>Las Vegas</a>
        </div>
        <a href="/" style={{ justifySelf: "center", textAlign: "center", textDecoration: "none" }}>
          <div style={{
            fontFamily: "Gloock, serif", fontSize: 18, letterSpacing: "0.36em",
            color: J_INK, 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: J_GOLD, 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: J_GOLD,
          }}>Inquire</span>
        </div>
      </div>
    </header>
  );
}

function JFooter() {
  return (
    <footer style={{ background: J_INK, color: J_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: J_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: J_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 — Boise &amp; Las Vegas.
            </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: "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: "Quick Links", items: [
              { label: "About", href: "/about/" },
              { label: "Journal", href: "/journal/" },
              { label: "Inquire", href: "/inquire/" },
              { 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: J_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, {
  JEyebrow, JGoldRule, JBtn, JHeader, JFooter,
  J_INK, J_WHITE, J_GOLD, J_BEIGE, J_GREY, J_GREY_SOFT,
  jUseState, jUseEffect, jUseMemo, jUseRef,
});