/* Final CTA Form — Potenzialanalyse */
const { useState: useStateF } = React;

function ContactForm() {
  const [data, setData] = useStateF({ name: '', company: '', email: '', phone: '', message: '' });
  const [status, setStatus] = useStateF('idle'); // idle | sending | success | error
  const [error, setError] = useStateF(null);
  const hp = window.MaliTechFormAPI.useHoneypot();

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setError(null);

    const res = await window.MaliTechFormAPI.submitForm('potenzialanalyse', { ...data, ...hp.read() });
    if (res.ok) {
      setStatus('success');
    } else {
      setStatus('error');
      setError(res.error);
    }
  };

  const update = (k) => (e) => setData(d => ({ ...d, [k]: e.target.value }));

  if (status === 'success') {
    return (
      <form className="cta-form">
        <div className="success">
          <div className="check-big">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12"/>
            </svg>
          </div>
          <h3 style={{ marginBottom: 8 }}>Anfrage gesendet</h3>
          <p style={{ color: 'var(--color-text-secondary)', fontSize: 14 }}>
            Vielen Dank{data.name ? `, ${data.name}` : ''}!<br/>
            Unser Experte meldet sich innerhalb von 24h. Eine Bestätigung haben wir Ihnen per E-Mail geschickt.
          </p>
        </div>
      </form>
    );
  }

  return (
    <form className="cta-form" onSubmit={handleSubmit} noValidate>
      {hp.fields}
      <h3>Kostenlose Potenzialanalyse</h3>
      <p style={{ color: 'var(--color-text-muted)', fontSize: 13, fontFamily: 'var(--font-ui)' }}>
        30-Min Erstgespräch · Persönlicher Compliance-Check · 100% unverbindlich
      </p>
      <div className="field-row">
        <input required placeholder="Name" value={data.name} onChange={update('name')} disabled={status==='sending'}/>
        <input required placeholder="Unternehmen" value={data.company} onChange={update('company')} disabled={status==='sending'}/>
      </div>
      <div className="field-row">
        <input required type="email" placeholder="E-Mail" value={data.email} onChange={update('email')} disabled={status==='sending'}/>
        <input required type="tel" placeholder="Telefon" value={data.phone} onChange={update('phone')} disabled={status==='sending'}/>
      </div>
      <textarea rows="3" placeholder="Was beschäftigt Sie aktuell? (optional)" value={data.message} onChange={update('message')} disabled={status==='sending'}/>

      {status === 'error' && (
        <div className="form-error">
          <strong>Versand fehlgeschlagen.</strong> {error || 'Bitte versuchen Sie es erneut'} —
          oder erreichen Sie uns direkt unter{' '}
          <a href={`tel:${window.MaliTechFormAPI.CONTACT_FALLBACK.phone.replace(/\s/g,'')}`}>{window.MaliTechFormAPI.CONTACT_FALLBACK.phone}</a>.
        </div>
      )}

      <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%' }} disabled={status==='sending'}>
        {status === 'sending' ? <>Wird gesendet …</> : <>Termin sichern <Icon.Arrow/></>}
      </button>
      <p className="privacy">
        Mit dem Absenden stimmen Sie der Verarbeitung Ihrer Daten gemäß unserer{' '}
        <a href="datenschutz.html" target="_blank" rel="noopener">Datenschutzerklärung</a> zu.
        Keine Werbung. Keine Weitergabe an Dritte.
      </p>
    </form>
  );
}

window.ContactForm = ContactForm;