// LV Modern Portraits — Sections C: Trust Block + ICONIC callout + Love Notes — BOISE

// ---------- 6. THE TRUST BLOCK (full-bleed moody, dark overlay) ----------
function VpTrust() {
  return (
    <section data-screen-label="06 VP Trust" style={{
      position: "relative", padding: "180px 48px", background: VP_INK, overflow: "hidden",
    }}>
      <img
        src="/images/vegas-studio.jpg"
        alt="Boise portrait photographer with twenty years of experience"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center", opacity: 0.42, filter: "grayscale(0.2)",
        }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 100%)",
      }} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 36 }}>
          <VpGoldRule width={48} />
          <VpEyebrow color={VP_GOLD}>Twenty Years Behind The Lens</VpEyebrow>
          <VpGoldRule width={48} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VP_WHITE,
          fontSize: "clamp(40px, 6vw, 80px)", lineHeight: 1.06,
          letterSpacing: "-0.005em", margin: "0 0 48px 0", textTransform: "none", textWrap: "balance",
        }}>
          A portrait that earns a <em style={{ fontStyle: "italic", color: "#efe5cf" }}>wall</em>.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "rgba(255,255,255,0.86)", textAlign: "left", maxWidth: 720, margin: "0 auto",
        }}>
          <p style={{ margin: "0 0 20px 0" }}>
            I've been a working photographer for over twenty years. I've photographed thousands of women — at milestone birthdays, after divorces, before launches, during reinventions, and on quiet Tuesdays when they finally decided it was time.
          </p>
          <p style={{ margin: "0 0 20px 0" }}>
            Every session is the same: fully guided, fully supported, built around her.
          </p>
          <p style={{ margin: "0 0 20px 0" }}>
            The images I make are not meant to live on a phone screen for six months and disappear into a camera roll. They are meant to live where she lives — above her bed, in her dressing room, on a wall she walks past every day and remembers exactly who she was, in this chapter, right now.
          </p>
          <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 19, lineHeight: 1.5, color: "#efe5cf", textAlign: "center", paddingTop: 18 }}>
            These are not photographs you store. They are portraits you display.
          </p>
        </div>
        <div style={{ marginTop: 56, textAlign: "center" }}>
          <VpBtn variant="gold" href="/inquire/" style={{ padding: "22px 44px", fontSize: 11.5 }}>
            Tell Me Your Story → Inquire
          </VpBtn>
        </div>
      </div>
    </section>
  );
}

