// J Renee Studios — Las Vegas Modern Headshots & Branding service page chrome
// Includes a dismissible announcement bar (Modern Headshot Day).

const { useState: vhUseState, useEffect: vhUseEffect } = React;

const VH_INK   = "#1A1A1A";
const VH_WHITE = "#FFFFFF";
const VH_GOLD  = "#C9A84C";
const VH_BEIGE = "#F6F2EE";
const VH_GREY  = "#8A8580";

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

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

function VhBtn({ 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: VH_GOLD, color: VH_WHITE, borderColor: VH_GOLD },
    "outline-ink":   { background: "transparent", color: VH_INK, borderColor: VH_INK },
    "outline-light": { background: "transparent", color: VH_WHITE, borderColor: "rgba(255,255,255,0.85)" },
  };
  const [hover, setHover] = vhUseState(false);
  const hoverStyle = hover ? (
    variant === "gold"          ? { background: "#b59340", borderColor: "#b59340" } :
    variant === "outline-ink"   ? { background: VH_INK, color: VH_WHITE } :
                                   { background: VH_WHITE, color: VH_INK, borderColor: VH_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>
  );
}

// ---------- Announcement Bar (Modern Headshot Day) ----------
function VhAnnouncementBar({ visible, onDismiss }) {
  if (!visible) return null;
  return (
    <div role="region" aria-label="Modern Headshot Day announcement" style={{
      background: VH_GOLD, borderBottom: "1px solid #b59340",
      padding: "0 56px", height: 50, display: "flex",
      alignItems: "center", justifyContent: "center", position: "relative",
    }} className="vh-announcement">
      <a href="/specials/las-vegas-headshot-day/" style={{
        textDecoration: "none", display: "flex", alignItems: "center", gap: 18,
        flexWrap: "wrap", justifyContent: "center",
      }}>
        <span style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
          letterSpacing: "0.42em", textTransform: "uppercase", color: VH_WHITE,
        }}>This Month's Special</span>
        <span style={{ display: "inline-block", width: 22, height: 1, background: VH_WHITE, opacity: 0.6 }} />
        <span style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11.5,
          letterSpacing: "0.18em", color: VH_WHITE,
        }}>
          <span style={{ fontFamily: "Gloock, serif", fontStyle: "italic", letterSpacing: 0, marginRight: 6 }}>Modern Headshot Day</span>
          <span style={{ color: "rgba(255,255,255,0.8)" }}>· Once a month in Las Vegas</span>
        </span>
        <span style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
          letterSpacing: "0.42em", textTransform: "uppercase", color: VH_WHITE,
          borderBottom: "1px solid rgba(255,255,255,0.85)", paddingBottom: 2,
        }}>Reserve your spot →</span>
      </a>
      <button onClick={onDismiss} aria-label="Dismiss announcement" style={{
        position: "absolute", right: 18, top: "50%", transform: "translateY(-50%)",
        background: "transparent", border: "none", cursor: "pointer",
        color: VH_WHITE, fontSize: 18, lineHeight: 1, padding: 6, opacity: 0.75,
      }}>×</button>
    </div>
  );
}

// ---------- Header ----------
function VhHeader({ scrolled, barVisible }) {
  return (
    <header style={{
      position: "sticky",
      top: barVisible ? 50 : 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",
    }}>
      <div className="nav-grid" 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: VH_INK, textDecoration: "none",
          }}>Home</a>
          <a href="/las-vegas/" style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: VH_INK, 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: VH_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: VH_GOLD, marginTop: 4,
          }}>Studios</div>
        </a>
        <div className="nav-right" style={{ justifySelf: "end", display: "flex", alignItems: "center", gap: 22 }}>
          <span className="nav-cityTag" style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
            letterSpacing: "0.42em", textTransform: "uppercase",
            color: VH_GOLD,
          }}>Modern Headshots &amp; Branding</span>
          <a href="/specials/las-vegas-headshot-day/"
            className="vh-specials-btn"
            style={{
              display: "inline-flex", alignItems: "center",
              padding: "10px 22px",
              background: VH_GOLD, color: VH_WHITE,
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
              letterSpacing: "0.36em", textTransform: "uppercase",
              textDecoration: "none", border: `1px solid ${VH_GOLD}`,
              transition: "background-color 220ms ease, border-color 220ms ease",
            }}
            onMouseEnter={(e) => { e.currentTarget.style.background = "#b59340"; e.currentTarget.style.borderColor = "#b59340"; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = VH_GOLD; e.currentTarget.style.borderColor = VH_GOLD; }}
          >Specials</a>
        </div>
      </div>
    </header>
  );
}

// ---------- Footer ----------
function VhFooter() {
  return (
    <footer style={{ background: VH_INK, color: VH_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: VH_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: VH_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: VH_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>
  );
}

// ---------- Placeholder cell (gold-bordered, gloock label) ----------
// Used by the gallery while the studio swaps in real images.
function VhPlaceholder({ label, sublabel, aspect = "4/5", style }) {
  return (
    <div style={{
      aspectRatio: aspect, background: VH_BEIGE, border: `1px solid ${VH_GOLD}`,
      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
      gap: 10, color: VH_GOLD, ...style,
    }}>
      <span style={{
        fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
        letterSpacing: "0.42em", textTransform: "uppercase", color: VH_GOLD,
      }}>Image</span>
      <span style={{
        fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 28, color: VH_INK,
      }}>{label}</span>
      {sublabel && (
        <span style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
          color: VH_GREY, letterSpacing: "0.18em", textTransform: "uppercase",
        }}>{sublabel}</span>
      )}
    </div>
  );
}

Object.assign(window, {
  VhEyebrow, VhGoldRule, VhBtn, VhAnnouncementBar, VhHeader, VhFooter, VhPlaceholder,
  VH_INK, VH_WHITE, VH_GOLD, VH_BEIGE, VH_GREY, vhUseState, vhUseEffect,
});