// ICONIC Experience 40+ — Sections A: Hero, Premise, Sliding Gallery, B&W Philosophy

// ---------- 1. HERO ----------
function IcHero() {
  return (
    <section data-screen-label="01 IC Hero" style={{
      position: "relative", minHeight: "100vh", display: "flex", alignItems: "flex-end",
      background: IC_INK, overflow: "hidden",
    }}>
      <img
        src="/images/ic-hero.jpg?v=3"
        alt="ICONIC Experience 40+ Las Vegas — black-and-white editorial portrait of a woman over 40 by J. Renée Studios"
        loading="eager"
        fetchPriority="high"
        decoding="async"
        onError={(e)=>{ e.currentTarget.style.display = "none"; e.currentTarget.parentElement.classList.add("ic-hero-fallback"); }}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%", filter: "grayscale(100%)" }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.65) 100%)",
      }} />
      <div style={{ position: "relative", maxWidth: 1280, margin: "0 auto", padding: "0 48px 120px", width: "100%" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 28 }}>
          <IcRule width={56} color={IC_GOLD} />
          <IcEyebrow color={IC_WHITE}>ICONIC &nbsp;·&nbsp; Volume One Las Vegas</IcEyebrow>
        </div>
        <h1 className="ic-h1" style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: IC_WHITE,
          fontSize: "clamp(56px, 9vw, 132px)", lineHeight: 0.98, letterSpacing: "-0.018em",
          margin: "0 0 32px 0", textTransform: "none", textWrap: "balance", maxWidth: "16ch",
          textShadow: "0 2px 30px rgba(0,0,0,0.35)",
        }}>
          Are you ready to be seen as <em style={{ fontStyle: "italic", color: IC_GOLD }}>iconic</em>?
        </h1>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: "clamp(17px, 1.5vw, 21px)",
          lineHeight: 1.55, color: "rgba(255,255,255,0.92)", maxWidth: 620,
          margin: "0 0 56px 0", letterSpacing: "0.005em",
        }}>
          Thirty women over forty. Thirty stories. One unforgettable night.
        </p>
        <IcCTA href="/las-vegas/iconic/reserve/" variant="gold">Reserve Your Spot in Volume One →</IcCTA>
      </div>
    </section>
  );
}

// ---------- 2. THE PREMISE ----------
function IcPremise() {
  return (
    <section data-screen-label="02 IC Premise" 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 Premise</IcEyebrow>
          <IcRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
          fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08, letterSpacing: "-0.005em",
          margin: "0 0 56px 0", textWrap: "balance",
        }}>
          You're not the only woman who stopped recognizing herself somewhere along the way.
        </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" }}>In the middle of raising children, building careers, carrying other people — it's easy to disappear from your own story.</p>
          <p style={{ margin: "0 0 22px 0" }}>And you feel it.</p>
          <p style={{ margin: "0 0 8px 0" }}>The old photos don't move you anymore.</p>
          <p style={{ margin: "0 0 8px 0" }}>The mirror tells half a story.</p>
          <p style={{ margin: "0 0 32px 0" }}>And somewhere, quietly, you miss her — the woman you were becoming before you got busy.</p>

          <p style={{ margin: "0 0 8px 0" }}>Here's the part most people won't say out loud:</p>
          <p style={{ margin: "0 0 8px 0" }}>She didn't leave.</p>
          <p style={{ margin: "0 0 8px 0" }}>She's the woman you are <em style={{ fontStyle: "italic", color: IC_INK }}>now</em>.</p>
          <p style={{ margin: "0 0 32px 0" }}>Stronger. Softer. Fully herself.</p>

          <p style={{ margin: "0 0 8px 0" }}>The culture has a word for this chapter. It calls it <em style={{ fontStyle: "italic" }}>aging</em>.</p>
          <p style={{ margin: "0 0 8px 0" }}>I don't.</p>
          <p style={{ margin: "0 0 32px 0" }}>I call it <em style={{ fontStyle: "italic", color: IC_GOLD }}>becoming</em>.</p>

          <p style={{ margin: "0 0 32px 0" }}>
            Because I've watched too many women — in my studio, in my life, in the reflection of my own story — arrive at forty, fifty, sixty and finally put down the performance. Finally stop asking permission. Finally move through a room the way they always should have. With certainty. With stillness. With the kind of power that only comes from having survived enough to know exactly who you are.
          </p>

          <p style={{ margin: "0 0 8px 0" }}>That woman is not invisible.</p>
          <p style={{ margin: "0 0 24px 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22, color: IC_INK }}>That woman is iconic.</p>
          <p style={{ margin: 0 }}>And ICONIC is the room where she finally gets seen that way.</p>
        </div>
      </div>
    </section>
  );
}

