// Agency-demo contact page. Single focus: book an agency demo (no pricing, no
// support path — a chat widget will handle email/existing-customer support).
// On submit we POST the lead to the LeadConnector webhook, then show the
// embedded booking calendar.
const DEMO_WEBHOOK = 'https://services.leadconnectorhq.com/hooks/clmwDgeC9HqLtO9CFijv/webhook-trigger/cf67c659-86bc-4782-995a-5fd19808a715';
const DEMO_CALENDAR_SRC = 'https://link.conduitautomation.com/widget/booking/2gQQUZjkR9vUTMPUZgGN';

function ContactPage() {
  const [form, setForm] = React.useState({ agency_name: '', name: '', email: '', seats: '', outreach: '', message: '' });
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);

  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  // Load the booking-widget resizer script once we show the calendar.
  React.useEffect(() => {
    if (!submitted) return;
    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) {} };
  }, [submitted]);

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    const payload = {
      source: 'signals_contact_agency_demo',
      agency_name: form.agency_name,
      name: form.name,
      email: form.email,
      client_seats: form.seats,
      current_outreach: form.outreach,
      message: form.message,
      page: 'https://signals.aidasdr.com/contact',
      submitted_at: new Date().toISOString(),
    };
    try {
      await fetch(DEMO_WEBHOOK, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) });
    } catch (err) {
      // Non-blocking: still take them to the calendar even if the hook hiccups.
      console.error('demo webhook failed', err);
    }
    setSubmitting(false);
    setSubmitted(true);
  };

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

      <section className="page-head" style={{ padding: '140px 0 70px' }}>
        <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> Agency demo
          </div>
          <h1>
            Book an<br />
            <span className="accent">agency demo.</span>
          </h1>
          <p className="lede">
            See AiDA run signal-based outbound for your clients — whitelabel portal,
            per-client seats, and the signal engine that books meetings. 20 minutes, live.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          {!submitted ? (
            <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 0.9fr', gap: 48, alignItems: 'start' }} className="contact-grid">
              <div className="contact-card">
                <form onSubmit={onSubmit}>
                  <div className="eyebrow eyebrow-indigo" style={{ marginBottom: 8 }}>Agency / Whitelabel</div>
                  <h3 style={{ fontSize: 24, marginBottom: 24 }}>Tell us about your agency</h3>

                  <div className="form-row two">
                    <div>
                      <label>Agency name</label>
                      <input type="text" value={form.agency_name} onChange={set('agency_name')} placeholder="Growth Partners Co" 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@growthpartners.co" required />
                  </div>
                  <div className="form-row two">
                    <div>
                      <label>Number of client seats needed</label>
                      <select value={form.seats} onChange={set('seats')} required>
                        <option value="" disabled>Select range</option>
                        <option>2 – 9 seats</option>
                        <option>10 – 24 seats</option>
                        <option>25+ seats</option>
                      </select>
                    </div>
                    <div>
                      <label>Current outreach method</label>
                      <select value={form.outreach} onChange={set('outreach')} required>
                        <option value="" disabled>Pick the closest</option>
                        <option>Manual prospecting</option>
                        <option>Other automation tools</option>
                        <option>SDR team</option>
                        <option>No outbound yet</option>
                      </select>
                    </div>
                  </div>
                  <div className="form-row">
                    <label>Anything else we should know?</label>
                    <textarea value={form.message} onChange={set('message')} placeholder="Optional — tell us about your agency and clients."></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 ? 'Booking…' : <React.Fragment>Book my agency demo <span className="arrow">→</span></React.Fragment>}
                  </button>
                  <div style={{ marginTop: 14, fontSize: 12.5, color: 'var(--ink-mute)', textAlign: 'center' }}>
                    Pick your time on the next screen. 20-minute live walkthrough.
                  </div>
                </form>
              </div>

              <div>
                <div className="card" style={{ marginBottom: 20 }}>
                  <div className="ic"><IBolt size={20} /></div>
                  <h3>What you'll see</h3>
                  <p style={{ marginBottom: 0 }}>
                    Whitelabel client portal · per-client LinkedIn seats · the signal engine
                    (job changes, hiring, funding, tech) · AI inbox booking meetings on autopilot.
                  </p>
                </div>

                <div className="card">
                  <div className="ic"><IBolt size={20} /></div>
                  <h3>Want it fully done-for-you?</h3>
                  <p>Prefer we run outbound for you? Apply for a done-for-you deployment.</p>
                  <a href="https://get.aidasdr.com/application" className="btn btn-primary btn-sm" style={{ marginTop: 16 }}>
                    Apply for done-for-you <span className="arrow">→</span>
                  </a>
                </div>
              </div>
            </div>
          ) : (
            <div className="contact-card" style={{ maxWidth: 820, 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 }}>You're almost there — pick a time</h3>
                <p style={{ color: 'var(--ink-mute)', maxWidth: '46ch', margin: '0 auto' }}>
                  Grab the slot that works for you below and we'll walk you through AiDA live.
                </p>
              </div>
              <iframe
                src={DEMO_CALENDAR_SRC}
                style={{ width: '100%', border: 'none', overflow: 'hidden', minHeight: 920 }}
                scrolling="no"
                id="contact_booking_2gQQUZjkR9vUTMPUZgGN"
                title="Book an agency demo"
              ></iframe>
            </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(<ContactPage />);
requestAnimationFrame(init);