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

// ---------- 1. THE BOLD STATEMENT (typography only, no image) ----------
function BhBoldStatement() {
  return (
    <section data-screen-label="01 BH Bold Statement" style={{
      background: BH_BEIGE, padding: "180px 48px",
      minHeight: "calc(100vh - 50px)",
      display: "flex", alignItems: "center",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", width: "100%" }}>
        <BhEyebrow color={BH_GOLD} style={{ marginBottom: 44 }}>
          Boise &nbsp;·&nbsp; Modern Headshots &amp; Branding
        </BhEyebrow>
        <h1 className="bh-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: BH_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: BH_GOLD }}>is your business</em>.
        </h1>
        <div style={{
          display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, alignItems: "start", maxWidth: 920,
        }} className="bh-subhead-row">
          <BhGoldRule 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 BhGallery() {
  // Reusing same 12 branding images. Boise-specific SEO alt text.
  const BH_ALTS = [
    "Boise brand photographer — confident female founder in navy suit on white, J Renee Studios",
    "Black-and-white editorial Boise headshot — woman in plunge blazer, dark backdrop, J Renee Studios",
    "Boise branding photographer — laughing woman in black blazer on stool, J Renee Studios",
    "Boise headshot for executive woman — silver hair, black dress, dark backdrop, J Renee Studios",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 05",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 06",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 07",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 08",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 09",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 10",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 11",
    "Boise brand photographer J Renee Studios — editorial branding portrait, frame 12",
  ];
  const BH_GALLERY = Array.from({ length: 12 }, (_, i) => {
    const n = String(i + 1).padStart(2, "0");
    return {
      // Reusing the same image files from the Vegas branding gallery.
      src: `/images/vh-gallery-${n}.jpg`,
      alt: BH_ALTS[i],
    };
  });
  return (
    <PortfolioGrid
      images={BH_GALLERY}
      label="02 BH Gallery"
      galleryAria="Boise Modern Headshots & Branding gallery"
      subhead="Selected branding sessions from the Boise studio."
    />
  );
}

Object.assign(window, { BhBoldStatement, BhGallery });