// ---------- 3. SLIDING GALLERY ----------
function IcGallery() {
  // 12 vertical B&W portraits — full natural aspect, single row, marquee
  const IC_GALLERY = [
    { src: "/images/ic-gallery-01.jpg", alt: "ICONIC Experience 40+ Las Vegas — editorial black-and-white portrait of a woman over 40 in soft directional light" },
    { src: "/images/ic-gallery-02.jpg", alt: "ICONIC Experience 40+ Las Vegas — black-and-white editorial portrait of a woman over 40 with a quiet, knowing expression" },
    { src: "/images/ic-gallery-03.jpg", alt: "ICONIC Experience 40+ Las Vegas — black-and-white editorial portrait of a woman over 40 in dramatic shadow" },
    { src: "/images/ic-gallery-04.jpg", alt: "ICONIC Experience 40+ Las Vegas — black-and-white editorial three-quarter portrait of a woman over 40" },
    { src: "/images/ic-gallery-05.jpg", alt: "ICONIC Experience 40+ Las Vegas — bright editorial black-and-white portrait of a woman over 40, candid expression" },
    { src: "/images/ic-gallery-06.jpg", alt: "ICONIC Experience 40+ Las Vegas — black-and-white close portrait of a woman over 40 with editorial styling" },
    { src: "/images/ic-gallery-07.jpg", alt: "ICONIC Experience 40+ Las Vegas — moody editorial black-and-white full-body portrait of a woman over 40" },
    { src: "/images/ic-gallery-08.jpg", alt: "ICONIC Experience 40+ Las Vegas — confident black-and-white editorial portrait of a woman over 40 in tailored wardrobe" },
    { src: "/images/ic-gallery-09.jpg", alt: "ICONIC Experience 40+ Las Vegas — editorial black-and-white portrait of a woman over 40 with timeless styling" },
    { src: "/images/ic-gallery-10.jpg", alt: "ICONIC Experience 40+ Las Vegas — black-and-white profile editorial portrait of a woman over 40" },
    { src: "/images/ic-gallery-11.jpg", alt: "ICONIC Experience 40+ Las Vegas — editorial black-and-white seated portrait of a woman over 40" },
    { src: "/images/ic-gallery-12.jpg", alt: "ICONIC Experience 40+ Las Vegas — editorial black-and-white portrait of a woman over 40, magazine-cover quality" },
  ];
  const doubled = [...IC_GALLERY, ...IC_GALLERY];
  return (
    <section data-screen-label="03 IC Gallery" style={{
      background: IC_BEIGE, padding: "120px 0 130px", overflow: "hidden",
      borderTop: `1px solid rgba(201,168,76,0.25)`, borderBottom: `1px solid rgba(201,168,76,0.25)`,
    }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 48px", textAlign: "center", marginBottom: 64 }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <IcRule width={36} />
          <IcEyebrow>The Work</IcEyebrow>
          <IcRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
          fontSize: "clamp(34px, 4.6vw, 60px)", lineHeight: 1.08, letterSpacing: "-0.005em",
          margin: "0 0 18px 0", textWrap: "balance",
        }}>What <em style={{ fontStyle: "italic", color: IC_GOLD }}>ICONIC</em> looks like.</h2>
        <p style={{
          fontFamily: "Gloock, serif", fontStyle: "italic", fontWeight: 400,
          fontSize: 16, color: "#5a5550", margin: 0,
        }}>
          Editorial black-and-white portraits in the ICONIC style.
        </p>
      </div>

      <div className="ic-marquee" aria-label="ICONIC Volume One sample portraits — sliding gallery" style={{
        display: "flex", overflow: "hidden", width: "100%",
        WebkitMaskImage: "linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%)",
                maskImage: "linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%)",
      }}>
        <div className="ic-marquee-track">
          {doubled.map((img, i) => (
            <figure key={i} className="ic-marquee-cell" style={{
              margin: 0, border: `1px solid ${IC_GOLD}`, background: IC_INK,
            }}>
              <img src={img.src + "?v=2"} alt={img.alt} loading={i < 12 ? "eager" : "lazy"}
                onError={(e)=>{
                  const el = e.currentTarget;
                  if (!el.dataset.retried) {
                    el.dataset.retried = "1";
                    el.src = img.src + "?r=" + Date.now();
                    return;
                  }
                  el.style.display = "none";
                  el.parentElement.classList.add("ic-cell-fallback");
                }}
                style={{ display: "block", height: "100%", width: "auto", maxWidth: "none" }}
              />
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 4. WHY BLACK AND WHITE ----------
function IcPhilosophy() {
  return (
    <section data-screen-label="04 IC Philosophy" style={{ background: IC_BEIGE, padding: "140px 48px" }}>
      <div className="ic-2col" style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 88, alignItems: "start",
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <IcRule width={36} />
            <IcEyebrow>Philosophy</IcEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: IC_INK,
            fontSize: "clamp(30px, 3.8vw, 48px)", lineHeight: 1.1, letterSpacing: "-0.005em",
            margin: 0, textWrap: "balance",
          }}>
            Color flatters. <em style={{ fontStyle: "italic", color: IC_GOLD }}>Black and white</em> tells the truth.
          </h2>
          {/* H2 placement for SEO target */}
          <h3 style={{
            marginTop: 24,
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
            letterSpacing: "0.42em", textTransform: "uppercase", color: IC_GOLD,
          }}>ICONIC Experience 40+ Las Vegas</h3>
        </div>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300,
          fontSize: 16.5, lineHeight: 1.95, color: "#2a2622",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            Every ICONIC portrait is produced in black and white — to create gallery-grade editorial imagery that outlives trends, filters, and the flattening effect of color saturation.
          </p>
          <p style={{ margin: "0 0 22px 0" }}>
            Your portraits will look as powerful in 2046 as they do in 2026.
          </p>
          <p style={{ margin: "0 0 22px 0", fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 19, color: IC_INK }}>
            Think Vanity Fair covers. Think Peter Lindbergh. Think Annie Leibovitz.
          </p>
          <p style={{ margin: 0 }}>Not boudoir. Portraiture.</p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IcHero, IcPremise, IcGallery, IcPhilosophy });