/* İletişim (Contact) page — channels + message form */
const { useState: cUseState } = React;

const C_STR = {
  kicker:   { tr: 'İletişim', en: 'Contact' },
  h:        { tr: 'Bize ulaşın', en: 'Get in touch' },
  lead:     { tr: 'Arşivle, bir sohbetin metniyle ya da üyelikle ilgili her konuda yazabilirsiniz. Görüş ve önerileriniz, bu ilim hazinesini daha iyi hâle getirmemize yardımcı olur.',
              en: 'Write to us about the archive, a talk’s text, or membership. Your thoughts and suggestions help us improve this treasury of knowledge.' },
  ch_title: { tr: 'Doğrudan kanallar', en: 'Direct channels' },
  email:    { tr: 'E-posta', en: 'Email' },
  phone:    { tr: 'Telefon', en: 'Phone' },
  addr:     { tr: 'Adres', en: 'Address' },
  addr_v:   { tr: 'Server Yayınları · Fatih, İstanbul', en: 'Server Publications · Fatih, Istanbul' },
  hours:    { tr: 'Çalışma saatleri', en: 'Office hours' },
  hours_v:  { tr: 'Hafta içi 09.00 – 18.00', en: 'Weekdays 09:00 – 18:00' },
  social:   { tr: 'Sosyal medya', en: 'Social media' },
  form_t:   { tr: 'Mesaj gönderin', en: 'Send a message' },
  f_name:   { tr: 'Ad Soyad', en: 'Full name' },
  f_email:  { tr: 'E-posta', en: 'Email' },
  f_subj:   { tr: 'Konu', en: 'Subject' },
  f_msg:    { tr: 'Mesajınız', en: 'Your message' },
  f_send:   { tr: 'Gönder', en: 'Send' },
  ph_name:  { tr: 'Adınız ve soyadınız', en: 'Your name' },
  ph_email: { tr: 'ornek@eposta.com', en: 'you@example.com' },
  ph_subj:  { tr: 'Kısaca konu başlığı', en: 'A short subject line' },
  ph_msg:   { tr: 'Bize iletmek istediğiniz mesaj…', en: 'What would you like to tell us…' },
  ok_t:     { tr: 'Mesajınız alındı', en: 'Message received' },
  ok_p:     { tr: 'En kısa sürede size dönüş yapacağız. İlginize teşekkür ederiz.', en: 'We’ll get back to you shortly. Thank you for reaching out.' },
  ok_again: { tr: 'Yeni mesaj yaz', en: 'Write another' },
};

function ContactApp() {
  const I18 = window.SK_I18N;
  const { t, lang } = I18.useLang();
  const cs = (k) => (C_STR[k] && (C_STR[k][lang] || C_STR[k].tr)) || k;
  const [tw, setTw] = useTweaks(window.SK_TWEAK_DEFAULTS);
  window.applyTweaks(tw);
  const [sent, setSent] = cUseState(false);
  const [sending, setSending] = cUseState(false);
  const [error, setError] = cUseState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');
    const fd = new FormData(e.target);
    const payload = {
      name: fd.get('name'), email: fd.get('email'),
      subject: fd.get('subject'), message: fd.get('message'),
    };
    if (!window.SK_API) { setSent(true); return; } // API yoksa eski davranış
    setSending(true);
    try {
      await window.SK_API.contact(payload);
      setSent(true);
    } catch (err) {
      setError(err.message || 'Gönderilemedi, lütfen tekrar deneyin.');
    } finally {
      setSending(false);
    }
  };

  const channels = [
    { ic: 'mail', label: cs('email'), value: 'info@serverkursu.com', href: 'mailto:info@serverkursu.com' },
  ];
  const socials = ['instagram', 'facebook', 'x', 'telegram', 'youtube'];

  return (
    <>
      <Header />
      <main className="ct">
        <div className="wrap">
          <div className="crumb">
            <a href="index.html">{t('discover')}</a><span className="dot">›</span>
            <span style={{ color: 'var(--ink-2)' }}>{cs('kicker')}</span>
          </div>

          <div className="ct-split">
            <div className="ct-intro">
              <div className="kicker accent">{cs('kicker')}</div>
              <h1>{cs('h')}</h1>
              <p className="ct-lead">{cs('lead')}</p>

              <div className="ct-channels-block">
                <h2 className="ct-side-h">{cs('ch_title')}</h2>
                <ul className="ct-channels">
                  {channels.map((c, i) => (
                    <li key={i}>
                      <span className="ct-ch-ic"><Icon name={c.ic} size={18} /></span>
                      <div className="ct-ch-body">
                        <span className="ct-ch-label">{c.label}</span>
                        {c.href ? <a className="ct-ch-val" href={c.href}>{c.value}</a> : <span className="ct-ch-val">{c.value}</span>}
                      </div>
                    </li>
                  ))}
                </ul>
                <div className="ct-social-block">
                  <span className="ct-ch-label">{cs('social')}</span>
                  <div className="ct-social">
                    {socials.map(s => <a key={s} href="#" aria-label={s}><Icon name={s} size={18} /></a>)}
                  </div>
                </div>
              </div>
            </div>

            <div className="ct-formcard">
              {sent ? (
                <div className="ct-ok">
                  <span className="ct-ok-ic"><Icon name="check" size={28} /></span>
                  <h3>{cs('ok_t')}</h3>
                  <p>{cs('ok_p')}</p>
                  <button className="btn btn-ghost" onClick={() => setSent(false)}>{cs('ok_again')}</button>
                </div>
              ) : (
                <form className="ct-form" onSubmit={onSubmit}>
                  <h2 className="ct-form-h">{cs('form_t')}</h2>
                  <div className="ct-row2">
                    <label className="fld"><span>{cs('f_name')}</span><input name="name" required type="text" placeholder={cs('ph_name')} /></label>
                    <label className="fld"><span>{cs('f_email')}</span><input name="email" required type="email" placeholder={cs('ph_email')} /></label>
                  </div>
                  <label className="fld"><span>{cs('f_subj')}</span><input name="subject" type="text" placeholder={cs('ph_subj')} /></label>
                  <label className="fld"><span>{cs('f_msg')}</span><textarea name="message" required rows={6} placeholder={cs('ph_msg')}></textarea></label>
                  {error && <p style={{ color: '#c0392b', margin: '4px 0 0', fontSize: 14 }}>{error}</p>}
                  <button className="btn btn-primary ct-send" type="submit" disabled={sending}><Icon name="arrow" size={16} /> {sending ? '…' : cs('f_send')}</button>
                </form>
              )}
            </div>
          </div>
        </div>
      </main>
      <Footer />
      <SKTweaks t={tw} setTweak={setTw} />
      <ModalHost />
    </>
  );
}

(window.SK_READY || Promise.resolve()).then(() =>
  ReactDOM.createRoot(document.getElementById('root')).render(<ContactApp />));