// Contact page

function ContactPage({ navigate }) {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', location: '', subject: '', message: '' });
  const [topic, setTopic] = React.useState('Neubau');
  const [budget, setBudget] = React.useState('250–500 T€');
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);
  const [consent, setConsent] = React.useState(false);
  const u = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, topic, budget })
      });
      if (!res.ok) throw new Error();
      setSent(true);
    } catch {
      setError(<>Die Nachricht konnte leider nicht gesendet werden. Bitte versuchen Sie es erneut oder schreiben Sie direkt an{' '}<a href="mailto:info@feinplaner.de">info@feinplaner.de</a></>);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      <Header route="contact" navigate={navigate} />

      <section className="page-hero">
        <div className="crumb"><a onClick={() => navigate('home')}>Start</a> / Kontakt</div>
        <h1>
          <span style={{ fontWeight: 200 }}>Sprechen wir</span><br />
          <span style={{ fontWeight: 200 }}>über Ihr</span> <span className="b">Vorhaben</span>.
        </h1>
        <div className="page-hero__row">
          <p className="lead">
            Das erste Gespräch ist immer kostenfrei und unverbindlich. Ich höre zu, stelle Fragen, gebe eine erste Einschätzung — und sage ehrlich, wenn ich nicht der richtige Architekt für Sie bin.
          </p>
        </div>
      </section>

      <section className="cnt">
        <div className="cnt__grid">
          <div className="cnt__side">
            <h2>So <span className="ital">erreichen</span> Sie uns.</h2>
            <p>Schreiben Sie mir über das Formular oder direkt per E-Mail. Wenn es eilt: gerne anrufen.</p>

            <div className="cnt__details">
              <div className="row">
                <div className="lbl">— Studio</div>
                <div className="val">feinplaner — Timo Pietschmann, M.A.<br />Freier Architekt<br />Mörikestraße 12A<br />70178 Stuttgart</div>
              </div>
              <div className="row">
                <div className="lbl">— Telefon</div>
                <div className="val"><a href="tel:+4971199311607">0711 / 993 116 07</a><br /><span style={{ color: 'var(--fg-2)', fontSize: 13 }}>Mo–Fr · 9–18 Uhr</span></div>
              </div>
              <div className="row">
                <div className="lbl">— E-Mail</div>
                <div className="val">
                  Allgemein · <a href="mailto:info@feinplaner.de">info@feinplaner.de</a><br />
                  Web · <a href="https://www.feinplaner.de" target="_blank" rel="noreferrer">www.feinplaner.de</a>
                </div>
              </div>
              <div className="row">
                <div className="lbl">— Anfahrt</div>
                <div className="val"><a href="https://www.google.com/maps/search/?api=1&query=M%C3%B6rikestr.+12A%2C+70178+Stuttgart" target="_blank" rel="noopener noreferrer">Stuttgart-Süd / Karlshöhe.</a><br />S-Bahn Feuersee, ca. 12 Min. Fußweg.</div>
              </div>
            </div>
          </div>

          <form className="cnt__form" onSubmit={handleSubmit}>
            {sent ? (
              <div className="cnt__sent">
                <div className="eyebrow petrol">— Vielen Dank</div>
                <h3 className="h3">Ihre Nachricht ist angekommen.</h3>
                <p className="body">Ich melde mich innerhalb von 24 Stunden zurück, in der Regel mit einem Vorschlag für ein erstes Telefonat.</p>
                <button type="button" className="text-link" style={{ marginTop: 12, alignSelf: 'flex-start' }} onClick={() => { setSent(false); setForm({ name: '', email: '', phone: '', location: '', subject: '', message: '' }); }}>Neue Nachricht →</button>
              </div>
            ) : (
              <>
                <div className="field">
                  <label className="lbl">Name *</label>
                  <input required value={form.name} onChange={u('name')} placeholder="Vor- und Nachname" />
                </div>
                <div className="field">
                  <label className="lbl">E-Mail *</label>
                  <input required type="email" value={form.email} onChange={u('email')} placeholder="name@beispiel.de" />
                </div>
                <div className="field">
                  <label className="lbl">Telefon</label>
                  <input value={form.phone} onChange={u('phone')} placeholder="optional" />
                </div>
                <div className="field">
                  <label className="lbl">Ort des Vorhabens</label>
                  <input value={form.location} onChange={u('location')} placeholder="z. B. Stuttgart-West" />
                </div>

                <div className="cnt__choices">
                  <span className="lbl">— Worum geht es?</span>
                  <div className="opts">
                    {['Neubau', 'Bauen im Bestand', 'Innenarchitektur', 'Beratung', 'Sonstiges'].map(t => (
                      <button type="button" key={t} className={`chip ${topic === t ? 'active' : ''}`} onClick={() => setTopic(t)}>{t}</button>
                    ))}
                  </div>
                </div>

                <div className="cnt__choices">
                  <span className="lbl">— Budget­rahmen (Schätzung)</span>
                  <div className="opts">
                    {['bis 250 T€', '250–500 T€', '500 T€–1 Mio €', '> 1 Mio €', 'noch unklar'].map(b => (
                      <button type="button" key={b} className={`chip ${budget === b ? 'active' : ''}`} onClick={() => setBudget(b)}>{b}</button>
                    ))}
                  </div>
                </div>

                <div className="field field--full">
                  <label className="lbl">Ihr Vorhaben in zwei Sätzen</label>
                  <textarea rows={5} value={form.message} onChange={u('message')} placeholder="Was steht an? Wo, wann, was wünschen Sie sich?" />
                </div>

                <div className="cnt__submit">
                  <label className="note" style={{ display: 'flex', alignItems: 'flex-start', gap: 8, cursor: 'pointer' }}>
                    <input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)} style={{ marginTop: 3, flexShrink: 0 }} />
                    <span>Ich willige ein, dass meine Angaben zur Bearbeitung gespeichert werden. Details in unserer <a onClick={() => navigate('datenschutz')} style={{ cursor: 'pointer' }}>Datenschutzerklärung</a>.</span>
                  </label>
                  {error && <p style={{ color: 'var(--terracotta)', fontSize: 13, margin: 0 }}>{error}</p>}
                  <button className="btn" type="submit" disabled={loading || !consent}>{loading ? 'Wird gesendet…' : 'Anfrage senden'} <span className="arrow">→</span></button>
                </div>
              </>
            )}
          </form>
        </div>
      </section>

      <Footer navigate={navigate} />
    </>
  );
}

window.ContactPage = ContactPage;