// Kontakt Page
function KontaktPage() {
  const [t, setTweak] = window.useTweaks(window.SHARED_DEFAULTS);
  const theme = window.useTheme(t);
  const { c, orange, glow, pad, fonts } = theme;
  const [form, setForm] = React.useState({ name: '', email: '', topic: 'PS3 Academy', msg: '' });

  return (
    <div className="vc-root">
      <window.ThemeStyles theme={theme} />
      <window.Cursor />
      <window.ScrollReveal />
      <window.NavBar active="Kontakt" theme={theme} dark={t.darkMode} setDark={(v) => setTweak('darkMode', v)} />

      <section style={{ padding: '120px 56px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 30% 0%, ${glow}, transparent 50%)` }} />
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
          <div className="vc-eyebrow-line" style={{ color: orange, marginBottom: 40 }}>
            <span className="vc-eyebrow">Lass uns reden</span>
          </div>
          <h1 className="vc-display" style={{ fontSize: 168, lineHeight: 0.88, margin: 0, letterSpacing: '-0.04em' }}>
            Kontakt.<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>Direkt.</span>
          </h1>
        </div>
      </section>

      <section style={{ padding: `${pad(80)}px 56px ${pad(120)}px` }}>
        <div className="vc-fade" style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
          {/* FORM */}
          <div className="vc-glass" style={{ padding: 48 }}>
            <h2 className="vc-display" style={{ fontSize: 36, margin: '0 0 24px' }}>Schreib uns.</h2>
            <form action="https://formsubmit.co/basim@max-ministry.com" method="POST" style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <input type="hidden" name="_subject" value={`Max Ministry Anfrage: ${form.topic}`} />
              <input type="hidden" name="_template" value="table" />
              <input type="hidden" name="_autoresponse" value="Danke für deine Nachricht an Max Ministry. Wir melden uns so schnell wie möglich bei dir." />
              <input type="hidden" name="Thema" value={form.topic} />
              {[
                { k: 'name', l: 'Name', tag: 'input', name: 'name' },
                { k: 'email', l: 'E-Mail', tag: 'input', type: 'email', name: 'email' },
              ].map((f) => (
                <label key={f.k} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{f.l}</span>
                  <input name={f.name} type={f.type || 'text'} required value={form[f.k]} onChange={(e) => setForm({ ...form, [f.k]: e.target.value })}
                    style={{ background: 'transparent', border: 'none', borderBottom: `1px solid ${c.line}`, color: c.fg, padding: '8px 0', fontSize: 18, fontFamily: 'inherit', outline: 'none', cursor: 'none' }}
                    onFocus={(e) => e.target.style.borderColor = orange}
                    onBlur={(e) => e.target.style.borderColor = c.line}
                  />
                </label>
              ))}
              <label style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Thema</span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {['PS3 Academy', 'HOGC DNA', 'United', 'YMC-D', 'Allgemein'].map((opt) => (
                    <button key={opt} type="button" onClick={() => setForm({ ...form, topic: opt })}
                      style={{ padding: '8px 14px', borderRadius: 999, fontSize: 12, border: `1px solid ${form.topic === opt ? orange : c.line}`, background: form.topic === opt ? `${orange}22` : 'transparent', color: form.topic === opt ? orange : c.fg, cursor: 'none', fontFamily: 'inherit' }}>
                      {opt}
                    </button>
                  ))}
                </div>
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span className="vc-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '0.18em', textTransform: 'uppercase' }}>Nachricht</span>
                <textarea name="message" required rows={5} value={form.msg} onChange={(e) => setForm({ ...form, msg: e.target.value })}
                  style={{ background: 'transparent', border: `1px solid ${c.line}`, borderRadius: 12, color: c.fg, padding: 16, fontSize: 15, fontFamily: 'inherit', outline: 'none', resize: 'vertical', cursor: 'none' }}
                  onFocus={(e) => e.target.style.borderColor = orange}
                  onBlur={(e) => e.target.style.borderColor = c.line}
                />
              </label>
              <button type="submit" className="vc-btn-p" style={{ alignSelf: 'flex-start', marginTop: 12 }}>Nachricht senden →</button>
            </form>
          </div>

          {/* INFO */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <div className="vc-glass" style={{ padding: 32 }}>
              <div className="vc-eyebrow" style={{ color: orange, marginBottom: 16 }}>Direkt</div>
              <a className="vc-contact-link" href="mailto:basim@max-ministry.com" style={{ color: c.fg, fontSize: 28, fontFamily: fonts.display, fontWeight: 700, letterSpacing: '-0.02em' }}>basim@max-ministry.com</a>
            </div>
            <div className="vc-glass" style={{ padding: 32 }}>
              <div className="vc-eyebrow" style={{ color: orange, marginBottom: 16 }}>Folge uns</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[['YouTube','https://youtube.com/@MaxMinistry']].map(([nm, hr]) => (
                  <a key={nm} className="vc-contact-link" href={hr} target="_blank" rel="noopener noreferrer" style={{ color: c.fg, fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 0', borderBottom: `1px solid ${c.line}` }}>
                    <span>{nm}</span><span style={{ color: orange }}>→</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <window.Footer theme={theme} />
      <window.Tweaks t={t} setTweak={setTweak} />
    </div>
  );
}
window.KontaktPage = KontaktPage;