// ICONIC Experience 40+ — Sections C: Heirloom Pieces, Founder, Who ICONIC Is For

// ---------- 9. HEIRLOOM PIECES (placeholder lifestyle wall art) ----------
function IcHeirloom() {
  const tiles = [
    { src: "/images/ic-heirloom-01.jpg?v=3", alt: "ICONIC Experience 40+ Las Vegas wall art — heirloom black-and-white portrait installed in a real home" },
    { src: "/images/ic-heirloom-02.jpg", alt: "ICONIC Experience 40+ Las Vegas wall art — heirloom black-and-white portrait installed in a real home" },
    { src: "/images/ic-heirloom-03.jpg?v=3", alt: "ICONIC Experience 40+ Las Vegas wall art — heirloom black-and-white portrait installed in a real home" },
  ];
  return (
    <section data-screen-label="09 IC Heirloom" style={{ background: IC_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 }}>
            <IcRule width={36} />
            <IcEyebrow>Heirloom Pieces</IcEyebrow>
            <IcRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
            fontSize: "clamp(34px, 4.6vw, 56px)", lineHeight: 1.08, letterSpacing: "-0.005em",
            margin: "0 auto 32px", textWrap: "balance", maxWidth: 760,
          }}>
            Where these portraits actually <em style={{ fontStyle: "italic", color: IC_GOLD }}>live.</em>
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16, lineHeight: 1.9,
            color: "#2a2622", maxWidth: 660, margin: "0 auto", textAlign: "left",
          }}>
            <p style={{ margin: "0 0 18px 0" }}>The most common assumption I hear: <em style={{ fontStyle: "italic" }}>"I'll keep them in an album."</em></p>
            <p style={{ margin: "0 0 18px 0" }}>The most common thing I hear after the celebration: <em style={{ fontStyle: "italic", color: IC_INK }}>"I want this on my wall."</em></p>
            <p style={{ margin: "0 0 18px 0" }}>
              ICONIC portraits are not meant to live in a closet. They are meant to live where you live — above your bed, in your dressing room, somewhere you walk past every day and remember exactly who you were, in this chapter, right now.
            </p>
            <p style={{ margin: 0, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 19, color: IC_INK, textAlign: "center" }}>
              These are not photographs you store. They are portraits you display.
            </p>
          </div>
        </div>

        <div className="ic-heirloom-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28,
        }}>
          {tiles.map((t, i) => (
            <div key={i} style={{
              aspectRatio: "4/5", border: `1px solid ${IC_GOLD}`,
              background: IC_BEIGE, position: "relative", overflow: "hidden",
            }}>
              <img src={t.src + "?v=2"} alt={t.alt}
                onError={(e)=>{
                  const el = e.currentTarget;
                  if (!el.dataset.retried) {
                    el.dataset.retried = "1";
                    el.src = t.src + "?r=" + Date.now();
                    return;
                  }
                  el.style.display = "none";
                  el.parentElement.classList.add("ic-heirloom-fallback");
                }}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              <div className="ic-heirloom-fallback-label" style={{
                position: "absolute", inset: 0, display: "none", alignItems: "center", justifyContent: "center",
                color: IC_GOLD, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 16, textAlign: "center", padding: 20,
              }}>Heirloom · Lifestyle photography forthcoming</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 10. THE FOUNDER ----------
function IcFounder() {
  return (
    <section data-screen-label="10 IC Founder" style={{ background: IC_BEIGE, padding: "180px 48px" }}>
      <div className="ic-2col" style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 96, alignItems: "center",
      }}>
        <div style={{
          aspectRatio: "4/5", width: "100%", maxWidth: 480, margin: "0 auto",
          background: IC_INK, position: "relative", overflow: "hidden",
        }}>
          <img
            src="/images/ic-founder.jpg?v=4"
            alt="J. Renée Johnson — founder and photographer of the ICONIC Experience 40+"
            onError={(e)=>{
              e.currentTarget.style.display = "none";
              e.currentTarget.parentElement.classList.add("ic-founder-fallback");
            }}
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%", display: "block", filter: "grayscale(100%)" }}
          />
          <div className="ic-founder-fallback-label" style={{
            position: "absolute", inset: 0, display: "none", alignItems: "center", justifyContent: "center",
            color: IC_GOLD, fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 18, textAlign: "center", padding: 20,
            background: IC_BEIGE,
          }}>J. Renée Johnson · founder portrait</div>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <IcRule width={36} />
            <IcEyebrow>The Founder</IcEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
            fontSize: "clamp(36px, 4.4vw, 56px)", lineHeight: 1.08, letterSpacing: "-0.005em",
            margin: "0 0 32px 0",
          }}>
            J. Renée <em style={{ fontStyle: "italic", color: IC_GOLD }}>Johnson.</em>
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
            lineHeight: 1.85, color: "#2a2622", marginBottom: 48,
          }}>
            <p style={{ margin: "0 0 20px 0" }}>
              ICONIC is founded, photographed, and led by J. Renée Johnson — luxury portrait photographer with over twenty years of experience and six consecutive years at $500,000+ in revenue.
            </p>
            <p style={{ margin: 0 }}>
              Her studio, J. Renée Studios, operates with a 4.9-star rating across 90+ Las Vegas client reviews. ICONIC is her most ambitious project to date — and the work she says she has been building toward her entire career.
            </p>
          </div>
          <blockquote style={{
            margin: 0, padding: "32px 0 0 0",
            borderTop: `1px solid ${IC_GOLD}`,
            fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.35, color: IC_INK,
            letterSpacing: "-0.005em", textWrap: "balance",
          }}>
            "I've watched too many women arrive at forty, fifty, sixty and finally put down the performance. They don't need to be flattered. They need to be seen. ICONIC is the room where that happens."
            <footer style={{
              marginTop: 24,
              fontFamily: "Poppins, sans-serif", fontStyle: "normal", fontWeight: 300, fontSize: 11,
              letterSpacing: "0.42em", textTransform: "uppercase", color: IC_GOLD,
            }}>— J. Renée Johnson</footer>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

// ---------- 11. WHO ICONIC IS FOR ----------
function IcWho() {
  return (
    <section data-screen-label="11 IC Who" style={{ background: IC_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 36 }}>
          <IcRule width={36} />
          <IcEyebrow>The Women</IcEyebrow>
          <IcRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
          fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.08, letterSpacing: "-0.005em",
          margin: "0 0 48px 0", textWrap: "balance",
        }}>
          Every woman over 40 is <em style={{ fontStyle: "italic", color: IC_GOLD }}>iconic</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 22px 0" }}>Women 40 and over who are ready to stop waiting.</p>
          <p style={{ margin: "0 0 22px 0" }}>
            Not waiting to lose the weight. Not waiting for the right milestone. Not waiting until the kids are grown or the job settles or she "feels more confident."
          </p>
          <p style={{ margin: "0 0 32px 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 19, color: IC_INK, textAlign: "center" }}>
            Ready now — because the woman she is right now is the woman worth photographing.
          </p>
          <p style={{ margin: "0 0 8px 0" }}>You don't need to have founded a company.</p>
          <p style={{ margin: "0 0 8px 0" }}>You don't need to have survived a diagnosis.</p>
          <p style={{ margin: "0 0 32px 0" }}>You don't need a reason.</p>
          <p style={{ margin: 0 }}>
            ICONIC is the room where the thirty women who are ready to step into it get seen this way.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IcHeirloom, IcFounder, IcWho });