// Tanıtım e-postası talep formu — bilingual, client-side build + POST to backend.

const { useState: useCatalogState } = React;

// =================================================================
// CONFIG — set when send-catalog backend is deployed at datakor.com.tr
// =================================================================
const DK_CATALOG_ENDPOINT = "";   // örn: "https://www.datakor.com.tr/send-catalog.php"

const CATALOG_COPY = {
  tr: {
    eyebrow: 'Tanıtım Talep Et',
    titleA:  'Tüm hizmetlerimizi ',
    titleB:  'e-postanıza',
    titleC:  ' gönderelim.',
    sub:     'Datakor\'un Sakarya\'da sunduğu kurumsal IT ve siber güvenlik hizmetlerinin tam dökümünü, yetkili ortaklıkları ve iletişim bilgileriyle birlikte anında bilgi@datakor.com.tr üzerinden e-postanıza gönderiyoruz.',
    bullets: [
      'Kurumsal IT hizmetleri (sunucu, mail, yönetilen IT, PDKS, CCTV)',
      'Yetkili ortaklıklar (Bitdefender, WatchGuard, Narbulut, Netwrix, LogAlarm, Gaterzone, Logtin, TransferChain)',
      'Doğrudan telefon ve WhatsApp ile geri dönüş butonları',
    ],
    nameLabel: 'Adınız',
    nameHint:  '(opsiyonel)',
    namePh:    'Adınız Soyadınız',
    emailLabel:'E-posta',
    emailPh:   'ornek@firma.com.tr',
    consent:   'Tanıtım e-postası almayı kabul ediyorum.',
    consentSub:'İstediğim zaman yanıt vererek listeden çıkabilirim.',
    submit:    'Kataloğu E-postama Gönder →',
    sending:   'Gönderiliyor…',
    successT:  'E-postanız yola çıktı.',
    successD:  'Birkaç dakika içinde gelmezse spam / önemsiz klasörünü kontrol edin.',
    errFallback: 'Mail gönderim servisi henüz kurulmadı. Lütfen 0264 777 11 88 numaralı hattan arayın.',
    errFail:   'Mail gönderilemedi. Lütfen tekrar deneyin veya 0264 777 11 88 numaralı hattan arayın.',
    errConn:   'Bağlantı hatası. Lütfen tekrar deneyin veya 0264 777 11 88 numaralı hattan arayın.',
    subjectLine: 'Datakor · Hizmet Kataloğu',
  },
  en: {
    eyebrow: 'Request Brochure',
    titleA:  'We\'ll send our full service catalog to ',
    titleB:  'your inbox',
    titleC:  '.',
    sub:     'A complete breakdown of Datakor\'s corporate IT and cybersecurity services in Sakarya, with authorized partnerships and contact details — delivered instantly from bilgi@datakor.com.tr to your inbox.',
    bullets: [
      'Corporate IT services (servers, mail, managed IT, PDKS, CCTV)',
      'Authorized partnerships (Bitdefender, WatchGuard, Narbulut, Netwrix, LogAlarm, Gaterzone, Logtin, TransferChain)',
      'Direct phone and WhatsApp call-back buttons',
    ],
    nameLabel: 'Name',
    nameHint:  '(optional)',
    namePh:    'Your full name',
    emailLabel:'Email',
    emailPh:   'name@company.com',
    consent:   'I agree to receive the brochure email.',
    consentSub:'You may unsubscribe anytime by replying.',
    submit:    'Send brochure to my inbox →',
    sending:   'Sending…',
    successT:  'Your email is on its way.',
    successD:  'If it doesn\'t arrive in a few minutes, check your spam folder.',
    errFallback: 'The mail-send backend is not yet wired up. Please call +90 264 777 11 88.',
    errFail:   'Could not send. Please try again or call +90 264 777 11 88.',
    errConn:   'Connection error. Please try again or call +90 264 777 11 88.',
    subjectLine: 'Datakor · Service Catalog',
  },
};

