// J Renee Studios — Homepage Sections
// Color/font spec is per the user's locked brand bible (overrides design-system tokens):
//   Black #1A1A1A  ·  White #FFFFFF  ·  Gold #C9A84C  ·  Light Beige #F6F2EE
//   Display: Gloock  ·  Body: Poppins Light (300)

const { useState, useEffect, useRef } = React;

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

// ---------- Primitives ----------
function Eyebrow({ 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 GoldRule({ width = 56, color = GOLD, style }) {
  return <span style={{ display: "inline-block", height: 1, width, background: color, verticalAlign: "middle", ...style }} />;
}

// Editorial placeholder image — warm tinted, portrait-respecting composition.
// Optional inner "subject" silhouette band so verticals feel like covers rather than blank gradients.
function Plate({ ratio = "4/5", tone = "warm", label = "IMAGE", grain = true, style, children, overlay }) {
  const tones = {
    warm:   { bg: "linear-gradient(170deg, #efe3cf 0%, #d6bf9c 55%, #8c7553 100%)", subject: "linear-gradient(180deg, rgba(60,42,28,0) 35%, rgba(60,42,28,0.55) 100%)" },
    blush:  { bg: "linear-gradient(170deg, #f4ece2 0%, #e3d3c0 55%, #b89c7e 100%)", subject: "linear-gradient(180deg, rgba(80,55,40,0) 40%, rgba(70,48,32,0.5) 100%)" },
    moody:  { bg: "linear-gradient(170deg, #5a4a39 0%, #2c241c 60%, #15110d 100%)", subject: "linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%)" },
    cream:  { bg: "linear-gradient(170deg, #f8f1e7 0%, #e7d6bd 60%, #c8a87f 100%)", subject: "linear-gradient(180deg, rgba(80,55,40,0) 40%, rgba(70,48,32,0.45) 100%)" },
    bw:     { bg: "linear-gradient(170deg, #e9e6e1 0%, #b5b0a8 50%, #2b2826 100%)", subject: "linear-gradient(180deg, rgba(20,20,20,0) 30%, rgba(20,20,20,0.55) 100%)" },
    ink:    { bg: "linear-gradient(170deg, #2a2520 0%, #14110e 100%)", subject: "linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.4) 100%)" },
  };
  const t = tones[tone] || tones.warm;
  return (
    <div style={{
      aspectRatio: ratio, width: "100%", background: t.bg,
      position: "relative", overflow: "hidden", ...style,
    }}>
      {/* subject vignette */}
      <div style={{ position: "absolute", inset: 0, background: t.subject }} />
      {/* implied silhouette — subtle radial highlight, top-third */}
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse 35% 40% at 50% 38%, rgba(255,255,255,0.18), transparent 60%)",
      }} />
      {/* film grain */}
      {grain && (
        <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",
        }} />
      )}
      {overlay}
      {/* tiny label, bottom-left */}
      <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>
      {children}
    </div>
  );
}

