// Kontakt.jsx — slim contact page

function KontaktView({ onNav }) {
  const [form, setForm] = React.useState({
    name: '', email: '', company: '', topic: 'Einkaufsstrategie', message: ''
  });
  const [errs, setErrs] = React.useState({});
  const [sent, setSent] = React.useState(false);

  const update = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const setTopic = (t) => () => setForm((f) => ({ ...f, topic: t }));

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = 'Pflichtfeld';
    if (!form.email.trim()) next.email = 'Pflichtfeld';else
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) next.email = 'Bitte gültige E-Mail';
    if (!form.message.trim()) next.message = 'Pflichtfeld';
    setErrs(next);
    if (Object.keys(next).length === 0) setSent(true);
  };

  return (
    <main className="view-enter">
      <section className="page-head">
        <div className="container">
          <p className="eyebrow">Kontakt</p>
          <h1 className="h-editorial">
            Nehmen Sie <em>Kontakt</em> auf.
          </h1>
          <p className="lead">
            Für ein unverbindliches Erstgespräch — vertraulich
            und ohne Verpflichtung.
          </p>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="contact-info">
            <div className="item">
              <span className="k">E-Mail</span>
              <span className="v"><a href="mailto:ricardo@massague-consulting.de">kontakt@massague-consulting.de</a></span>
            </div>
            <div className="item">
              <span className="k">Telefon</span>
              <span className="v"><a href="tel:+4912345674567">+49 177 3356684</a></span>
            </div>
            <div className="item">
              <span className="k">Standort</span>
              <span className="v">Stuttgart, Germany</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container-tight">
          {sent ?
          <div className="form-success">
              <p className="eyebrow">Eingegangen</p>
              <h3>Danke — ich melde mich innerhalb von zwei Werktagen.</h3>
              <p>
                Ihre Anfrage liegt jetzt in meinem Posteingang.
                Bei dringenden Themen erreichen Sie mich auch direkt unter{' '}
                <a href="mailto:ricardo@massague-consulting.de" style={{ borderBottom: '1px solid var(--gilt)' }}>ricardo@massague-consulting.de</a>.
              </p>
            </div> :

          <form className="form" onSubmit={submit} noValidate>
              <div className={"field " + (errs.name ? 'has-err' : '')}>
                <label htmlFor="name">Name</label>
                <input id="name" type="text" value={form.name} onChange={update('name')} placeholder="Ihr vollständiger Name" />
                {errs.name && <span className="err">{errs.name}</span>}
              </div>
              <div className={"field " + (errs.email ? 'has-err' : '')}>
                <label htmlFor="email">E-Mail</label>
                <input id="email" type="email" value={form.email} onChange={update('email')} placeholder="name@firma.de" />
                {errs.email && <span className="err">{errs.email}</span>}
              </div>
              <div className="field full">
                <label htmlFor="company">Unternehmen</label>
                <input id="company" type="text" value={form.company} onChange={update('company')} placeholder="Firmenname (optional)" />
              </div>

              <div className="field full">
                <label>Themenfeld</label>
                <div className="chip-row">
                  {['Einkaufsstrategie', 'Supply-Chain-Optimierung', 'Sparring', 'Anderes'].map((t) =>
                <button
                  key={t}
                  type="button"
                  className={"chip " + (form.topic === t ? 'active' : '')}
                  onClick={setTopic(t)}>
                  {t}</button>
                )}
                </div>
              </div>

              <div className={"field full " + (errs.message ? 'has-err' : '')}>
                <label htmlFor="message">Worum geht es?</label>
                <textarea id="message" value={form.message} onChange={update('message')} placeholder="Ein paar Sätze reichen für ein erstes Gespräch." />
                {errs.message && <span className="err">{errs.message}</span>}
              </div>

              <div className="field full" style={{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', gap: 16, alignItems: 'center' }}>
                <button type="submit" className="btn btn-primary">
                  Anfrage senden <Arrow />
                </button>
                <span className="meta" style={{ maxWidth: '32ch' }}>
                  Vertraulich. Keine Marketing-E-Mails.
                </span>
              </div>
            </form>
          }
        </div>
      </section>
    </main>);

}

window.KontaktView = KontaktView;