// /outbound-launch — replaces /accelerator. Different buyer, different price,
// different promise.
//
// Buyer: an agency owner with an existing client book and someone they can
// assign as an operator. The page's job is a QUALIFIED APPLICATION, not a
// purchase — so there is no pricing anywhere on it, and every section ends
// pointing at the call.
//
// Core argument: outbound is easy to sell and brutal to deliver. This removes
// the delivery. Honesty about the manual engagement comes BEFORE the pitch
// (section 3) — agencies burned by "fully automated" trust everything after it
// more because of it, and it makes the operator requirement explicit instead of
// a surprise buried in the terms.
//
// THE COMMERCIAL MODEL (owner ruling 7/29). No fee is charged to the agency:
// we close their first two clients with them, stay on up to five deals if they
// need more help getting there, and are paid by KEEPING THE SETUP FEES those
// first clients pay. The agency keeps 100% of the recurring revenue. Month one
// of the per-client platform cost comes out of the setup we collect, so the
// agency's first out-of-pocket is month two — after their client has already
// paid them. Concrete figures (the per-client monthly cost, and the setup a
// client typically pays) are deliberately NOT on this page: the brief is that
// the call earns them, and the structure is the hook on its own.
//
// Voice: "we", never "I". This is a team, not one person.
//
// Carried over from the old accelerator: the operator requirement, visible in
// the copy. Dropped: the "13 of 20 seats left" counter — with a real
// application step, manufactured scarcity reads as a tell. The real constraint
// is how many builds the team can run at once; stated without a number until
// the owner confirms one (a wrong number is worse than no number on a call).
const APPLY_ANCHOR = '#apply';
const CALENDAR_SRC = 'https://link.conduitautomation.com/widget/booking/2gQQUZjkR9vUTMPUZgGN';
// Same LeadConnector hook the other funnel pages post to — the application
// lands in GHL before the calendar ever renders.
const APPLICATION_WEBHOOK = 'https://services.leadconnectorhq.com/hooks/clmwDgeC9HqLtO9CFijv/webhook-trigger/cf67c659-86bc-4782-995a-5fd19808a715';

/* Fixed top bar — transparent over the dark hero (the glowing logo sits right
   on it), fading to a light blurred backdrop once the page scrolls. Same
   treatment as /agencies so the two pages read as one site. Logo left, one
   call to action: Apply. */
function LaunchNav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div style={{
      position:'fixed', top:0, left:0, right:0, zIndex:60,
      background: scrolled ? 'rgba(250,250,247,0.9)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(20,20,30,0.08)' : '1px solid transparent',
      boxShadow: scrolled ? '0 1px 2px rgba(20,20,30,0.04), 0 8px 24px -12px rgba(20,20,30,0.10)' : 'none',
      transition:'background 220ms ease, border-color 220ms ease, box-shadow 220ms ease',
    }}>
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, height:86, paddingTop:14, paddingBottom:14}}>
        <a href="/" style={{display:'flex', alignItems:'center'}}>
          <img src="/agency-aida-sdr-logo.png" alt="Agency AiDA SDR" style={{
            height:58, width:'auto', display:'block',
            filter: scrolled ? 'none' : 'drop-shadow(0 0 1px rgba(255,255,255,0.35)) drop-shadow(0 6px 18px rgba(129,140,248,0.45))',
            transition:'filter 220ms ease',
          }} />
        </a>
        <a href={APPLY_ANCHOR} className="btn btn-indigo" style={{height:40, padding:'0 20px', fontSize:13}}>Apply <span className="arrow">→</span></a>
      </div>
    </div>
  );
}

/* Hero side panel — the delivery you don't build. Fulfillment is the axis of
   this whole page, so the hero's visual is the build list disappearing, not a
   revenue number. */
function DeliveryStrikeList() {
  const build = [
    'Buy and configure the domains',
    'Create and warm the mailboxes',
    'Wire up enrichment and validation',
    'Stand up the sending infrastructure',
    'Write the sequences per client',
    'Staff the inbox so replies get answered',
    'Rebuild the reporting every month',
  ];
  return (
    <div style={{width:'100%', maxWidth:520, border:'1px solid rgba(148,163,220,0.28)', borderRadius:16, background:'rgba(10,14,30,0.6)', backdropFilter:'blur(6px)', boxShadow:'0 30px 70px -30px rgba(8,10,32,0.8)', overflow:'hidden'}}>
      <div style={{display:'flex', justifyContent:'space-between', padding:'13px 18px', fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.1em', color:'rgba(226,232,255,0.62)', borderBottom:'1px solid rgba(148,163,220,0.18)'}}>
        <span>the delivery you'd own</span>
        <span style={{color:'#f59e0b'}}>per client</span>
      </div>
      <div style={{padding:'6px 0'}}>
        {build.map((b) => (
          <div key={b} style={{display:'flex', gap:12, alignItems:'center', padding:'11px 18px'}}>
            <span style={{flexShrink:0, width:20, height:20, borderRadius:'50%', background:'rgba(244,63,94,0.16)', color:'#fb7185', display:'grid', placeItems:'center', fontSize:12, fontWeight:700}}>×</span>
            <span style={{fontSize:14.5, color:'rgba(226,232,255,0.55)', textDecoration:'line-through', textDecorationColor:'rgba(251,113,133,0.55)'}}>{b}</span>
          </div>
        ))}
      </div>
      <div style={{padding:'15px 18px', borderTop:'1px solid rgba(148,163,220,0.18)', background:'rgba(99,102,241,0.12)'}}>
        <div style={{fontSize:15, fontWeight:600, color:'#fff'}}>You sell it. The system delivers it.</div>
        <div style={{fontSize:12.5, color:'rgba(226,232,255,0.7)', marginTop:2}}>One system, one fixed cost per client.</div>
      </div>
    </div>
  );
}

/* Every section closes pointing at the call — with no pricing on the page, the
   call is the only place the numbers exist, so nothing is allowed to dead-end. */
function ToTheCall({ children }) {
  return (
    <div style={{marginTop:28, textAlign:'center'}}>
      <a href={APPLY_ANCHOR} style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize:21, color:'var(--ink-soft)', borderBottom:'1px solid rgba(99,102,241,0.4)', paddingBottom:2}}>
        {children}
      </a>
    </div>
  );
}

