// About page
function About({ navigate }) {
  const isMobile = useIsMobile();
  return (
    <main style={{paddingTop: isMobile ? '100px' : '160px'}}>
      <section className="container" style={{paddingBottom: isMobile ? '80px' : '120px'}}>
        <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '48px' : '80px', alignItems:'start'}}>
          <Reveal>
            <div style={isMobile ? {} : {position:'sticky', top:'140px'}}>
              <div style={{position:'relative', overflow:'hidden'}}>
                <img src="assets/ariana.jpg" alt="Ariana Khaledi" style={{width:'100%', display:'block', filter:'contrast(1.02) saturate(0.95)'}}/>
              </div>
              <div className="eyebrow" style={{marginTop:'24px', display:'flex', justifyContent:'space-between'}}>
                <span>Ariana Khaledi</span>
                <span>Founder · Creative Director</span>
              </div>
            </div>
          </Reveal>

          <div>
            <Reveal>
              <div className="eyebrow">Meet</div>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="serif" style={{fontSize:'clamp(56px, 9vw, 132px)', margin:'16px 0 0', lineHeight:0.92, letterSpacing:'-0.03em', fontWeight:300}}>
                Ariana <em style={{fontWeight:400}}>Khaledi</em>
              </h1>
              <div className="script" style={{fontSize:'clamp(28px, 3.2vw, 48px)', color:'var(--accent-2)', marginTop:'8px'}}>also known as ari joon</div>
            </Reveal>

            <Reveal delay={160}>
              <p style={{marginTop:'48px', fontSize:'18px', lineHeight:1.75, color:'var(--ink-2)', maxWidth:'520px'}}>
                Ariana is the creative force behind Ari Joon Home — a staging studio rooted in the belief that the right space doesn't just show well, it sells.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <p style={{marginTop:'24px', fontSize:'16px', lineHeight:1.75, color:'var(--ink-2)', maxWidth:'520px'}}>
                With over a decade of experience across the design industry, Ariana brings a trained eye that goes beyond furniture placement. Every install is a considered composition — where color, form, and feeling work together to stop a buyer in their tracks.
              </p>
            </Reveal>
            <Reveal delay={280}>
              <p style={{marginTop:'24px', fontSize:'16px', lineHeight:1.75, color:'var(--ink-2)', maxWidth:'520px'}}>
                Her work speaks for itself. When she staged her own home for sale, it went under contract in 7 days — 53 days ahead of the market average. That moment didn't just validate her instincts. It launched a business.
              </p>
            </Reveal>
            <Reveal delay={340}>
              <blockquote className="serif" style={{
                margin:'48px 0 0', padding:'32px 0 32px 32px',
                borderLeft:'2px solid var(--accent-2)',
                fontSize:'clamp(18px, 2vw, 26px)',
                fontStyle:'italic', fontWeight:300, lineHeight:1.5,
                maxWidth:'520px', color:'var(--ink)',
              }}>
                She trained at the Fashion Institute of Design and Merchandising in Los Angeles — bringing a creative depth to her work that most stagers simply don't have. What she builds isn't a furnished room. It's the version of a home a buyer falls in love with.
              </blockquote>
            </Reveal>

            <Reveal delay={420}>
              <button className="btn" onClick={()=>navigate('inquiry')} style={{marginTop:'56px'}}>
                Work with Ariana
                <span>→</span>
              </button>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { About });