const { useState } = React;

function CTA() {
  const [status, setStatus] = useState('idle'); // idle | sending | sent | error

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const res = await fetch('send.php', {
        method: 'POST',
        body: new FormData(e.target),
      });
      const data = await res.json();
      setStatus(data.ok ? 'sent' : 'error');
    } catch (_) {
      setStatus('error');
    }
  };

  return (
    <section id="contact" className="cta-section">
      <div className="cta-inner">
        <div>
          <span className="section-label">Beperkte capaciteit</span>
          <h2>We nemen maximaal<br />3 projecten tegelijk aan.</h2>
          <p className="section-intro">Zo houden we de kwaliteit hoog. Vertel kort waar u mee zit — u hoort binnen één werkdag of er plek is en of het klikt. Geen pitch, geen druk.</p>
          <p className="cta-alt">Liever direct appen? <a href="https://wa.me/31648687699" target="_blank" rel="noopener noreferrer" onClick={(e) => { e.preventDefault(); window.open('https://wa.me/31648687699', '_blank', 'noopener'); }}>06 48687699</a></p>
        </div>

        {status === 'sent' ? (
          <div className="contact-form form-success">
            <h3>Bedankt voor uw bericht.</h3>
            <p>We nemen binnen één werkdag contact met u op — meestal sneller.</p>
          </div>
        ) : (
          <form className="contact-form" onSubmit={handleSubmit}>
            {/* Honeypot tegen spam — onzichtbaar voor bezoekers */}
            <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: 'absolute', left: '-9999px' }} aria-hidden="true" />
            <div className="form-row">
              <div className="form-field">
                <label htmlFor="cf-name">Naam</label>
                <input id="cf-name" name="name" type="text" required placeholder="Uw naam" />
              </div>
              <div className="form-field">
                <label htmlFor="cf-email">E-mail</label>
                <input id="cf-email" name="email" type="email" required placeholder="naam@bedrijf.nl" />
              </div>
            </div>
            <div className="form-field">
              <label htmlFor="cf-phone">Telefoonnummer <em>(optioneel)</em></label>
              <input id="cf-phone" name="phone" type="tel" placeholder="06 12345678" />
            </div>
            <div className="form-field">
              <label htmlFor="cf-msg">Waar kunnen we mee helpen?</label>
              <textarea id="cf-msg" name="message" rows="4" required placeholder="Vertel kort over uw uitdaging of idee…"></textarea>
            </div>
            {status === 'error' && (
              <p className="form-error">Versturen lukte niet. Mail ons direct op <a href="mailto:insuranplatformey@gmail.com">insuranplatformey@gmail.com</a>.</p>
            )}
            <button type="submit" className="btn-cta-primary form-submit" disabled={status === 'sending'}>
              {status === 'sending' ? 'Versturen…' : 'Verstuur aanvraag →'}
            </button>
          </form>
        )}
      </div>
    </section>
  );
}

Object.assign(window, { CTA });