function AboutPage() {
  

  const principles = [
    { icon: 'message-circle', title: 'You work with Alex directly', body: 'Not a case manager. Not a junior associate. The lawyer handling your case is the lawyer you call.' },
    { icon: 'shield-check',  title: 'Prepared for trial — always', body: 'Every file is built as if it will be tried. That preparation is exactly why most cases resolve favorably without one.' },
    { icon: 'heart-handshake', title: 'Plain-spoken, no legalese', body: 'You will leave every conversation knowing where the case stands, what comes next, and why.' },
    { icon: 'scale', title: 'Plaintiff side. Period.', body: 'Alex represents people, not corporations or insurers. No conflict of interest — and it shows in the room.' },
  ];

  return (
    <div>
      <Nav />

      {/* HERO */}
      <section style={{ position: 'relative', minHeight: '60vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <img src={IMG.aboutHero} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(10,20,34,0.96) 0%, rgba(10,20,34,0.78) 42%, rgba(10,20,34,0.4) 75%, rgba(10,20,34,0.1) 100%)' }} />
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '90px 32px', width: '100%' }}>
          <div className="reveal" style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22 }}>
            <span style={{ height: 1, width: 40, background: 'var(--brass-500)' }}></span>
            <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.74rem', letterSpacing: '0.26em', color: 'var(--brass-300)' }}>
              ABOUT ALEX NARAYAN
            </span>
          </div>
          <h1 className="reveal" style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.4rem,5vw,4rem)', lineHeight: 1.04, color: '#fff', maxWidth: 800, marginBottom: 22 }}>
            A lawyer who treats your case as his own.
          </h1>
          <p className="reveal" style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(1.1rem,1.6vw,1.4rem)', lineHeight: 1.5, color: 'rgba(243,239,230,0.88)', maxWidth: 600 }}>
            More than two decades representing injured Californians — directly, personally, and with the preparation serious cases demand.
          </p>
        </div>
      </section>

      {/* BIO — portrait + long copy */}
      <section style={{ background: 'var(--bg-base)', padding: '100px 32px' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid', gridTemplateColumns: 'minmax(0,0.85fr) minmax(0,1.15fr)', gap: 64, alignItems: 'start' }} className="bio-grid">
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', top: 18, left: 18, right: -18, bottom: -18, border: '1px solid var(--brass-500)', borderRadius: 'var(--radius-sm)' }}></div>
            <img src="assets/brand-photos/portrait-office-standing.png" alt="Alex Narayan" style={{ position: 'relative', width: '100%', borderRadius: 'var(--radius-sm)', display: 'block', boxShadow: 'var(--shadow-lg)' }} />
          </div>
          <div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>Meet Your Attorney</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2rem,3.4vw,2.8rem)', color: 'var(--navy-800)', lineHeight: 1.08, marginBottom: 22 }}>
              Alex Narayan
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.05rem', lineHeight: 1.75, color: 'var(--fg2)', marginBottom: 18 }}>
              Alex Narayan founded the firm on a simple principle: every client deserves a lawyer who listens first, explains plainly, and fights without compromise. He has spent more than two decades representing injured Californians — never insurance carriers, never the people on the other side of the table.
            </p>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.05rem', lineHeight: 1.75, color: 'var(--fg2)', marginBottom: 18 }}>
              From a small office in Sherman Oaks, Alex represents people across Los Angeles County in personal injury, auto and motorcycle crashes, premises cases, workers’ compensation, and California labor law. He keeps his caseload deliberately tight — not because he can’t handle more, but because real representation requires real attention.
            </p>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.05rem', lineHeight: 1.75, color: 'var(--fg2)', marginBottom: 28 }}>
              His clients come to him at some of the worst moments of their lives. They leave with their bills handled, their record clear, and the sense — often for the first time since the injury — that someone competent is in their corner.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginBottom: 32 }}>
              {[
                { n: '20+',     l: 'Years of\nexperience' },
                { n: '1,000+', l: 'Cases\nhandled' },
                { n: '98%',     l: 'Client\nsatisfaction' },
              ].map((s) => (
                <div key={s.l} style={{ background: '#fff', border: '1px solid var(--line)', borderTop: '2px solid var(--brass-500)', borderRadius: 'var(--radius-sm)', padding: '20px 16px', textAlign: 'center' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '2.2rem', color: 'var(--navy-800)', lineHeight: 1 }}>{s.n}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: '0.74rem', textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--ink-muted)', marginTop: 8, whiteSpace: 'pre-line' }}>{s.l}</div>
                </div>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: '1.15rem', lineHeight: 1.55, color: 'var(--navy-800)', borderLeft: '2px solid var(--brass-500)', paddingLeft: 20, maxWidth: 540 }}>
              "When the stakes are this high, experience matters. So does showing up."
            </p>
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section style={{ background: 'var(--bg-subtle)', padding: '90px 32px' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 50 }}>
            <div className="eyebrow" style={{ marginBottom: 14 }}>How Alex Practices</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2rem,3.2vw,2.8rem)', color: 'var(--navy-800)', lineHeight: 1.1, maxWidth: 720, margin: '0 auto' }}>
              Four principles that run every case.
            </h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 22 }}>
            {principles.map((p) => (
              <div key={p.title} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 'var(--radius-sm)', padding: '28px 24px', boxShadow: 'var(--shadow-sm)' }}>
                <span style={{ width: 44, height: 44, borderRadius: 'var(--radius-sm)', background: 'var(--navy-800)', color: 'var(--brass-400)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                  <Icon name={p.icon} size={22} />
                </span>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '1.02rem', color: 'var(--navy-800)', marginBottom: 10 }}>{p.title}</div>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: '0.94rem', lineHeight: 1.65, color: 'var(--fg2)' }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMMUNITY */}
      <section style={{ background: 'var(--navy-800)', padding: '90px 32px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <img src="assets/brand-photos/portrait-courthouse-full.png" alt="" style={{ position: 'absolute', right: 0, top: 0, height: '100%', width: '45%', objectFit: 'cover', objectPosition: 'center', opacity: 0.18, maskImage: 'linear-gradient(to left, #000, transparent)', WebkitMaskImage: 'linear-gradient(to left, #000, transparent)' }} />
        <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto' }}>
          <div className="eyebrow" style={{ color: 'var(--brass-400)', marginBottom: 16 }}>Practice Footprint</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(1.9rem,3vw,2.6rem)', lineHeight: 1.1, marginBottom: 20 }}>
            Based in Sherman Oaks. Working across Los Angeles.
          </h2>
          <p style={{ fontFamily: 'var(--font-serif)', fontSize: '1.15rem', lineHeight: 1.65, color: 'rgba(243,239,230,0.9)', marginBottom: 28 }}>
            Alex represents clients throughout Los Angeles County and Southern California — from the San Fernando Valley to downtown and the South Bay. The office at 14900 Ventura Boulevard is where most clients meet him for the first time. Many never need to come in again until the case resolves.
          </p>
          <a href="/#contact" style={{ display: 'inline-block', background: 'var(--crimson-600)', color: '#fff', padding: '15px 28px', borderRadius: 'var(--radius-sm)', textDecoration: 'none', fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: '0.92rem', letterSpacing: '0.04em' }}>
            Schedule a free consultation
          </a>
        </div>
      </section>

      <ConsultationForm />
      <Footer />
    </div>
  );
}