// Dedicated agency-demo landing page — designed to convert, with the GHL booking
// calendar embedded right on the page (no raw whitelabel link hand-off).
const DEMO_CALENDAR_SRC = 'https://link.conduitautomation.com/widget/booking/2gQQUZjkR9vUTMPUZgGN';

function DemoPage() {
  // The booking widget self-resizes via form_embed.js.
  React.useEffect(() => {
    const s = document.createElement('script');
    s.src = 'https://link.conduitautomation.com/js/form_embed.js';
    s.type = 'text/javascript';
    s.async = true;
    document.body.appendChild(s);
    return () => { try { document.body.removeChild(s); } catch (e) {} };
  }, []);

  const benefits = [
    ['One dashboard, every seat', 'A license per teammate — each rep gets their own LinkedIn sender, signals, and inbox under one account.'],
    ['Signals do the prospecting', 'Job changes, hiring, funding, and tech-stack triggers surface in-market leads automatically.'],
    ['AI inbox books the meetings', 'Replies are handled and meetings land on the calendar — your team runs pipeline, not busywork.'],
    ['Volume pricing on 2+ licenses', 'Multi-seat pricing and onboarding are handled on the call — most teams are live the same day.'],
  ];

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

      <section className="page-head" style={{ padding: '140px 0 56px' }}>
        <div className="hero-bg" aria-hidden></div>
        <div className="hero-grid" aria-hidden></div>
        <div className="wrap inner">
          <div className="crumb"><a href="/">AiDA SDR</a> <span>/</span> Book a demo</div>
          <h1>Need more than one seat?<br /><span className="accent">Pick your path.</span></h1>
          <p className="lede">
            Multi-license teams and whitelabel agencies run on the same engine — choose the setup that fits,
            then grab 30 minutes and see it live on real accounts.
          </p>
        </div>
      </section>

      {/* Audience fork — teams book HERE, agencies get the whitelabel program page. */}
      <section className="section" style={{ padding: '56px 0 0' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }} className="contact-grid">
            <a href="#book" className="card" style={{ display: 'block', textDecoration: 'none' }}>
              <div className="ic"><ICheck size={20} /></div>
              <h3>For teams — multiple licenses</h3>
              <p style={{ marginBottom: 0 }}>
                You run several LinkedIn accounts for your own company. Book below and we'll size the seats,
                signals, and inbox setup for your team. <strong>Scroll down to pick a time ↓</strong>
              </p>
            </a>
            <a href="/agencies" className="card" style={{ display: 'block', textDecoration: 'none' }}>
              <div className="ic"><IBolt size={20} /></div>
              <h3>For agencies — whitelabel &amp; resale</h3>
              <p style={{ marginBottom: 0 }}>
                You manage clients and want AiDA under your brand — client portal, seat-per-client isolation,
                wholesale pricing. <strong>See the agency program →</strong>
              </p>
            </a>
          </div>
        </div>
      </section>

      <section className="section" id="book" style={{ padding: '56px 0 96px' }}>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 48, alignItems: 'start' }} className="contact-grid">
            {/* Left: the pitch — sticky so the tall calendar column doesn't
                leave a dead white gap beside it as you scroll. */}
            <div style={{ position: 'sticky', top: 96 }}>
              <div className="eyebrow eyebrow-indigo" style={{ marginBottom: 10 }}>What you'll see on the call</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {benefits.map(([h, p]) => (
                  <div key={h} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <span style={{ marginTop: 2, flexShrink: 0, width: 22, height: 22, borderRadius: 7, background: 'var(--indigo-soft)', color: 'var(--indigo-deep)', display: 'grid', placeItems: 'center' }}><ICheck size={13} /></span>
                    <div>
                      <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>{h}</div>
                      <div style={{ fontSize: 13.5, color: 'var(--ink-mute)', marginTop: 2, lineHeight: 1.5 }}>{p}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="card" style={{ marginTop: 26 }}>
                <div className="ic"><IBolt size={20} /></div>
                <h3>Built for teams running 2+ seats</h3>
                <p style={{ marginBottom: 0 }}>
                  Volume licensing, per-rep isolation, and dedicated onboarding. Bring your team size and targets —
                  we'll map exactly how the program runs for you. Reselling to clients instead?{' '}
                  <a href="/agencies">The agency program is here.</a>
                </p>
              </div>
            </div>

            {/* Right: the calendar (the conversion action). The iframe id MUST
                end in the widget id — form_embed.js keys its auto-resize on it
                (the old copy-pasted id belonged to a different widget, so the
                calendar never resized and rendered cut off at 720px). */}
            <div className="contact-card" style={{ padding: 18 }}>
              <h3 style={{ fontSize: 20, marginBottom: 6 }}>Pick a time</h3>
              <p style={{ color: 'var(--ink-mute)', fontSize: 13.5, marginBottom: 14 }}>30-minute live walkthrough. No slides — the real product.</p>
              <iframe
                src={DEMO_CALENDAR_SRC}
                style={{ width: '100%', border: 'none', overflow: 'hidden', minHeight: 920 }}
                scrolling="no"
                id="demo_booking_2gQQUZjkR9vUTMPUZgGN"
                title="Book an agency demo"
              ></iframe>
            </div>
          </div>
        </div>
      </section>

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