// CTA buttons — single, consistent style across all 3 placements (gold solid).
function CityBtn({ 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 combinedStyle = { ...base, ...variants[variant], ...hoverStyle, ...style };
  if (href) {
    return (
      <a href={href} onClick={onClick}
        onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
        style={combinedStyle}>{children}</a>
    );
  }
  return (
    <button onClick={onClick}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={combinedStyle}>{children}</button>
  );
}

// ---------- Header (sticky, transparent → white on scroll) ----------
function Header({ scrolled }) {
  return (
    <header style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled ? "rgba(255,255,255,0.94)" : "transparent",
      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" }}>
          {[
            { label: "Boise", href: "/boise/" },
            { label: "Las Vegas", href: "/las-vegas/" },
          ].map(it => (
            <a key={it.label} href={it.href} style={{
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
              letterSpacing: "0.32em", textTransform: "uppercase",
              color: scrolled ? INK : WHITE, textDecoration: "none",
              transition: "color 200ms ease",
            }}>{it.label}</a>
          ))}
        </div>
        <div style={{ justifySelf: "center", textAlign: "center" }}>
          <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>
        </div>
        <div className="nav-right-text" style={{ justifySelf: "end" }} />
      </div>
    </header>
  );
}

// ---------- 1. HERO ----------
function Hero() {
  return (
    <section data-screen-label="01 Hero" style={{ position: "relative", height: "100vh", minHeight: 760, background: INK, overflow: "hidden" }}>
      {/* Full-bleed editorial b&w image */}
      <img
        src="/images/hero.jpg?v=2"
        alt="Black-and-white editorial portrait of a woman seated and laughing in a soft cold-shoulder sweater — signature image for J Renee Studios, modern boudoir and portrait photography in Boise and Las Vegas"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center center",
        }}
      />
      {/* Soft vertical gradient for legibility at top + bottom */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 28%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.65) 100%)",
      }} />
      <div style={{
        position: "relative", zIndex: 2, height: "100%",
        maxWidth: 1320, margin: "0 auto", padding: "0 48px",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        paddingBottom: 72, paddingTop: 140,
        alignItems: "flex-start",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 36 }}>
          <GoldRule width={56} />
          <Eyebrow color="rgba(255,255,255,0.92)" style={{ color: GOLD }}>
            Est.&nbsp;2001 &nbsp;·&nbsp; Boise &nbsp;·&nbsp; Las&nbsp;Vegas
          </Eyebrow>
        </div>
        <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",
        }}>
          Are you ready<br/>to <em style={{ fontStyle: "italic", color: "#efe5cf" }}>truly</em> see yourself?
        </h1>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 48, marginTop: 56, flexWrap: "wrap" }}>
          <p style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
            lineHeight: 1.7, color: "rgba(255,255,255,0.86)", maxWidth: 460, margin: 0,
          }}>
            Modern boudoir, portraits, and editorial photography for women — in Boise and Las Vegas.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <CityBtn variant="outline-light" href="/boise/">Explore Boise</CityBtn>
            <CityBtn variant="outline-light" href="/las-vegas/">Explore Las Vegas</CityBtn>
          </div>
        </div>
      </div>
      {/* tiny scroll cue */}
      <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 ----------
function Welcome() {
  return (
    <section data-screen-label="02 Welcome" style={{ background: BEIGE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
          <GoldRule width={36} />
          <Eyebrow>Welcome</Eyebrow>
          <GoldRule width={36} />
        </div>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 17.5,
          lineHeight: 1.85, color: "#2a2622", maxWidth: 640, margin: "0 auto 14px",
        }}>
          I'm Jennifer — the photographer behind J Renee Studios.
        </p>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 17.5,
          lineHeight: 1.85, color: "#2a2622", maxWidth: 640, margin: "0 auto 64px",
        }}>
          Two decades behind a camera. Thousands of women photographed. One thing I've learned that most photographers never figure out:
        </p>
        <div style={{
          fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
          fontSize: "clamp(28px, 3.6vw, 48px)", lineHeight: 1.25,
          color: INK, letterSpacing: "-0.005em", textWrap: "balance",
        }}>
          <span style={{ fontFamily: "Gloock, serif", fontSize: "1.6em", color: GOLD, lineHeight: 0, position: "relative", top: "0.18em", marginRight: "0.05em" }}>“</span>
          My job isn't to make you look beautiful.<br/>
          You already are. My job is to create the conditions<br/>
          where you can finally see what everyone<br/>
          else has always seen.
        </div>
        <div style={{ marginTop: 56, display: "flex", justifyContent: "center" }}>
          <GoldRule width={64} />
        </div>
        <div style={{
          marginTop: 18,
          fontFamily: "Gloock, serif", fontSize: 18, letterSpacing: "0.18em",
          color: "#3a342e", textTransform: "none",
        }}>
          — <em>Jennifer Renee</em>
        </div>
      </div>
    </section>
  );
}

