// J Renee Studios — About Page Sections
// Reuses Header + FooterJR from sections.jsx (loaded earlier on the page).
// Brand: Black #1A1A1A · White #FFFFFF · Gold #C9A84C · Beige #F6F2EE
// Display: Gloock · Body: Poppins Light (300)

const { useState: useStateA, useEffect: useEffectA } = React;

const A_INK   = "#1A1A1A";
const A_WHITE = "#FFFFFF";
const A_GOLD  = "#C9A84C";
const A_BEIGE = "#F6F2EE";
const A_GREY  = "#8A8580";

// ---------- shared primitives (mirrored from homepage) ----------
function AEyebrow({ children, color = A_GOLD, style }) {
  return (
    <div style={{
      fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11.5,
      letterSpacing: "0.32em", textTransform: "uppercase",
      color, ...style,
    }}>{children}</div>
  );
}
function AGoldRule({ width = 56, color = A_GOLD, style }) {
  return <span style={{ display: "inline-block", height: 1, width, background: color, verticalAlign: "middle", ...style }} />;
}
function AButton({ children, variant = "gold", href, target, rel, onClick, style }) {
  const base = {
    padding: "20px 38px",
    fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
    letterSpacing: "0.36em", textTransform: "uppercase",
    cursor: "pointer", border: "1px solid", borderRadius: 0,
    transition: "background-color 220ms ease, color 220ms ease, border-color 220ms ease",
    display: "inline-flex", alignItems: "center", gap: 12, textDecoration: "none",
  };
  const variants = {
    gold:        { background: A_GOLD, color: A_WHITE, borderColor: A_GOLD },
    "outline":   { background: "transparent", color: A_INK, borderColor: A_INK },
  };
  const [hover, setHover] = useStateA(false);
  const hoverStyle = hover ? (
    variant === "gold" ? { background: "#b59340", borderColor: "#b59340" }
                       : { background: A_INK, color: A_WHITE }
  ) : {};
  const Tag = href ? "a" : "button";
  return (
    <Tag href={href} target={target} rel={rel} onClick={onClick}
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ ...base, ...variants[variant], ...hoverStyle, ...style }}>{children}</Tag>
  );
}

