// ICONIC Experience 40+ — Sections B: Magazine, What's Included, Volume One booking, Celebration

// ---------- 5. THE MAGAZINE ----------
function IcMagazine() {
  return (
    <section data-screen-label="05 IC Magazine" style={{ background: IC_WHITE, padding: "160px 48px" }}>
      <div className="ic-2col" style={{
        maxWidth: 1280, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 96, alignItems: "center",
      }}>
        {/* Magazine cover */}
        <div className="ic-mag-cover" style={{
          aspectRatio: "4/5", width: "100%", maxWidth: 520, margin: "0 auto",
          background: IC_INK, position: "relative", overflow: "hidden",
          boxShadow: "0 30px 80px -20px rgba(0,0,0,0.4)",
        }}>
          <img
            src="/images/ic-magazine.jpg"
            alt="The ICONIC Magazine Volume One Las Vegas — printed editorial feature for women over 40"
            onError={(e)=>{ e.currentTarget.style.display = "none"; e.currentTarget.parentElement.classList.add("ic-mag-fallback"); }}
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%", display: "block", filter: "grayscale(100%)" }}
          />
          <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%)",
          }} />
          <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: IC_WHITE,
            borderBottom: "1px solid rgba(255,255,255,0.35)",
          }}>
            <span>Vol. One · Las Vegas</span>
            <span>2026</span>
          </div>
          <div style={{
            position: "absolute", top: 36, left: 0, right: 0, textAlign: "center",
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_WHITE,
            fontSize: "clamp(56px, 9vw, 120px)", lineHeight: 0.9, letterSpacing: "-0.015em",
            textShadow: "0 2px 24px rgba(0,0,0,0.35)",
          }}>ICONIC</div>
          <div style={{
            position: "absolute", top: "calc(36px + clamp(56px, 9vw, 120px) * 0.95)", left: 0, right: 0,
            textAlign: "center",
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 10,
            letterSpacing: "0.5em", textTransform: "uppercase", color: IC_GOLD,
          }}>Thirty Women · One Night</div>
          <div style={{
            position: "absolute", left: 22, bottom: 70, maxWidth: "70%",
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_WHITE,
            fontSize: "clamp(16px, 2vw, 24px)", lineHeight: 1.1,
            textShadow: "0 2px 16px rgba(0,0,0,0.5)",
          }}>
            The Becoming<br />
            <em style={{ color: IC_GOLD, fontStyle: "italic" }}>Issue.</em>
          </div>
          <div style={{
            position: "absolute", bottom: 0, left: 0, right: 0,
            display: "flex", justifyContent: "space-between", alignItems: "center",
            padding: "14px 22px",
            borderTop: "1px solid rgba(255,255,255,0.35)",
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 9,
            letterSpacing: "0.42em", textTransform: "uppercase", color: IC_WHITE,
          }}>
            <span>J. Renée Studios</span>
            <span>An Editorial Archive</span>
          </div>
        </div>

        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <IcRule width={36} />
            <IcEyebrow>The Magazine</IcEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
            fontSize: "clamp(34px, 4.4vw, 56px)", lineHeight: 1.1, letterSpacing: "-0.005em",
            margin: "0 0 36px 0", textWrap: "balance",
          }}>
            A printed feature she'll <em style={{ fontStyle: "italic", color: IC_GOLD }}>keep forever</em>.
          </h2>
          <div style={{ fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16, lineHeight: 1.9, color: "#2a2622" }}>
            <p style={{ margin: "0 0 20px 0" }}>Every woman in ICONIC Volume One is featured in a printed magazine.</p>
            <p style={{ margin: "0 0 20px 0" }}>
              Not a digital file. Not an Instagram tile. A real, perfect-bound, editorial-quality publication — the kind you keep on a coffee table, hand to your daughter, find in a drawer thirty years from now and remember exactly who you were when it was made.
            </p>
            <p style={{ margin: "0 0 20px 0" }}>
              Each feature includes the image she chose, her story crafted from her interview, and a portrait sequence that reads like a Vanity Fair editorial — because it is one.
            </p>
            <p style={{ margin: 0 }}>
              Each woman receives her own copy. The magazine itself is published publicly as part of the J. Renée Studios archive.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 6. WHAT'S INCLUDED ----------
