/* global React */
const { useState: useStateContact, useRef: useRefContact } = React;

function ContactBlock() {
  const [sent, setSent] = useStateContact(false);
  const [sending, setSending] = useStateContact(false);
  const [error, setError] = useStateContact('');
  const formRef = useRefContact(null);
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setError('');
    const f = e.target;
    const payload = {
      name:    f['ct-name'].value.trim(),
      email:   f['ct-email'].value.trim(),
      message: f['ct-msg'].value.trim(),
      website: f['ct-website'] ? f['ct-website'].value : '' // honeypot
    };
    if (!payload.name || !payload.email || !payload.message) {
      setError('Bitte alle Felder ausfüllen.');
      return;
    }
    setSending(true);
    try {
      const r = await fetch('api.php?action=send_contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      const d = await r.json().catch(() => null);
      if (d && d.success) {
        setSent(true);
        f.reset();
      } else {
        setError((d && d.error) ? d.error : 'Versand fehlgeschlagen. Bitte später erneut versuchen.');
      }
    } catch (_) {
      setError('Netzwerkfehler. Bitte später erneut versuchen.');
    } finally {
      setSending(false);
    }
  };
  return (
    <section className="dp-section dp-section--warm" id="kontakt">
      <div className="dp-container">
        <div className="dp-section-head">
          <span className="dp-eyebrow">Kontakt</span>
          <h2 className="dp-h2" style={{ marginTop: 12 }}>Schnell. Persönlich. Verbindlich.</h2>
          <p className="dp-lead" style={{ marginTop: 8 }}>Schicken Sie uns Ihre Anfrage — wir melden uns werktags innerhalb von 24h.</p>
        </div>
        <div className="dp-contact">
          <div className="dp-form-card">
            {!sent ? (
              <form className="dp-form" onSubmit={submit} ref={formRef}>
                <div className="fg">
                  <label htmlFor="ct-name">Name</label>
                  <input id="ct-name" name="ct-name" required placeholder="Max Mustermann" />
                </div>
                <div className="fg">
                  <label htmlFor="ct-email">E-Mail</label>
                  <input id="ct-email" name="ct-email" type="email" required placeholder="kontakt@firma.de" />
                </div>
                <div className="fg">
                  <label htmlFor="ct-msg">Ihre Anfrage</label>
                  <textarea id="ct-msg" name="ct-msg" rows="4" required placeholder="Welche Posten interessieren Sie? Welche Menge?"></textarea>
                </div>
                {/* Honeypot – fuer Bots */}
                <div style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }} aria-hidden="true">
                  <label htmlFor="ct-website">Website</label>
                  <input id="ct-website" name="ct-website" type="text" tabIndex="-1" autoComplete="off" />
                </div>
                {error && (
                  <div style={{ background: '#fde2e2', color: '#a11', padding: '10px 12px', borderRadius: 8, fontSize: 14 }}>
                    {error}
                  </div>
                )}
                <button type="submit" className="dp-btn dp-btn--primary dp-btn--full dp-btn--lg" disabled={sending}>
                  {sending ? '… wird gesendet' : 'Anfrage senden'}
                </button>
                <p style={{ fontSize: 12, color: 'var(--dp-text-muted)', textAlign: 'center' }}>
                  Mit dem Absenden stimmen Sie unserer <a href="#" style={{ color: 'var(--dp-orange-dark)' }}>Datenschutzerklärung</a> zu.
                </p>
              </form>
            ) : (
              <div style={{ textAlign: 'center', padding: '24px 0' }}>
                <img src="assets/OkFuchs.png" style={{ height: 140, margin: '0 auto 16px' }} />
                <h3 className="dp-h3" style={{ marginBottom: 8 }}>Anfrage erhalten!</h3>
                <p style={{ color: 'var(--dp-text-muted)', marginBottom: 20 }}>Wir melden uns innerhalb 24h bei Ihnen.</p>
                <button className="dp-btn dp-btn--outline" onClick={() => { setSent(false); setError(''); }}>Neue Anfrage</button>
              </div>
            )}
          </div>
          <div className="dp-info-card">
            <div className="dp-info-list">
              <div className="dp-info-item">
                <div className="icon">📍</div>
                <div>
                  <strong>Adresse</strong>
                  <p>Musterstraße 12<br/>12345 Musterstadt</p>
                </div>
              </div>
              <div className="dp-info-item">
                <div className="icon">📞</div>
                <div>
                  <strong>Telefon</strong>
                  <p><a href="tel:+491234567890">+49 123 456 7890</a></p>
                </div>
              </div>
              <div className="dp-info-item">
                <div className="icon">✉</div>
                <div>
                  <strong>E-Mail</strong>
                  <p><a href="mailto:kontakt@diepostenprofis.de">kontakt@diepostenprofis.de</a></p>
                </div>
              </div>
              <div className="dp-info-item">
                <div className="icon">🕒</div>
                <div>
                  <strong>Öffnungszeiten</strong>
                  <p>Mo–Fr 08:00–17:00<br/>Sa nach Vereinbarung</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.ContactBlock = ContactBlock;