// ---------- 1. HERO — typographic, with a small vertical portrait beside the wordmark ----------
function AboutHero() {
  return (
    <section data-screen-label="01 About Hero" style={{
      position: "relative", background: A_BEIGE,
      padding: "200px 48px 140px",
    }}>
      <div className="grid-2" style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "1fr 0.55fr",
        gap: 96, alignItems: "center",
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: 36 }}>
            <AGoldRule width={56} />
            <AEyebrow color={A_GOLD}>About J. Renée Johnson</AEyebrow>
          </div>
          <h1 className="about-hero-h1" style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
            fontSize: "clamp(56px, 9vw, 140px)",
            lineHeight: 0.98, letterSpacing: "-0.01em",
            margin: 0, textTransform: "none", textWrap: "balance",
          }}>
            Hi. <em style={{ fontStyle: "italic", color: A_GOLD }}>I'm Jenn.</em>
          </h1>
          <p style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 17,
            lineHeight: 1.7, color: "#3a342e",
            maxWidth: 540, margin: "40px 0 0 0",
          }}>
            Photographer. Founder. Twenty years behind the camera, and the most meaningful chapter of the work just beginning.
          </p>
        </div>
        {/* small vertical portrait — quiet, not full-bleed */}
        <div>
          <div style={{ aspectRatio: "3/4", width: "100%", overflow: "hidden", background: A_INK }}>
            <img
              src="/images/about-jenn-hero.jpg"
              alt="J. Renée Johnson — luxury portrait photographer and founder of J. Renée Studios"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }}
            />
          </div>
          <div style={{
            marginTop: 16, fontFamily: "Gloock, serif", fontStyle: "italic",
            fontSize: 14, color: "#3a342e", textAlign: "center",
          }}>
            Jennifer Renee &nbsp;·&nbsp; Boise + Las Vegas
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 2. THE STORY — narrow centered column ----------
function AboutStory() {
  return (
    <section data-screen-label="02 The Story" style={{ background: A_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <AGoldRule width={36} />
          <AEyebrow>The Story</AEyebrow>
          <AGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
          fontSize: "clamp(36px, 5vw, 68px)", lineHeight: 1.08,
          letterSpacing: "-0.005em", margin: "0 0 72px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          The work I've <em style={{ fontStyle: "italic", color: A_GOLD }}>chosen</em>.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 2, color: "#2a2622", textAlign: "left",
        }}>
          <p style={{
            margin: "0 0 28px 0", textAlign: "center",
            fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 24,
            lineHeight: 1.45, color: A_INK,
          }}>
            I started my photography business in 2001.
          </p>
          <p style={{ margin: "0 0 28px 0" }}>
            For the first fifteen years, I was a wedding and portrait photographer. Then years of newborns and maternity portraits — being trusted with families through some of the most personal seasons of their lives.
          </p>
          <p style={{ margin: "0 0 28px 0" }}>
            And then, near the end of the wedding chapter, I had my own boudoir session.
          </p>
          <p style={{
            margin: "44px 0", textAlign: "center",
            fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 28,
            color: A_GOLD, lineHeight: 1.3,
          }}>
            Something happened.
          </p>
          <p style={{ margin: "0 0 28px 0" }}>
            I watched a woman walk into a studio one way and walk out completely changed — not because of how she looked in the photographs, but because of what she finally saw in herself. That has become the work I do now. Boudoir. Portraits. Branding. Maternity. All of it under one roof: photographing women through the chapters that matter.
          </p>
          <p style={{ margin: "0 0 28px 0" }}>
            I've photographed thousands of women in my career. I've been doing this since 2001. And the truth is, I've never loved the work more than I love it now.
          </p>
          <p style={{ margin: "0 0 28px 0" }}>
            The best compliment a client can pay me isn't <em style={{ fontStyle: "italic" }}>"the photos are beautiful."</em> It's that she felt comfortable, confident, and seen — and that she became a little obsessed with her own images.
          </p>
        </div>
        <div style={{ marginTop: 48, display: "flex", justifyContent: "center" }}>
          <AGoldRule width={64} />
        </div>
        <div style={{
          marginTop: 36,
          fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22,
          color: A_INK, lineHeight: 1.5,
        }}>
          That's the work. That's what I do.<br/>
          That's what I love.
        </div>
      </div>
    </section>
  );
}

// ---------- 3. OUTSIDE THE STUDIO — two columns w/ vertical image ----------
function AboutOutside() {
  return (
    <section data-screen-label="03 Outside the Studio" style={{ background: A_BEIGE, padding: "180px 48px" }}>
      <div className="grid-2" style={{
        maxWidth: 1240, margin: "0 auto",
        display: "grid", gridTemplateColumns: "0.85fr 1fr",
        gap: 96, alignItems: "center",
      }}>
        <div>
          <div style={{ aspectRatio: "3/4", width: "100%", overflow: "hidden", background: A_INK }}>
            <img
              src="/images/about-family.jpg"
              alt="Jennifer Johnson outside the studio — personal portrait"
              style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center center", display: "block" }}
            />
          </div>
        </div>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <AGoldRule width={36} />
            <AEyebrow>Outside the Studio</AEyebrow>
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
            fontSize: "clamp(36px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: "0 0 48px 0", textTransform: "none",
            textWrap: "balance",
          }}>
            The other <em style={{ fontStyle: "italic", color: A_GOLD }}>things</em>.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
            lineHeight: 1.95, color: "#2a2622",
          }}>
            <p style={{ margin: "0 0 22px 0" }}>
              I grew up in Hawaii — the oldest of five.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              I've been married to my husband Rodney for over twenty years. We have two kids and two dogs (a Golden Doodle and a Sheepadoodle, both of whom believe they run the house).
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              I'm obsessed with travel. Four to six trips a year, every year. Italy is the place I keep finding excuses to go back to — Tuscany, Florence, somewhere in the hills, taking my time. If I could move there, I probably would.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              My family is strictly organic and gluten-free. I hold several health certifications and pride myself on eating clean food whenever we can.
            </p>
            <p style={{ margin: 0 }}>
              When I'm not photographing women, I'm running another business, planning my next trip, or convincing myself that one more dog is fine, actually.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 4. WHAT I LOVE — three declarations w/ gold rules ----------