function LaunchFAQ() {
  const items = [
    { q: 'Where does my operator come from, and what does the role actually take?',
      a: 'Almost always someone already on your team — an account manager, a VA who handles client comms, a junior hire, or you for the first client. The role is not a sales job and it is not technical. It is a short daily pass on LinkedIn (accept, react, and send the handful of replies AiDA flags for a human), approving a list and messaging when a new campaign goes live, and taking the meetings that get booked. Think in terms of a focused block each day, not a full-time seat. If you have nobody to give that block to, this is not for you yet, and we will say so on the call.' },
    { q: 'What do you actually charge, and when?',
      a: "Nothing up front, and nothing from your pocket to get the division built. We are paid by keeping the setup fees your first clients pay — the first two we close with you, and up to five deals if you need more help getting there. You keep 100% of the monthly retainer, permanently. From there the only cost is one fixed monthly platform cost per client, and month one of that comes out of the setup fee we collect, so your first out-of-pocket lands in month two, after your client has already paid you. The exact figures come up in the first five minutes of the call, against your own retainer rather than someone else's." },
    { q: "What if my current clients aren't B2B?",
      a: "Then this build has nothing to prospect. Outbound needs a company-shaped buyer you can name, list, and reach. A book that is entirely local consumer service — dentists selling to patients, gyms selling to members — has no B2B ICP underneath it, and no system fixes that. Two things still qualify: clients who sell to businesses even if you have never run outbound for them, and B2B logos you want to go win for yourself. Bring the book to the call and we will go through it line by line before anyone commits." },
    { q: 'Why two closes, and what if I need more help than that?',
      a: "Two is the proof, not the plateau. One close can be luck or our relationships. Two means the offer, the pricing, the pitch, and the delivery all held up twice, and your operator watched it happen both times. That is the point at which you can run the third yourself, which is the actual deliverable — a division you own, not a dependency on us. If two isn't enough to get you there, we stay on up to five deals. And because we are paid out of the setup fees those clients pay, our incentive is the same as yours: no signatures, no setup fees, nothing for us." },
    { q: 'What happens after the handoff?',
      a: 'You keep running the division, and you keep every dollar of the recurring revenue. The system keeps running the delivery at the same fixed cost per client, and every client you add after the first few is yours at your price. Support and the platform stay in place. What ends is us sitting in your sales calls — by design, because a division that only works while we are in the room is not a division.' },
    { q: "So why isn't the price on the page?",
      a: "Because the honest answer to \"is this worth it\" depends on your book, your retainer, and who your operator is, and we would rather show you the arithmetic against your own numbers than have you guess at it against someone else's. The structure is on the page in full — nothing up front, we keep the setup fees from your first clients, you keep the recurring — and the figures come up in the first five minutes of the call. Nobody gets sold anything before they know them." },
    { q: "What am I responsible for that the system doesn't do?",
      a: "Four things, and they are real. One: the operator's daily engagement pass on LinkedIn — the system sends, but a profile that never accepts, reacts, or answers like a person performs like a robot, so a human touches it every day. Two: approval. The ICP, the messaging, and the first list get your sign-off before anything goes out, and the client's judgment about their own market beats the system's guess. Three: the relationship. You own the client, the retainer, the pricing, and the conversation when something needs explaining. Four: taking the meetings. AiDA books them onto the calendar; a human shows up and runs them. Everything else — domains, mailboxes, warmup, lists, enrichment, validation, writing, sending, replying, reporting — is the system's job, and it is the part you never have to build." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" id="faq">
      <div className="wrap-narrow">
        <div style={{marginBottom:44}}>
          <div className="eyebrow eyebrow-indigo">Questions</div>
          <h2 style={{marginTop:14}}>Before you apply.</h2>
        </div>
        <div className="faq-list faq-launch">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
        {/* The long answers here blow past the shared 240px cap. */}
        <style>{`.faq-launch .faq-item.open .faq-a{max-height:600px}`}</style>
        <ToTheCall>Answer the four questions, and we'll do the rest live.</ToTheCall>
      </div>
    </section>
  );
}

/* The application. Four qualifying fields; the operator question qualifies
   harder than anything else on the page, so it is a free-text answer rather
   than a dropdown you can click past. Lead lands in GHL first, then the
   calendar renders — the application is never lost to a booking bounce. */
function Application() {
  const [form, setForm] = React.useState({
    agency_name:'', name:'', email:'', revenue:'', clients:'', b2b:'', operator:'', notes:'',
  });
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  React.useEffect(() => {
    if (!submitted) return;
    const s = document.createElement('script');
    s.src = 'https://link.conduitautomation.com/js/form_embed.js';
    s.async = true;
    document.body.appendChild(s);
    return () => { try { document.body.removeChild(s); } catch (e) {} };
  }, [submitted]);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    const payload = {
      source: 'outbound_launch_application',
      agency_name: form.agency_name,
      name: form.name,
      email: form.email,
      agency_revenue: form.revenue,
      client_count: form.clients,
      book_is_b2b: form.b2b,
      operator: form.operator,
      notes: form.notes,
      page: 'https://www.agencyaidasdr.com/outbound-launch',
      submitted_at: new Date().toISOString(),
    };
    try {
      await fetch(APPLICATION_WEBHOOK, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload) });
    } catch (err) {
      // Non-blocking: still take them to the calendar if the hook hiccups.
      console.error('application webhook failed', err);
    }
    setSubmitting(false);
    setSubmitted(true);
  };

  return (
    <section className="section outreach" id="apply">
      <div className="wrap">
        <div style={{textAlign:'center', maxWidth:700, margin:'0 auto 40px'}}>
          <div className="eyebrow eyebrow-indigo" style={{marginBottom:12}}>Apply</div>
          <h2>Four questions, then<br/>we talk numbers.</h2>
          <p className="lede" style={{margin:'18px auto 0', color:'var(--ink-mute)'}}>
            The application exists so neither of us wastes a call. Answer it honestly —
            a book that doesn't fit gets told that, not sold. If it does fit, the call opens
            with how the setup fees work and the arithmetic against your own retainer.
          </p>
        </div>

        {!submitted ? (
          <div style={{display:'grid', gridTemplateColumns:'1.15fr 0.85fr', gap:40, alignItems:'start'}} className="contact-grid">
            <div className="contact-card">
              <form onSubmit={onSubmit}>
                <div className="form-row two">
                  <div>
                    <label>Agency name</label>
                    <input type="text" value={form.agency_name} onChange={set('agency_name')} placeholder="Northline Growth" required />
                  </div>
                  <div>
                    <label>Your name</label>
                    <input type="text" value={form.name} onChange={set('name')} placeholder="Devin Park" required />
                  </div>
                </div>
                <div className="form-row">
                  <label>Work email</label>
                  <input type="email" value={form.email} onChange={set('email')} placeholder="devin@northlinegrowth.com" required />
                </div>
                <div className="form-row two">
                  <div>
                    <label>Agency revenue / month</label>
                    <select value={form.revenue} onChange={set('revenue')} required>
                      <option value="" disabled>Select range</option>
                      <option>Under $10k</option>
                      <option>$10k – $25k</option>
                      <option>$25k – $50k</option>
                      <option>$50k – $100k</option>
                      <option>$100k+</option>
                    </select>
                  </div>
                  <div>
                    <label>Clients you serve today</label>
                    <select value={form.clients} onChange={set('clients')} required>
                      <option value="" disabled>Select range</option>
                      <option>1 – 4 clients</option>
                      <option>5 – 9 clients</option>
                      <option>10 – 24 clients</option>
                      <option>25+ clients</option>
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <label>Is your client book B2B?</label>
                  <select value={form.b2b} onChange={set('b2b')} required>
                    <option value="" disabled>Pick the closest</option>
                    <option>Yes — most of my clients sell to businesses</option>
                    <option>Mixed — some B2B, some local consumer service</option>
                    <option>No — entirely local consumer service</option>
                    <option>No clients yet, but B2B logos I want to win</option>
                  </select>
                </div>
                <div className="form-row">
                  <label>Who would your operator be?</label>
                  <textarea value={form.operator} onChange={set('operator')} placeholder="Name the person and their current role — account manager, VA, junior hire, or you. If it would be a new hire, say that." required></textarea>
                </div>
                <div className="form-row">
                  <label>Anything else we should know?</label>
                  <textarea value={form.notes} onChange={set('notes')} placeholder="Optional — the clients you'd start with, what you've already tried, what you're worried about." style={{minHeight:80}}></textarea>
                </div>
                <button type="submit" className="btn btn-indigo" disabled={submitting} style={{width:'100%', justifyContent:'center', height:50, fontSize:15, opacity: submitting ? 0.7 : 1}}>
                  {submitting ? 'Sending…' : <React.Fragment>Submit my application <span className="arrow">→</span></React.Fragment>}
                </button>
                <div style={{marginTop:14, fontSize:12.5, color:'var(--ink-mute)', textAlign:'center'}}>
                  You'll pick a time on the next screen. Price comes up in the first five minutes.
                </div>
              </form>
            </div>

            <div>
              {/* The real constraint, stated without a number: our team is in
                  every build closing deals, so concurrency is genuinely capped.
                  [CONFIRM] with the owner how many at once, then say it — a
                  specific true number is stronger on a call than "a few". */}
              <div className="card" style={{marginBottom:18, borderColor:'var(--indigo)', background:'linear-gradient(180deg,#fff,#f5f6ff)'}}>
                <div className="ic"><IClock size={20}/></div>
                <h3>Why there's an application</h3>
                <p style={{marginBottom:0}}>
                  We only run a handful of builds at a time, because our team is in each one
                  closing deals — not just the platform running in the background. When those
                  slots are full, the next build waits. That's the only scarcity on this page,
                  and it's the real kind.
                </p>
              </div>
              <div className="card" style={{marginBottom:18}}>
                <div className="ic"><IShield size={20}/></div>
                <h3>What the call is</h3>
                <p style={{marginBottom:0}}>
                  Thirty minutes. How the setup fees work, the per-client cost, your book on the
                  screen, and an honest read on whether your operator can carry it. No slides.
                </p>
              </div>
              <div className="card">
                <div className="ic"><ICheck size={20}/></div>
                <h3>If it's a no</h3>
                <p style={{marginBottom:0}}>
                  You'll hear it on the call, with the reason. A build that goes badly costs us
                  more than a sale is worth.
                </p>
              </div>
            </div>
          </div>
        ) : (
          <div className="contact-card" style={{maxWidth:860, margin:'0 auto'}}>
            <div style={{textAlign:'center', marginBottom:18}}>
              <div style={{width:56, height:56, borderRadius:'50%', background:'var(--emerald-soft)', color:'#065f46', display:'grid', placeItems:'center', margin:'0 auto 14px'}}>
                <ICheck size={28}/>
              </div>
              <h3 style={{fontSize:24, marginBottom:8}}>Application in. Now pick a time.</h3>
              <p style={{color:'var(--ink-mute)', maxWidth:'52ch', margin:'0 auto'}}>
                Thirty minutes. We'll have read your answers before we start, and we'll open with
                the numbers so you can decide with them rather than around them.
              </p>
            </div>
            <iframe
              src={CALENDAR_SRC}
              title="Book the outbound launch call"
              style={{width:'100%', border:'none', overflow:'hidden', minHeight:920}}
              scrolling="no"
              id="outbound_launch_booking"
            ></iframe>
          </div>
        )}
      </div>
    </section>
  );
}

