// AttorneyBio.jsx — portrait with brass frame detail + bio copy + inline stats.
function AttorneyBio() {
  const stats = [
    { n: '20+', l: 'Years of\nexperience' },
    { n: '1,000+', l: 'Cases\nhandled' },
    { n: '98%', l: 'Client\nsatisfaction' },
  ];
  return (
    <section style={{ background: 'var(--bg-subtle)', padding: '100px 32px' }}>
      <div style={{ maxWidth: 1140, margin: '0 auto', display: 'grid',
        gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 64, alignItems: 'center' }} className="bio-grid">

        {/* Portrait with brass frame */}
        <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-seated.png" alt="Alex Narayan" style={{
            position: 'relative', width: '100%', borderRadius: 'var(--radius-sm)', display: 'block',
            boxShadow: 'var(--shadow-lg)' }} />
        </div>

        {/* Copy */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 14 }}>Meet Your Attorney</div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.2rem,3.6vw,3rem)',
            color: 'var(--navy-800)', lineHeight: 1.06, marginBottom: 22 }}>
            A trusted advocate who treats your case as his own.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.02rem', lineHeight: 1.7, 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 in courtrooms across the state — and he still answers his own phone.
          </p>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: '1.02rem', lineHeight: 1.7, color: 'var(--fg2)', marginBottom: 34 }}>
            When you hire this firm, you get Alex — not a rotating cast of associates. That direct
            relationship is the difference between a case that is managed and a case that is won.
          </p>

          <div style={{ display: 'flex', gap: 36, borderTop: '1px solid var(--line)', paddingTop: 28 }}>
            {stats.map((s) => (
              <div key={s.n}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '2.6rem', lineHeight: 1, color: 'var(--crimson-600)' }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '0.78rem', letterSpacing: '0.04em', color: 'var(--fg3)', marginTop: 8, whiteSpace: 'pre-line', lineHeight: 1.4 }}>{s.l}</div>
              </div>
            ))}
          </div>

          <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: '1.3rem',
            color: 'var(--navy-700)', marginTop: 34, paddingLeft: 18, borderLeft: '2px solid var(--brass-500)' }}>
            “I measure my work by one thing — the outcome for the person sitting across from me.”
            <div style={{ fontFamily: 'var(--font-nameplate)', fontStyle: 'normal', fontSize: '1rem', letterSpacing: '0.06em', color: 'var(--navy-800)', marginTop: 10 }}>— ALEX NARAYAN</div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.AttorneyBio = AttorneyBio;