const CatalogForm = () => {
  const { lang } = useLang();
  const t = pick(CATALOG_COPY, lang);
  const [name,    setName]    = useCatalogState('');
  const [email,   setEmail]   = useCatalogState('');
  const [consent, setConsent] = useCatalogState(false);
  const [website, setWebsite] = useCatalogState(''); // honeypot
  const [status,  setStatus]  = useCatalogState('idle');
  const [errorMsg,setErrorMsg]= useCatalogState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (website) return; // honeypot
    if (!email || !consent) return;
    if (!DK_CATALOG_ENDPOINT) {
      setStatus('error'); setErrorMsg(t.errFallback); return;
    }
    setStatus('sending'); setErrorMsg('');
    const html = window.buildDatakorEmailHTML ? window.buildDatakorEmailHTML({ name, lang }) : '';
    const text = window.buildDatakorEmailText ? window.buildDatakorEmailText({ name, lang }) : '';
    const payload = {
      email: email.trim(),
      name:  name.trim(),
      lang,
      subject: t.subjectLine,
      html, text,
    };
    try {
      const res = await fetch(DK_CATALOG_ENDPOINT, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) setStatus('success');
      else { setStatus('error'); setErrorMsg(data.error || t.errFail); }
    } catch {
      setStatus('error'); setErrorMsg(t.errConn);
    }
  };

  const isValid = email.includes('@') && email.includes('.') && consent;

  const lblStyle = {
    display: 'block', fontFamily: 'var(--sans)', fontWeight: 700,
    fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase',
    color: 'var(--ink)', marginBottom: 6,
  };
  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    padding: '13px 16px', borderRadius: 'var(--r-sm)',
    border: '1px solid var(--line-strong)', background: 'var(--surface)',
    fontFamily: 'var(--sans)', fontSize: 15, color: 'var(--ink)',
    outline: 'none', transition: 'all 160ms var(--ease)',
  };

  return (
    <section id="tanitim" className="section reveal" style={{ background: 'var(--surface)' }}>
      <div className="wrap">
        <div className="card" style={{
          padding: 'clamp(36px, 5vw, 64px)',
          background: 'var(--bg)',
          border: '1px solid var(--line)',
          borderRadius: 'var(--r-lg)',
          position: 'relative', overflow: 'hidden',
        }}>
          <div aria-hidden style={{
            position: 'absolute', top: -120, right: -120,
            width: 320, height: 320, borderRadius: 999,
            background: 'radial-gradient(circle, var(--brand-soft), transparent 60%)',
            pointerEvents: 'none',
          }} />

          <div className="grid-2 cat-grid" style={{
            position: 'relative', zIndex: 1,
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center',
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{t.eyebrow}</div>
              <h2 className="h-section" style={{ marginBottom: 18 }}>
                {t.titleA}<span style={{ color: 'var(--brand)' }}>{t.titleB}</span>{t.titleC}
              </h2>
              <p className="body-lg" style={{ marginBottom: 24, maxWidth: 540 }}>{t.sub}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {t.bullets.map(b => (
                  <li key={b} style={{
                    fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-2)',
                    display: 'flex', alignItems: 'flex-start', gap: 10,
                  }}>
                    <span aria-hidden style={{
                      width: 22, height: 22, borderRadius: 999, flex: '0 0 22px',
                      background: 'var(--brand-soft)', color: 'var(--brand)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 800, fontSize: 12, marginTop: 1,
                    }}>✓</span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>

            <form onSubmit={onSubmit} className="card" style={{
              padding: 28, background: 'var(--surface)',
              border: '1px solid var(--line)', borderRadius: 'var(--r-md)',
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              {status === 'success' ? (
                <div style={{ textAlign: 'center', padding: '20px 0' }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: 999, margin: '0 auto 16px',
                    background: 'var(--success-soft)', color: 'var(--success)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 32, fontWeight: 800,
                  }}>✓</div>
                  <h3 className="h-card" style={{ fontSize: 22, marginBottom: 8 }}>{t.successT}</h3>
                  <p className="body" style={{ fontSize: 15, color: 'var(--muted)', margin: 0 }}>{t.successD}</p>
                </div>
              ) : (
                <>
                  <div>
                    <label htmlFor="dk-name" style={lblStyle}>{t.nameLabel} <span style={{ color: 'var(--muted)' }}>{t.nameHint}</span></label>
                    <input id="dk-name" type="text" value={name} onChange={e => setName(e.target.value)} placeholder={t.namePh} style={inputStyle} autoComplete="name" />
                  </div>
                  <div>
                    <label htmlFor="dk-email" style={lblStyle}>{t.emailLabel} <span style={{ color: 'var(--danger)' }}>*</span></label>
                    <input id="dk-email" type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder={t.emailPh} style={inputStyle} autoComplete="email" />
                  </div>

                  <input type="text" tabIndex="-1" autoComplete="off" value={website} onChange={e => setWebsite(e.target.value)} style={{ position: 'absolute', left: '-9999px' }} aria-hidden="true" />

                  <label style={{
                    display: 'flex', gap: 10, alignItems: 'flex-start', cursor: 'pointer',
                    padding: '10px 0', fontFamily: 'var(--sans)', fontSize: 13, color: 'var(--ink-2)',
                    lineHeight: 1.5,
                  }}>
                    <input type="checkbox" checked={consent} onChange={e => setConsent(e.target.checked)}
                      style={{ marginTop: 3, width: 16, height: 16, accentColor: 'var(--brand)' }} required />
                    <span>{t.consent} <span style={{ color: 'var(--muted)' }}>{t.consentSub}</span></span>
                  </label>

                  <button type="submit" disabled={!isValid || status === 'sending'} className="btn btn-primary" style={{
                    justifyContent: 'center', marginTop: 4,
                    background: 'var(--brand)',
                    opacity: !isValid || status === 'sending' ? 0.5 : 1,
                    cursor: !isValid || status === 'sending' ? 'not-allowed' : 'pointer',
                  }}>
                    {status === 'sending' ? t.sending : t.submit}
                  </button>

                  {status === 'error' && (
                    <div style={{
                      padding: 12, borderRadius: 'var(--r-sm)',
                      background: 'rgba(184,58,48,0.08)', border: '1px solid rgba(184,58,48,0.25)',
                      fontSize: 13, color: 'var(--danger)', lineHeight: 1.55,
                    }}>{errorMsg}</div>
                  )}
                </>
              )}
            </form>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .cat-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { CatalogForm });