// Vegas Headshots & Branding — Sections 3-5: Why It Matters, Who This Is For, What's Included

// ---------- 3. WHEN A SELFIE WON'T CUT IT ----------
function VhWhyItMatters() {
  return (
    <section data-screen-label="03 VH Why It Matters" style={{ background: VH_WHITE, padding: "120px 48px 160px" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <VhGoldRule width={36} />
          <VhEyebrow>Why It Matters</VhEyebrow>
          <VhGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
          fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.04,
          letterSpacing: "-0.008em", margin: "0 0 64px 0", textWrap: "balance",
        }}>
          When a selfie <em style={{ fontStyle: "italic", color: VH_GOLD }}>won't cut it</em>.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16.5,
          lineHeight: 1.95, color: "#2a2622", textAlign: "left",
        }}>
          <p style={{ margin: "0 0 24px 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, lineHeight: 1.5, color: VH_INK, textAlign: "center" }}>
            There's a moment in every woman's career when the imagery stops keeping up.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            The iPhone selfie that worked when you were starting out. The "good lighting in my living room" headshot that got you through your first round of clients. The cropped photo from a friend's wedding that lives on your LinkedIn because you keep meaning to update it.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            That moment has arrived for the woman reading this page.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            Your potential client is meeting you on LinkedIn before she ever books a call. On your speaker page before she fills the seat. On your website before she signs the proposal. And in those first three seconds — before you've said a single word — she's already decided whether you look like the woman who can solve her problem.
          </p>
          <p style={{ margin: "0 0 22px 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 20, lineHeight: 1.5, color: VH_INK }}>
            A modern personal brand isn't a luxury. It's the cost of competing.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            The women whose businesses are scaling, whose fees are climbing, whose calendars are full — they didn't just get better at marketing. They got better at being seen.
          </p>
          <p style={{ margin: 0, textAlign: "center", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, color: VH_GOLD, paddingTop: 16 }}>
            That's what this work is for.
          </p>
        </div>
      </div>
    </section>
  );
}

// ---------- 4. WHO THIS IS FOR ----------
function VhWhoFor() {
  const items = [
    { num: "01", title: "Founders and CEOs",
      body: "Whose face is the company. Whose presence is the asset. Whose investors, clients, and board need to see her at the level she actually operates at." },
    { num: "02", title: "Coaches and consultants",
      body: "Whose authority is built on how she shows up online. Whose first sales conversation happens before she's said a single word." },
    { num: "03", title: "Speakers and authors",
      body: "Whose stage demands a portrait that looks the part. Whose book jacket, press features, and event posters need imagery that holds up." },
    { num: "04", title: "Real estate agents and advisors",
      body: "In a saturated market where every agent has a headshot, she's the one whose images make her unforgettable." },
    { num: "05", title: "Attorneys, executives, and corporate leaders",
      body: "Whose firm bio, professional profile, and conference materials deserve better than a stiff corporate snapshot." },
    { num: "06", title: "Personal brands",
      body: "Whose entire business runs on visibility, content, and trust. Whose imagery is the foundation of every launch, post, and pitch." },
  ];
  return (
    <section data-screen-label="04 VH Who" style={{ background: VH_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 }}>
            <VhGoldRule width={36} />
            <VhEyebrow>Who This Is For</VhEyebrow>
            <VhGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
            fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.06,
            letterSpacing: "-0.005em", margin: 0, textWrap: "balance",
            maxWidth: 980, marginLeft: "auto", marginRight: "auto",
          }}>
            Built for the woman whose work <em style={{ fontStyle: "italic", color: VH_GOLD }}>is the brand</em>.
          </h2>
        </div>
        <div className="vh-cards-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "56px 48px",
        }}>
          {items.map(it => (
            <div key={it.num}>
              <VhGoldRule width={32} style={{ display: "block", marginBottom: 20 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.32em", textTransform: "uppercase", color: VH_GOLD, marginBottom: 14,
              }}>{it.num}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
                fontSize: 22, lineHeight: 1.25, margin: "0 0 14px 0", textWrap: "balance",
              }}>{it.title}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                lineHeight: 1.75, color: "#3a342e", margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 5. WHAT'S INCLUDED ----------
function VhIncluded() {
  const items = [
    { num: "01", title: "Professional hair and makeup",
      body: "With my in-studio team. Editorial-grade, designed for camera and built to photograph at the highest standard." },
    { num: "02", title: "Wardrobe and styling consultation",
      body: "Sent in advance, so you arrive with the right pieces — and confidence in every one of them." },
    { num: "03", title: "Fully guided posing",
      body: "I walk you through every angle, every expression, every shift in body language. You're never standing there wondering what to do." },
    { num: "04", title: "Multiple looks, multiple settings",
      body: "Studio, environmental, close-up, full-body — built around the image library your business actually needs." },
    { num: "05", title: "Every image fully retouched",
      body: "Editorial standard, every frame. Color and black-and-white where appropriate." },
    { num: "06", title: "Full commercial license",
      body: "Use your images anywhere — your website, social, press, ads, books, speaking decks. They're yours." },
  ];
  return (
    <section data-screen-label="05 VH Included" style={{ background: VH_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 }}>
            <VhGoldRule width={36} />
            <VhEyebrow>Every Session Includes</VhEyebrow>
            <VhGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
            fontSize: "clamp(36px, 5vw, 60px)", lineHeight: 1.06,
            letterSpacing: "-0.005em", margin: 0, textWrap: "balance",
            maxWidth: 880, marginLeft: "auto", marginRight: "auto",
          }}>
            What you walk in with. What you walk <em style={{ fontStyle: "italic", color: VH_GOLD }}>out</em> with.
          </h2>
        </div>
        <div className="vh-cards-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "56px 48px",
        }}>
          {items.map(it => (
            <div key={it.num}>
              <VhGoldRule width={32} style={{ display: "block", marginBottom: 20 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
                letterSpacing: "0.32em", textTransform: "uppercase", color: VH_GOLD, marginBottom: 14,
              }}>{it.num}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
                fontSize: 22, lineHeight: 1.25, margin: "0 0 14px 0", textWrap: "balance",
              }}>{it.title}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                lineHeight: 1.75, color: "#3a342e", margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VhWhyItMatters, VhWhoFor, VhIncluded });