// TitanAbout.jsx - About Me section (Matthew Austin)

const TitanAbout = () => {
  const stats = [
    { label: 'Education', val: 'M.P.A. + B.B.A., UT Austin' },
    { label: 'Operating', val: 'Since 2019' },
    { label: 'Based', val: 'Sugar Land, Texas' },
    { label: 'Credentials', val: 'Certified Public Accountant' },
  ];

  return (
    <section id="about" style={{ background: '#fff', padding: '96px 32px 48px', fontFamily: "'DM Sans', sans-serif", borderTop: '1px solid #e5edf5' }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{ fontSize: 11, fontWeight: 500, color: '#967844', letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 14 }}>About</div>
        <h2 style={{ fontSize: 'clamp(30px,4.5vw,44px)', fontWeight: 400, lineHeight: 1.08, letterSpacing: '-0.8px', color: '#0F1A2E', marginBottom: 56, textWrap: 'pretty' }}>
          Matthew Austin, CPA
        </h2>

        <div className="about-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.15fr', gap: 56, alignItems: 'start' }}>
          <div style={{
            width: '100%',
            borderRadius: 12,
            background: '#fff',
            border: '1px solid #e5edf5',
            boxShadow: 'rgba(15,26,46,0.10) 0px 20px 40px -20px, rgba(0,0,0,0.04) 0px 8px 16px -8px',
            padding: 24,
            overflow: 'hidden',
          }}>
            <img
              src="headshot.png"
              alt="Matthew Austin, CPA"
              style={{
                width: '100%',
                aspectRatio: '1 / 1',
                borderRadius: 10,
                objectFit: 'cover',
                objectPosition: 'center top',
                display: 'block',
                marginBottom: 16,
              }}
            />

            <div style={{ borderTop: '1px solid #e5edf5', paddingTop: 16, display: 'flex', flexDirection: 'column', gap: 12 }}>
              {stats.map((s, i) => (
                <div key={i} style={{ display: 'flex', justifyContent: 'space-between', gap: 18, alignItems: 'baseline', fontSize: 12 }}>
                  <span style={{ color: '#94a3b8', textTransform: 'uppercase', letterSpacing: 0.4, fontWeight: 500 }}>{s.label}</span>
                  <span style={{ color: '#273951', fontWeight: 400, textAlign: 'right' }}>{s.val}</span>
                </div>
              ))}
            </div>
          </div>

          <div>
            <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.7, color: '#273951', marginBottom: 20, textWrap: 'pretty' }}>
              I&rsquo;m Matthew Austin, a licensed CPA and the founder of Titan Ledgers. For more than seven years I&rsquo;ve helped small and mid-size businesses across the nation turn chaotic books into clear, decision-ready financials.
            </p>
            <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.7, color: '#273951', marginBottom: 20, textWrap: 'pretty' }}>
              I earned my Master in Professional Accounting and Bachelor of Business Administration from the University of Texas at Austin&rsquo;s McCombs School of Business.
            </p>
            <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.7, color: '#273951', marginBottom: 20, textWrap: 'pretty' }}>
              At Titan Ledgers we believe accurate books are the foundation of every financial decision you make. When your data is inconsistent or delayed, you end up guessing instead of leading with confidence. Reliable bookkeeping keeps your operations aligned and shows you a clear path forward.
            </p>
            <p style={{ fontSize: 17, fontWeight: 300, lineHeight: 1.7, color: '#273951', marginBottom: 32, textWrap: 'pretty' }}>
              Our role is simple: keep the financial engine running cleanly and consistently, so you can focus on what matters most.
            </p>

            <a href="#contact" style={{
              display: 'inline-flex', alignItems: 'center', padding: '12px 24px', borderRadius: 4,
              fontSize: 15, fontWeight: 500, background: '#16263D', color: '#BD9748',
              border: 'none', cursor: 'pointer', textDecoration: 'none', transition: 'background 150ms, color 150ms',
            }}
              onMouseEnter={e => { e.currentTarget.style.background = '#223249'; e.currentTarget.style.color = '#E9CE87'; }}
              onMouseLeave={e => { e.currentTarget.style.background = '#16263D'; e.currentTarget.style.color = '#BD9748'; }}
            >Get a free consultation &rarr;</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
        @media (max-width: 768px) {
          #about { padding: 56px 20px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { TitanAbout });