const About = () => (
  <>
    <section className="page-hero container reveal">
      <div className="eyebrow" style={{marginBottom: 16}}>About</div>
      <h1>Meet Abby</h1>
      <p className="sub">The heart, and the lens, behind Motherhood Lens Co.</p>
    </section>

    <section className="container" style={{paddingBottom: 80}}>
      <div className="grid-2 reveal" style={{gap: 80, alignItems: 'start'}}>
        <div style={{position: 'sticky', top: 120}}>
          <div style={{aspectRatio: '4/5', borderRadius: 16, overflow: 'hidden'}}>
            <img src="assets/abby-portrait.jpg" alt="Abby with her camera, smiling among floral greenery" style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}}/>
          </div>
          {/* Two square placeholders hidden pre-launch — restore when real photos are ready.
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 14}}>
            <window.Photo scene="herKids" label="her kids" aspect="1/1"/>
            <window.Photo scene="behindTheScenes" label="behind the scenes" aspect="1/1"/>
          </div>
          */}
        </div>
        <div>
          <div className="script" style={{fontSize: 'clamp(34px, 4.5vw, 44px)', color: 'var(--rose-deep)', lineHeight: 1, marginBottom: 20}}>Hi, friend</div>
          <p>Motherhood is the most beautiful, exhausting, wondrous season of life. I'd know. I'm living it too.</p>
          <p>I'm Abby. Mama to three wildly spirited kids ages 3, 5, and 7, and the woman you'll find sprawled on the floor of a sun-drenched living room making your baby belly laugh for a camera.</p>
          <p>Photography found me the way it finds most mothers: through the desperate ache of watching my own babies grow too fast. I started taking photos to hold onto the everyday. Sticky hands, bedhead curls, the way my oldest still reached for me in her sleep. Somewhere between the thousands of frames and the tears I shed scrolling back through them, I realized something:</p>
          <p className="serif" style={{fontSize: 28, lineHeight: 1.3, color: 'var(--rose-deep)', fontStyle: 'italic', margin: '32px 0', borderLeft: '2px solid var(--gold)', paddingLeft: 24}}>
            Every mother deserves this.
          </p>
          <p>Every mother deserves to see herself in the photos, not just behind them. Every mother deserves images that capture her children as they truly are right now, not performing for the camera, but being loved by it. Every mother deserves an heirloom that outlives the season.</p>
          <p>And so Motherhood Lens Co. was born, named for the way this work has brought my whole life full circle. Through the lens, I get to witness what I love most in this world: the tender, wild, sacred bond between a mother and her children. It's the greatest honor I've ever held.</p>
          <div className="sig" style={{marginTop: 40}}>Abby</div>
        </div>
      </div>
    </section>

    <section className="section bg-cream-deep">
      <div className="container">
        <div className="center reveal" style={{marginBottom: 60}}>
          <div className="eyebrow eyebrow-sage" style={{marginBottom: 16}}>The Experience</div>
          <h2 style={{fontSize: 'clamp(34px, 4vw, 48px)'}}>What working with me feels like</h2>
        </div>
        <div className="grid-4 grid-4-tab" style={{gap: 24}}>
          {[
            {t: 'Warm & unhurried', c: 'No stiff poses. No "cheese!" No stressed-out parents bribing toddlers with lollipops. We let the session breathe, and the magic shows up on its own.'},
            {t: 'Wildly kid-friendly', c: "I'm a mom. I come prepared with patience, silly voices, and zero judgment when someone has a meltdown. (It's usually the parents. Kidding. Mostly.)"},
            {t: 'Light, airy, timeless', c: "My style is soft, bright, and emotional. The kind of images that won't look dated in ten years. Just more precious."},
            {t: 'All about YOU in the frame', c: "Mamas, you're getting in these photos. That's non-negotiable. Your kids need to see how loved they were."},
          ].map((v, i) => (
            <div key={i} className="reveal" style={{background: 'var(--cream)', borderRadius: 16, padding: 32, border: '1px solid var(--line)'}}>
              <div className="mono" style={{color: 'var(--gold)', marginBottom: 14}}>0{i+1}</div>
              <h3 style={{fontSize: 22, marginBottom: 14}}>{v.t}</h3>
              <p style={{fontSize: 14, color: 'var(--charcoal-soft)', margin: 0}}>{v.c}</p>
            </div>
          ))}
        </div>
        <div className="center" style={{marginTop: 60}}>
          <a href="#/contact" className="btn btn-primary">Let's Work Together</a>
        </div>
      </div>
    </section>
  </>
);

Object.assign(window, { About });