function IcIncluded() {
  const items = [
    { n: "01", title: "A fully produced editorial session at J. Renée Studios", body: "The session itself, with me as your photographer — every frame, every moment." },
    { n: "02", title: "Professional hair styling and editorial makeup", body: "With my in-studio team. Designed for camera and tuned for timeless black-and-white portraiture." },
    { n: "03", title: "Wardrobe consultation and a curated wardrobe guide", body: "Sent in advance, so you arrive with the right pieces — and confidence in every one of them." },
    { n: "04", title: "An interview that becomes the foundation of your magazine feature", body: "A guided conversation that captures your voice, your story, and the chapter you're celebrating." },
    { n: "05", title: "Your full editorial feature in ICONIC Magazine Volume One", body: "Crafted from your interview. Published as part of the public ICONIC magazine archive." },
    { n: "06", title: "One copy of ICONIC Magazine, presented ceremonially at the celebration", body: "Your own copy of Volume One — handed to you the night of the event." },
    { n: "07", title: "Tickets to The ICONIC Celebration", body: "You and one guest of your choosing. Date and venue announced once Volume One is complete." },
    { n: "08", title: "One 11×14 print of the image chosen for your magazine feature", body: "Included with your session fee. The image you select for your feature, printed on archival paper." },
  ];
  return (
    <section data-screen-label="06 IC Included" style={{ background: IC_WHITE, padding: "160px 48px" }}>
      <div style={{ maxWidth: 980, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 80 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <IcRule width={36} />
            <IcEyebrow>Every Volume One Woman Receives</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, textWrap: "balance",
          }}>
            What you walk in with. <em style={{ fontStyle: "italic", color: IC_GOLD }}>What you walk out with.</em>
          </h2>
        </div>
        <div>
          {items.map((it, i) => (
            <div key={it.n} style={{
              display: "grid", gridTemplateColumns: "auto 1fr", gap: 36, padding: "28px 0",
              borderTop: i === 0 ? `1px solid ${IC_GOLD}` : "none",
              borderBottom: `1px solid ${IC_GOLD}`,
            }} className="ic-included-row">
              <div style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: IC_GOLD,
                fontSize: 26, lineHeight: 1, paddingTop: 4, minWidth: 60,
              }}>{it.n}</div>
              <div>
                <div style={{
                  fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
                  fontSize: "clamp(18px, 1.7vw, 22px)", lineHeight: 1.3, marginBottom: 8,
                }}>{it.title}</div>
                <div style={{
                  fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
                  lineHeight: 1.7, color: "#5a5550",
                }}>{it.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 7. VOLUME ONE: NOW BOOKING (typography only) ----------
function IcVolumeOne() {
  return (
    <section data-screen-label="07 IC Volume One" style={{ background: IC_BEIGE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 36 }}>
          <IcRule width={36} />
          <IcEyebrow>Volume One · Now Booking</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",
        }}>
          Be one of the <em style={{ fontStyle: "italic", color: IC_GOLD }}>thirty women</em> in Volume One.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16, lineHeight: 1.9,
          color: "#2a2622", textAlign: "left", maxWidth: 680, margin: "0 auto",
        }}>
          <p style={{ margin: "0 0 20px 0" }}>
            ICONIC Volume One is currently booking. Sessions take place at the Las Vegas studio between May and August. The ICONIC Celebration follows in September, once Volume One is complete.
          </p>
          <p style={{ margin: "0 0 20px 0" }}>Thirty women will be featured. The first thirty to reserve are the women of Volume One.</p>
          <p style={{ margin: 0 }}>
            ICONIC is a public campaign — every woman in Volume One will appear in the printed magazine, and across the J. Renée Studios website, social channels, and marketing. If you'd prefer something private, a Modern Portraits session is the right experience for you instead.
          </p>
        </div>

        {/* Pricing */}
        <div style={{ marginTop: 88, display: "grid", gap: 56 }}>
          <PricingTier label="Session Fee" price="$490" body="Includes the fully produced editorial session, professional hair and makeup, wardrobe consultation, the interview that becomes your magazine feature, your full feature in ICONIC Magazine Volume One, one copy of the magazine, tickets for you and a guest to The ICONIC Celebration, and one 11×14 print of the image chosen for your feature." />
          <PricingTier label="Collections" price="Starting at $3,000" body="Image collections are purchased after your gallery reveal, so you only invest in what you love. Most ICONIC clients invest $3,000–$8,000 on a collection — including additional retouched images, an heirloom album, and wall art for her home. Custom collections are available." />
          <PricingTier label="Payment Plans" price="Affirm · Klarna · In-house" body="The session fee is paid at booking; the collection is paid after the gallery reveal." small={true} />
        </div>

        <div style={{ marginTop: 80 }}>
          <IcCTA href="/las-vegas/iconic/reserve/" variant="gold">Reserve Your Spot in Volume One →</IcCTA>
        </div>
      </div>
    </section>
  );
}

