/* KontaktScreen — contact form + adresse panel */

const KontaktScreen = ({ onNav }) => {
  const [sent, setSent] = React.useState(false);
  const [form, setForm] = React.useState({
    anrede: "Frau",
    name: "",
    firma: "",
    email: "",
    thema: "antrag",
    nachricht: "",
  });
  const set = (k, v) => setForm(f => ({...f, [k]: v}));

  return (
    <div data-screen-label="Kontakt">
      <PageHeader
        eyebrow="Kontakt"
        title="Sprechen Sie mit uns."
        lede="Allgemeine Anfragen, Antragsstatus, Hinweise zu Audit-Terminen — wir antworten innerhalb von 5 Werktagen."
      />

      <section className="dlg-kontakt">
        <KontaktStyles/>
        <div className="container">
          <div className="dlg-kontakt__grid">
            <Card padded={false} style={{padding:32}}>
              {sent ? (
                <div style={{textAlign:"center",padding:"32px 12px"}}>
                  <Eyebrow tone="gold">Nachricht eingegangen</Eyebrow>
                  <h3 style={{fontFamily:"var(--font-serif)",fontSize:26,fontWeight:700,color:"var(--dlg-navy-900)",margin:"12px 0 10px"}}>
                    Vielen Dank.
                  </h3>
                  <p style={{fontSize:15,color:"var(--fg-2)",maxWidth:420,margin:"0 auto 24px"}}>
                    Wir haben Ihre Nachricht erhalten und melden uns innerhalb von 5 Werktagen
                    an <b>{form.email || "Ihre E-Mail-Adresse"}</b>.
                  </p>
                  <Button variant="secondary" size="md" onClick={()=>setSent(false)}>Neue Nachricht</Button>
                </div>
              ) : (
                <>
                  <h2 style={{fontFamily:"var(--font-serif)",fontSize:26,fontWeight:700,color:"var(--dlg-navy-900)",margin:"0 0 6px"}}>
                    Schreiben Sie uns.
                  </h2>
                  <p style={{fontSize:14,color:"var(--fg-2)",margin:"0 0 24px"}}>
                    Pflichtfelder sind mit <span style={{color:"var(--dlg-red-600)"}}>*</span> gekennzeichnet.
                  </p>
                  <form onSubmit={e=>{e.preventDefault();setSent(true);}}>
                    <div className="dlg-form-grid">
                      <Field label="Anrede" required>
                        <select value={form.anrede} onChange={e=>set("anrede",e.target.value)}>
                          <option>Frau</option>
                          <option>Herr</option>
                          <option>Divers</option>
                          <option>Keine Angabe</option>
                        </select>
                      </Field>
                      <Field label="Name" required>
                        <input value={form.name} onChange={e=>set("name",e.target.value)}/>
                      </Field>
                      <div style={{gridColumn:"1/-1"}}>
                        <Field label="Firma / Studio">
                          <input value={form.firma} onChange={e=>set("firma",e.target.value)}/>
                        </Field>
                      </div>
                      <div style={{gridColumn:"1/-1"}}>
                        <Field label="E-Mail" required>
                          <input type="email" value={form.email} onChange={e=>set("email",e.target.value)}/>
                        </Field>
                      </div>
                      <div style={{gridColumn:"1/-1"}}>
                        <Field label="Thema" required>
                          <select value={form.thema} onChange={e=>set("thema",e.target.value)}>
                            <option value="antrag">Frage zum Antrag</option>
                            <option value="audit">Audit-Termin</option>
                            <option value="verfahren">Frage zu einem Verfahren</option>
                            <option value="beschwerde">Beschwerde</option>
                            <option value="presse">Presse / Medien</option>
                            <option value="sonstige">Sonstige Anfrage</option>
                          </select>
                        </Field>
                      </div>
                      <div style={{gridColumn:"1/-1"}}>
                        <Field label="Nachricht" required>
                          <textarea rows={6} value={form.nachricht} onChange={e=>set("nachricht",e.target.value)}
                                    placeholder="Schildern Sie uns Ihr Anliegen kurz und konkret."/>
                        </Field>
                      </div>
                      <div style={{gridColumn:"1/-1"}}>
                        <label className="dlg-chk">
                          <input type="checkbox" required/>
                          <span style={{fontSize:13}}>
                            Ich habe die <a href="#" onClick={e=>{e.preventDefault();onNav("datenschutz");}} style={{color:"var(--dlg-navy-700)"}}>Datenschutzerklärung</a> zur Kenntnis genommen.
                            Meine Angaben werden zur Bearbeitung der Anfrage gespeichert.
                          </span>
                        </label>
                      </div>
                      <div style={{gridColumn:"1/-1",display:"flex",justifyContent:"flex-end",marginTop:8}}>
                        <Button variant="primary" size="md" iconRight="arrowR" type="submit">Nachricht senden</Button>
                      </div>
                    </div>
                  </form>
                </>
              )}
            </Card>

            <aside className="dlg-kontakt__side">
              <Card accent>
                <Eyebrow tone="gold">Postanschrift</Eyebrow>
                <div className="dlg-kontakt__addr">
                  <div className="name">Deutsche Legat Gesellschaft<br/>für Zertifizierung mbH</div>
                  <div>Radelandstraße 4<br/>13589 Berlin</div>
                </div>
                <div className="dlg-kontakt__row">
                  <Icon d={Icons.mail} size={14}/>
                  <a href="mailto:info@deutsche-legat.de">info@deutsche-legat.de</a>
                </div>
              </Card>

              <Card>
                <Eyebrow tone="navy">Geschäftsführung</Eyebrow>
                <div className="dlg-kontakt__person">
                  <div className="n">Anke Barzik</div>
                  <div className="r">Geschäftsführerin</div>
                </div>
              </Card>

              <Card>
                <Eyebrow tone="navy">Bearbeitungszeiten</Eyebrow>
                <ul className="dlg-kontakt__hours">
                  <li><span>Anfragen per E-Mail</span><span>5 Werktage</span></li>
                  <li><span>Antragsprüfung (formal)</span><span>5 Werktage</span></li>
                  <li><span>Vor-Ort-Audit (Termin)</span><span>2–6 Wochen</span></li>
                  <li><span>Zertifikatausstellung</span><span>≤ 14 Tage nach Audit</span></li>
                </ul>
              </Card>
            </aside>
          </div>
        </div>
      </section>
    </div>
  );
};

