// J Renee Studios — Las Vegas Hub Page Sections
// Sister to homepage. Same brand system. Routing page — minimal clickables.

const { useState, useEffect } = React;

const INK   = "#1A1A1A";
const WHITE = "#FFFFFF";
const GOLD  = "#C9A84C";
const BEIGE = "#F6F2EE";
const GREY  = "#8A8580";

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

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

// Editorial placeholder image — used until real images dropped in.
function VPlate({ ratio = "4/5", tone = "warm", label = "IMAGE", style }) {
  const tones = {
    warm:   "linear-gradient(170deg, #efe3cf 0%, #d6bf9c 55%, #8c7553 100%)",
    blush:  "linear-gradient(170deg, #f4ece2 0%, #e3d3c0 55%, #b89c7e 100%)",
    moody:  "linear-gradient(170deg, #5a4a39 0%, #2c241c 60%, #15110d 100%)",
    cream:  "linear-gradient(170deg, #f8f1e7 0%, #e7d6bd 60%, #c8a87f 100%)",
    bw:     "linear-gradient(170deg, #e9e6e1 0%, #b5b0a8 50%, #2b2826 100%)",
    desert: "linear-gradient(170deg, #d9b88a 0%, #8e6a44 55%, #2a1d12 100%)",
  };
  return (
    <div style={{
      aspectRatio: ratio, width: "100%", background: tones[tone] || tones.warm,
      position: "relative", overflow: "hidden", ...style,
    }}>
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 35% 40% at 50% 38%, rgba(255,255,255,0.18), transparent 60%)",
      }} />
      <div style={{
        position: "absolute", inset: 0, opacity: 0.18, mixBlendMode: "overlay",
        backgroundImage:
          "radial-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), radial-gradient(rgba(0,0,0,0.5) 1px, transparent 1px)",
        backgroundSize: "3px 3px, 4px 4px", backgroundPosition: "0 0, 1px 2px",
      }} />
      <div style={{
        position: "absolute", bottom: 14, left: 16,
        fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
        letterSpacing: "0.32em", textTransform: "uppercase",
        color: "rgba(255,255,255,0.62)",
      }}>{label}</div>
    </div>
  );
}

function VBtn({ children, variant = "outline-light", onClick, href, style }) {
  const base = {
    padding: "18px 34px",
    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: 12, textDecoration: "none",
  };
  const variants = {
    "outline-light": { background: "transparent", color: WHITE, borderColor: "rgba(255,255,255,0.85)" },
    "outline-ink":   { background: "transparent", color: INK,   borderColor: INK },
    "gold":          { background: GOLD, color: WHITE, borderColor: GOLD },
    "ink":           { background: INK,  color: WHITE, borderColor: INK },
  };
  const [hover, setHover] = useState(false);
  const hoverStyle = hover ? (
    variant === "outline-light" ? { background: WHITE, color: INK, borderColor: WHITE } :
    variant === "outline-ink"   ? { background: INK, color: WHITE } :
    variant === "gold"          ? { background: "#b59340", borderColor: "#b59340" } :
                                   { background: GOLD, borderColor: GOLD }
  ) : {};
  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 (global, dismissible) ----------
function AnnouncementBar() {
  const [open, setOpen] = useState(true);
  // Persist dismissal across reloads
  useEffect(() => {
    if (localStorage.getItem("jr-announce-dismissed") === "1") setOpen(false);
  }, []);
  if (!open) return null;
  const dismiss = (e) => {
    e.stopPropagation(); e.preventDefault();
    localStorage.setItem("jr-announce-dismissed", "1");
    setOpen(false);
  };
  return (
    <a href="/specials/las-vegas-headshot-day/" style={{
      display: "block", background: GOLD, color: INK, textDecoration: "none",
      borderBottom: `1px solid rgba(26,26,26,0.18)`,
      position: "relative", zIndex: 60,
    }}>
      <div className="announce-inner" style={{
        maxWidth: 1320, margin: "0 auto", padding: "14px 56px 14px 48px",
        display: "flex", alignItems: "center", justifyContent: "center",
        gap: 18, minHeight: 50, flexWrap: "wrap", textAlign: "center",
      }}>
        <span style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 600, fontSize: 9.5,
          letterSpacing: "0.36em", textTransform: "uppercase", color: INK,
        }}>This Month's Special</span>
        <span style={{
          width: 1, height: 14, background: "rgba(26,26,26,0.35)",
        }} className="announce-divider" />
        <span style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 500, fontSize: 12,
          letterSpacing: "0.18em", color: INK,
        }}>
          Modern Headshot Day · Once a month in Las Vegas
        </span>
        <span className="announce-cta" style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 600, fontSize: 10.5,
          letterSpacing: "0.32em", textTransform: "uppercase", color: INK,
          borderBottom: `1px solid ${INK}`, paddingBottom: 2,
        }}>Reserve your spot →</span>
      </div>
      <button onClick={dismiss} aria-label="Dismiss announcement" style={{
        position: "absolute", right: 18, top: "50%", transform: "translateY(-50%)",
        background: "transparent", border: "none", cursor: "pointer",
        color: INK, opacity: 0.55, padding: 8, lineHeight: 1, fontSize: 18,
        fontFamily: "Poppins, sans-serif", fontWeight: 300,
      }}>×</button>
    </a>
  );
}