// ---------- 3. THE EXPERIENCE ----------
function Experience() {
  const pillars = [
    {
      n: "01",
      title: "Pampered, start to finish.",
      body: "Professional hair and makeup with my in-studio team. Access to a fully stocked client closet — every size, every color, every style. Preparation emails before your session, so you walk in confident, not nervous.",
    },
    {
      n: "02",
      title: "Fully guided, every step.",
      body: "You're never standing there wondering what to do. I walk you through every pose, every angle, every expression, every movement — start to finish. Most women tell me this is where they were the most nervous. It ends up being their favorite part of the day.",
    },
    {
      n: "03",
      title: "Next-day reveal.",
      body: "Every image retouched. The very next day, we hop on a private Zoom and go through your gallery together — narrowing down your absolute favorites. You only purchase what you love.",
    },
  ];
  return (
    <section data-screen-label="03 Experience" style={{ background: WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 96 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <GoldRule width={36} />
            <Eyebrow>The Experience</Eyebrow>
            <GoldRule 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",
            textWrap: "balance",
          }}>
            Fully guided. <em style={{ fontStyle: "italic", color: GOLD }}>Fully supported.</em><br/>Always you.
          </h2>
        </div>
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 64 }}>
          {pillars.map((p) => (
            <div key={p.n} style={{ position: "relative" }}>
              <GoldRule width={40} style={{ marginBottom: 28 }} />
              <div style={{
                fontFamily: "Gloock, serif", fontSize: 14, letterSpacing: "0.32em",
                color: GOLD, marginBottom: 18,
              }}>{p.n}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
                fontSize: 28, lineHeight: 1.2, margin: "0 0 22px 0",
                textTransform: "none", letterSpacing: "-0.005em",
              }}>{p.title}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15,
                lineHeight: 1.78, color: "#3a3530", margin: 0, maxWidth: 360,
              }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 4. WHO I PHOTOGRAPH ----------
function WhoIPhotograph() {
  const cards = [
    { src: "/images/boudoir.jpg", pos: "center 30%",
      alt: "Black-and-white modern boudoir portrait of a curly-haired woman with her back to camera in a draped white shirt — J Renee Studios boudoir photography Boise and Las Vegas",
      overline: "Modern Boudoir",
      headline: "Seeing yourself the way the people who love you already do.",
      tagline: "For the woman ready to finally believe what everyone else has always seen." },
    { src: "/images/headshots.jpg?v=2", pos: "center 30%",
      alt: "Editorial black-and-white branding portrait of a confident blonde woman in a black v-neck dress, leaning forward with a warm smile — J Renee Studios modern headshots and personal branding for women in Boise and Las Vegas",
      overline: "Modern Headshots & Branding",
      headline: "The face of your work deserves better than a stiff corporate photo.",
      tagline: "Editorial headshots and brand imagery for women CEOs, founders, and entrepreneurs." },
    { src: "/images/portraits.jpg", pos: "center 20%",
      alt: "Soft black-and-white portrait of a woman in an oversized cream sweater seated on a stool, hair in a loose top knot — J Renee Studios modern portrait photography for women in Boise and Las Vegas",
      overline: "Modern Portraits",
      headline: "A portrait worthy of the woman you've become.",
      tagline: "Modern portrait sessions for women, motherhood, and families — including our signature ICONIC Experience 40+." },
    { src: "/images/maternity.jpg", pos: "center 30%",
      alt: "Editorial black-and-white maternity portrait of a pregnant woman in profile in a black turtleneck crop and briefs — J Renee Studios modern maternity photography in Boise and Las Vegas",
      overline: "Modern Maternity",
      headline: "A body in the middle of becoming.",
      tagline: "Editorial maternity portraits for the woman who already trusts hers." },
  ];
  return (
    <section data-screen-label="04 Who I Photograph" style={{ background: WHITE, padding: "160px 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 }}>
          <GoldRule width={36} />
          <Eyebrow>Who I Photograph</Eyebrow>
          <GoldRule 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>
      {/* Edge-to-edge 4-up strip */}
      <div className="who-strip" style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0,
      }}>
        {cards.map((c, i) => (
          <div key={i} style={{
            borderRight: i < 3 ? "1px solid rgba(26,26,26,0.06)" : "none",
            padding: "0 0 56px 0",
          }}>
            <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",
              }} />
            </div>
            <div style={{ padding: "32px 32px 0 32px" }}>
              <div style={{
                fontFamily: "Gloock, serif", fontWeight: 400, fontSize: 24,
                letterSpacing: "normal", textTransform: "none",
                color: GOLD, marginBottom: 16,
              }}>{c.overline}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
                fontSize: 22, lineHeight: 1.25, margin: "0 0 18px 0",
                textTransform: "none", letterSpacing: "-0.005em",
              }}>{c.headline}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13.5,
                lineHeight: 1.7, color: "#5a5550", margin: 0,
                fontStyle: "italic",
              }}>{c.tagline}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ---------- 5. WHY ME ----------