const KontaktStyles = () => (
  <style>{`
    .dlg-kontakt { padding: 64px 0 96px; background: var(--dlg-navy-050); }
    .dlg-kontakt__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: flex-start; }
    .dlg-kontakt__side { display: grid; gap: 16px; }
    .dlg-kontakt__addr { font-size: 14px; line-height: 1.55; color: var(--fg); margin: 12px 0 16px; display: grid; gap: 12px; }
    .dlg-kontakt__addr .name { font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--dlg-navy-900); }
    .dlg-kontakt__row { display: flex; gap: 8px; align-items: center; font-size: 14px; padding-top: 12px; border-top: 1px dashed var(--border); color: var(--dlg-navy-800); }
    .dlg-kontakt__row a { color: var(--dlg-navy-700); text-decoration: none; font-weight: 600; }
    .dlg-kontakt__row a:hover { text-decoration: underline; }
    .dlg-kontakt__person { margin-top: 10px; }
    .dlg-kontakt__person .n { font-family: var(--font-serif); font-weight: 700; font-size: 19px; color: var(--dlg-navy-900); }
    .dlg-kontakt__person .r { font-size: 13px; color: var(--fg-3); }
    .dlg-kontakt__hours { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 0; }
    .dlg-kontakt__hours li { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; padding: 9px 0; border-bottom: 1px dashed var(--border); color: var(--dlg-navy-900); }
    .dlg-kontakt__hours li:last-child { border-bottom: 0; }
    .dlg-kontakt__hours li span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
  `}</style>
);

Object.assign(window, { KontaktScreen });