// ---------- Header (sister to homepage; fewer links since this IS the city page) ----------
function VHeader({ 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 ? INK : WHITE, textDecoration: "none",
          }}>Home</a>
          <a href="/about/" style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.32em", textTransform: "uppercase",
            color: scrolled ? INK : WHITE, textDecoration: "none",
          }}>About</a>
        </div>
        <a href="/" style={{ justifySelf: "center", textAlign: "center", textDecoration: "none" }}>
          <div style={{
            fontFamily: "Gloock, serif", fontSize: 18, letterSpacing: "0.36em",
            color: scrolled ? INK : 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 ? 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 ? GOLD : WHITE,
          }}>Las Vegas, NV</span>
        </div>
      </div>
    </header>
  );
}

// ---------- 1. HERO ----------
function VHero() {
  return (
    <section data-screen-label="01 Vegas Hero" style={{ position: "relative", height: "100vh", minHeight: 760, background: INK, overflow: "hidden", marginTop: -1 }}>
      {/* Las Vegas hero — editorial b&w */}
      <img
        src="/images/vegas-hero.jpg"
        alt="Luxury boudoir photographer Las Vegas — J Renee Studios signature editorial portrait"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 35%", display: "block" }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 28%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.78) 100%)",
      }} />
      {/* Left-side wash so headline reads against her hair */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0) 60%)",
      }} />
      <div style={{
        position: "relative", zIndex: 2, height: "100%",
        maxWidth: 1320, margin: "0 auto", padding: "0 48px",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        paddingBottom: 80, paddingTop: 140,
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 36 }}>
          <VGoldRule width={56} />
          <VEyebrow color={GOLD}>Las Vegas, NV &nbsp;·&nbsp; Est. 2001</VEyebrow>
        </div>
        <h1 className="hero-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: WHITE,
          fontSize: "clamp(48px, 8.4vw, 132px)",
          lineHeight: 1.02, letterSpacing: "-0.005em",
          margin: 0, maxWidth: 1100, textTransform: "none", textWrap: "balance",
        }}>
          The Las Vegas <em style={{ fontStyle: "italic", color: "#efe5cf" }}>studio</em>.
        </h1>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.7, color: "rgba(255,255,255,0.86)", maxWidth: 560,
          margin: "44px 0 0 0",
        }}>
          Modern boudoir, portraits, and editorial photography for women — in the city where it all began.
        </p>
      </div>
      <div style={{
        position: "absolute", bottom: 28, left: "50%", transform: "translateX(-50%)",
        fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
        letterSpacing: "0.5em", textTransform: "uppercase",
        color: "rgba(255,255,255,0.55)", zIndex: 2,
      }}>Scroll</div>
    </section>
  );
}