// ---------- 7. ICONIC EXPERIENCE 40+ CALLOUT ----------
function VpIconic() {
  return (
    <section data-screen-label="07 VP ICONIC" style={{ background: VP_BEIGE, padding: "140px 48px" }}>
      <div className="vp-iconic-grid" style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 88, alignItems: "center",
      }}>
        <div className="vp-mag" style={{ aspectRatio: "4/5", width: "100%", overflow: "hidden", background: VP_INK, position: "relative", boxShadow: "0 30px 80px -20px rgba(0,0,0,0.35)" }}>
          <img
            src="/images/vp-iconic.jpg?v=1"
            alt="ICONIC Experience 40+ Boise — black-and-white editorial portrait of a confident, joyful woman over 40 in a soft white blouse, signature signature studio portrait by J Renee Studios"
            onError={(e)=>{ e.currentTarget.style.display = "none"; e.currentTarget.parentElement.classList.add("vp-iconic-fallback"); }}
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%", display: "block" }}
          />

          {/* Subtle vignette for legibility */}
          <div style={{
            position: "absolute", inset: 0, pointerEvents: "none",
            background: "linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,0.55) 100%)",
          }} />

          {/* Top issue strip */}
          <div style={{
            position: "absolute", top: 0, left: 0, right: 0,
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "14px 22px",
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
            letterSpacing: "0.42em", textTransform: "uppercase", color: VP_WHITE,
            borderBottom: "1px solid rgba(255,255,255,0.35)",
          }}>
            <span>Issue No. 40 · Vol. I</span>
            <span>$ Priceless</span>
          </div>

          {/* Masthead */}
          <div style={{
            position: "absolute", top: 36, left: 0, right: 0, textAlign: "center",
            fontFamily: "Gloock, serif", fontWeight: 400, color: VP_WHITE,
            fontSize: "clamp(64px, 10vw, 132px)",
            lineHeight: 0.9, letterSpacing: "-0.015em",
            textShadow: "0 2px 24px rgba(0,0,0,0.35)",
          }}>ICONIC</div>

          {/* Subline under masthead */}
          <div style={{
            position: "absolute", top: "calc(36px + clamp(64px, 10vw, 132px) * 0.95)", left: 0, right: 0,
            textAlign: "center",
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
            letterSpacing: "0.5em", textTransform: "uppercase", color: VP_GOLD,
          }}>The Women Over Forty Issue</div>

          {/* Cover line — left rail */}
          <div className="vp-mag-coverline-left" style={{
            position: "absolute", left: 22, bottom: 88, maxWidth: "55%",
          }}>
            <div style={{
              fontFamily: "Gloock, serif", fontWeight: 400, color: VP_WHITE,
              fontSize: "clamp(18px, 2.4vw, 30px)", lineHeight: 1.05,
              letterSpacing: "-0.005em",
              textShadow: "0 2px 16px rgba(0,0,0,0.5)",
            }}>
              Not a footnote.<br />
              <em style={{ color: VP_GOLD, fontStyle: "italic" }}>The whole story.</em>
            </div>
            <div style={{
              marginTop: 8,
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
              letterSpacing: "0.4em", textTransform: "uppercase", color: VP_WHITE,
              textShadow: "0 1px 8px rgba(0,0,0,0.5)",
            }}>A signature studio campaign · pp. 04—40</div>
          </div>

          {/* Cover line — right rail */}
          <div className="vp-mag-coverline-right" style={{
            position: "absolute", right: 22, bottom: 130, maxWidth: "38%",
            textAlign: "right",
          }}>
            <div style={{
              fontFamily: "Gloock, serif", fontStyle: "italic", color: VP_WHITE,
              fontSize: "clamp(13px, 1.4vw, 17px)", lineHeight: 1.25,
              textShadow: "0 1px 10px rgba(0,0,0,0.55)",
            }}>"She walked in nervous.<br />She walked out unshakable."</div>
          </div>

          {/* Bottom strip */}
          <div style={{
            position: "absolute", bottom: 0, left: 0, right: 0,
            display: "flex", justifyContent: "space-between", alignItems: "flex-end",
            padding: "14px 22px",
            borderTop: "1px solid rgba(255,255,255,0.35)",
          }}>
            <div style={{
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
              letterSpacing: "0.42em", textTransform: "uppercase", color: VP_WHITE,
            }}>J Renee Studios · Boise</div>
            {/* Barcode */}
            <div aria-hidden="true" style={{
              display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 3,
            }}>
              <div style={{ display: "flex", gap: 1 }}>
                {[2,1,3,1,2,4,1,2,3,1,2,1,3,2,1,4,1,2,1,3].map((w, i) => (
                  <span key={i} style={{ width: w, height: 22, background: VP_WHITE, opacity: 0.92 }} />
                ))}
              </div>
              <div style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 8,
                letterSpacing: "0.3em", color: VP_WHITE, opacity: 0.85,
              }}>40 · 04 · 026</div>
            </div>
          </div>

          <div className="vp-iconic-fallback-label" style={{
            position: "absolute", inset: 0, display: "none", alignItems: "center", justifyContent: "center",
            color: VP_GOLD, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, letterSpacing: "0.04em",
            background: VP_BEIGE, border: `1px solid ${VP_GOLD}`,
          }}>ICONIC 40+ &nbsp;·&nbsp; signature image</div>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 26 }}>
            <VpGoldRule width={36} />
            <VpEyebrow>A Signature Campaign — Coming to Boise</VpEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
            fontSize: "clamp(32px, 4.4vw, 56px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 36px 0", textTransform: "none", textWrap: "balance",
          }}>
            For women over 40 — the <em style={{ fontStyle: "italic", color: VP_GOLD }}>ICONIC</em> Experience.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
            lineHeight: 1.85, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 20px 0" }}>
              Modern Portraits is open to women of every age. But for women celebrating the chapter that begins at 40, I've built something more — a signature event experience reserved entirely for them.
            </p>
            <p style={{ margin: "0 0 20px 0" }}>
              The ICONIC Experience 40+ is currently held in Las Vegas. I'm building a waiting list for the Boise launch — for women who want to be among the first to experience the full-day rite of passage, the editorial styling, and the gala-style reveal when it comes home to Boise.
            </p>
            <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 18, color: VP_INK }}>
              Because women over 40 are not a footnote. They are the whole story.
            </p>
          </div>
          <a href="/boise/iconic-waitlist/" style={{
            display: "inline-block", marginTop: 36,
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.42em", textTransform: "uppercase",
            color: VP_GOLD, textDecoration: "none", borderBottom: `1px solid ${VP_GOLD}`, paddingBottom: 4,
          }}>Join the Boise Waiting List →</a>
        </div>
      </div>
    </section>
  );
}