function OutboundLaunchPage() {
  // The three fulfillment problems, in the order they actually bite.
  const problems = [
    [IBuilding, 'Fulfillment',
      "Outbound sells itself. Then it has to be delivered. Most agencies quote it, win it, and discover they've signed up to run infrastructure they don't have — domains, mailboxes, warmup, lists, enrichment, sending, and an inbox that has to be answered the same day."],
    [IGraph, 'Costs that move',
      "Eight to twelve tools, each billing per seat, per credit, or per lookup. That's a margin you can't quote with confidence and a number that changes every month, which means the retainer you signed in January isn't the retainer you're delivering in June."],
    [IShuffle, 'Management overhead',
      "Every new client multiplies logins, domains, mailboxes, and places something can silently break. Nobody notices the mailbox that stopped sending until the client asks why the meetings dried up."],
  ];

  // Section 3 — the honesty block. What the system runs vs what a human does.
  const systemRuns = [
    'Buys the domains and configures DNS',
    'Creates and warms the sending mailboxes',
    'Builds, enriches, and validates the lists',
    'Writes the messages off the signal',
    'Sends across LinkedIn and email, paced',
    'Answers replies and books the meetings',
    'Builds the reporting on its own',
  ];
  const humanDoes = [
    'A short daily engagement pass on LinkedIn',
    'Approves the ICP, messaging, and first list',
    'Sends the few replies AiDA flags for a human',
    'Owns the client relationship and the pricing',
    'Shows up to the meetings that get booked',
  ];

  // Section 9 — bill of materials, framed as cost of goods.
  const included = [
    ['10', 'domains', 'bought and DNS-configured per client'],
    ['30', 'sending email accounts', 'created and warmed before day one'],
    ['5,000', 'contacts', 'per client, enriched and validated'],
    ['—', 'buying signals', 'hiring, funding, tech changes, site visitors'],
    ['—', 'LinkedIn automation', 'connection requests, messages, follow-ups'],
    ['—', 'email automation', 'sequenced across the warmed mailboxes'],
    ['—', 'AI enrichment and validation', 'so you aren\'t buying a second data tool'],
    ['—', 'AI appointment setting', 'replies answered, meetings booked on the calendar'],
  ];

  const forYou = [
    ['A client book you already serve', "Retainers in place and trust already earned. Outbound is the easiest thing you'll ever upsell into a relationship that's working."],
    ['Someone you can assign', "An account manager, a VA, a junior hire, or you for the first client. A person with a daily block to give this, not a job req you haven't opened."],
    ['B2B somewhere in the book', "Clients who sell to businesses, or B2B logos you want to go win yourself. A nameable buyer is what outbound needs."],
    ['Willing to put it in front of your book', "We close with you, not instead of you. Your relationships open the door; we run the conversation and your operator learns it by being in the room."],
  ];
  const notForYou = [
    ['No one to assign as an operator', "The system runs most of the activity, not all of it. Without a human touching LinkedIn daily, approving lists, and taking the meetings, the build underperforms and we both lose."],
    ["You want to stay out of the sales conversation", "We're paid out of the setup fees your first clients pay, which means those clients have to get closed — and that needs your name on the introduction. If you won't offer this to your book, there is nothing for either of us to close."],
    ['Client book is entirely local service', "No B2B ICP underneath it means nothing to prospect. This isn't a platform limitation — there's no list to build."],
  ];

  return (
    <React.Fragment>
      <span id="top" />
      <LaunchNav />

      {/* ── 1 · HERO — fulfillment, not revenue ──────────────────────────── */}
      <section className="page-head" style={{paddingTop:164, paddingBottom:70}}>
        <div className="hero-bg" aria-hidden></div>
        <div className="hero-grid" aria-hidden></div>
        <div className="wrap inner">
          <div className="hero-row">
            <div>
              <div className="eyebrow eyebrow-on-dark" style={{marginBottom:18}}>For agency owners with a client book</div>
              <h1 style={{maxWidth:'none', fontSize:'clamp(32px,4vw,54px)'}}>
                Sell outbound without<br/>
                <span className="accent">building the delivery.</span>
              </h1>
              <p className="lede">
                One system, one fixed cost per client, and
                <b style={{color:'#fff', fontWeight:600}}> we close your first two clients with you.</b>
                {' '}You keep the retainers in full, your operator takes the wheel, and the
                delivery was never yours to build.
              </p>

              <div style={{marginTop:26, display:'inline-flex', alignItems:'flex-start', gap:12, padding:'14px 18px', borderRadius:14, background:'rgba(16,185,129,0.10)', border:'1px solid rgba(16,185,129,0.32)', maxWidth:520}}>
                <span style={{flexShrink:0, color:'var(--emerald)', display:'grid', placeItems:'center', marginTop:1}}><IShield size={20}/></span>
                <span style={{fontSize:14.5, color:'#fff', lineHeight:1.5}}>
                  <b style={{fontWeight:600}}>You pay us nothing up front.</b> We're paid out of the
                  setup fees your first clients pay — and you keep every dollar of the recurring.
                </span>
              </div>

              <div style={{marginTop:30, display:'flex', gap:12, flexWrap:'wrap'}}>
                <a href={APPLY_ANCHOR} className="btn btn-indigo">Apply <span className="arrow">→</span></a>
                <a href="#how-it-runs" className="btn btn-ghost-light">See how it runs</a>
              </div>

              <div style={{marginTop:30, display:'flex', gap:'12px 30px', flexWrap:'wrap', fontSize:13.5, color:'rgba(226,232,255,0.8)'}}>
                {[['Week one','LinkedIn is live'], ['Nothing up front','the setup fee funds month one'], ['Fixed','one cost per client, from month two']].map(([n, l]) => (
                  <div key={l}><b style={{fontSize:16, color:'#fff'}}>{n}</b><span style={{marginLeft:7}}>{l}</span></div>
                ))}
              </div>
            </div>

            <div style={{display:'flex', justifyContent:'center'}}>
              <DeliveryStrikeList />
            </div>
          </div>
        </div>
      </section>

      {/* ── 2 · THE PROBLEM — fulfillment first, then cost, then overhead ── */}
      <section className="section outreach" id="problem">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>Outbound is easy to sell.<br/><span style={{color:'var(--ink-mute)'}}>It's brutal to deliver.</span></h2>
            </div>
            <p className="lede">
              The pitch lands in one call. Everything after that is the hard part, and it's
              the part nobody quotes for properly — because until you've run it, you don't
              know what it takes.
            </p>
          </div>
          <div className="grid-3">
            {problems.map(([Ico, title, body]) => (
              <div key={title} className="card">
                <div className="ic"><Ico size={20}/></div>
                <h3 style={{fontSize:19}}>{title}</h3>
                <p>{body}</p>
              </div>
            ))}
          </div>
          <ToTheCall>This is the part we take off you. Let's talk about your book.</ToTheCall>
        </div>
      </section>

      {/* ── 3 · WHAT THIS IS, AND WHAT IT ISN'T ─────────────────────────── */}
      <section className="section" id="honest">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:740, margin:'0 auto 44px'}}>
            <div className="eyebrow eyebrow-indigo" style={{marginBottom:12}}>Before the pitch</div>
            <h2>The system runs most of it.<br/>Not all of it.</h2>
            <p className="lede" style={{margin:'18px auto 0', color:'var(--ink-mute)'}}>
              Some manual engagement is required, and you should know exactly where before you
              apply — not after you've signed. A LinkedIn profile that only ever automates
              performs like a robot, so a human touches it every day. Here is the honest split.
            </p>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:22, alignItems:'stretch'}} className="honest-grid">
            <div className="card" style={{borderColor:'var(--indigo)', background:'linear-gradient(180deg,#fff,#f5f6ff)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--indigo)', marginBottom:16}}>What the system does</div>
              <div style={{display:'grid', gap:10}}>
                {systemRuns.map((x) => (
                  <div key={x} style={{display:'flex', alignItems:'center', gap:12, padding:'12px 14px', border:'1px solid rgba(99,102,241,0.28)', borderRadius:10, fontSize:14.5, fontWeight:500, background:'#fff'}}>
                    <span style={{color:'var(--indigo)', flexShrink:0}}><IBolt size={17}/></span>{x}
                  </div>
                ))}
              </div>
            </div>

            <div className="honest-plus" style={{display:'grid', placeItems:'center', fontSize:34, color:'var(--ink-faint)', fontWeight:300}}>+</div>

            <div className="card" style={{borderColor:'rgba(245,158,11,0.45)', background:'linear-gradient(180deg,#fff,#fffbeb)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'#b45309', marginBottom:16}}>What your operator does</div>
              <div style={{display:'grid', gap:10}}>
                {humanDoes.map((x) => (
                  <div key={x} style={{display:'flex', alignItems:'center', gap:12, padding:'12px 14px', border:'1px solid rgba(245,158,11,0.3)', borderRadius:10, fontSize:14.5, fontWeight:500, background:'#fff'}}>
                    <span style={{color:'#d97706', flexShrink:0}}><IUser size={17}/></span>{x}
                  </div>
                ))}
              </div>
              <p style={{marginTop:16}}>
                A focused block each day, not a full-time seat. If you have nobody to give that
                block to, this isn't for you yet — and that's a real answer, not a soft one.
              </p>
            </div>
          </div>
          <style>{`@media(max-width:900px){.honest-grid{grid-template-columns:1fr !important}.honest-plus{transform:rotate(90deg)}}`}</style>
          <ToTheCall>Bring your operator to the call. That's the question we'll spend the most time on.</ToTheCall>
        </div>
      </section>

      {/* ── 4 · THE DIAGRAM — let it breathe ────────────────────────────── */}
      <section className="section outreach" id="how-it-runs">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 44px'}}>
            <div className="eyebrow eyebrow-indigo" style={{marginBottom:12}}>How it runs</div>
            <h2>Two phases.<br/>One of them runs once.</h2>
          </div>
          {/* Wide diagram: scrolls inside its own container on narrow screens
              rather than shrinking the labels to nothing. The hint only shows
              where the diagram actually overflows — without it, phase 2 is
              off-screen with nothing telling you it's there. */}
          <div className="diagram-hint" style={{marginBottom:12, fontFamily:'var(--mono)', fontSize:11.5, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--indigo)'}}>
            Swipe the diagram to see phase 2 →
          </div>
          <div style={{overflowX:'auto', WebkitOverflowScrolling:'touch', borderRadius:18}}>
            <img
              src="/outbound-fulfillment-diagram.svg"
              alt="Phase one, onboarding, runs once: the system buys domains, warms mailboxes, connects the LinkedIn seat, drafts the offer and ICP, and writes the sequences while the agency confirms. Phase two, the pipeline, runs continuously with three operator touchpoints: approve, engage daily, and take the meeting. One fixed cost per client sits underneath both."
              style={{display:'block', width:'100%', minWidth:920, height:'auto'}}
            />
          </div>
          <div style={{marginTop:16, textAlign:'center', fontSize:12.5, color:'var(--ink-faint)'}}>
            Every box on the left happens once, per client. Everything on the right keeps running.
          </div>
          <style>{`.diagram-hint{display:none}@media(max-width:1050px){.diagram-hint{display:block}}`}</style>
          <ToTheCall>We'll walk this through against one of your clients, live.</ToTheCall>
        </div>
      </section>

      {/* ── 5 · ONBOARDING, EXPANDED ────────────────────────────────────── */}
      <section className="section" id="onboarding">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>The onboarding is the<br/>fulfillment pain.</h2>
            </div>
            <p className="lede">
              Ask anyone who has delivered outbound for a client what actually kills the first
              month. It isn't the campaign. It's the three weeks before the campaign.
            </p>
          </div>

          <div className="grid-2" style={{alignItems:'stretch'}}>
            <div className="card" style={{borderColor:'rgba(244,63,94,0.3)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'#b91c1c', marginBottom:14}}>Normally</div>
              <h3 style={{fontSize:20}}>You chase the client.</h3>
              <p>
                Domains. DNS access. Credentials nobody can find. ICP detail that comes back as
                "anyone who needs our service." Case studies that are somewhere in a Drive folder.
                A calendar link that turns out to be the wrong calendar. Then a second round of
                chasing because half of it arrived incomplete.
              </p>
              <p style={{marginTop:12, fontWeight:600, color:'var(--ink)'}}>
                Weeks of back and forth before a single message sends — and you're already being
                paid for a service that hasn't started.
              </p>
            </div>

            <div className="card" style={{borderColor:'var(--indigo)', background:'linear-gradient(180deg,#fff,#f5f6ff)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--indigo)', marginBottom:14}}>Here</div>
              <h3 style={{fontSize:20}}>The system provisions, connects, and drafts.</h3>
              <p>
                Domains bought and DNS configured. Mailboxes created and warming. One secure
                connect link for the LinkedIn seat. The offer and the ICP read off the client's
                own site and their best existing customers. Sequences written per signal and
                per channel, sitting there ready.
              </p>
              <p style={{marginTop:12, fontWeight:600, color:'var(--ink)'}}>
                The client confirms. That's their whole job in onboarding.
              </p>
            </div>
          </div>

          <div className="row-list" style={{marginTop:48}}>
            <div className="row">
              <div className="lbl">INFRASTRUCTURE</div>
              <div>
                <h4>Bought and configured, not requested.</h4>
                <p>Domains, DNS records, and thirty sending mailboxes are provisioned and warmed by the system. Nobody emails the client asking for registrar access.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">THE SEAT</div>
              <div>
                <h4>One link, one click, one time.</h4>
                <p>The client connects their LinkedIn through a single secure link. No password handoffs, no shared logins, no "can you send me the 2FA code."</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">THE BRIEF</div>
              <div>
                <h4>Drafted from what's already public.</h4>
                <p>Their site, their positioning, and their best current customers become the first draft of the ICP and the offer. Confirming a draft takes ten minutes. Filling in a blank questionnaire takes three weeks.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">THE SEQUENCES</div>
              <div>
                <h4>Written before the kickoff call ends.</h4>
                <p>Per signal, per channel, in the client's language and loaded into the system. Your operator reviews and edits. Nobody starts from a blank page.</p>
              </div>
            </div>
          </div>
          <ToTheCall>See the onboarding run on a real account. That's the demo.</ToTheCall>
        </div>
      </section>

      {/* ── 6 · THE ECONOMICS, WITHOUT THE NUMBERS ─────────────────────── */}
      <section className="section outreach" id="economics">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>Quote a retainer knowing<br/>what sits underneath it.</h2>
            </div>
            <p className="lede">
              This is the part that decides whether an outbound division is a business or a
              treadmill. Not the size of the cost — the shape of it.
            </p>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:22, alignItems:'stretch'}} className="econ-grid">
            <div className="card">
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'#b91c1c', marginBottom:14}}>What you have now</div>
              <h3 style={{fontSize:20}}>A stack that bills per seat, per credit, per lookup.</h3>
              <p>
                Every tool meters something different, and every one of them scales with activity.
                Send more, pay more. Build a bigger list, pay more. Run a campaign hot for a week
                because it's working, pay more.
              </p>
              <p style={{marginTop:12, fontWeight:600, color:'var(--ink)'}}>
                Margin becomes a number you find out at the end of the month instead of one you
                set at the start.
              </p>
            </div>

            <div className="econ-arrow" style={{display:'grid', placeItems:'center', fontSize:28, color:'var(--indigo)'}}>→</div>

            <div className="card" style={{borderColor:'var(--indigo)', background:'linear-gradient(180deg,#fff,#f5f6ff)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--indigo)', marginBottom:14}}>What this is</div>
              <h3 style={{fontSize:20}}>One fixed cost per client.</h3>
              <p>
                It does not change when volume changes, when a list gets bigger, or when a
                campaign runs hot. Domains, mailboxes, contacts, signals, enrichment, validation,
                sending, and the AI setting appointments all arrive as one line.
              </p>
              <p style={{marginTop:12, fontWeight:600, color:'var(--ink)'}}>
                You quote your retainer knowing exactly what sits underneath it, in month one and
                in month twelve. And month one comes out of the setup fee your client pays, not
                out of your pocket.
              </p>
            </div>
          </div>
          <style>{`@media(max-width:900px){.econ-grid{grid-template-columns:1fr !important}.econ-arrow{transform:rotate(90deg)}}`}</style>

          <div style={{marginTop:32, textAlign:'center', padding:'26px 28px', borderRadius:16, background:'var(--ink)', color:'#fff', maxWidth:840, margin:'32px auto 0'}}>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)'}}>The only number that's yours</div>
            <div style={{fontSize:'clamp(21px,2.6vw,29px)', fontWeight:600, letterSpacing:'-0.02em', marginTop:10, lineHeight:1.25}}>
              Your margin depends on what you charge.
            </div>
            <p style={{marginTop:12, color:'rgba(255,255,255,0.72)', fontSize:15.5, maxWidth:'54ch', margin:'12px auto 0'}}>
              Which is exactly the conversation the call is for — your retainer, your book, the
              cost underneath it, and what's left. With real figures, against your numbers.
            </p>
            <a href={APPLY_ANCHOR} className="btn btn-indigo" style={{marginTop:22}}>Apply for the call <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      {/* ── 7 · HOW FAST IT MOVES (speed to first activity, no end date) ── */}
      <section className="section" id="speed">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>LinkedIn is live in<br/>the first week.</h2>
            </div>
            <p className="lede">
              Speed to first activity is the number that matters, because it's the one the client
              can see. From there we work the pipeline together until your first two clients are
              closed and your operator has the wheel.
            </p>
          </div>

          <div className="num-list">
            <div className="item">
              <div className="n">01</div>
              <div>
                <h4>Week one — the seat connects and LinkedIn starts sending.</h4>
                <p>Domains and mailboxes provision in the background while LinkedIn goes live, because LinkedIn doesn't need warmup and email does. First activity in days, not after a warmup window.</p>
                <p style={{marginTop:8, color:'var(--ink-soft)'}}><b>Your operator:</b> confirms the ICP and the drafted messaging, then starts the daily engagement pass.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">02</div>
              <div>
                <h4>The first couple of weeks — conversations start.</h4>
                <p>Replies come in and get answered. Signals sharpen the list as real responses tell us who's actually in market. Email joins once the mailboxes have finished warming.</p>
                <p style={{marginTop:8, color:'var(--ink-soft)'}}><b>Your operator:</b> handles the flagged replies, watches how the AI answers the rest, and learns the inbox by using it.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">03</div>
              <div>
                <h4>Then we work the pipeline together.</h4>
                <p>We're on the calls with you. We refine the offer against what the market says, tighten the pitch, and close. Two clients signed is the milestone, and we stay on up to five deals if you need more help getting there. We're paid out of the setup fees those clients pay, so we aren't finished until they're signed.</p>
                <p style={{marginTop:8, color:'var(--ink-soft)'}}><b>Your operator:</b> sits in, runs the day to day, and by the second close is doing it without being asked.</p>
              </div>
            </div>
            <div className="item">
              <div className="n">04</div>
              <div>
                <h4>Handoff — the wheel goes to your operator.</h4>
                <p>The system keeps delivering at the same fixed cost per client, and the recurring revenue was yours the whole time. Every client you add after the first few is yours at your price. What ends is us being in the room, which is the whole point.</p>
                <p style={{marginTop:8, color:'var(--ink-soft)'}}><b>Your operator:</b> owns it. Approvals, engagement, meetings, and the weekly client report.</p>
              </div>
            </div>
          </div>
          <ToTheCall>Your book decides the pace. Let's look at it.</ToTheCall>
        </div>
      </section>

      {/* ── 8 · THE GUARANTEE — the strongest thing on the page ─────────── */}
      <section className="section section-dark" style={{background:'var(--bg-dark)', paddingTop:110, paddingBottom:110}}>
        <div className="hero-bg" aria-hidden style={{position:'absolute', inset:0}}></div>
        <div className="wrap" style={{position:'relative'}}>
          <div style={{maxWidth:900, margin:'0 auto', textAlign:'center'}}>
            <div className="eyebrow eyebrow-on-dark" style={{marginBottom:20}}>The guarantee</div>
            <div style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(28px,4.4vw,50px)', lineHeight:1.22, color:'#fff', letterSpacing:'-0.015em'}}>
              You don't pay us to build it. We're paid out of the setup fees your first clients pay.
            </div>
            <div style={{fontSize:'clamp(20px,2.6vw,30px)', fontWeight:600, letterSpacing:'-0.02em', color:'var(--indigo-2)', marginTop:24}}>
              No clients closed, no setup fees to keep.
            </div>
            <p style={{marginTop:26, color:'rgba(226,232,255,0.72)', fontSize:16.5, lineHeight:1.6, maxWidth:'60ch', margin:'26px auto 0'}}>
              We close your first two clients with you, and stay on up to five deals if you need
              more help getting there. The setup fee those clients pay is ours. The monthly
              retainer is yours, in full, forever. Our upside only exists if yours does.
            </p>

            {/* The part that makes it more than a risk reversal: after the
                client's first payment, the client is funding the whole thing. */}
            <div style={{marginTop:38, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16, textAlign:'left'}} className="guarantee-grid">
              {[
                ['Your outlay to start', 'Nothing. The build, the infrastructure, and the first month of platform cost all come out of the setup fee your client pays.'],
                ['Month one', "Covered. Your client's first payment funds it, so the division is running before it has cost you anything."],
                ['Month two onward', 'One fixed cost per client — paid out of a retainer your client is already paying you, in full.'],
              ].map(([k, v], i) => (
                <div key={k} style={{padding:'20px 22px', borderRadius:14, background:'rgba(255,255,255,0.04)', border:'1px solid rgba(148,163,220,0.22)'}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.1em', textTransform:'uppercase', color: i === 0 ? 'var(--emerald)' : 'rgba(226,232,255,0.5)'}}>{k}</div>
                  <div style={{fontSize:14.5, color:'rgba(255,255,255,0.88)', marginTop:8, lineHeight:1.55}}>{v}</div>
                </div>
              ))}
            </div>
            <style>{`@media(max-width:820px){.guarantee-grid{grid-template-columns:1fr !important}}`}</style>

            <div style={{marginTop:34, fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(20px,2.4vw,27px)', color:'#fff', lineHeight:1.35, maxWidth:'46ch', margin:'34px auto 0'}}>
              Past their first payment, your client pays for everything.
            </div>

            <a href={APPLY_ANCHOR} className="btn btn-indigo" style={{marginTop:32}}>Apply <span className="arrow">→</span></a>
            <div style={{marginTop:16, fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.06em', color:'rgba(226,232,255,0.5)'}}>
              THE FIGURES COME UP IN THE FIRST FIVE MINUTES OF THE CALL
            </div>
          </div>
        </div>
      </section>

      {/* ── 9 · WHAT'S INCLUDED PER CLIENT (cost of goods, not features) ── */}
      <section className="section" id="included">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>The whole bill of<br/>materials, one line.</h2>
            </div>
            <p className="lede">
              This isn't a feature list. It's the cost of goods for delivering outbound to one
              client — the pile of separate invoices you'd otherwise be reconciling every month,
              arriving as a single fixed cost.
            </p>
          </div>

          <div className="grid-4">
            {included.map(([n, label, sub]) => (
              <div key={label} className="card" style={{padding:'20px 22px'}}>
                <div style={{fontSize: n === '—' ? 22 : 34, fontWeight:600, letterSpacing:'-0.03em', color: n === '—' ? 'var(--indigo)' : 'var(--ink)', lineHeight:1.1}}>
                  {n === '—' ? <ICheck size={26}/> : n}
                </div>
                <div style={{fontSize:15.5, fontWeight:600, marginTop:8, letterSpacing:'-0.01em'}}>{label}</div>
                <div style={{fontSize:12.5, color:'var(--ink-mute)', marginTop:4, lineHeight:1.5}}>{sub}</div>
              </div>
            ))}
          </div>

          <div style={{marginTop:26, padding:'22px 26px', borderRadius:16, border:'1px solid var(--line)', background:'linear-gradient(180deg,#fff,#f5f6ff)', textAlign:'center', boxShadow:'var(--shadow-card)'}}>
            <div style={{fontSize:17.5, fontWeight:600, letterSpacing:'-0.015em'}}>
              Per client. One cost. It doesn't move when the volume does — and month one is
              covered by the setup fee your client pays.
            </div>
            <div style={{fontSize:13.5, color:'var(--ink-mute)', marginTop:6}}>
              What you charge on top of it is yours to keep in full, and that's the arithmetic we
              do on the call.
            </div>
          </div>
          <ToTheCall>Ask us what it costs. That's what the call opens with.</ToTheCall>
        </div>
      </section>

      {/* ── 10 · WHO THIS IS FOR, AND WHO IT ISN'T ─────────────────────── */}
      <section className="section outreach" id="fit">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:720, margin:'0 auto 44px'}}>
            <h2>Who this is for,<br/>and who it isn't.</h2>
            <p className="lede" style={{margin:'18px auto 0', color:'var(--ink-mute)'}}>
              Disqualifying properly is the whole point of an application. A build that goes
              badly costs us more than a sale is worth, so read the right-hand column first.
            </p>
          </div>

          <div className="grid-2" style={{alignItems:'start', gap:24}}>
            <div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'#15803d', marginBottom:16}}>This is for you if</div>
              <div style={{display:'grid', gap:14}}>
                {forYou.map(([t, d]) => (
                  <div key={t} className="card" style={{padding:'20px 22px'}}>
                    <div style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                      <span style={{flexShrink:0, width:24, height:24, borderRadius:'50%', background:'var(--emerald-soft)', color:'#065f46', display:'grid', placeItems:'center', marginTop:1}}><ICheck size={15}/></span>
                      <div>
                        <div style={{fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>{t}</div>
                        <p style={{marginTop:6}}>{d}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'#b91c1c', marginBottom:16}}>This is not for you if</div>
              <div style={{display:'grid', gap:14}}>
                {notForYou.map(([t, d]) => (
                  <div key={t} className="card" style={{padding:'20px 22px', borderColor:'rgba(244,63,94,0.28)'}}>
                    <div style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                      <span style={{flexShrink:0, width:24, height:24, borderRadius:'50%', background:'rgba(244,63,94,0.12)', color:'#e11d48', display:'grid', placeItems:'center', fontSize:14, fontWeight:700, marginTop:1}}>×</span>
                      <div>
                        <div style={{fontSize:16, fontWeight:600, letterSpacing:'-0.01em'}}>{t}</div>
                        <p style={{marginTop:6}}>{d}</p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
              <div style={{marginTop:14, padding:'16px 18px', borderRadius:12, background:'rgba(99,102,241,0.07)', border:'1px solid rgba(99,102,241,0.22)', fontSize:13.5, color:'var(--ink-soft)'}}>
                If you're a maybe on any of these, apply anyway and say so in the form. Sorting
                it out is a ten-minute conversation, not a guess you should make alone.
              </div>
            </div>
          </div>
          <ToTheCall>Not sure which column you're in? That's what the call is for.</ToTheCall>
        </div>
      </section>

      {/* ── 11 · FAQ ────────────────────────────────────────────────────── */}
      <LaunchFAQ />

      {/* ── 12 · APPLICATION ───────────────────────────────────────────── */}
      <Application />

      {/* Funnel footer — no link columns. */}
      <footer style={{padding:'28px 0 36px', borderTop:'1px solid var(--line, #e5e7eb)'}}>
        <div className="wrap" style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap', fontSize:12.5, color:'var(--ink-mute)'}}>
          <span>© 2026 AiDA SDR · aidasdr.com</span>
          <span style={{fontFamily:'var(--mono)'}}>sell outbound. don't build the delivery.</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

function init() {
  const els = document.querySelectorAll('.section');
  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(<OutboundLaunchPage />);
requestAnimationFrame(init);