function PricingTier({ label, price, body, small = false }) {
  return (
    <div>
      <div style={{
        fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
        letterSpacing: "0.42em", textTransform: "uppercase", color: IC_GOLD, marginBottom: 16,
      }}>{label}</div>
      <div style={{
        fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
        fontSize: small ? "clamp(22px, 2.4vw, 30px)" : "clamp(40px, 6vw, 76px)",
        lineHeight: 1, letterSpacing: "-0.01em", marginBottom: 20,
      }}>{price}</div>
      <p style={{
        fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 14.5,
        lineHeight: 1.85, color: "#5a5550", maxWidth: 620, margin: "0 auto",
      }}>{body}</p>
    </div>
  );
}

// ---------- 8. THE ICONIC CELEBRATION (moody full-bleed) ----------
function IcCelebration() {
  return (
    <section data-screen-label="08 IC Celebration" style={{
      position: "relative", padding: "180px 48px", background: IC_INK, overflow: "hidden",
    }}>
      <img
        src="/images/ic-celebration.jpg"
        alt="The ICONIC Celebration Las Vegas — celebrating thirty women over 40"
        onError={(e)=>{ e.currentTarget.style.display = "none"; }}
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%",
          objectFit: "cover", objectPosition: "center", filter: "grayscale(100%) brightness(0.55)",
        }}
      />
      <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.5)" }} />
      <div style={{ position: "relative", maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 32 }}>
          <IcRule width={36} />
          <IcEyebrow color={IC_GOLD}>One Night</IcEyebrow>
          <IcRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: IC_WHITE,
          fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.08, letterSpacing: "-0.005em",
          margin: "0 0 44px 0", textWrap: "balance",
        }}>
          The <em style={{ fontStyle: "italic", color: IC_GOLD }}>ICONIC Celebration.</em>
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16.5, lineHeight: 1.9,
          color: "rgba(255,255,255,0.9)", textAlign: "left",
        }}>
          <p style={{ margin: "0 0 22px 0", textAlign: "center", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, color: IC_WHITE }}>
            One night. Thirty women. One printed magazine, revealed for the first time.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            The evening opens with a red carpet. Each woman's portraits are displayed at scale — archival prints installed like a museum exhibition. Champagne and a seated reception follow.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>You bring one guest. Bring someone you'd want to see in Volume Two.</p>
          <p style={{ margin: 0 }}>
            Guest tickets are included with every collection. Date and venue announced once Volume One is complete.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IcMagazine, IcIncluded, IcVolumeOne, IcCelebration });