// ---------- 8. LOVE NOTES (Google reviews, no avatars) ----------
function VpLoveNotes() {
  const reviews = [
    {
      stars: 5,
      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.",
    },
    {
      stars: 5,
      text: "I had the most amazing session with Jenn. She made me feel so beautiful and comfortable from start to finish. Her direction with poses was super helpful — these are the best photos I've ever taken. From her welcome package to the final delivery, the entire experience felt incredibly high-end.",
    },
    {
      stars: 5,
      text: "Working with Jennifer was such a confidence booster. Hair and makeup were on point. She gives clear direction that makes the whole experience natural and fun. The time flew by and I am ecstatic about the final products.",
    },
  ];
  const Star = () => (
    <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true" style={{ display: "inline-block" }}>
      <path d="M10 1.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79L10 14.77l-5.2 2.74.99-5.79L1.58 7.62l5.82-.85L10 1.5z" fill={VP_GOLD} />
    </svg>
  );
  return (
    <section data-screen-label="08 VP Love Notes" style={{ background: VP_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <VpGoldRule width={36} />
            <VpEyebrow>Love Notes</VpEyebrow>
            <VpGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VP_INK,
            fontSize: "clamp(32px, 4.4vw, 54px)", lineHeight: 1.1,
            letterSpacing: "-0.005em", margin: "0 0 16px 0", textTransform: "none", textWrap: "balance",
          }}>
            What women say after their Boise <em style={{ fontStyle: "italic", color: VP_GOLD }}>portrait</em> session.
          </h2>
          <p style={{
            fontFamily: "Gloock, serif", fontStyle: "italic",
            fontSize: 15, color: "#5a5550", margin: 0,
          }}>
            Real reviews from real Boise clients. Pulled from Google.
          </p>
        </div>
        <div className="vp-love-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginBottom: 56,
        }}>
          {reviews.map((r, i) => (
            <article key={i} style={{
              background: VP_BEIGE, padding: "44px 36px",
              borderTop: `1px solid ${VP_GOLD}`, borderRadius: 0,
              boxShadow: "0 1px 0 rgba(0,0,0,0.02), 0 18px 30px -24px rgba(26,26,26,0.18)",
              display: "flex", flexDirection: "column", gap: 22,
            }}>
              <div style={{ display: "flex", gap: 4 }}>
                {Array.from({ length: r.stars }).map((_, k) => <Star key={k} />)}
              </div>
              <p style={{
                fontFamily: "Gloock, serif", fontStyle: "italic",
                fontSize: 17, lineHeight: 1.55, color: VP_INK, margin: 0,
              }}>"{r.text}"</p>
              <span style={{
                fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
                letterSpacing: "0.36em", textTransform: "uppercase", color: VP_GREY, marginTop: "auto",
              }}>Verified Google Review</span>
            </article>
          ))}
        </div>
        <div style={{ textAlign: "center" }}>
          <span style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 13,
            letterSpacing: "0.18em", color: "#3a342e",
          }}>
            <span style={{ marginRight: 8 }}><Star /></span>
            5.0 / 5 &nbsp;·&nbsp; 37+ Verified Google Reviews &nbsp;·&nbsp; Boise
          </span>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VpTrust, VpIconic, VpLoveNotes });