// LV Modern Portraits — Sections B: Who Books + What's Included

// ---------- 4. WHO BOOKS MODERN PORTRAITS ----------
function VpWhoBooks() {
  const cards = [
    {
      n: "01",
      label: "The woman at a milestone",
      body: "A birthday year. A new chapter. A divorce that finally feels like freedom. A career pivot. A body she's worked for. The first time she's done something just for herself in years.",
    },
    {
      n: "02",
      label: "The woman who's just decided it's time",
      body: "No big reason. No external trigger. Just a woman who's looked in the mirror and decided she'd like to remember what this version of herself looked like — before this chapter becomes the one before the next one.",
    },
    {
      n: "03",
      label: "The woman with the people who define her chapter",
      body: "Modern Portraits sessions can include the children, the partner, or the loved ones who define this season of her life. She is still the subject — they are part of the portrait of who she is right now.",
    },
  ];
  return (
    <section data-screen-label="04 VP Who Books" style={{ background: VP_BEIGE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VpGoldRule width={36} />
            <VpEyebrow>Who Books Modern Portraits</VpEyebrow>
            <VpGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: 0, textTransform: "none", textWrap: "balance",
          }}>
            Built for the woman ready to be <em style={{ fontStyle: "italic", color: VP_GOLD }}>seen</em>.
          </h2>
        </div>
        <div className="vp-cards-3" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 56,
        }}>
          {cards.map(c => (
            <div key={c.n}>
              <VpGoldRule width={48} style={{ marginBottom: 22 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
                letterSpacing: "0.42em", textTransform: "uppercase", color: VP_GOLD, marginBottom: 14,
              }}>{c.n}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
                fontSize: 22, lineHeight: 1.28, margin: "0 0 18px 0",
                textTransform: "none", letterSpacing: "-0.005em",
              }}>{c.label}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                lineHeight: 1.8, color: "#3a342e", margin: 0,
              }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 5. WHAT'S INCLUDED (3×2) ----------
function VpIncluded() {
  const items = [
    { n: "01", label: "Professional hair and makeup",
      body: "With my in-studio team. Editorial-grade, designed for camera." },
    { n: "02", label: "Wardrobe and styling consultation",
      body: "Sent in advance, so you arrive with the right pieces — and confidence in every one of them." },
    { n: "03", label: "Fully guided posing",
      body: "I walk you through every pose, every angle, every expression — start to finish. You're never wondering what to do." },
    { n: "04", label: "A private, all-female studio",
      body: "Every person you'll meet on the day of your session is a woman. The photographer behind the camera is always me." },
    { n: "05", label: "Every image fully retouched",
      body: "Editorial standard, every frame. Color and black-and-white where appropriate." },
    { n: "06", label: "Next-day private gallery reveal",
      body: "We hop on a Zoom together, walk through your gallery, and narrow to your favorites. You only purchase what you love." },
  ];
  return (
    <section data-screen-label="05 VP Included" style={{ background: VP_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VpGoldRule width={36} />
            <VpEyebrow>Every Session Includes</VpEyebrow>
            <VpGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
            fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: 0, textTransform: "none", textWrap: "balance",
          }}>
            What you walk in with.<br/>
            What you walk <em style={{ fontStyle: "italic", color: VP_GOLD }}>out</em> with.
          </h2>
        </div>
        <div className="vp-cards-3" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", columnGap: 56, rowGap: 64,
        }}>
          {items.map(it => (
            <div key={it.n}>
              <VpGoldRule width={40} style={{ marginBottom: 20 }} />
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
                letterSpacing: "0.42em", textTransform: "uppercase", color: VP_GOLD, marginBottom: 12,
              }}>{it.n}</div>
              <h3 style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
                fontSize: 20, lineHeight: 1.3, margin: "0 0 14px 0",
                textTransform: "none", letterSpacing: "-0.005em",
              }}>{it.label}</h3>
              <p style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14,
                lineHeight: 1.78, color: "#3a342e", margin: 0,
              }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VpWhoBooks, VpIncluded });