// ICONIC Experience 40+ — chrome (header + footer)
// NO announcement bar. Single-city pure (Las Vegas) on body. Footer is shared site-wide.

const { useState: icUseState, useEffect: icUseEffect, useRef: icUseRef } = React;

const IC_INK   = "#1A1A1A";
const IC_WHITE = "#FFFFFF";
const IC_GOLD  = "#C9A84C";
const IC_BEIGE = "#F6F2EE";
const IC_GREY  = "#8A8580";

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

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

function IcCTA({ children, href = "#inquire", variant = "gold", style }) {
  const [hover, setHover] = icUseState(false);
  const base = {
    display: "inline-flex", alignItems: "center", gap: 14,
    padding: "22px 44px",
    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11.5,
    letterSpacing: "0.42em", textTransform: "uppercase",
    cursor: "pointer", border: "1px solid", borderRadius: 0, textDecoration: "none",
    transition: "background-color 220ms ease, color 220ms ease, border-color 220ms ease",
  };
  const styles = variant === "gold"
    ? { background: hover ? "#b59340" : IC_GOLD, color: IC_WHITE, borderColor: hover ? "#b59340" : IC_GOLD }
    : { background: hover ? IC_WHITE : "transparent", color: hover ? IC_INK : IC_WHITE, borderColor: hover ? IC_WHITE : "rgba(255,255,255,0.85)" };
  return (
    <a href={href} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
       style={{ ...base, ...styles, ...style }}>{children}</a>
  );
}

function IcHeader({ 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="ic-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 ? IC_INK : IC_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 ? IC_INK : IC_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 ? IC_INK : IC_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 ? IC_GOLD : "rgba(255,255,255,0.85)", marginTop: 4,
          }}>Studios</div>
        </a>
        <div style={{ justifySelf: "end" }} className="ic-nav-cityTag">
          <span style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
            letterSpacing: "0.42em", textTransform: "uppercase",
            color: scrolled ? IC_GOLD : IC_WHITE,
          }}>ICONIC 40+ · Vol. One</span>
        </div>
      </div>
    </header>
  );
}

function IcFooter() {
  return (
    <footer style={{ background: IC_INK, color: IC_WHITE, padding: "100px 48px 56px", borderTop: `1px solid ${IC_GOLD}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="ic-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: IC_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: IC_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: 320,
            }}>
              Modern boudoir, portraits, and editorial photography for women — Boise + Las Vegas.
            </p>
          </div>
          {[
            { title: "Quick Links", items: [
              { label: "Boise", href: "/boise/" },
              { label: "Las Vegas", href: "/las-vegas/" },
              { 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" },
            ] },
            { title: "ICONIC", items: [
              { label: "Volume One · Now Booking", href: "/las-vegas/iconic/" },
              { label: "The ICONIC Celebration", href: "/las-vegas/iconic/" },
              { label: "Las Vegas Studio", href: "/las-vegas/" },
            ] },
          ].map(col => (
            <div key={col.title}>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
                letterSpacing: "0.36em", textTransform: "uppercase",
                color: IC_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", textAlign: "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, {
  IcEyebrow, IcRule, IcCTA, IcHeader, IcFooter,
  IC_INK, IC_WHITE, IC_GOLD, IC_BEIGE, IC_GREY,
  icUseState, icUseEffect, icUseRef,
});