/* ==========================================================================
   About Me Section — Michael Rofaeil, Founder
   ========================================================================== */

function AboutSection() {
  return (
    <section className="about section-pad" id="about">
      <div className="wrap">
        <div className="about-card reveal">
          {/* Circular avatar */}
          <div className="about-avatar">
            <img src="uploads/michael-headshot.jpg" alt="Michael Rofaeil, Founder of Elvaio" />
          </div>

          <h2 className="about-name">Michael Rofaeil</h2>
          <p className="about-role">Founder, Elvaio</p>

          <div className="about-text-col reveal reveal-d1">
            <div className="about-body">
              <p>
                I got tired of watching talented coaches burn out on busywork.
                People who could change lives — stuck scheduling emails, chasing
                invoices, and copy-pasting between six different tools at midnight.
              </p>
              <p>
                So I built the thing I wished existed: a single system that handles
                the operational mess while you do the work that actually matters.
                No fluff. No "strategy decks." Just automations that run, today.
              </p>
              <p className="about-closer">
                If your calendar runs you, let's fix that.
              </p>
            </div>
            <a className="btn btn-primary btn-icon-pill" href="#cta" onClick={(e) => { e.preventDefault(); document.getElementById('cta')?.scrollIntoView({ behavior: 'smooth' }); }}>
              <span className="btn-pill-text">Work with me</span>
              <span className="btn-pill-icon" aria-hidden="true">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M3 13L13 3M13 3H6M13 3V10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AboutSection = AboutSection;