/* global React, Nav, Footer, MotionCanvas */
const { useState } = React;

// Replace with your deployed Google Apps Script Web App URL
const SHEET_URL = 'https://script.google.com/macros/s/AKfycbzmFC449l4lfSEX6CCNBeWkNNIuyonCZ0iKgH_8rjxcu9Ar68UzRnd54GZoPfzzaKEk9A/exec';

const REVENUE_OPTIONS = [
  '',
  'Under $5M',
  '$5M – $20M',
  '$20M – $100M',
  '$100M – $250M',
  '$250M+',
];

function ApplyPage() {
  const [form, setForm] = useState({
    name: '', email: '', company: '', role: '',
    revenue: '', goals: '', referral: '',
  });
  const [status, setStatus] = useState('idle');

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

  const submit = (e) => {
    e.preventDefault();
    setStatus('submitting');
    fetch(SHEET_URL, {
      method: 'POST',
      mode: 'no-cors',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...form, submitted: new Date().toISOString() }),
    })
      .then(() => setStatus('success'))
      .catch(() => setStatus('success'));
  };

  return (
    <React.Fragment>
      <Nav />

      <header className="vt-apply-hero">
        <div className="vt-apply-hero__bg">
          <MotionCanvas type="harmonograph" speed={0.6} density={0.7} background="ink" />
        </div>
        <div className="vt-apply-hero__inner">
          <div className="vt-eyebrow vt-eyebrow--on-dark">Selective intake · Q2 accepting</div>
          <h1>Apply to work<br/>with <em>Vectory.</em></h1>
          <p>
            Two spots remain for Q2 2026. Tell us about your business and
            we'll respond within 48 hours with an honest read on whether we're a fit.
          </p>
        </div>
      </header>

      <section className="vt-apply-section">
        <div className="vt-container">
          {status === 'success' ? (
            <div className="vt-apply-success">
              <h2>Application received.</h2>
              <p>
                We'll review your details and respond within 48 hours.
                If there's a fit, we'll schedule a 30-minute call to talk specifics.
              </p>
              <a className="vt-btn vt-btn--secondary" href="Vectory Site.html">
                Back to Vectory <span className="ar">→</span>
              </a>
            </div>
          ) : (
            <form className="vt-apply-form" onSubmit={submit}>
              <div className="vt-field">
                <label className="vt-field__label">Full name <span className="req">*</span></label>
                <input className="vt-input" type="text" required
                  value={form.name} onChange={set('name')} placeholder="Jane Smith" />
              </div>

              <div className="vt-field">
                <label className="vt-field__label">Email <span className="req">*</span></label>
                <input className="vt-input" type="email" required
                  value={form.email} onChange={set('email')} placeholder="jane@company.com" />
              </div>

              <div className="vt-field">
                <label className="vt-field__label">Company <span className="req">*</span></label>
                <input className="vt-input" type="text" required
                  value={form.company} onChange={set('company')} placeholder="Acme Corp" />
              </div>

              <div className="vt-field">
                <label className="vt-field__label">Role / title</label>
                <input className="vt-input" type="text"
                  value={form.role} onChange={set('role')} placeholder="CEO, VP Ops, etc." />
              </div>

              <div className="vt-field">
                <label className="vt-field__label">Annual revenue range</label>
                <select className="vt-select" value={form.revenue} onChange={set('revenue')}>
                  {REVENUE_OPTIONS.map((o) => (
                    <option key={o} value={o} disabled={o === ''}>{o || 'Select a range'}</option>
                  ))}
                </select>
              </div>

              <div className="vt-field">
                <label className="vt-field__label">What are you hoping AI can do for your business?</label>
                <textarea className="vt-textarea"
                  value={form.goals} onChange={set('goals')}
                  placeholder="E.g. speed up engineering, automate outbound, reduce manual finance work…" />
              </div>

              <div className="vt-field">
                <label className="vt-field__label">How did you hear about Vectory?</label>
                <input className="vt-input" type="text"
                  value={form.referral} onChange={set('referral')} placeholder="Referral, LinkedIn, podcast…" />
              </div>

              <div className="vt-apply-submit">
                <button className="vt-btn vt-btn--primary" type="submit"
                  disabled={status === 'submitting'}>
                  {status === 'submitting' ? 'Submitting…' : 'Submit application'} <span className="ar">→</span>
                </button>
              </div>
            </form>
          )}
        </div>
      </section>

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

window.ApplyPage = ApplyPage;