/* global React */
const { useState } = React;

const W3F_KEY = '38467b40-1498-446a-a116-ca43f22e9f4b';

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

  async function handleSubmit(e) {
    e.preventDefault();
    var f = e.target;

    // Honeypot — bots vullen dit in, mensen niet
    if (f.botcheck.checked) return;

    setStatus('sending');

    var data = {
      access_key: W3F_KEY,
      subject: 'Aanvraag via FrisseWand contactformulier',
      from_name: 'FrisseWand website',
      naam: f.naam.value,
      bedrijf: f.bedrijf.value,
      email: f.email.value,
      voorkeurspakket: f.pakket.value,
      bericht: f.bericht.value,
      botcheck: ''
    };

    try {
      var res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify(data)
      });
      var json = await res.json();
      if (json.success) {
        setStatus('success');
        f.reset();
      } else {
        setStatus('error');
      }
    } catch (_) {
      setStatus('error');
    }
  }

  return (
    <section className="fw-section fw-section--tint" id="contact">
      <div className="fw-container fw-cta">
        <div className="fw-cta__copy">
          <span className="fw-eyebrow">Contact</span>
          <h2 className="fw-h1">Interesse in een FrisseWand op jouw kantoor?</h2>
          <p className="fw-lede">Of heb je nog andere vragen? Stel ze gerust. Je kunt ons bereiken via e-mail, telefoon of via het contactformulier.<br/>We helpen je graag bij het maken van de beste keuze voor jouw kantoorinrichting.</p>
          <a href="#contactform" className="fw-btn fw-btn--primary fw-btn--lg">Contactformulier</a>
        </div>
        <form className="fw-card fw-cta__form" id="contactform" onSubmit={handleSubmit}>
          <h3 className="fw-h3">Neem contact op met ons</h3>
          <p className="fw-meta"><br/>We staan voor je klaar. Voor vragen, advies of een snelle check van je keuze.</p>

          {/* Honeypot — verborgen voor mensen, bots vullen dit in */}
          <input type="checkbox" name="botcheck" style={{display:'none'}} tabIndex="-1" autoComplete="off" />

          <label className="fw-field">
            <span>Naam *</span>
            <input className="fw-input" type="text" name="naam" placeholder="Je naam" required />
          </label>
          <label className="fw-field">
            <span>Bedrijf *</span>
            <input className="fw-input" type="text" name="bedrijf" placeholder="Bedrijfsnaam" required />
          </label>
          <label className="fw-field">
            <span>E-mail *</span>
            <input className="fw-input" type="email" name="email" placeholder="naam@bedrijf.nl" required />
          </label>
          <label className="fw-field">
            <span>Voorkeurspakket</span>
            <select className="fw-input" name="pakket" defaultValue="Goud">
              <option>Bronze</option>
              <option>Zilver</option>
              <option>Goud</option>
              <option>Platinum</option>
              <option>Weet ik nog niet</option>
            </select>
          </label>
          <label className="fw-field">
            <span>Bericht *</span>
            <textarea className="fw-textarea" name="bericht" rows="3" placeholder="Vertel ons kort over je kantoor en wensen…" required></textarea>
          </label>

          {status === 'success' && (
            <p className="fw-meta" style={{color:'var(--fw-green-700)', fontWeight:600}}>
              Bedankt! Je bericht is verzonden. We nemen zo snel mogelijk contact op.
            </p>
          )}
          {status === 'error' && (
            <p className="fw-meta" style={{color:'#c0392b', fontWeight:600}}>
              Er ging iets mis. Probeer het opnieuw of mail naar info@frissewand.nl.
            </p>
          )}

          <button type="submit" className="fw-btn fw-btn--primary" disabled={status === 'sending'}>
            {status === 'sending' ? 'Versturen…' : 'Verstuur'}
          </button>
        </form>
      </div>
    </section>
  );
}

window.ContactCTA = ContactCTA;