function CTA() {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState('');
  return (
    <section className="cta section-pad" id="contact">
      <div className="shell cta-inner">
        <div>
          <div className="eyebrow" style={{color:'var(--ink)',opacity:0.7,marginBottom:18}}>§ 16 — Get in touch</div>
          <h2 className="cta-headline">
            Quiet power<br/>
            for the <u>jobs</u> that<br/>
            deserve it.
          </h2>
          <p style={{marginTop:24, fontSize:18, maxWidth:'46ch', color:'var(--ink)', opacity:0.78}}>
            Tell us about the deployment. We'll come back with a configuration and an honest answer on timing.
          </p>
        </div>
        <form
          className="cta-form"
          onSubmit={async (e) => {
            e.preventDefault();
            if (submitting) return;
            const data = new FormData(e.target);
            const payload = {
              name: (data.get('name') || '').toString().trim(),
              email: (data.get('email') || '').toString().trim(),
              interest: (data.get('interest') || '').toString().trim(),
              message: (data.get('message') || '').toString().trim(),
            };
            setError('');
            setSubmitting(true);
            try {
              const res = await fetch('/api/contact', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload),
              });
              if (!res.ok) {
                const data = await res.json().catch(() => ({}));
                throw new Error(data.error || `Server returned ${res.status}`);
              }
              setSubmitted(true);
            } catch (err) {
              setError("Couldn't send right now. Please email power@solartrailer.co.nz directly.");
            } finally {
              setSubmitting(false);
            }
          }}
        >
          <div className="cta-form-head">
            <div className="plate-mark" aria-hidden="true">
              <svg viewBox="0 0 32 32" fill="none">
                <path d="M6 4 L26 4 L26 14 L20 14 L20 22 L26 22 L26 28 L6 28 L6 18 L12 18 L12 10 L6 10 Z" fill="currentColor"/>
              </svg>
            </div>
            <div className="plate-divider"/>
            <span className="plate-title">Enquiry</span>
            <span className="plate-no">No. 16 / 2026</span>
          </div>

          {submitted ? (
            <div style={{textAlign:'center', padding:'48px 14px'}}>
              <div style={{fontSize:48, lineHeight:1, marginBottom:12, color:'var(--signal)'}}>✓</div>
              <div className="display" style={{fontSize:32, color:'var(--bone)', marginBottom:8, letterSpacing:'0.04em'}}>Transmission sent.</div>
              <div style={{fontSize:13, opacity:0.65, fontFamily:'var(--mono)', letterSpacing:'0.16em', textTransform:'uppercase'}}>Reply within one business day</div>
            </div>
          ) : (
            <>
              <div className="field">
                <label>Name</label>
                <input name="name" required placeholder="Your name"/>
              </div>
              <div className="field">
                <label>Email</label>
                <input name="email" required type="email" placeholder="you@company.co.nz"/>
              </div>
              <div className="field">
                <label>I'm interested in</label>
                <select name="interest" defaultValue="">
                  <option value="" disabled>Select an option</option>
                  <option>Buying a trailer</option>
                  <option>Hiring a trailer</option>
                  <option>Standby / disaster contract</option>
                  <option>White-label fleet supply</option>
                  <option>Module rental only</option>
                  <option>Just curious</option>
                </select>
              </div>
              <div className="field">
                <label>Briefly, what's the job?</label>
                <textarea name="message" rows="3" placeholder="e.g. 12-week residential build in Devonport, 5 kVA average load…"/>
              </div>
              <div className="cta-form-foot">
                <button type="submit" className="plate-submit" disabled={submitting}>
                  {submitting ? 'Sending…' : 'Send enquiry'} {!submitting && <ArrowRight size={14} stroke={2.5} className="arrow"/>}
                </button>
                <span className="plate-promise">Reply ≤ 1 biz day</span>
              </div>
              {error && (
                <div role="alert" style={{
                  marginTop: 14,
                  padding: '10px 14px',
                  background: 'rgba(194,85,42,0.12)',
                  border: '1px solid rgba(194,85,42,0.4)',
                  color: 'var(--bone)',
                  fontFamily: 'var(--mono)',
                  fontSize: 12,
                  letterSpacing: '0.06em',
                  borderRadius: 4
                }}>{error}</div>
              )}
            </>
          )}
        </form>
      </div>
    </section>
  );
}
window.CTA = CTA;