function WhyMe() {
  return (
    <section data-screen-label="05 Why Me" style={{ position: "relative", padding: "180px 48px", overflow: "hidden", marginTop: 96 }}>
      {/* full-bleed moody image */}
      <Plate ratio="auto" tone="moody" label="SIGNATURE · EDITORIAL" style={{
        position: "absolute", inset: 0, height: "100%", width: "100%",
      }} grain={true} />
      <div style={{
        position: "absolute", inset: 0,
        background: "rgba(10,9,7,0.72)",
      }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: 1280, margin: "0 auto", color: WHITE }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <GoldRule width={36} />
            <Eyebrow>Twenty Years Behind the Lens</Eyebrow>
            <GoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: WHITE,
            fontSize: "clamp(34px, 5vw, 68px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: 0, textTransform: "none",
            textWrap: "balance",
          }}>
            Experience you can feel<br/>in <em style={{ fontStyle: "italic", color: GOLD }}>every</em> frame.
          </h2>
        </div>
        {/* stat callouts */}
        <div className="stat-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0,
          borderTop: `1px solid ${GOLD}`, borderBottom: `1px solid ${GOLD}`,
          padding: "56px 0", marginBottom: 80,
        }}>
          {[
            { stat: "20+", lead: "years photographing women", body: "through the most defining chapters of their lives" },
            { stat: "Thousands", lead: "of women photographed", body: "across two decades of doing this work" },
            { stat: "1", lead: "all-female team", body: "trusted with the most personal portraits a woman will ever sit for" },
          ].map((s, i) => (
            <div key={i} style={{
              padding: "0 36px",
              borderLeft: i > 0 ? "1px solid rgba(201,168,76,0.35)" : "none",
              textAlign: "center",
            }}>
              <div style={{
                fontFamily: "Gloock, serif", fontSize: i === 1 ? 44 : 80, color: GOLD,
                lineHeight: 1, marginBottom: 24, letterSpacing: "-0.005em",
              }}>{s.stat}</div>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.32em", textTransform: "uppercase", color: WHITE, marginBottom: 14,
              }}>{s.lead}</div>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13.5,
                lineHeight: 1.65, color: "rgba(255,255,255,0.72)", maxWidth: 260, margin: "0 auto",
                fontStyle: "italic",
              }}>{s.body}</div>
            </div>
          ))}
        </div>
        <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
          <p style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
            lineHeight: 1.85, color: "rgba(255,255,255,0.88)", margin: "0 0 28px 0",
          }}>
            When you book J Renee Studios, you get me. Every session. Every frame. Some studios scale by hiring associate photographers — I scale by going deeper into the work, not wider. My all-female team is here to make you feel completely supported and at ease, and the woman behind the camera is always me.
          </p>
          <p style={{
            fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
            fontSize: 22, lineHeight: 1.45, color: WHITE, margin: 0,
            letterSpacing: "-0.005em", textWrap: "balance",
          }}>
            This isn't my first session. It isn't my thousandth. It's the most meaningful work of my life — and I'd be honored to make it part of yours.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 5.5 MID-PAGE CITY CTA ----------