// ---------- 2. WELCOME (SEO heart) ----------
function VWelcome() {
  return (
    <section data-screen-label="02 Welcome Vegas" style={{ background: WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
          <VGoldRule width={36} />
          <VEyebrow>Welcome to Las Vegas</VEyebrow>
          <VGoldRule width={36} />
        </div>
        <h2 className="welcome-h2" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
          fontSize: "clamp(30px, 3.6vw, 44px)", lineHeight: 1.18,
          letterSpacing: "-0.005em", margin: "0 0 48px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          A luxury photography studio<br/>in <em style={{ fontStyle: "italic", color: GOLD }}>Las&nbsp;Vegas</em>, Nevada.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "#2a2622", textAlign: "left",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            J Renee Studios is a luxury photography studio in Las Vegas, Nevada — specializing in modern boudoir, editorial headshots and branding, modern portraits, and luxury maternity. I'm Jennifer — the photographer, and the only photographer who shoots every session here.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            I started my business in Las Vegas more than twenty years ago. Today I run two studios — one in Las Vegas, one in Boise — and I split my time between them every month. The work is the same in both cities: a fully guided, fully supported, all-female experience built around documenting women at the most defining chapters of their lives.
          </p>
          <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, lineHeight: 1.45, color: INK, textAlign: "center", paddingTop: 8 }}>
            The Las Vegas studio is my flagship. It's where the work began, and where the majority of my sessions are still photographed today.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 3. WHAT I OFFER IN LAS VEGAS ----------
function VOffer() {
  const cards = [
    { src: "/images/vegas-boudoir.jpg",
      alt: "Modern boudoir photography Las Vegas — J Renee Studios",
      pos: "center 30%",
      overline: "Modern Boudoir",
      href: "/las-vegas/boudoir/" },
    { src: "/images/vegas-headshots.jpg",
      alt: "Modern headshot photographer Las Vegas — luxury branding photography",
      pos: "center 25%",
      overline: "Modern Headshots & Branding",
      href: "/las-vegas/headshots/" },
    { src: "/images/vegas-portraits.jpg",
      alt: "Modern portrait photographer Las Vegas — women, motherhood, and families",
      pos: "center 20%",
      overline: "Modern Portraits",
      href: "/las-vegas/portraits/" },
    { src: "/images/vegas-maternity.jpg",
      alt: "Modern maternity photographer Las Vegas — editorial maternity portraits",
      pos: "center 30%",
      overline: "Modern Maternity",
      href: "/las-vegas/maternity/" },
  ];
  return (
    <section data-screen-label="03 Vegas Offer" style={{ background: WHITE, padding: "40px 0 0 0" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 48px", marginBottom: 88, textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <VGoldRule width={36} />
          <VEyebrow>What I Offer In Las Vegas</VEyebrow>
          <VGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
          fontSize: "clamp(32px, 4.6vw, 60px)", lineHeight: 1.1,
          letterSpacing: "-0.005em", margin: 0, textTransform: "none",
        }}>
          The work I'm <em style={{ fontStyle: "italic", color: GOLD }}>known</em> for.
        </h2>
      </div>
      <div className="who-strip" style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
      }}>
        {cards.map((c, i) => (
          <a key={i} href={c.href} className="vegas-card" style={{
            borderRight: i < 3 ? "1px solid rgba(26,26,26,0.06)" : "none",
            padding: "0 0 56px 0", textDecoration: "none", color: "inherit",
            display: "block", position: "relative",
          }}>
            <div style={{ aspectRatio: "3/4.4", width: "100%", overflow: "hidden", background: INK }}>
              <img src={c.src} alt={c.alt} style={{
                width: "100%", height: "100%", objectFit: "cover", objectPosition: c.pos,
                display: "block", transition: "transform 600ms cubic-bezier(.2,.8,.2,1)",
              }} />
            </div>
            <div style={{ padding: "36px 32px 0 32px" }}>
              <div style={{
                fontFamily: "Gloock, serif", fontWeight: 400, fontSize: 24,
                letterSpacing: "-0.005em", textTransform: "none",
                color: GOLD, marginBottom: 22, lineHeight: 1.2,
              }}>{c.overline}</div>
              <span style={{
                display: "inline-block",
                fontFamily: "Poppins, sans-serif", fontWeight: 600, fontSize: 12.5,
                letterSpacing: "0.2em", textTransform: "uppercase",
                color: INK, borderBottom: `2px solid ${GOLD}`, paddingBottom: 5,
              }}>Explore →</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
}

// ---------- 4. THE LAS VEGAS STUDIO ----------
function VStudio() {
  return (
    <section data-screen-label="04 Vegas Studio" style={{ background: BEIGE, padding: "160px 48px" }}>
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 96, alignItems: "center",
      }} className="grid-2">
        <div>
          <div style={{ aspectRatio: "4/5", width: "100%", overflow: "hidden", background: INK }}>
            <img
              src="/images/vegas-studio.jpg"
              alt="J Renee Studios Las Vegas studio interior — four views of the private all-female photography studio near McCarran, including main shooting space, bedroom set, paneled portrait wall, and dressing room"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}
            />
          </div>
          <div style={{
            marginTop: 18, fontFamily: "Gloock, serif", fontStyle: "italic",
            fontSize: 15, color: "#3a342e", textAlign: "center",
          }}>
            J Renee Studios &nbsp;·&nbsp; Las Vegas, near McCarran
          </div>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VGoldRule width={36} />
            <VEyebrow>The Las Vegas Studio</VEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 40px 0", textTransform: "none",
            textWrap: "balance",
          }}>
            A real studio.<br/>Not a <em style={{ fontStyle: "italic", color: GOLD }}>hotel</em> suite.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
            lineHeight: 1.85, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 22px 0" }}>
              The Las Vegas studio is my own — a dedicated, private space near the airport, designed entirely for the work I do. It isn't a rented hotel suite or a borrowed Airbnb. It's a real photography studio, with real lighting, a fully stocked client closet, a glam station for hair and makeup, and the privacy a luxury session requires.
            </p>
            <p style={{ margin: 0 }}>
              For the last eleven years, I've been traveling between Las Vegas and Boise every month. Same studio. Same team. Same standard. This is where I've built my business, and where most of my work is still photographed today.
            </p>
            <div style={{ marginTop: 36, display: "flex", alignItems: "center", gap: 16 }}>
              <VGoldRule width={48} />
              <span style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 17, color: "#3a342e",
              }}>Eleven years. Two cities. One photographer.</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 5. FINAL CTA ----------
