// 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 [lang, , tl] = window.useLang();
  const [form, setForm] = React.useState({ name: '', email: '', topic: 'PS3 Academy', msg: '' });

  const topics = ['PS3 Academy', 'HOGC DNA', 'United', 'YMC-D', tl('Allgemein', 'General')];

  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">{tl('Lass uns reden', "Let's talk")}</span>
          </div>
          <h1 className="vc-display" style={{ fontSize: 168, lineHeight: 0.88, margin: 0, letterSpacing: '-0.04em' }}>
            {tl('Kontakt.', 'Contact.')}<br /><span className="vc-serif" style={{ fontStyle: 'italic', color: orange, fontWeight: 300 }}>{tl('Direkt.', 'Direct.')}</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' }}>{tl('Schreib uns.', 'Write to us.')}</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 ${tl('Anfrage', 'Inquiry')}: ${form.topic}`} />
              <input type="hidden" name="_template" value="table" />
              <input type="hidden" name="_autoresponse" value={tl('Danke für deine Nachricht an Max Ministry. Wir melden uns so schnell wie möglich bei dir.', 'Thank you for your message to Max Ministry. We will get back to you as soon as possible.')} />
              <input type="hidden" name="Thema" value={form.topic} />
              {[
                { k: 'name', l: tl('Name', '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' }}>{tl('Thema', 'Topic')}</span>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {topics.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' }}>{tl('Nachricht', 'Message')}</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 }}>{tl('Nachricht senden', 'Send message')} →</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 }}>{tl('Direkt', 'Direct')}</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 }}>{tl('Folge uns', 'Follow us')}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <div style={{ color: c.muted, fontSize: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 0', borderBottom: `1px solid ${c.line}` }}>
                  <span>{tl('YouTube (demnächst)', 'YouTube (coming soon)')}</span>
                </div>
                {[['Instagram', 'https://instagram.com/ymcd.thailand']].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;