function MidCityCTA() {
  return (
    <section data-screen-label="05b Mid CTA" style={{ background: WHITE, padding: "140px 48px", textAlign: "center" }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 36 }}>
          <GoldRule width={48} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
          fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.12,
          letterSpacing: "-0.005em", margin: "0 0 48px 0", textTransform: "none",
        }}>
          Where will <em style={{ fontStyle: "italic", color: GOLD }}>we</em> meet?
        </h2>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <CityBtn variant="outline-ink" href="/boise/">Explore Boise</CityBtn>
          <CityBtn variant="outline-ink" href="/las-vegas/">Explore Las Vegas</CityBtn>
        </div>
      </div>
    </section>
  );
}

// ---------- 6. ABOUT JENNIFER ----------
function AboutJennifer() {
  return (
    <section data-screen-label="06 About" style={{ background: BEIGE, padding: "160px 48px" }}>
      <div className="grid-2" style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.85fr 1fr", gap: 96, alignItems: "start",
      }}>
        <div>
          <div style={{ aspectRatio: "3/4", width: "100%", overflow: "hidden", background: INK }}>
            <img
              src="/images/jennifer.jpg"
              alt="Black-and-white editorial portrait of Jennifer Renee Johnson, founder and lead photographer of J Renee Studios — modern boudoir, portrait, and branding photography in Boise and Las Vegas"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%", display: "block" }}
            />
          </div>
          <div style={{
            marginTop: 24, fontFamily: "Gloock, serif", fontStyle: "italic",
            fontSize: 16, color: "#3a342e", textAlign: "center",
          }}>
            Jennifer Renee &nbsp;·&nbsp; Boise + Las Vegas
          </div>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <GoldRule width={36} />
            <Eyebrow>About Jennifer</Eyebrow>
          </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 48px 0", textTransform: "none",
            textWrap: "balance",
          }}>
            The photographer<br/>behind the <em style={{ fontStyle: "italic", color: GOLD }}>work</em>.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
            lineHeight: 1.85, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 22px 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, color: INK }}>
              I started my photography business in 2001.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              For the first fifteen years, I was a wedding photographer. Then years of newborns and maternity portraits — the privilege of being trusted with families during the most tender moments of their lives.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              Today, I'm lucky enough to choose. And what I've chosen is women.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              After photographing my own boudoir session, something shifted. I watched what happened when a woman finally saw herself — really saw herself — through a lens that knew how to look. That's the work I do now. Boudoir. Portraits. Branding. Maternity. All of it under one roof: documenting women, empowering women, and creating images they'll never outgrow.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              I live in Boise — but Las Vegas is my second home, and where it all began. I started my business there over twenty years ago, and for the last eleven years I've been traveling back and forth between both cities. I have a dedicated studio near the Las Vegas airport, and a second studio in Boise. This isn't a side project or a tour. It's my work, in two cities, every month — and it isn't going anywhere.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              I grew up in Hawaii. I've been married to my husband Rodney for over twenty years. I'm raising three kids — my biological son, my adopted daughter, and my late sister's children. I live a quiet, intentional life so I can pour everything I have into the women in front of my camera.
            </p>
            <p style={{ margin: "0 0 0 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 19, color: INK, lineHeight: 1.45 }}>
              That's who you'd be working with.
            </p>
            <div style={{ marginTop: 40, display: "flex", alignItems: "center", gap: 16 }}>
              <GoldRule width={56} />
              <span style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 18, color: "#3a342e",
              }}>Jennifer</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 7. LOVE NOTES (testimonials) ----------
