// /agencies — "The AI outbound operating system that plugs into GoHighLevel".
// Positioning: AiDA is the ACQUISITION layer (LinkedIn + email + signals + AI
// inbox) that complements GHL — GHL owns everything after the lead, AiDA owns
// everything before it, and every conversation syncs into the GHL subaccount.
// It's a SYSTEM outbound agencies use to run outreach FOR their clients and
// manage them: the AI agents do the cold outreach, enrichment, social listening,
// and inbox; the agency resells managed LinkedIn to its clients. AiDA is wired
// INTO GoHighLevel (embedded app) and every conversation lands in the client's
// GHL inbox. We (AiDA) are NOT a done-for-you service. Reuses theme + icons.
//
// Two primary actions: Book a Demo (scrolls to the embedded GHL booking
// calendar, #book) and Watch a 5-Minute Demo (opens a video modal).
const BOOK_ANCHOR = '#book';
const DEMO_CALENDAR_SRC = 'https://link.conduitautomation.com/widget/booking/2gQQUZjkR9vUTMPUZgGN';
// Drop a real embed URL here (YouTube/Loom/Wistia) to light up the watch modal.
const DEMO_VIDEO_URL = '';

/* Small consistent tag for capabilities that aren't live yet (email sending). */
function ComingSoon() {
  return (
    <span style={{marginLeft:8, fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.06em', textTransform:'uppercase', fontWeight:600, color:'#b45309', background:'rgba(245,158,11,0.14)', border:'1px solid rgba(245,158,11,0.35)', borderRadius:999, padding:'2px 8px', whiteSpace:'nowrap', verticalAlign:'middle'}}>
      Coming Soon
    </span>
  );
}

/* Sticky top bar — solid dark so the chrome logo reads cleanly. Logo left + one
   call to action (Book a Demo). No nav links, and no accelerator reference: the
   accelerator is a separate launch and lives on its own page. */
function AgencyNav() {
  return (
    <div style={{position:'sticky', top:0, zIndex:60, background:'#0a0a12', borderBottom:'1px solid rgba(255,255,255,0.08)'}}>
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, height:68}}>
        <a href="#top" style={{display:'flex', alignItems:'center'}}>
          <img src="/aida-sdr-signals-logo.png" alt="AiDA SDR" style={{height:50, width:'auto', display:'block'}} />
        </a>
        <a href={BOOK_ANCHOR} className="btn btn-indigo" style={{height:40, padding:'0 20px', fontSize:13}}>Book a Demo <span className="arrow">→</span></a>
      </div>
    </div>
  );
}

/* Live-feel ops feed — the operating system running inside GHL, cycling. The
   speed-to-lead reply row is the hero of the feed (LinkedIn reply → synced to
   GHL in seconds). No email row (email sending is Coming Soon). */
