// =============================================================================
// Astovia · Kontakt — Deutsch
// =============================================================================

const WEB3FORMS_KEY = '2c5fba33-654d-4f82-ba59-2bd93df73308';

function ContactPage({ go }) {
  const [form, setForm] = React.useState({ first: '', last: '', email: '', message: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [error, setError] = React.useState(false);
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setError(false);
    setSubmitting(true);
    try {
      const res = await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: 'Neue Anfrage von astovia.de — ' + form.first + ' ' + form.last,
          from_name: form.first + ' ' + form.last,
          email: form.email,
          message: form.message,
          botcheck: ''
        })
      });
      const data = await res.json();
      if (!data.success) throw new Error(data.message);
      setSubmitted(true);
      setForm({ first: '', last: '', email: '', message: '' });
      setTimeout(() => setSubmitted(false), 6000);
    } catch (err) {
      console.error('Formular-Übermittlung fehlgeschlagen:', err);
      setError(true);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <main data-screen-label="Contact">
      <section className="page-header" data-screen-label="Contact header">
        <div className="container">
          <div className="two-col" style={{ alignItems: 'end' }}>
            <h1>Kontakt<span className="serif-em">.</span></h1>
            <p className="lede"></p>
          </div>
        </div>
      </section>

      {/* === Nachricht senden + Foto ========================================= */}
      <section className="section" data-screen-label="Send a message">
        <div className="container">
          <div className="two-col reverse">
            <div>
              <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(36px, 4.6vw, 56px)', letterSpacing: '-0.03em', margin: '0 0 32px', lineHeight: 1.0, color: 'var(--paper)' }}>
                Nachricht <span className="serif-em">senden.</span>
              </h2>

              {submitted &&
              <div style={{ border: '1px solid var(--bronze-line)', background: 'var(--bronze-soft)', padding: '14px 18px', marginBottom: 22, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--bronze)' }}>
                  ● Nachricht erhalten – wir antworten innerhalb eines Werktages.
                </div>
              }
              {error &&
              <div style={{ border: '1px solid rgba(220, 60, 60, 0.4)', background: 'rgba(220, 60, 60, 0.08)', padding: '14px 18px', marginBottom: 22, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#dc3c3c' }}>
                  ● Etwas ist schiefgelaufen. Bitte versuchen Sie es erneut oder schreiben Sie an info@astovia.de.
                </div>
              }

              <form className="form-grid" onSubmit={submit}>
                <div className="form-row">
                  <div className="form-field">
                    <label htmlFor="first">Vorname *</label>
                    <input id="first" type="text" placeholder="Ihr Vorname" required value={form.first} onChange={upd('first')} />
                  </div>
                  <div className="form-field">
                    <label htmlFor="last">Nachname *</label>
                    <input id="last" type="text" placeholder="Ihr Nachname" required value={form.last} onChange={upd('last')} />
                  </div>
                </div>
                <div className="form-field">
                  <label htmlFor="email">E-Mail *</label>
                  <input id="email" type="email" placeholder="sie@unternehmen.de" required value={form.email} onChange={upd('email')} />
                </div>
                <div className="form-field">
                  <label htmlFor="message">Nachricht *</label>
                  <textarea id="message" rows="6" placeholder="Schildern Sie uns kurz, vor welcher Entscheidung Sie stehen." required value={form.message} onChange={upd('message')} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
                  <button type="submit" className="btn btn-primary" disabled={submitting} style={submitting ? { opacity: 0.6, cursor: 'wait' } : undefined}>{submitting ? 'Wird gesendet…' : 'Absenden →'}</button>
                </div>
              </form>
            </div>
            <div className="photo" style={{ overflow: 'hidden', alignSelf: 'stretch', minHeight: 320 }}>
              <img
                src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200&q=80"
                alt="Bergkämme in der Morgendämmerung"
                loading="lazy" />
            </div>
          </div>
        </div>
      </section>

    </main>);
}

Object.assign(window, { ContactPage });