function LoveNotes() {
  const reviews = [
    {
      name: "Sarah M.",
      avatar: "/images/avatar-sarah.jpg",
      avatarAlt: "Sarah M., J Renee Studios boudoir client portrait",
      text: "I went into my session feeling very nervous, but from the moment I arrived, Jenn made me feel completely at ease. She guided me through every step in such a warm, encouraging way that the nerves melted into laughter and fun. Looking through my photos, I was blown away.",
    },
    {
      name: "Diana R.",
      avatar: "/images/avatar-diana.jpg",
      avatarAlt: "Diana R., J Renee Studios boudoir client — 30th wedding anniversary session",
      text: "I did this as a gift for my husband for our 30th wedding anniversary. He says it's the best gift he's ever received — but honestly, I think it has been a bigger gift for me. Jenn captured me how he sees me, so finally I can see myself how he does.",
    },
    {
      name: "Mia T.",
      avatar: "/images/avatar-mia.jpg",
      avatarAlt: "Mia T., J Renee Studios boudoir client portrait — motherhood session",
      text: "As a mom, I've struggled with feeling fully comfortable in my post-baby body, so this was way outside my comfort zone. From the moment I sat down for hair and makeup, everything started to shift. Jenn coached me through every pose with such patience and encouragement — it never felt forced.",
    },
  ];
  const Star = () => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill={GOLD} aria-hidden="true">
      <path d="M12 .587l3.668 7.568L24 9.75l-6 5.85 1.42 8.4L12 19.77l-7.42 4.23L6 15.6 0 9.75l8.332-1.595z"/>
    </svg>
  );
  return (
    <section data-screen-label="07 Love Notes" style={{ background: WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <GoldRule width={36} />
            <Eyebrow>Love Notes</Eyebrow>
            <GoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 18px 0", textTransform: "none",
          }}>
            What women say <em style={{ fontStyle: "italic", color: GOLD }}>after</em>.
          </h2>
          <p style={{
            fontFamily: "Poppins, sans-serif", fontStyle: "italic", fontWeight: 300,
            fontSize: 14, color: GREY, margin: 0,
          }}>
            Real reviews from real women. Pulled from Google.
          </p>
        </div>
        <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {reviews.map((r, i) => (
            <div key={i} style={{
              background: WHITE, padding: "44px 36px 36px 36px",
              border: `1px solid rgba(201,168,76,0.32)`,
              boxShadow: "0 1px 0 rgba(26,26,26,0.04), 0 18px 40px -24px rgba(26,26,26,0.18)",
              display: "flex", flexDirection: "column",
            }}>
              <div style={{ display: "flex", gap: 4, marginBottom: 24 }}>
                {[...Array(5)].map((_, j) => <Star key={j} />)}
              </div>
              <p style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
                fontSize: 17.5, lineHeight: 1.55, color: INK, margin: "0 0 32px 0",
                letterSpacing: "-0.005em",
              }}>
                "{r.text}"
              </p>
              <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 14, paddingTop: 24, borderTop: "1px solid rgba(26,26,26,0.08)" }}>
                <div>
                  <div style={{
                    fontFamily: "Gloock, serif", fontSize: 16, color: INK, lineHeight: 1.1,
                  }}>{r.name}</div>
                  <div style={{
                    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9.5,
                    letterSpacing: "0.32em", textTransform: "uppercase", color: GREY, marginTop: 6,
                  }}>Verified Google Review</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 64, textAlign: "center",
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 12.5,
          letterSpacing: "0.18em", textTransform: "uppercase", color: "#3a342e",
        }}>
          <span style={{ color: GOLD, marginRight: 8 }}>★</span>
          4.9 / 5 &nbsp;·&nbsp; 127+ Verified Google Reviews &nbsp;·&nbsp; Las Vegas + Boise
        </div>
      </div>
    </section>
  );
}

