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

      <section className="page-head" style={{padding:'150px 0 110px'}}>
        <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> Done-for-you
          </div>
          <h1>
            Deploy an AI SDR.<br/>
            <span className="accent">Don't hire one.</span>
          </h1>
          <p className="lede">
            We deploy a custom, AI powered outbound sales system trained on your data,
            your ICP, and your messaging. Live in 30 days. First appointments inside two
            weeks via LinkedIn, four weeks via email. No SDRs to ramp, no list builders
            to manage, no agency markup.
          </p>
          <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
            <a href="https://get.aidasdr.com/application" className="btn btn-indigo">Apply for done-for-you <span className="arrow">→</span></a>
            <a href="#timeline" className="btn btn-ghost-light">See the 30 day plan</a>
          </div>

          <div style={{
            marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
            border: '1px solid rgba(255,255,255,0.10)', borderRadius: 14,
            background: 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))',
            overflow: 'hidden'
          }} className="head-stats">
            <div style={{padding:'24px 28px', borderRight:'1px solid rgba(255,255,255,0.06)'}}>
              <div style={{fontSize:38, fontWeight:500, letterSpacing:'-0.035em', color:'#a5b4fc'}}>2 weeks</div>
              <div style={{marginTop:8, fontSize:13, color:'rgba(255,255,255,0.55)'}}>To your first booked appointments via LinkedIn.</div>
            </div>
            <div style={{padding:'24px 28px', borderRight:'1px solid rgba(255,255,255,0.06)'}}>
              <div style={{fontSize:38, fontWeight:500, letterSpacing:'-0.035em', color:'#a5b4fc'}}>4 weeks</div>
              <div style={{marginTop:8, fontSize:13, color:'rgba(255,255,255,0.55)'}}>To first appointments via the email layer.</div>
            </div>
            <div style={{padding:'24px 28px'}}>
              <div style={{fontSize:38, fontWeight:500, letterSpacing:'-0.035em', color:'#a5b4fc'}}>30 days</div>
              <div style={{marginTop:8, fontSize:13, color:'rgba(255,255,255,0.55)'}}>From kickoff to fully operational system.</div>
            </div>
          </div>
        </div>
      </section>

      {/* THE DEPLOY VS HIRE COMPARISON */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">The math</div>
              <h2>Hire an SDR.<br/>Or deploy one.</h2>
            </div>
            <p className="lede">
              A single SDR runs $90K all in by the end of year one, takes four months
              to ramp, and leaves inside eighteen. A deployed AI SDR goes live in 30 days,
              never quits, and gets sharper with every reply.
            </p>
          </div>

          <div className="grid-2">
            <div className="card" style={{padding:32}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.08em', color:'var(--ink-mute)'}}>HIRING AN SDR</div>
              <h3 style={{marginTop:8, fontSize:24}}>The traditional path.</h3>
              <ul style={{listStyle:'none', padding:0, margin:'22px 0 0', display:'grid', gap:14}}>
                <CompareRow bad>4 to 6 months to recruit, hire, ramp.</CompareRow>
                <CompareRow bad>$75K to $95K base, plus commission and tools.</CompareRow>
                <CompareRow bad>18 month average tenure. Then you start over.</CompareRow>
                <CompareRow bad>Output capped by one human's working hours.</CompareRow>
                <CompareRow bad>Knowledge walks out the door when they leave.</CompareRow>
              </ul>
            </div>
            <div className="card" style={{padding:32, background:'var(--ink)', color:'#fff', borderColor:'var(--ink)',
              backgroundImage:'radial-gradient(700px 400px at 80% -10%, rgba(99,102,241,0.30), transparent 60%)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.08em', color:'rgba(255,255,255,0.65)'}}>DEPLOYING AIDA</div>
              <h3 style={{marginTop:8, fontSize:24, color:'#fff'}}>The deployed path.</h3>
              <ul style={{listStyle:'none', padding:0, margin:'22px 0 0', display:'grid', gap:14}}>
                <CompareRow good dark>Live in 30 days. First appointments inside 2 weeks.</CompareRow>
                <CompareRow good dark>Fixed monthly cost. No commission, no surprise fees.</CompareRow>
                <CompareRow good dark>Permanent. Never quits, never takes PTO, never re ramps.</CompareRow>
                <CompareRow good dark>Runs 24/7. Sends inside business hours, never outside.</CompareRow>
                <CompareRow good dark>Trained on your data. Every reply makes it sharper.</CompareRow>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT GETS BUILT */}
      <section className="section outreach">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">What gets built</div>
              <h2>A complete outbound system.<br/>Custom. Yours.</h2>
            </div>
            <p className="lede">
              Not a template, not a license. We design and deploy the entire outbound
              stack for your business, trained on your historical pipeline, your ICP,
              and your voice.
            </p>
          </div>

          <div className="row-list">
            <div className="row">
              <div className="lbl">DATA</div>
              <div>
                <h4>Trained on your historical pipeline.</h4>
                <p>We ingest your CRM history, won deals, lost deals, and discovery transcripts. AiDA learns what your real buyers look like, not what a template guesses.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">ICP</div>
              <div>
                <h4>A custom ICP and signal config.</h4>
                <p>We map the three to four buying signals that match your buyer best. Funding, role changes, hiring, tech stack, content engagement, competitor engagement. Tuned to your sweet spot.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">VOICE</div>
              <div>
                <h4>Messaging in your voice.</h4>
                <p>We write per signal openers and follow ups in your tone, run them through your team for approval, and load the approved versions into AiDA. Every line sounds like you wrote it.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">SENDING</div>
              <div>
                <h4>Your LinkedIn profiles, fully configured.</h4>
                <p>We plug AiDA into your team's LinkedIn accounts, verify warm up, set per profile sending caps, and lock in the safety rules. Account safety is non negotiable from day one.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">INBOX</div>
              <div>
                <h4>AI managed reply handling.</h4>
                <p>AiDA's Inbox Manager drafts every reply in your voice. Your team approves with one click, or hands the whole inbox to AiDA for fully automated qualification and meeting booking.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">INTEGRATIONS</div>
              <div>
                <h4>Wired into the tools you already use.</h4>
                <p>GoHighLevel CRM sync, calendar booking, Slack notifications, weekly reporting. Leads land where your team already works. Nothing to learn, nothing to copy paste.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 30 DAY TIMELINE */}
      <section className="section" id="timeline">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">Deployment timeline</div>
              <h2>Live in 30 days.<br/>Booked meetings in 14.</h2>
            </div>
            <p className="lede">
              We have run this deployment for IT services firms, consulting groups,
              SaaS teams, and agencies. The plan is the same. The clock starts at kickoff.
            </p>
          </div>

          <div className="num-list">
            <div className="item">
              <div className="n">WEEK 1</div>
              <div>
                <h4>Discovery, data, and signal config.</h4>
                <p>Two workshops. We ingest your CRM history, map your ICP, define success metrics, and design your custom signal stack. First test runs surface matched leads for your review by Friday.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">WEEK 2</div>
              <div>
                <h4>LinkedIn live. First booked appointments.</h4>
                <p>Per signal openers drafted in your voice and approved by your team Monday. LinkedIn profiles plugged in, caps configured, sequences launched Tuesday. First appointments on your calendar by end of week.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">WEEK 3</div>
              <div>
                <h4>Volume ramps. Email layer built.</h4>
                <p>LinkedIn volume climbs to full daily capacity. In parallel we configure the email layer: domain warm up, deliverability checks, per signal email templates approved by your team.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">WEEK 4</div>
              <div>
                <h4>Email live. First email appointments.</h4>
                <p>Email sequences go live alongside LinkedIn. First email appointments land on your calendar. AiDA Inbox Manager activated, drafting replies for your team or running fully automated.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">DAY 30 AND BEYOND</div>
              <div>
                <h4>System is yours. We stay close.</h4>
                <p>The deployment is permanent. Your dedicated strategist runs weekly tune ups, monthly QBRs, and quarterly ICP refreshes. You see numbers and a roadmap, never a black box.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT YOU GET */}
      <section className="section scale">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">On day 30</div>
              <h2>You wake up to<br/>a working pipeline.</h2>
            </div>
            <p className="lede">
              Booked meetings on your calendar, qualified leads in your CRM,
              a weekly report in your inbox, and a system that runs without you.
            </p>
          </div>

          <div className="grid-2">
            <div className="card">
              <div className="ic"><ISparkle size={20}/></div>
              <h3>A dedicated strategist</h3>
              <p>One operator owns your account end to end. They know your ICP, your offer, and your sales cycle. On Slack with your team. Available for tune ups any week.</p>
            </div>
            <div className="card">
              <div className="ic"><IMail size={20}/></div>
              <h3>Replies, drafted or handled</h3>
              <p>AiDA Inbox Manager drafts every reply in your voice. You can review and send, or hand the whole inbox to AiDA for fully automated qualification and booking.</p>
            </div>
            <div className="card">
              <div className="ic"><ICal size={20}/></div>
              <h3>Meetings on your calendar</h3>
              <p>Qualified prospects propose times themselves. Meetings land on your team's calendar with a context briefing pulled from the prospect's signal, role, and company.</p>
            </div>
            <div className="card">
              <div className="ic"><IGraph size={20}/></div>
              <h3>Weekly reporting plus monthly QBR</h3>
              <p>Pipeline influenced revenue, reply quality, signal performance, account health. The metrics revenue leaders actually want. No vanity dashboards.</p>
            </div>
          </div>
        </div>
      </section>

      {/* WHO IT'S FOR / PRICING */}
      <section className="section">
        <div className="wrap">
          <div className="section-head">
            <div>
              <div className="eyebrow eyebrow-indigo">Who it's for</div>
              <h2>Built for revenue<br/>leaders who'd rather close.</h2>
            </div>
            <p className="lede">
              Deployment plans start at $4,800/mo and are bespoke from there based on
              volume, number of seats, and inbox depth. Two month minimum. No annual
              contracts. If it isn't a fit on the deployment call, we'll say so.
            </p>
          </div>

          <div className="grid-3">
            <div className="card">
              <h3>Founder led GTM</h3>
              <p>You're the only person doing outbound and you'd rather be running the company. We become the SDR layer you never hired.</p>
            </div>
            <div className="card">
              <h3>B2B services firms</h3>
              <p>IT services, consulting, professional services teams closing $30K to $300K deals who want predictable, signal matched pipeline.</p>
            </div>
            <div className="card">
              <h3>Series A to B SaaS</h3>
              <p>You hired one SDR, they aren't ramping fast enough, and the board wants pipeline numbers next month. We backfill until they ramp.</p>
            </div>
          </div>

          <div style={{textAlign:'center', marginTop:48}}>
            <a href="https://get.aidasdr.com/application" className="btn btn-primary">Apply for done-for-you <span className="arrow">→</span></a>
            <div style={{marginTop:14, fontSize:13, color:'var(--ink-mute)'}}>30 minutes. Walk away with a scoped 30 day plan whether or not we work together.</div>
          </div>
        </div>
      </section>

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

function CompareRow({ children, bad, good, dark }) {
  return (
    <li style={{display:'flex', alignItems:'flex-start', gap:12, fontSize:14.5, lineHeight:1.5,
                color: dark ? 'rgba(255,255,255,0.88)' : 'var(--ink)'}}>
      <span style={{
        width:18, height:18, borderRadius:'50%', flexShrink:0, marginTop:2,
        display:'grid', placeItems:'center',
        background: bad ? (dark ? 'rgba(244,63,94,0.18)' : '#fee2e2')
                        : (dark ? 'rgba(16,185,129,0.22)' : 'var(--emerald-soft)'),
        color: bad ? (dark ? '#fda4af' : '#b91c1c')
                   : (dark ? '#6ee7b7' : '#065f46'),
        fontSize: 12, fontWeight: 500,
      }}>
        {bad ? '×' : '✓'}
      </span>
      {children}
    </li>
  );
}

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(<ManagedPage />);
requestAnimationFrame(init);