function AboutPage() {
  return (
    <React.Fragment>
      <Nav darkOnLoad={true} />

      <section className="page-head">
        <div className="hero-bg" aria-hidden></div>
        <div className="hero-grid" aria-hidden></div>
        <div className="wrap inner">
          <div className="crumb">
            <a href="/">AiDA SDR</a> <span>/</span> About
          </div>
          <h1>
            We built the SDR layer<br/>
            <span className="accent">we wished we'd had.</span>
          </h1>
          <p className="lede">
            AiDA started as an internal tool inside a B2B services agency that
            was tired of hiring, ramping, and losing SDRs. The math never worked.
            So we built a digital one.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="split">
            <div className="lhs">
              <div className="eyebrow eyebrow-indigo">Our origin</div>
              <h2 style={{marginTop:14}}>Outbound was<br/>broken twice over.</h2>
            </div>
            <div>
              <p style={{fontSize:18, lineHeight:1.65, color:'var(--ink-soft)', margin:0}}>
                <span className="serif-it" style={{fontSize:22, color:'var(--indigo)'}}>
                  "We were paying $90K all-in for an SDR who was sending the same templated cold message
                  to a list someone scraped six months ago. The reply rate was under 1%."
                </span>
              </p>
              <p style={{marginTop:24, color:'var(--ink-mute)', fontSize:16, lineHeight:1.65}}>
                That was the realization. Cold lists weren't the answer. Neither were the
                tools claiming to "automate" outbound, those just got accounts restricted.
                The leverage point sat in the middle: real-time buying signals + careful,
                personalized sending + intelligent reply handling. So we built AiDA to do
                exactly that, first for ourselves, then for a handful of clients, then
                as a product.
              </p>
              <p style={{marginTop:18, color:'var(--ink-mute)', fontSize:16, lineHeight:1.65}}>
                Today AiDA runs outbound for IT services firms, professional services
                consultancies, B2B SaaS teams, and the agencies who serve them. The
                product is opinionated about what works, and what doesn't, because
                we still run it on our own pipeline every day.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section scale">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">What we believe</div>
              <h2>Five principles<br/>that shape the product.</h2>
            </div>
            <p className="lede">
              We have strong opinions about outbound. They show up in every product decision ,
              what we build, what we refuse to build, and how we coach customers.
            </p>
          </div>

          <div className="num-list">
            <div className="item">
              <div className="n">01</div>
              <div>
                <h4>Timing beats targeting.</h4>
                <p>A perfect-ICP prospect on a quiet Tuesday will outreply a worse-fit prospect on the day they raise a round. AiDA optimizes for moments of change first, fit second.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">02</div>
              <div>
                <h4>Volume isn't the answer.</h4>
                <p>Every "spray-and-pray" tool eventually burns the sender's reputation. We'd rather send 40 great messages a day than 400 mediocre ones.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">03</div>
              <div>
                <h4>Personalization is a system, not a vibe.</h4>
                <p>AI doesn't fix bad inputs. AiDA grounds every message in a specific signal, role, and firmographic, the same way a great SDR would, only at machine scale.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">04</div>
              <div>
                <h4>Account safety is non-negotiable.</h4>
                <p>If we ever have to choose between volume and protecting your LinkedIn account, the account wins every time. There are no exceptions and no advanced "unsafe" mode.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">05</div>
              <div>
                <h4>Closers should close.</h4>
                <p>AiDA exists so revenue leaders can stop doing the work an SDR was supposed to do. Found, qualified, warmed-up leads, handed off ready to talk.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">Who's behind it</div>
              <h2>A small team<br/>obsessed with outbound.</h2>
            </div>
            <p className="lede">
              Operators-turned-builders. We've sat in the VP Sales seat, the agency
              founder seat, and the engineering seat. AiDA is what happens when those
              three perspectives ship a product together.
            </p>
          </div>
          <div className="team-row">
            <div className="team-card">
              <div className="av av-3">FM</div>
              <h4>Faisal Mustafa</h4>
              <div className="role">CEO · Co-founder</div>
              <p>Spent a decade running outbound for B2B services firms before founding AiDA. Believes the SDR job description is overdue for retirement.</p>
            </div>
            <div className="team-card">
              <div className="av av-2">IZ</div>
              <h4>Ivan Zahemski</h4>
              <div className="role">Head of Customer · Co-founder</div>
              <p>Onboards every new account personally for the first 30 days. Has shipped more customer-success playbooks than anyone we know.</p>
            </div>
            <div className="team-card">
              <div className="av av-1">JN</div>
              <h4>Jeff Naeem</h4>
              <div className="role">Head of Engineering</div>
              <p>Built the signal pipeline. Treats LinkedIn rate limits the way pilots treat instrument readings, religiously.</p>
            </div>
          </div>
        </div>
      </section>

      <CTABand />
      <Footer />
    </React.Fragment>
  );
}

function CTABand() {
  return (
    <section id="cta" style={{padding:'0 0 20px'}}>
      <div className="wrap">
        <div className="cta-band">
          <div className="grid" aria-hidden></div>
          <div className="inner">
            <div className="eyebrow eyebrow-on-dark">Get started</div>
            <h2 style={{color:'#fff', marginTop:14, fontSize:'clamp(34px, 4vw, 56px)'}}>
              Let AiDA work your pipeline <span className="serif-it" style={{color:'#a5b4fc'}}>this week.</span>
            </h2>
            <p>Plug AiDA in, pick your signals, and watch qualified leads land in your inbox starting day one. 7-day free trial.</p>
            <div className="ctas">
              <a href="https://app.aidasdr.com/signup" className="btn btn-indigo">Start your 7-day free trial <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Scroll reveal
function init() {
  const els = document.querySelectorAll('.section, .cta-band');
  els.forEach(el => el.classList.add('reveal'));
  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { rootMargin: '0px 0px -80px 0px', threshold: 0.05 });
  els.forEach(el => io.observe(el));
}

ReactDOM.createRoot(document.getElementById('root')).render(<AboutPage />);
requestAnimationFrame(init);