// ---------- 8. YOUR STUDIO ----------
function YourStudio() {
  const cards = [
    { city: "Boise, ID", headline: "My home base.",
      sub: "Modern Boudoir. Modern Headshots & Branding. Modern Portraits. Modern Maternity. Plus Modern Headshot Day, monthly.",
      cta: "Explore Boise", href: "/boise/" },
    { city: "Las Vegas, NV", headline: "My second home — and where it all began.",
      sub: "Modern Boudoir. Modern Headshots & Branding. Modern Portraits. Modern Maternity. Plus Modern Headshot Day, monthly.",
      cta: "Explore Las Vegas", href: "/las-vegas/" },
  ];
  return (
    <section data-screen-label="08 Your Studio" style={{ background: BEIGE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 88 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <GoldRule width={36} />
            <Eyebrow>Your Studio</Eyebrow>
            <GoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
            fontSize: "clamp(34px, 4.8vw, 64px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: 0, textTransform: "none",
          }}>
            Choose where <em style={{ fontStyle: "italic", color: GOLD }}>we'll</em> meet.
          </h2>
        </div>
        <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: WHITE, padding: "72px 56px",
              border: `1px solid rgba(201,168,76,0.4)`,
              display: "flex", flexDirection: "column",
              minHeight: 420,
            }}>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.42em", textTransform: "uppercase",
                color: GOLD, marginBottom: 28,
              }}>{c.city}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: INK,
                fontSize: "clamp(28px, 3.2vw, 44px)", lineHeight: 1.15,
                letterSpacing: "-0.005em", margin: "0 0 32px 0", textTransform: "none",
                textWrap: "balance", maxWidth: 420,
              }}>{c.headline}</h3>
              <GoldRule width={40} style={{ marginBottom: 32 }} />
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                lineHeight: 1.78, color: "#3a342e", margin: "0 0 48px 0", maxWidth: 440,
              }}>{c.sub}</p>
              <div style={{ marginTop: "auto" }}>
                <CityBtn variant="outline-ink" href={c.href}>{c.cta} →</CityBtn>
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, textAlign: "center",
          fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 17,
          color: "#3a342e",
        }}>
          Two studios. Two cities. One photographer — for over a decade.
        </div>
      </div>
    </section>
  );
}

// ---------- 9. CLOSING ----------
function Closing() {
  return (
    <section data-screen-label="09 Closing" style={{ background: INK, color: WHITE, padding: "200px 48px", textAlign: "center", position: "relative", overflow: "hidden" }}>
      {/* very subtle moody backdrop */}
      <div style={{
        position: "absolute", inset: 0, opacity: 0.18,
        background: "radial-gradient(ellipse 60% 50% at 50% 40%, #c9a84c, transparent 70%)",
      }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: 880, margin: "0 auto" }}>
        <GoldRule width={64} style={{ marginBottom: 48 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: WHITE,
          fontSize: "clamp(40px, 6vw, 92px)", lineHeight: 1.04,
          letterSpacing: "-0.005em", margin: "0 0 36px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          That feeling<br/>isn't an <em style={{ fontStyle: "italic", color: GOLD }}>accident</em>.
        </h2>
        <p style={{
          fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
          fontSize: 24, lineHeight: 1.4, color: "rgba(255,255,255,0.82)",
          margin: "0 0 64px 0",
        }}>
          It's your sign.
        </p>
        <CityBtn variant="gold" href="/inquire/" style={{ padding: "22px 44px", fontSize: 11.5 }}>
          Schedule Your Free Consultation
        </CityBtn>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function FooterJR() {
  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,
            }}>
              Modern boudoir, portraits, and editorial photography for women. Studios in Boise + Las Vegas.
            </p>
          </div>
          {[
            { title: "The Studio", items: [
              { label: "About Jennifer", href: "/about/" },
              { label: "Journal",        href: "/journal/" },
              { label: "Inquire",        href: "/inquire/" },
            ]},
            { title: "Sessions", items: [
              { label: "Boise",     href: "/boise/" },
              { label: "Las Vegas", href: "/las-vegas/" },
              { label: "ICONIC Experience 40+", href: "/las-vegas/iconic/" },
            ]},
            { title: "Connect", items: [
              { label: "Instagram @jrenee_studios",   href: "https://instagram.com/jrenee_studios" },
              { label: "hello@jreneestudios.com",     href: "mailto:hello@jreneestudios.com" },
              { label: "Boise, ID",     href: "/boise/" },
              { label: "Las Vegas, NV", href: "/las-vegas/" },
            ]},
          ].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 => (
                  <a key={it.label} href={it.href} style={{
                    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
                    color: "rgba(255,255,255,0.65)", textDecoration: "none", borderBottom: "none",
                  }}>{it.label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div 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>Boise &nbsp;·&nbsp; Las Vegas</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Header, Hero, Welcome, Experience, WhoIPhotograph, WhyMe,
  MidCityCTA, AboutJennifer, LoveNotes, YourStudio, Closing, FooterJR,
});