function AgencyOpsFeed() {
  const rows = [
    ['💬', 'Lakeside Dental · LinkedIn reply', 'AiDA answered in 6s → synced to GHL'],
    ['⚡', 'Summit HVAC · hiring signal matched', '14 new leads queued'],
    ['📅', 'Meeting booked · Thu 10:30 AM', 'on the client’s GHL calendar'],
    ['🌐', 'Website visitor scored', 'Fairway Legal · 8/10 · follow-up queued'],
    ['🔁', 'Conversation mirrored to GHL', 'contact + task created in the subaccount'],
    ['💳', 'Invoice paid · $997', 'Peak Roofing · your agency Stripe'],
  ];
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setTick((x) => x + 1), 2400);
    return () => clearInterval(t);
  }, []);
  const visible = [0, 1, 2, 3].map((i) => rows[(tick + i) % rows.length]);
  return (
    <div style={{width:'100%', maxWidth:560, 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>aida · running inside GHL</span>
        <span style={{color:'#4ade80'}}>● running</span>
      </div>
      {visible.map(([icon, main, sub], i) => (
        <div key={`${tick}-${i}`} style={{display:'flex', gap:13, alignItems:'center', padding:'15px 18px', borderTop: i ? '1px solid rgba(148,163,220,0.12)' : 'none', opacity: i === 0 ? 1 : 0.78}}>
          <span style={{fontSize:18}}>{icon}</span>
          <div style={{minWidth:0}}>
            <div style={{fontSize:14.5, fontWeight:600, color:'#fff', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{main}</div>
            <div style={{fontSize:12.5, color:'rgba(226,232,255,0.65)', marginTop:1}}>{sub}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* Watch-a-demo modal. Renders the video embed if a URL is configured, otherwise
   a branded placeholder that also offers the booking path. */
function WatchModal({ open, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{position:'fixed', inset:0, zIndex:100, background:'rgba(6,7,18,0.8)', backdropFilter:'blur(4px)', display:'flex', alignItems:'center', justifyContent:'center', padding:24}}>
      <div onClick={(e)=>e.stopPropagation()} style={{width:'100%', maxWidth:900, background:'#0d0d18', border:'1px solid rgba(255,255,255,0.12)', borderRadius:16, overflow:'hidden', boxShadow:'0 40px 100px -30px rgba(0,0,0,0.8)'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'12px 16px', borderBottom:'1px solid rgba(255,255,255,0.08)'}}>
          <span style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(255,255,255,0.6)'}}>The 5-minute demo</span>
          <button onClick={onClose} style={{color:'rgba(255,255,255,0.7)', fontSize:22, lineHeight:1, width:32, height:32}}>×</button>
        </div>
        <div style={{position:'relative', width:'100%', paddingTop:'56.25%', background:'linear-gradient(135deg,#0f0a1e,#1a1145,#0f172a)'}}>
          {DEMO_VIDEO_URL ? (
            <iframe src={DEMO_VIDEO_URL} title="AiDA agency demo" allow="autoplay; fullscreen; picture-in-picture" allowFullScreen style={{position:'absolute', inset:0, width:'100%', height:'100%', border:0}} />
          ) : (
            <div style={{position:'absolute', inset:0, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14, textAlign:'center', padding:24, color:'rgba(255,255,255,0.85)'}}>
              <div style={{width:64, height:64, borderRadius:'50%', background:'var(--indigo)', display:'grid', placeItems:'center', boxShadow:'0 12px 40px -8px rgba(99,102,241,0.7)'}}>
                <span style={{fontSize:24, marginLeft:4}}>▶</span>
              </div>
              <div style={{fontSize:18, fontWeight:600}}>Demo walkthrough goes here</div>
              <div style={{fontSize:13.5, color:'rgba(255,255,255,0.6)', maxWidth:420}}>
                Set <span style={{fontFamily:'var(--mono)'}}>DEMO_VIDEO_URL</span> in the page to embed the recorded tour — or book a live one instead.
              </div>
              <a href={BOOK_ANCHOR} onClick={onClose} className="btn btn-indigo btn-sm" style={{marginTop:6}}>Book a live demo <span className="arrow">→</span></a>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* The expansion model, made tangible. Sliders in, MRR out, with a "scale to N
   clients" projection so the recurring-revenue path is obvious. Seat cost =
   $197, the launch wholesale rate for agency partners. */
function RevenueCalculator() {
  const SEAT = 197;
  const [clients, setClients] = React.useState(10);
  const [attachPct, setAttachPct] = React.useState(50);
  const [retail, setRetail] = React.useState(997);

  const outbound = Math.max(1, Math.round(clients * (attachPct / 100)));
  const rev = outbound * retail;
  const cost = outbound * SEAT;
  const margin = rev - cost;
  const fmt = (n) => '$' + Math.round(n).toLocaleString();

  const scaleTo = 25;
  const projOutbound = Math.round(scaleTo * (attachPct / 100));
  const projMargin = projOutbound * (retail - SEAT);

  const slider = { width: '100%', accentColor: 'var(--indigo, #6366f1)' };
  return (
    <section className="section" id="calculator" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>Build a new<br/>MRR line.</h2>
          </div>
          <p className="lede">
            You buy licenses wholesale at $197 and set your own retail. Move the sliders —
            this is the recurring-revenue line that gets added to your agency every time a
            client turns outbound on.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, alignItems:'stretch'}} className="contact-grid">
          <div className="card" style={{display:'flex', flexDirection:'column', gap:26, justifyContent:'center'}}>
            <div>
              <div style={{display:'flex', justifyContent:'space-between', fontSize:14, fontWeight:600, marginBottom:8}}>
                <span>Clients in your agency</span><span style={{fontFamily:'var(--mono)'}}>{clients}</span>
              </div>
              <input type="range" min="3" max="50" value={clients} onChange={(e) => setClients(+e.target.value)} style={slider} />
            </div>
            <div>
              <div style={{display:'flex', justifyContent:'space-between', fontSize:14, fontWeight:600, marginBottom:8}}>
                <span>Share you add outbound to</span><span style={{fontFamily:'var(--mono)'}}>{attachPct}% · {outbound} clients</span>
              </div>
              <input type="range" min="10" max="100" step="5" value={attachPct} onChange={(e) => setAttachPct(+e.target.value)} style={slider} />
            </div>
            <div>
              <div style={{display:'flex', justifyContent:'space-between', fontSize:14, fontWeight:600, marginBottom:8}}>
                <span>You charge each client</span><span style={{fontFamily:'var(--mono)'}}>{fmt(retail)}/mo</span>
              </div>
              <input type="range" min="500" max="5000" step="50" value={retail} onChange={(e) => setRetail(+e.target.value)} style={slider} />
            </div>
            <div style={{fontSize:12, color:'var(--ink-mute)'}}>
              License cost shown at the $197/mo agency wholesale rate. One license = one LinkedIn
              sender; clients running multiple senders add a license each.
            </div>
          </div>

          <div className="card" style={{background:'linear-gradient(180deg,#fff,#f5f6ff)', borderColor:'var(--indigo)'}}>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
              <div>
                <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.1em', color:'var(--ink-mute)'}}>LICENSES</div>
                <div style={{fontSize:30, fontWeight:600, letterSpacing:'-0.02em', marginTop:4}}>{outbound}</div>
              </div>
              <div>
                <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.1em', color:'var(--ink-mute)'}}>NEW CLIENT REVENUE / MO</div>
                <div style={{fontSize:30, fontWeight:600, letterSpacing:'-0.02em', marginTop:4}}>{fmt(rev)}</div>
              </div>
            </div>
            <div style={{marginTop:22, paddingTop:20, borderTop:'1px solid var(--line,#e5e7eb)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.1em', color:'#15803d'}}>YOUR NEW MRR (MARGIN)</div>
              <div style={{fontSize:52, fontWeight:600, letterSpacing:'-0.03em', color:'#15803d', lineHeight:1.1, marginTop:4}}>{fmt(margin)}</div>
              <div style={{fontSize:14, color:'var(--ink-mute)', marginTop:4}}>{fmt(margin * 12)}/year recurring</div>
            </div>
            <div style={{marginTop:18, padding:'14px 16px', borderRadius:12, background:'rgba(99,102,241,0.08)', border:'1px solid rgba(99,102,241,0.22)', fontSize:13.5, color:'var(--ink-soft)'}}>
              Scale to <b>{scaleTo} clients</b> at the same attach rate → <b>{projOutbound} licenses</b> and <b style={{color:'#15803d'}}>{fmt(projMargin)}/mo</b> in recurring margin.
            </div>
            <a href={BOOK_ANCHOR} className="btn btn-primary" style={{marginTop:20, width:'100%', justifyContent:'center'}}>
              Map this to your book — book a demo <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function AgenciesPage() {
  const [watchOpen, setWatchOpen] = React.useState(false);

  // Load the Senja testimonials widget + the GHL booking widget.
  React.useEffect(() => {
    const senja = document.createElement('script');
    senja.src = 'https://widget.senja.io/widget/59659e80-89de-488c-9971-258c07330c56/platform.js';
    senja.async = true;
    document.body.appendChild(senja);
    const booking = document.createElement('script');
    booking.src = 'https://link.conduitautomation.com/js/form_embed.js';
    booking.async = true;
    document.body.appendChild(booking);
    return () => {
      try { document.body.removeChild(senja); } catch (e) {}
      try { document.body.removeChild(booking); } catch (e) {}
    };
  }, []);

  // ── Section content data ────────────────────────────────────────────────
  // Framed as AI agents (GHL has AI agents too — for its channels; these run the
  // acquisition channels GHL doesn't). AI SDR + AI Inbox + Native GHL lead.
  const included = [
    [ISparkle, 'AI SDR', 'An AI agent that prospects, writes, and follows up on autopilot.'],
    [IInbox, 'AI Inbox — Speed to Lead', 'Answers new replies in seconds — or drafts them for approval — and mirrors the whole thread into the client’s GHL Conversations.'],
    [ILoop, 'Native GoHighLevel Sync', 'Every lead, reply, and booking lands in the subaccount you already run.'],
    [IRoute, 'LinkedIn AI Agent', 'Runs connection requests, messages, and follow-ups from a license per sender.'],
    [IMail, 'Cold Email AI Agent', 'Verified emails today; agent-run sending soon.', true],
    [IBolt, 'Buying Signals', 'Hiring, funding, tech, and website-visitor triggers.'],
    [IViewer, 'Social Listening', 'Brand and competitor engagement, watched daily.'],
    [IGraph, 'Reporting', 'Per-client dashboards that build themselves.'],
    [IBuilding, 'Client Management', 'Every client, seat, and pipeline in one cockpit.'],
  ];

  const revenueStreams = [
    ['Platform Revenue', 'Mark up the license as a software line on every retainer.'],
    ['Managed Service Revenue', 'Resell managed LinkedIn and outbound to your clients — the system delivers it, you bill it at your price.'],
    ['Recurring License Revenue', 'Every client you add outbound to adds predictable MRR.'],
  ];

  const customerZero = [
    'Every automation', 'Every workflow', 'Every campaign', 'Every dashboard', 'Every AI prompt',
  ];

  // The disconnected stack, with estimated monthly costs (oxygen-style savings
  // proof). Total ≈ $2,250/mo — software plus a prospecting/inbox VA.
  const problemStack = [
    ['Clay', 'enrichment + lists', '$149/mo'],
    ['Smartlead', 'cold email sending', '$94/mo'],
    ['HeyReach', 'LinkedIn outreach', '$79/mo'],
    ['LinkedIn VAs', 'manual prospecting', '$1,200/mo'],
    ['Inbox management', 'done by hand', '$600/mo'],
    ['Google Sheets', 'the source of truth (somehow)', 'free'],
    ['Zapier', 'glue that breaks', '$29/mo'],
    ['Reporting', 'rebuilt every month', '$99/mo'],
  ];

  // GHL owns after-the-lead (incl. its own AI agents for its channels); AiDA
  // adds the AI agents GHL doesn't — LinkedIn + cold email. Same funnel.
  const ghlHas = ['CRM & Pipelines', 'Automations', 'AI agents for calls, SMS & chat', 'Nurture & Invoicing'];
  const aidaAdds = ['AI agents for LinkedIn', 'AI agents for cold email (soon)', 'Enrichment', 'Buying signals', 'Social listening', 'AI inbox — speed to lead'];

  return (
    <React.Fragment>
      <span id="top" />
      <AgencyNav />
      <WatchModal open={watchOpen} onClose={() => setWatchOpen(false)} />

      {/* ── HERO ─────────────────────────────────────────────────────────── */}
      <section className="page-head" style={{paddingTop:70, 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}}>The acquisition layer for GoHighLevel agencies</div>
              <h1 style={{maxWidth:'none', fontSize:'clamp(32px,4vw,52px)'}}>
                The AI outbound operating system<br/>
                <span className="accent">that plugs into GoHighLevel.</span>
              </h1>
              <p className="lede">
                GoHighLevel runs everything after the client says yes. AiDA runs everything
                before it — the system your agency uses to run LinkedIn and cold outreach for
                every client, with AI agents doing the prospecting, sending, and replies.
                <b style={{color:'#fff', fontWeight:600}}> It’s wired into GoHighLevel — every conversation lands in the client’s GHL inbox, and you run it all without leaving GHL.</b> Proven in our own agency first.
              </p>
              <div style={{marginTop:30, display:'flex', gap:12, flexWrap:'wrap'}}>
                <a href={BOOK_ANCHOR} className="btn btn-indigo">Book a Demo <span className="arrow">→</span></a>
                <button onClick={() => setWatchOpen(true)} className="btn btn-ghost-light">
                  <span style={{fontSize:12}}>▶</span> Watch a 5-Minute Demo
                </button>
              </div>

              <div style={{marginTop:30, display:'flex', gap:'12px 30px', flexWrap:'wrap', fontSize:13.5, color:'rgba(226,232,255,0.8)'}}>
                {[['Seconds','AI answers or drafts every reply'], ['Wired into GHL','conversations sync to the GHL inbox'], ['Every client','run outreach from one system']].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'}}>
              <AgencyOpsFeed />
            </div>
          </div>
        </div>
      </section>

      {/* Trust bar — real customers whose outbound already runs on AiDA. */}
      <CustomerMarquee />

      {/* ── TWO WAYS IN (dual-audience fork) ─────────────────────────────── */}
      <section className="section" id="two-ways">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:720, margin:'0 auto 44px'}}>
            <h2>Built for the agency<br/>you already run.</h2>
            <p className="lede" style={{margin:'16px auto 0', color:'var(--ink-mute)'}}>
              You’ve got the clients and the GoHighLevel accounts. However you handle outbound
              today, AiDA meets you where you are — and both doors land on the same platform.
            </p>
          </div>
          <div className="grid-2">
            <div className="card">
              <div className="ic"><ISparkle size={20}/></div>
              <div className="eyebrow eyebrow-indigo" style={{marginBottom:8}}>You don’t offer outbound yet</div>
              <h3>Add it to what you already deliver.</h3>
              <p>Your clients keep asking where the leads are — and you’ve got no desire to hire SDRs or bolt on six tools to answer them. Add outbound and managed LinkedIn to your services as a new recurring line. The system does the prospecting, outreach, and inbox — you resell it and keep the margin, live for your first client in weeks.</p>
              <a href={BOOK_ANCHOR} className="btn btn-indigo" style={{marginTop:18}}>Book a Demo <span className="arrow">→</span></a>
            </div>
            <div className="card">
              <div className="ic"><ILoop size={20}/></div>
              <div className="eyebrow eyebrow-indigo" style={{marginBottom:8}}>You already run outbound</div>
              <h3>Manage every client from one place.</h3>
              <p>You’re already running outbound across Clay, HeyReach, a cold-email tool, and a VA inbox — three logins per client, none of it syncing to GHL. AiDA folds it into one system that runs every client’s outreach, enrichment, and inbox and mirrors every conversation into their subaccount, so you scale clients instead of reconciling tools.</p>
              <a href={BOOK_ANCHOR} className="btn btn-ghost-dark" style={{marginTop:18}}>Book a Demo</a>
            </div>
          </div>
          <div style={{marginTop:28, textAlign:'center', fontFamily:'var(--serif)', fontStyle:'italic', fontSize:22, color:'var(--ink-soft)'}}>
            Either way, the system does the work — you keep the client and the margin.
          </div>
        </div>
      </section>

      {/* ── THE PROBLEM ──────────────────────────────────────────────────── */}
      <section className="section outreach">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>Your clients live in GoHighLevel.<br/><span style={{color:'var(--ink-mute)'}}>Your outbound doesn’t.</span></h2>
            </div>
            <p className="lede">
              GHL nurtures, books, and bills beautifully — once a lead is in it. But the channels
              that create those leads run somewhere else: LinkedIn in one tool, email in another,
              enrichment in a third, the inbox in a VA’s browser. Whether you already run this stack
              or you’ve only been quoted it, the trap is the same — a pile of subscriptions and
              logins, none of it syncing to GHL.
            </p>
          </div>
          <div className="grid-4">
            {problemStack.map(([name, sub, cost]) => (
              <div key={name} className="card" style={{display:'flex', alignItems:'center', justifyContent:'space-between', gap:12, padding:'16px 18px'}}>
                <div style={{display:'flex', alignItems:'flex-start', gap:11, minWidth:0}}>
                  <span style={{flexShrink:0, width:22, height:22, borderRadius:'50%', background:'rgba(244,63,94,0.12)', color:'#e11d48', display:'grid', placeItems:'center', fontSize:13, fontWeight:700, marginTop:1}}>×</span>
                  <div style={{minWidth:0}}>
                    <div style={{fontWeight:600, fontSize:14.5}}>{name}</div>
                    <div style={{fontSize:12, color:'var(--ink-mute)', marginTop:1}}>{sub}</div>
                  </div>
                </div>
                <div style={{flexShrink:0, fontFamily:'var(--mono)', fontSize:12.5, color: cost === 'free' ? 'var(--ink-faint)' : 'var(--ink-soft)', whiteSpace:'nowrap'}}>{cost}</div>
              </div>
            ))}
          </div>
          {/* Oxygen-style savings proof — what the disconnected stack costs vs one license. */}
          <div style={{marginTop:26, display:'flex', flexWrap:'wrap', alignItems:'center', justifyContent:'space-between', gap:'22px 30px', border:'1px solid var(--line)', borderRadius:18, background:'linear-gradient(180deg,#fff,#f5f6ff)', padding:'24px 30px', boxShadow:'var(--shadow-card)'}}>
            <div style={{minWidth:220}}>
              <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.1em', textTransform:'uppercase', color:'#b91c1c'}}>What the disconnected stack runs you</div>
              <div style={{fontSize:34, fontWeight:600, letterSpacing:'-0.03em', marginTop:6}}>≈ $2,250<span style={{fontSize:17, color:'var(--ink-mute)', fontWeight:500}}>/mo</span></div>
              <div style={{fontSize:12.5, color:'var(--ink-mute)', marginTop:2}}>estimated — software plus a prospecting &amp; inbox VA</div>
            </div>
            <div style={{fontSize:26, color:'var(--indigo)'}} className="save-arrow">→</div>
            <div style={{minWidth:220}}>
              <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--indigo)'}}>One AiDA license folds in the software + the AI inbox</div>
              <div style={{fontSize:34, fontWeight:600, letterSpacing:'-0.03em', marginTop:6, color:'#15803d'}}>$197<span style={{fontSize:17, color:'var(--ink-mute)', fontWeight:500}}>/mo</span></div>
              <div style={{fontSize:12.5, color:'var(--ink-mute)', marginTop:2}}>per LinkedIn sender · all synced to GoHighLevel</div>
            </div>
          </div>
          <div style={{marginTop:14, textAlign:'center', fontSize:12.5, color:'var(--ink-faint)'}}>
            Bring your own Sales Navigator; that’s all you keep. Additional LinkedIn senders each add a license.
          </div>
          <style>{`@media(max-width:820px){.save-arrow{transform:rotate(90deg)}}`}</style>
        </div>
      </section>

      {/* ── THE SOLUTION ─────────────────────────────────────────────────── */}
      <section className="section" id="how">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>AiDA is the acquisition layer<br/>GoHighLevel was never built to provide.</h2>
            </div>
            <p className="lede">
              One platform that runs LinkedIn outreach, watches for buying signals, and answers
              or drafts every reply — then hands each lead to GHL as a contact, a conversation,
              and a booked call. You don’t leave GoHighLevel. You finally fill it.
            </p>
          </div>
          <div className="grid-3">
            {included.map(([Ico, title, desc, soon]) => (
              <div key={title} className="card">
                <div className="ic"><Ico size={20}/></div>
                <h3 style={{fontSize:18, display:'flex', alignItems:'center', flexWrap:'wrap'}}>{title}{soon ? <ComingSoon/> : null}</h3>
                <p>{desc}</p>
              </div>
            ))}
          </div>
          <div style={{marginTop:34, display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap', fontFamily:'var(--mono)', fontSize:13, letterSpacing:'0.04em', color:'var(--ink-mute)'}}>
            <span>RUNS THE OUTREACH.</span><span style={{color:'var(--indigo)'}}>FEEDS GOHIGHLEVEL.</span>
          </div>
        </div>
      </section>

      {/* ── THE BIG PROMISE (money axis) ─────────────────────────────────── */}
      <section className="section outreach">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:760, margin:'0 auto 44px'}}>
            <h2>Build a new monthly<br/>revenue stream.</h2>
            <p className="lede" style={{margin:'18px auto 0', color:'var(--ink-mute)'}}>
              Imagine what every client you already have adds to your agency when outbound becomes
              part of what you deliver.
            </p>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr auto 1fr', gap:16, alignItems:'stretch', maxWidth:1000, margin:'0 auto'}} className="promise-grid">
            {revenueStreams.map(([title, desc], i) => (
              <React.Fragment key={title}>
                <div className="card" style={{background:'linear-gradient(180deg,#fff,#f5f6ff)', borderColor:'rgba(99,102,241,0.3)', textAlign:'center'}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.08em', color:'var(--indigo)'}}>0{i+1}</div>
                  <div style={{fontSize:19, fontWeight:600, letterSpacing:'-0.01em', marginTop:8}}>{title}</div>
                  <p style={{marginTop:8}}>{desc}</p>
                </div>
                {i < revenueStreams.length - 1 && (
                  <div className="promise-plus" style={{display:'grid', placeItems:'center', fontSize:30, color:'var(--indigo)', fontWeight:300}}>+</div>
                )}
              </React.Fragment>
            ))}
          </div>
          <div style={{marginTop:40, textAlign:'center', maxWidth:640, margin:'40px auto 0'}}>
            <div style={{fontSize:18, color:'var(--ink-mute)'}}>Instead of selling another website…</div>
            <div style={{fontSize:'clamp(26px,3.4vw,38px)', fontWeight:600, letterSpacing:'-0.02em', marginTop:6}}>sell predictable pipeline.</div>
          </div>
          <style>{`@media(max-width:820px){.promise-grid{grid-template-columns:1fr !important}.promise-plus{transform:none}}`}</style>
        </div>
      </section>

      {/* ── CUSTOMER ZERO (proof that makes both self-run + managed credible) ─ */}
      <section className="section section-dark" style={{background:'var(--bg-dark)'}}>
        <div className="hero-bg" aria-hidden style={{position:'absolute', inset:0}}></div>
        <div className="wrap" style={{position:'relative'}}>
          <div className="section-head">
            <div>
              <h2 style={{color:'#fff'}}>We built it for ourselves<br/>before we sold it to anyone else.</h2>
            </div>
            <p className="lede">
              Before AiDA was a product, it was our agency’s outbound department. We ran our own
              clients on it every day — the system did the prospecting, the cold outreach, the
              enrichment, and the inbox. It’s the same system you’ll run yours on.
            </p>
          </div>
          <div style={{display:'flex', gap:12, flexWrap:'wrap', marginBottom:36}}>
            {customerZero.map((c) => (
              <span key={c} style={{display:'inline-flex', alignItems:'center', gap:8, padding:'10px 16px', borderRadius:999, background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.12)', color:'rgba(255,255,255,0.9)', fontSize:14.5}}>
                <span style={{color:'var(--emerald)'}}>✓</span>{c}
              </span>
            ))}
          </div>
          <div style={{maxWidth:820, borderLeft:'3px solid var(--indigo)', paddingLeft:26}}>
            <div style={{fontFamily:'var(--serif)', fontStyle:'italic', fontSize:'clamp(23px,2.9vw,32px)', lineHeight:1.32, color:'#fff', letterSpacing:'-0.01em'}}>
              You aren’t buying beta software. You’re licensing the exact system we run our own
              agency’s outbound on — the AI does the work, every day. Now you point it at your clients.
            </div>
          </div>
        </div>
      </section>

      {/* ── THE SYSTEM DOES THE WORK (not us, not a hired team) ──────────── */}
      <section className="section outreach" id="runs-itself">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>Run outreach for every client.<br/><span style={{color:'var(--ink-mute)'}}>The AI does the heavy lifting.</span></h2>
            </div>
            <p className="lede">
              You own the clients and the strategy; AiDA’s AI agents do the prospecting, outreach,
              enrichment, and inbox. That’s how a small team runs outbound across an entire book of
              clients — no SDR army, no eight-tool stack to babysit.
            </p>
          </div>
          <div className="grid-2">
            <div className="card">
              <div className="ic"><IRoute size={20}/></div>
              <h3>Cold outreach, on autopilot</h3>
              <p>AI agents run LinkedIn end to end — connection requests, messages, and follow-ups, with cold email on the way. No VAs, no manual sending.</p>
            </div>
            <div className="card">
              <div className="ic"><ISparkle size={20}/></div>
              <h3>Enrichment, built in</h3>
              <p>Verified work emails and direct phones are pulled automatically for the leads worth pursuing — no separate data tool to wire up.</p>
            </div>
            <div className="card">
              <div className="ic"><IViewer size={20}/></div>
              <h3>Social listening, daily</h3>
              <p>Brand and competitor engagement is watched around the clock, surfacing in-market prospects before they raise a hand.</p>
            </div>
            <div className="card">
              <div className="ic"><IBuilding size={20}/></div>
              <h3>Managed LinkedIn, resold</h3>
              <p>Package it as managed LinkedIn and outbound for your clients. The system delivers it under your brand — you set the price and keep the margin.</p>
            </div>
          </div>
          <div style={{marginTop:26, textAlign:'center', fontFamily:'var(--serif)', fontStyle:'italic', fontSize:22, color:'var(--ink-soft)'}}>
            Add a client, and you’re running their outreach in minutes — not adding headcount.
          </div>
        </div>
      </section>

      {/* ── BUILT FOR GHL (complement, not replace) ──────────────────────── */}
      <section className="section" id="ghl">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>Already running<br/>GoHighLevel? Perfect.</h2>
            </div>
            <p className="lede">
              AiDA doesn’t sit next to GoHighLevel — it runs inside it. GHL’s AI agents handle your
              calls, texts, and chats; AiDA adds the AI agents GHL doesn’t have — running LinkedIn and
              cold outreach for your clients — and every conversation lands right in the client’s GHL
              inbox. You manage it all without leaving GHL.
            </p>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:22, alignItems:'stretch'}} className="ghl-grid">
            <div className="card">
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--ink-mute)', marginBottom:16}}>Everything GHL does after the lead</div>
              <div style={{display:'grid', gap:10}}>
                {ghlHas.map((x) => (
                  <div key={x} style={{display:'flex', alignItems:'center', gap:12, padding:'12px 14px', border:'1px solid var(--line)', borderRadius:10, fontSize:15, fontWeight:500}}>
                    <span style={{color:'var(--ink-mute)'}}><ICheck size={18}/></span>{x}
                  </div>
                ))}
              </div>
            </div>

            <div className="ghl-plus" style={{display:'grid', placeItems:'center', fontSize:34, color:'var(--indigo)', fontWeight:300}}>+</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:16}}>Everything AiDA does before the lead</div>
              <div style={{display:'grid', gap:10}}>
                {aidaAdds.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:15, fontWeight:500, background:'#fff'}}>
                    <span style={{color:'var(--indigo)'}}><IBolt size={18}/></span>{x}
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div style={{marginTop:28, textAlign:'center', padding:'22px 24px', borderRadius:16, background:'var(--ink)', color:'#fff'}}>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(255,255,255,0.55)'}}>The result</div>
            <div style={{fontSize:'clamp(22px,2.6vw,30px)', fontWeight:600, letterSpacing:'-0.02em', marginTop:8}}>One funnel: AiDA wins the client, GoHighLevel keeps them.</div>
          </div>
          <style>{`@media(max-width:820px){.ghl-grid{grid-template-columns:1fr !important}.ghl-plus{transform:rotate(90deg)}}`}</style>
        </div>

        {/* Everything lands in GHL — speed-to-lead is the flagship first row. */}
        <div className="wrap" style={{marginTop:60}}>
          <div className="row-list">
            <div className="row">
              <div className="lbl">SPEED TO LEAD</div>
              <div>
                <h4>New replies get answered in seconds — then land in GHL Conversations.</h4>
                <p>The moment a prospect replies on LinkedIn, AiDA responds while intent is hot — qualifying, handling common objections, and offering real open times — or drafts the reply for your team to approve. Every message mirrors into the client’s GHL conversation stream in real time, so your team sees the whole thread in the inbox they already live in. The speed-to-lead you promise clients, finally automated.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">SUBACCOUNT SYNC</div>
              <div>
                <h4>Contacts and tasks stay current automatically.</h4>
                <p>Every reply creates or updates the GHL contact and drops a task on it, so whoever works that subaccount never misses a lead.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">YOUR AUTOMATIONS</div>
              <div>
                <h4>Leads land where your workflows already fire.</h4>
                <p>Because leads arrive as GHL contacts, your existing email and SMS follow-up, pipelines, and nurture workflows take over from there. AiDA fills the top of the funnel; your GHL stack runs the rest.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">CALENDARS</div>
              <div>
                <h4>The AI books off the client’s GHL calendar.</h4>
                <p>AiDA reads live availability and offers real open times conversationally — no booking links in messages, ever. Meetings land on the calendar the client already runs their business on.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">BILLING</div>
              <div>
                <h4>Invoice every client from your agency account.</h4>
                <p>Set each client’s retail — licenses, managed services, resold data credits — and create the recurring invoice in your agency GHL in one click. Payments run through your own Stripe, at your own prices.</p>
              </div>
            </div>
            <div className="row">
              <div className="lbl">RUNS INSIDE GHL</div>
              <div>
                <h4>You run AiDA without leaving GoHighLevel.</h4>
                <p>The app embeds as a custom menu link in your agency GHL, so you manage every client’s outreach from inside the platform you already live in. Each client gets a zero-brand portal in their own subaccount — reporting, inbox, and leads under their own logo.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Native integrations marquee (reinforces the stack fit). */}
      <LogoMarquee label="Native integrations" />

      {/* ── REVENUE CALCULATOR ───────────────────────────────────────────── */}
      <section className="section" style={{paddingBottom:0}}>
        <div className="wrap">
          <div style={{border:'1px solid var(--line)', borderRadius:18, background:'linear-gradient(180deg,#fff,#f5f6ff)', padding:'26px 30px', display:'flex', flexWrap:'wrap', alignItems:'center', justifyContent:'space-between', gap:'20px 32px', boxShadow:'var(--shadow-card)'}}>
            <div style={{minWidth:230}}>
              <div style={{fontSize:20, fontWeight:600, letterSpacing:'-0.02em'}}>10 clients → add outbound to 5 → 5 licenses → predictable MRR.</div>
              <div style={{fontSize:13.5, color:'var(--ink-mute)', marginTop:4}}>Then scale to 25 clients. Every license is recurring margin.</div>
            </div>
            <a href="#calculator" style={{fontFamily:'var(--mono)', fontSize:12, color:'var(--indigo)', whiteSpace:'nowrap'}}>Run your numbers ↓</a>
          </div>
        </div>
      </section>
      <RevenueCalculator />

      {/* ── PROOF ────────────────────────────────────────────────────────── */}
      <section className="section" id="results">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:720, margin:'0 auto 40px'}}>
            <h2>Agencies run client outbound on AiDA.</h2>
            <p className="lede" style={{margin:'16px auto 0', color:'var(--ink-mute)'}}>
              Agency wins, managed-client wins, meetings, pipeline, and revenue — this wall grows every week.
            </p>
          </div>
          {/* True, concrete statements until real numbers land (never ship empty "—"). */}
          <div className="grid-4" style={{marginBottom:38}}>
            {[['LinkedIn','live today'], ['GoHighLevel','native two-way sync'], ['Built by','a working agency'], ['The AI','does the work']].map(([l, n]) => (
              <div key={l} className="card" style={{textAlign:'center'}}>
                <div style={{fontFamily:'var(--mono)', fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--ink-mute)'}}>{l}</div>
                <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.02em', marginTop:6}}>{n}</div>
              </div>
            ))}
          </div>
          {/* Testimonials (Senja embed). Case studies / screenshots / videos slot in above as assets arrive. */}
          <div className="senja-embed" data-id="59659e80-89de-488c-9971-258c07330c56" data-mode="shadow" data-lazyload="false" style={{display:'block', width:'100%'}}></div>
        </div>
      </section>

      {/* ── PRICING (Platform / Enterprise — accelerator lives on its own page) ─ */}
      <section className="section outreach" id="pricing">
        <div className="wrap">
          <div className="section-head">
            <div>
              <h2>Simple.<br/>No confusion.</h2>
            </div>
            <p className="lede">
              Two ways in — run the platform yourself, or scale across your whole book with
              enterprise. Same operating system; the AI does the work at every tier.
            </p>
          </div>
          <div className="grid-2" style={{maxWidth:760, margin:'0 auto'}}>
            <div className="card" style={{textAlign:'center', borderColor:'var(--indigo)', background:'linear-gradient(180deg,#fff,#f5f6ff)'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--indigo)', letterSpacing:'0.1em'}}>PLATFORM</div>
              <div style={{fontSize:30, fontWeight:600, letterSpacing:'-0.03em', marginTop:10}}>Run outbound<br/>from one place</div>
              <p style={{marginTop:10}}>The operating system — a license per LinkedIn sender, signals, AI inbox, and native GHL sync. You run it; you keep the margin.</p>
              <a href={BOOK_ANCHOR} className="btn btn-indigo" style={{marginTop:18, width:'100%', justifyContent:'center'}}>Book a demo</a>
            </div>
            <div className="card" style={{textAlign:'center'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-mute)', letterSpacing:'0.1em'}}>ENTERPRISE</div>
              <div style={{fontSize:30, fontWeight:600, letterSpacing:'-0.03em', marginTop:10}}>Scale the<br/>whole book</div>
              <p style={{marginTop:10}}>Best per-seat economics, priority signal additions, and dedicated onboarding for agencies running the system across every client.</p>
              <a href={BOOK_ANCHOR} className="btn btn-ghost-dark" style={{marginTop:18, width:'100%', justifyContent:'center'}}>Book a demo</a>
            </div>
          </div>
        </div>
      </section>

      {/* ── BOOK · the conversion action (embedded GHL calendar) ─────────── */}
      <section className="section" id="book">
        <div className="wrap">
          <div style={{textAlign:'center', maxWidth:680, margin:'0 auto 34px'}}>
            <h2>See it running inside your GoHighLevel.</h2>
            <p className="lede" style={{margin:'18px auto 0', color:'var(--ink-mute)'}}>
              Grab 30 minutes. We’ll show you the system running — the exact GHL-native setup, live on
              real accounts — and how you resell it to your clients as managed LinkedIn and outbound.
            </p>
          </div>
          <div style={{maxWidth:900, margin:'0 auto', border:'1px solid var(--line)', borderRadius:16, overflow:'hidden', boxShadow:'var(--shadow-card)', background:'#fff'}}>
            <iframe
              src={DEMO_CALENDAR_SRC}
              title="Book an AiDA agency demo"
              style={{width:'100%', minHeight:720, border:0, display:'block'}}
              scrolling="no"
            />
          </div>
        </div>
      </section>

      {/* 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)'}}>the acquisition layer for GoHighLevel agencies.</span>
        </div>
      </footer>
    </React.Fragment>
  );
}

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