// Tanıtım e-postası talep formu.
// Builds the email body client-side from current BRANDS/EXPERTISE/PARTNERS,
// then POSTs to a backend endpoint that handles SMTP.

const { useState: useFormState } = React;

// =================================================================
// CONFIG — Change this after uploading send-catalog.php to your host:
// =================================================================
const CATALOG_ENDPOINT = "https://www.bilgim.com.tr/send-catalog.php";

const CatalogForm = () => {
  const [name, setName] = useFormState('');
  const [email, setEmail] = useFormState('');
  const [consent, setConsent] = useFormState(false);
  const [website, setWebsite] = useFormState(''); // honeypot
  const [status, setStatus] = useFormState('idle'); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useFormState('');

  const onSubmit = async (e) => {
    e.preventDefault();
    if (website) return; // honeypot — bot caught
    if (!email || !consent) return;
    if (!CATALOG_ENDPOINT) {
      setStatus('error');
      setErrorMsg('Mail gönderim servisi henüz kurulmadı. Lütfen 0264 777 11 88 numaralı hattan arayın.');
      return;
    }
    setStatus('sending'); setErrorMsg('');

    const html = window.buildCatalogEmailHTML ? window.buildCatalogEmailHTML({ name }) : '';
    const text = window.buildCatalogEmailText ? window.buildCatalogEmailText({ name }) : '';
    const payload = {
      email: email.trim(),
      name: name.trim(),
      subject: 'Bilgim · Hizmet Kataloğu',
      html,
      text,
    };

    try {
      const res = await fetch(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 || 'Mail gönderilemedi. Lütfen tekrar deneyin veya 0264 777 11 88 numaralı hattan arayın.');
      }
    } catch (err) {
      setStatus('error');
      setErrorMsg('Bağlantı hatası. Lütfen tekrar deneyin veya 0264 777 11 88 numaralı hattan arayın.');
    }
  };

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

  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',
        }}>
          {/* Accent corner */}
          <div aria-hidden style={{
            position: 'absolute', top: -120, right: -120,
            width: 320, height: 320, borderRadius: 999,
            background: 'radial-gradient(circle, var(--c-adaplanet-soft), transparent 60%)',
            pointerEvents: 'none',
          }} />

          <div className="cat-grid" style={{
            position: 'relative', zIndex: 1,
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center',
          }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>Tanıtım Talep Et</div>
              <h2 className="h-section" style={{ marginBottom: 18 }}>
                Tüm hizmetlerimizi <span style={{ color: 'var(--c-adaplanet)' }}>e-postanıza</span> gönderelim.
              </h2>
              <p className="body-lg" style={{ marginBottom: 24, maxWidth: 520 }}>
                Bilgim Bilgisayar, Adaplanet ve Datakor olarak verdiğimiz tüm hizmetlerin,
                yetkili ortaklıklarımızın ve iletişim bilgilerimizin yer aldığı kataloğu
                anında e-postanıza gönderiyoruz. İçerik her güncellemeyle otomatik tazelenir.
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  'Tüm hizmet kalemleri tek bir e-postada',
                  'Yetkili iş ortaklarının (Bitdefender, WatchGuard, Mikro, Narbulut, Arksigner...) listesi',
                  'Doğrudan telefon ve WhatsApp ile geri dönüş butonları',
                ].map(t => (
                  <li key={t} style={{
                    fontFamily: 'var(--sans)', fontSize: 14.5, color: 'var(--ink-2)',
                    display: 'flex', alignItems: 'center', gap: 10,
                  }}>
                    <span aria-hidden style={{
                      width: 22, height: 22, borderRadius: 999, flex: '0 0 22px',
                      background: 'var(--c-bilgim-soft)', color: 'var(--c-bilgim)',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 800, fontSize: 12,
                    }}>✓</span>
                    {t}
                  </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 }}>E-postanız yola çıktı.</h3>
                  <p className="body" style={{ fontSize: 15, color: 'var(--muted)', margin: 0 }}>
                    Birkaç dakika içinde gelmezse spam / önemsiz klasörünü kontrol edin.
                  </p>
                </div>
              ) : (
                <>
                  <div>
                    <label htmlFor="cat-name" style={lblStyle}>Adınız <span style={{ color: 'var(--muted)' }}>(opsiyonel)</span></label>
                    <input id="cat-name" type="text" value={name} onChange={e => setName(e.target.value)} placeholder="Adınız Soyadınız" style={inputStyle} autoComplete="name" />
                  </div>
                  <div>
                    <label htmlFor="cat-email" style={lblStyle}>E-posta <span style={{ color: 'var(--danger)' }}>*</span></label>
                    <input id="cat-email" type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="ornek@firma.com.tr" style={inputStyle} autoComplete="email" />
                  </div>

                  {/* Honeypot — hidden from humans */}
                  <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(--navy)' }} required />
                    <span>Tanıtım e-postası almayı kabul ediyorum. <span style={{ color: 'var(--muted)' }}>İstediğim zaman yanıt vererek listeden çıkabilirim.</span></span>
                  </label>

                  <button type="submit" disabled={!isValid || status === 'sending'} className="btn btn-primary" style={{
                    justifyContent: 'center', marginTop: 4,
                    opacity: !isValid || status === 'sending' ? 0.5 : 1,
                    cursor: !isValid || status === 'sending' ? 'not-allowed' : 'pointer',
                  }}>
                    {status === 'sending' ? 'Gönderiliyor…' : 'Kataloğu E-postama Gönder →'}
                  </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>
  );
};

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)',
};

Object.assign(window, { CatalogForm });