// Vegas Headshots & Branding — Sections 6-7: Trust Block, Love Notes

// ---------- 6. THE TRUST BLOCK ----------
function VhTrust() {
  // Studio owner: replace images/vh-trust.jpg with the moody editorial branding image.
  const [errored, setErrored] = vhUseState(false);
  return (
    <section data-screen-label="06 VH Trust" style={{
      position: "relative", background: VH_INK, overflow: "hidden",
      padding: "180px 48px", minHeight: 720,
    }}>
      {!errored && (
        <img src="/images/vh-trust.jpg?v=2"
          onError={() => setErrored(true)}
          alt="Las Vegas brand and headshot photographer with twenty years of experience — moody editorial portrait at J Renee Studios"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", opacity: 0.42 }}/>
      )}
      {errored && (
        <div style={{
          position: "absolute", inset: 0, background: "linear-gradient(180deg, #2a2622 0%, #1A1A1A 100%)",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <span style={{
            fontFamily: "Gloock, serif", fontStyle: "italic", color: "rgba(201,168,76,0.35)",
            fontSize: 18, letterSpacing: "0.18em",
          }}>Trust Block Image</span>
        </div>
      )}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.78) 100%)" }}/>
      <div style={{ position: "relative", maxWidth: 980, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 36 }}>
          <VhGoldRule width={44} />
          <VhEyebrow color={VH_GOLD}>Twenty Years Behind the Lens</VhEyebrow>
          <VhGoldRule width={44} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: VH_WHITE,
          fontSize: "clamp(40px, 5.4vw, 72px)", lineHeight: 1.08,
          letterSpacing: "-0.005em", margin: "0 0 44px 0", textWrap: "balance",
        }}>
          Imagery that <em style={{ fontStyle: "italic", color: "#efe5cf" }}>earns the room</em> before you walk into it.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "rgba(255,255,255,0.86)", maxWidth: 740, margin: "0 auto 56px",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            I've been a working photographer for over twenty years. I've photographed thousands of women — many of them at the most defining moments of their careers. The launch. The book. The keynote. The board appointment. The pivot.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            The women I work with don't need another headshot. They need imagery that does the work of a thousand introductions.
          </p>
          <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, color: VH_WHITE }}>
            That's what I make.
          </p>
        </div>
        <VhBtn variant="gold" href="/inquire/">Tell me your story → Inquire</VhBtn>
      </div>
    </section>
  );
}

// ---------- 7. LOVE NOTES ----------
function VhLoveNotes() {
  const cards = [
    { quote: "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.",
      avatar: "/images/vb-avatar-1.jpg" },
    { quote: "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.",
      avatar: "/images/vb-avatar-2.jpg" },
    { quote: "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.",
      avatar: "/images/vb-avatar-3.jpg" },
  ];
  const stars = (
    <span style={{ letterSpacing: 4, color: VH_GOLD, fontSize: 14 }}>★★★★★</span>
  );
  return (
    <section data-screen-label="07 VH LoveNotes" 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>Love Notes</VhEyebrow>
            <VhGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: VH_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: "0 0 18px 0", textWrap: "balance",
            maxWidth: 880, marginLeft: "auto", marginRight: "auto",
          }}>
            What women say about <em style={{ fontStyle: "italic", color: VH_GOLD }}>working with me</em>.
          </h2>
          <p style={{
            fontFamily: "Gloock, serif", fontStyle: "italic", color: VH_GREY,
            fontSize: 16, margin: 0,
          }}>
            Real reviews from real Las Vegas clients. Pulled from Google.
          </p>
        </div>
        <div className="vh-love-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
        }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: VH_BEIGE, padding: "48px 40px",
              display: "flex", flexDirection: "column", gap: 28,
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                {stars}
                <span style={{
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
                  letterSpacing: "0.32em", textTransform: "uppercase", color: VH_GREY,
                }}>Google</span>
              </div>
              <p style={{
                fontFamily: "Gloock, serif", fontStyle: "italic", color: VH_INK,
                fontSize: 17, lineHeight: 1.55, margin: 0, flex: 1,
              }}>
                "{c.quote}"
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 16, paddingTop: 8, borderTop: `1px solid ${VH_GOLD}` }}>
                <div>
                  <div style={{
                    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10.5,
                    letterSpacing: "0.28em", textTransform: "uppercase", color: VH_INK,
                  }}>Verified Google Review</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{
          textAlign: "center", marginTop: 64,
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 12,
          letterSpacing: "0.32em", textTransform: "uppercase", color: VH_INK,
        }}>
          <span style={{ color: VH_GOLD }}>★</span> &nbsp; 4.9 / 5 &nbsp;·&nbsp; 90+ Verified Google Reviews &nbsp;·&nbsp; Las Vegas
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VhTrust, VhLoveNotes });