// Vegas Headshots & Branding — Sections 1-2: Bold typographic statement + Gallery 4×3

// ---------- 1. THE BOLD STATEMENT (typography only, no image) ----------
function VhBoldStatement() {
  return (
    <section data-screen-label="01 VH Bold Statement" style={{
      background: VH_BEIGE, padding: "180px 48px",
      minHeight: "calc(100vh - 50px)",
      display: "flex", alignItems: "center",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", width: "100%" }}>
        <VhEyebrow color={VH_GOLD} style={{ marginBottom: 44 }}>
          Las Vegas &nbsp;·&nbsp; Modern Headshots &amp; Branding
        </VhEyebrow>
        <h1 className="vh-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
          fontSize: "clamp(56px, 9vw, 156px)", lineHeight: 1.0,
          letterSpacing: "-0.012em", margin: "0 0 64px 0", textWrap: "balance",
          maxWidth: 1280,
        }}>
          Your personal brand <em style={{ fontStyle: "italic", color: VH_GOLD }}>is your business</em>.
        </h1>
        <div style={{
          display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "start", maxWidth: 920,
        }} className="vh-subhead-row">
          <VhGoldRule width={64} style={{ marginTop: 16 }} />
          <p style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: "clamp(17px, 1.5vw, 21px)",
            lineHeight: 1.7, color: "#2a2622", margin: 0, textWrap: "pretty",
          }}>
            Editorial headshots and personal branding imagery for women CEOs, founders, coaches, and consultants — built to attract better clients, command higher fees, and grow what you've built.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 2. SLIDING GALLERY (12 vertical branding images) ----------
function VhGallery() {
  // Per-image alt text for SEO. 12 frames, vertical.
  const VH_ALTS = [
    "Las Vegas brand photographer — confident female founder in navy suit on white, J Renee Studios",
    "Black-and-white editorial Las Vegas headshot — woman in plunge blazer, dark backdrop, J Renee Studios",
    "Las Vegas branding photographer — laughing woman in black blazer on stool, J Renee Studios",
    "Las Vegas headshot for executive woman — silver hair, black dress, dark backdrop, J Renee Studios",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 05",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 06",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 07",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 08",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 09",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 10",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 11",
    "Las Vegas brand photographer J Renee Studios — editorial branding portrait, frame 12",
  ];
  const VH_GALLERY = Array.from({ length: 12 }, (_, i) => {
    const n = String(i + 1).padStart(2, "0");
    return {
      src: `/images/vh-gallery-${n}.jpg`,
      alt: VH_ALTS[i],
    };
  });
  return (
    <PortfolioGrid
      images={VH_GALLERY}
      label="02 VH Gallery"
      galleryAria="Las Vegas Modern Headshots & Branding gallery"
      subhead="Selected branding sessions from the Las Vegas studio."
    />
  );
}

Object.assign(window, { VhBoldStatement, VhGallery });