function VCTA() {
  return (
    <section data-screen-label="05 Vegas CTA" style={{ background: WHITE, padding: "160px 48px", textAlign: "center" }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <VGoldRule width={64} style={{ marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
          fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 1.06,
          letterSpacing: "-0.005em", margin: "0 0 28px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          Tell me <em style={{ fontStyle: "italic", color: GOLD }}>your</em> story.
        </h2>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16.5,
          lineHeight: 1.75, color: "#3a342e", margin: "0 0 56px 0",
        }}>
          Every session starts with a conversation. I respond to every inquiry personally, usually within 24 hours.
        </p>
        <VBtn variant="gold" href="/inquire/" style={{ padding: "22px 44px", fontSize: 11.5 }}>
          Inquire
        </VBtn>
      </div>
    </section>
  );
}

// ---------- FOOTER (matches homepage) ----------
function VFooter() {
  return (
    <footer style={{ background: INK, color: "rgba(255,255,255,0.6)", padding: "72px 48px 36px", borderTop: `1px solid ${GOLD}` }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="footer-grid" style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 56,
          paddingBottom: 56, borderBottom: "1px solid rgba(255,255,255,0.08)",
        }}>
          <div>
            <div style={{
              fontFamily: "Gloock, serif", fontSize: 22, letterSpacing: "0.36em",
              color: WHITE, textTransform: "uppercase", lineHeight: 1, marginBottom: 8,
            }}>J&nbsp;Renee</div>
            <div style={{
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
              letterSpacing: "0.5em", textTransform: "uppercase", color: GOLD, marginBottom: 24,
            }}>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/" },
            ] },
            { 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.32em", textTransform: "uppercase", color: WHITE, marginBottom: 22,
              }}>{col.title}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {col.items.map(it => (
                  it.href ? (
                    <a key={it.label} href={it.href}
                       {...(it.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                       style={{
                         fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
                         color: "rgba(255,255,255,0.65)", textDecoration: "none", borderBottom: "none",
                       }}>{it.label}</a>
                  ) : (
                    <span key={it.label} style={{
                      fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
                      color: "rgba(255,255,255,0.65)",
                    }}>{it.label}</span>
                  )
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="bottom-row" style={{
          display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 28,
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
          letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.4)",
        }}>
          <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, {
  AnnouncementBar, VHeader, VHero, VWelcome, VOffer, VStudio, VCTA, VFooter,
});