function AboutWhatILove() {
  const items = [
    {
      n: "01",
      headline: "I love to empower women.",
      body: "The work I've chosen is the work I've spent my entire career building toward.",
    },
    {
      n: "02",
      headline: "I love to build businesses.",
      body: "I've spent twenty years figuring out what makes a business work, and I've learned to love the building almost as much as the photographing.",
    },
    {
      n: "03",
      headline: "I love to travel.",
      body: "Four to six trips a year. Italy on heavy rotation. The world is too big to stay in one room.",
    },
  ];
  return (
    <section data-screen-label="04 What I Love" style={{ background: A_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <AGoldRule width={36} />
          <AEyebrow>What I Love</AEyebrow>
          <AGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
          fontSize: "clamp(34px, 4.8vw, 60px)", lineHeight: 1.08,
          letterSpacing: "-0.005em", margin: "0 0 96px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          The truth about<br/>what <em style={{ fontStyle: "italic", color: A_GOLD }}>drives</em> this.
        </h2>
        <div>
          {items.map((it, i) => (
            <div key={it.n}>
              {i > 0 && (
                <div style={{ display: "flex", justifyContent: "center", margin: "72px 0" }}>
                  <AGoldRule width={120} />
                </div>
              )}
              <div>
                <div style={{
                  fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 14,
                  letterSpacing: "0.32em", color: A_GOLD, marginBottom: 26,
                  textTransform: "uppercase",
                }}>{it.n}</div>
                <div style={{
                  fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
                  fontSize: "clamp(28px, 3.6vw, 44px)", lineHeight: 1.18,
                  letterSpacing: "-0.005em", margin: "0 0 26px 0",
                  textWrap: "balance",
                }}>
                  {it.headline}
                </div>
                <p style={{
                  fontFamily: "Poppins, sans-serif", fontStyle: "italic", fontWeight: 300,
                  fontSize: 16, lineHeight: 1.7, color: "#3a342e",
                  margin: "0 auto", maxWidth: 560,
                }}>
                  {it.body}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 5. MENTORS & INFLUENCES — beige, narrow, mentor names as the typographic moment ----------
function AboutMentors() {
  const mentors = ["Sue Bryce", "Jose Villa", "Jerry Ghionis", "Kara Marie", "Denise Birdsong"];
  return (
    <section data-screen-label="05 Mentors" style={{ background: A_BEIGE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 820, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
          <AGoldRule width={36} />
          <AEyebrow>Mentors &amp; Influences</AEyebrow>
          <AGoldRule width={36} />
        </div>
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
          fontSize: "clamp(36px, 5vw, 64px)", lineHeight: 1.08,
          letterSpacing: "-0.005em", margin: "0 0 64px 0", textTransform: "none",
          textWrap: "balance",
        }}>
          I'm obsessed with <em style={{ fontStyle: "italic", color: A_GOLD }}>learning</em>.
        </h2>
        <div style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.95, color: "#2a2622", textAlign: "left", maxWidth: 640, margin: "0 auto",
        }}>
          <p style={{ margin: "0 0 22px 0" }}>
            Every single year of my career, I invest in something that gets me to the next level. Not always photography. Sometimes AI. Sometimes business. Sometimes systems, marketing, leadership, or whatever the next thing is I want to understand more deeply.
          </p>
          <p style={{
            margin: "36px 0", textAlign: "center",
            fontFamily: "Gloock, serif", fontStyle: "italic", fontSize: 22,
            color: A_INK, lineHeight: 1.5,
          }}>
            The day I stop learning is the day I stop being good at this.
          </p>
          <p style={{ margin: "0 0 22px 0", textAlign: "center" }}>
            In photography, I've studied directly under —
          </p>
        </div>
        {/* Mentor names — strongest typographic moment */}
        <div style={{ margin: "48px auto 56px", maxWidth: 760 }}>
          {mentors.map((m, i) => (
            <div key={m}>
              <div style={{
                fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
                fontSize: "clamp(28px, 3.4vw, 42px)", lineHeight: 1.15,
                letterSpacing: "-0.005em", padding: "22px 0",
                textTransform: "none",
              }}>
                {m}
              </div>
              {i < mentors.length - 1 && (
                <div style={{ height: 1, width: "100%", background: "rgba(201,168,76,0.4)" }} />
              )}
            </div>
          ))}
          <div style={{
            marginTop: 24,
            fontFamily: "Poppins, sans-serif", fontStyle: "italic", fontWeight: 300,
            fontSize: 13, color: A_GREY, letterSpacing: "0.04em",
          }}>
            — among others.
          </div>
        </div>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16,
          lineHeight: 1.85, color: "#2a2622", margin: 0, maxWidth: 640, marginInline: "auto",
          textAlign: "center",
        }}>
          What you see in my work today is the distillation of all of it: years of refinement, the lessons of mentors I respect deeply, and my own voice behind the camera.
        </p>
      </div>
    </section>
  );
}

// ---------- 6. CLICK TO LAUNCH — single centered column, typography-led ----------
function AboutClickToLaunch() {
  const [hover, setHover] = useStateA(false);
  return (
    <section data-screen-label="06 Click to Launch" style={{ background: A_WHITE, padding: "180px 48px" }}>
      <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 16, marginBottom: 28 }}>
            <AGoldRule width={36} />
            <AEyebrow>Another Business</AEyebrow>
            <AGoldRule width={36} />
          </div>
          <h2 style={{
            fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
            fontSize: "clamp(36px, 4.6vw, 60px)", lineHeight: 1.08,
            letterSpacing: "-0.005em", margin: "0 0 40px 0", textTransform: "none",
          }}>
            Click to <em style={{ fontStyle: "italic", color: A_GOLD }}>Launch</em>.
          </h2>
          <div style={{
            fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 15.5,
            lineHeight: 1.95, color: "#2a2622", marginBottom: 48, textAlign: "left",
          }}>
            <p style={{ margin: "0 0 22px 0" }}>
              Outside of J. Renée Studios, I run Click to Launch — a marketing agency for entrepreneurs.
            </p>
            <p style={{ margin: "0 0 22px 0" }}>
              We teach entrepreneurs how to grow real businesses: marketing, AI, strategic business planning, and the systems that turn talented founders into profitable ones. It's the work I do for our clients, the work I do for myself, and the work I think every entrepreneur deserves access to.
            </p>
            <p style={{ margin: 0 }}>
              I started Click to Launch because I'd spent two decades figuring this out the hard way — and I didn't want anyone else to.
            </p>
          </div>
          <a
            href="https://www.clicktolaunch.com"
            target="_blank"
            rel="noopener noreferrer"
            onMouseEnter={()=>setHover(true)}
            onMouseLeave={()=>setHover(false)}
            style={{
              display: "inline-flex", alignItems: "center", gap: 16,
              fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 11,
              letterSpacing: "0.36em", textTransform: "uppercase",
              color: hover ? "#b59340" : A_GOLD, textDecoration: "none",
              borderBottom: `1px solid ${hover ? "#b59340" : A_GOLD}`,
              paddingBottom: 6, transition: "color 200ms ease, border-color 200ms ease",
            }}
          >
            Learn more about Click to Launch
            <span style={{ fontFamily: "Gloock, serif", fontSize: 16, lineHeight: 1, transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 220ms ease" }}>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- 7. FINAL CTA ----------
function AboutFinalCTA() {
  return (
    <section data-screen-label="07 Inquire" style={{ background: A_BEIGE, padding: "200px 48px", textAlign: "center" }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <AGoldRule width={64} style={{ marginBottom: 40 }} />
        <h2 style={{
          fontFamily: "Gloock, serif", fontWeight: 400, color: A_INK,
          fontSize: "clamp(48px, 7vw, 108px)", lineHeight: 1, letterSpacing: "-0.01em",
          margin: "0 0 32px 0", textTransform: "none",
        }}>
          That's <em style={{ fontStyle: "italic", color: A_GOLD }}>me</em>.
        </h2>
        <p style={{
          fontFamily: "Poppins, sans-serif", fontWeight: 300, fontSize: 16.5,
          lineHeight: 1.7, color: "#3a342e", margin: "0 0 56px 0",
        }}>
          If you're considering working together, I'd love to hear from you.
        </p>
        <AButton variant="gold" href="/inquire/" style={{ padding: "22px 48px", fontSize: 11.5 }}>
          Inquire
        </AButton>
      </div>
    </section>
  );
}

Object.assign(window, {
  AboutHero, AboutStory, AboutOutside, AboutWhatILove, AboutMentors,
  AboutClickToLaunch, AboutFinalCTA,
});
