/* eslint-disable react/prop-types */
/* TUS Mentor — UI Kit · Contact (interactive form), Footer, Login modal */

function Contact() {
  const P = PALETTE;
  const [sent, setSent] = React.useState(false);
  const IG_URL = 'https://www.instagram.com/tus.mentorum/';
  const FORM_ENDPOINT = 'https://formspree.io/f/xeeybdwb';
  const fields = [['ad', 'Ad Soyad', 'Adın Soyadın', 'text'], ['email', 'E-posta', 'ornek@email.com', 'email']];
  const [sending, setSending] = React.useState(false);
  const [showKvkkModal, setShowKvkkModal] = React.useState(false);
  const onSubmit = async (e) => {
    e.preventDefault();
    setSending(true);
    const fd = new FormData(e.currentTarget);
    try {
      await fetch(FORM_ENDPOINT, { method: 'POST', body: fd, headers: { Accept: 'application/json' } });
    } catch (err) {}
    setSending(false);
    setSent(true);
  };
  return (
    <section id="iletisim" style={{ padding: '96px 32px', background: '#fff' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', background: `linear-gradient(180deg, ${P.slate900} 0%, ${P.blueDeep} 100%)`,
        borderRadius: 24, padding: '64px 56px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.5,
          backgroundImage: 'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
          backgroundSize: '40px 40px', maskImage: 'radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent)',
          WebkitMaskImage: 'radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent)' }} />
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <SectionTag tone="dark">İLETİŞİM</SectionTag>
            <h2 style={{ fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 800, letterSpacing: '-0.025em', margin: '14px 0 16px', lineHeight: 1.05 }}>
              Önce <span style={{ color: P.blueMid }}>tanışalım.</span>
            </h2>
            <p style={{ fontSize: 17, color: '#cfe4f8', margin: '0 0 28px', lineHeight: 1.6 }}>
              Adını ve e-postanı bırak, sana en kısa sürede dönüş yapayım. Dilersen doğrudan Instagram'dan da yazabilirsin — TUS yolculuğunu birlikte planlayalım.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 12 }}>
              {['Mail ya da Instagram üzerinden iletişim', '24 saat içinde geri dönüş', 'Sana özel, net bir yol haritası'].map((t) => (
                <li key={t} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 14.5, color: '#e1eef9' }}>
                  <span style={{ width: 22, height: 22, borderRadius: 6, background: 'rgba(255,255,255,0.10)', display: 'grid', placeItems: 'center' }}>
                    <Check size={12} color={P.blueMid} />
                  </span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          {sent ? (
            <div style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 16,
              padding: 36, textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14, backdropFilter: 'blur(8px)' }}>
              <div style={{ width: 56, height: 56, borderRadius: '50%', background: P.blue, display: 'grid', placeItems: 'center', boxShadow: '0 10px 24px rgba(24,95,165,0.40)' }}>
                <Check size={26} color="#fff" />
              </div>
              <div style={{ fontSize: 19, fontWeight: 800 }}>Bilgilerin gönderildi!</div>
              <p style={{ fontSize: 14, color: '#cfe4f8', margin: 0, lineHeight: 1.5 }}>En kısa sürede tarafınıza dönüş sağlanacaktır.</p>
              <button onClick={() => setSent(false)} style={{ marginTop: 6, background: 'transparent', border: '1px solid rgba(255,255,255,0.2)', color: '#cfe4f8', fontFamily: 'inherit', fontSize: 13, fontWeight: 600, padding: '8px 16px', borderRadius: 8, cursor: 'pointer' }}>Formu tekrar gör</button>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 16, padding: 28, backdropFilter: 'blur(8px)' }}>
              {fields.map(([name, label, ph, type]) => (
                <div key={name} style={{ marginBottom: 14 }}>
                  <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: '#cfe4f8', marginBottom: 6 }}>{label}</label>
                  <input name={name} type={type} placeholder={ph} required style={{ width: '100%', boxSizing: 'border-box', background: 'rgba(255,255,255,0.04)',
                    border: '1px solid rgba(255,255,255,0.14)', borderRadius: 10, padding: '12px 14px', fontSize: 14.5, color: '#fff', fontFamily: 'inherit', outline: 'none' }} />
                </div>
              ))}
              <button type="submit" disabled={sending} style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                background: '#fff', color: P.slate900, border: 0, borderRadius: 10, padding: '14px 24px', fontSize: 15, fontWeight: 800,
                fontFamily: 'inherit', cursor: sending ? 'default' : 'pointer', marginTop: 6, opacity: sending ? 0.7 : 1 }}>
                {sending ? 'Gönderiliyor…' : 'Bilgilerimi gönder →'}
              </button>
              <p style={{ fontSize: 11, color: '#9fb6cf', lineHeight: 1.5, margin: '10px 0 0', textAlign: 'center' }}>
                ℹ️ Kişisel verilerinizin işlenmesine ilişkin detaylara{' '}
                <a href="#kvkk-metni" onClick={(e) => { e.preventDefault(); setShowKvkkModal(true); }} style={{ color: '#cfe4f8', textDecoration: 'underline', cursor: 'pointer' }}>KVKK Aydınlatma Metni</a>{' '}
                üzerinden ulaşabilirsiniz.
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '16px 0' }}>
                <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.14)' }} />
                <span style={{ fontSize: 11.5, color: '#9fb6cf', fontWeight: 600 }}>veya</span>
                <span style={{ flex: 1, height: 1, background: 'rgba(255,255,255,0.14)' }} />
              </div>
              <button onClick={() => window.open(IG_URL, '_blank')}
                style={{ width: '100%', boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                  background: 'linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF)', color: '#fff', borderRadius: 10, padding: '13px 24px',
                  fontSize: 14.5, fontWeight: 800, fontFamily: 'inherit', textDecoration: 'none', boxShadow: '0 10px 24px rgba(221,42,123,0.32)', border: 'none', cursor: 'pointer' }}>
                <InstagramIcon size={18} /> Instagram DM @tus.mentorum
              </button>
            </form>
          )}
        </div>
      </div>
      {showKvkkModal && (
        <div onClick={() => setShowKvkkModal(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(15,23,42,0.6)', backdropFilter: 'blur(4px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 24 }}>
          <div onClick={(e) => e.stopPropagation()} style={{ background: '#fff', borderRadius: 16, maxWidth: 640, width: '100%', maxHeight: '80vh',
            overflowY: 'auto', padding: '32px 36px', position: 'relative', boxShadow: '0 30px 60px -20px rgba(7,46,88,0.35)' }}>
            <button onClick={() => setShowKvkkModal(false)} aria-label="Kapat" style={{ position: 'absolute', top: 18, right: 18, width: 30, height: 30,
              borderRadius: 8, border: 0, background: P.slate100, color: P.slate700, fontSize: 16, cursor: 'pointer', display: 'grid', placeItems: 'center' }}>✕</button>
            <h3 style={{ fontSize: 19, fontWeight: 800, color: P.slate900, margin: '0 0 18px' }}>İletişim Formu KVKK Aydınlatma Metni</h3>
            <div style={{ fontSize: 13.5, color: P.slate700, lineHeight: 1.7, display: 'grid', gap: 14 }}>
              <p style={{ margin: 0 }}>Tusmentor.com ("Veri Sorumlusu") olarak, gizliliğinize ve kişisel verilerinizin korunmasına önem veriyoruz. 6698 sayılı Kişisel Verilerin Korunması Kanunu ("KVKK") uyarınca, bu form aracılığıyla bizimle paylaştığınız kişisel verileriniz hakkında sizi bilgilendirmek isteriz.</p>
              <div>
                <strong style={{ color: P.slate900 }}>1. İşlenen Kişisel Verileriniz ve İşleme Amacı</strong>
                <p style={{ margin: '6px 0 0' }}>İletişim formu üzerinden bizimle paylaştığınız e-posta adresiniz, yalnızca sizinle iletişime geçebilmek, talebinizi/sorunuzu yanıtlamak ve süreçle ilgili size geri dönüş yapabilmek amacıyla işlenmektedir. Verileriniz herhangi bir reklam, pazarlama veya bülten amacıyla kullanılmaz.</p>
              </div>
              <div>
                <strong style={{ color: P.slate900 }}>2. Kişisel Verilerinizin Toplanma Yöntemi ve Hukuki Sebebi</strong>
                <p style={{ margin: '6px 0 0' }}>E-posta adresiniz, web sitemizdeki formu doldurarak elektronik ortamda tarafımıza iletmeniz suretiyle toplanmaktadır. Bu veri, KVKK'nın 5/2-f maddesi uyarınca "İlgili kişinin temel hak ve özgürlüklerine zarar vermemek kaydıyla, veri sorumlusunun meşru menfaatleri için veri işlenmesinin zorunlu olması" ve bir hakkın tesisi hukuki sebeplerine dayalı olarak işlenmektedir.</p>
              </div>
              <div>
                <strong style={{ color: P.slate900 }}>3. Kişisel Verilerin Aktarımı</strong>
                <p style={{ margin: '6px 0 0' }}>Toplanan e-posta adresiniz, açık rızanız veya yasal bir zorunluluk bulunmadığı sürece üçüncü kişilerle, reklam şirketleriyle veya iş ortaklarıyla kesinlikle paylaşılmaz. (Not: Web sitenizin e-posta sunucu altyapısının gerektirdiği standart teknolojik iletimler hariçtir.)</p>
              </div>
              <div>
                <strong style={{ color: P.slate900 }}>4. KVKK Kapsamındaki Haklarınız</strong>
                <p style={{ margin: '6px 0 0' }}>KVKK'nın 11. maddesi uyarınca; verilerinizin işlenip işlenmediğini öğrenme, işlenmişse bilgi talep etme, işlenme amacına uygun kullanılıp kullanılmadığını öğrenme, silinmesini veya yok edilmesini talep etme haklarına sahipsiniz. Bu konudaki taleplerinizi tusmentor@gmail.com adresine e-posta göndererek bize iletebilirsiniz.</p>
              </div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

function Footer() {
  const P = PALETTE;
  return (
    <footer style={{ background: '#fff', borderTop: `1px solid ${P.slate200}`, padding: '32px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center', justifyContent: 'space-between' }}>
        <LogoMark size={32} />
        <span style={{ fontSize: 13.5, color: P.slate500 }}>© 2026 TUS Mentor. Tüm hakları saklıdır.</span>
        <a href="#" style={{ color: P.blue, fontSize: 13.5, fontWeight: 600, textDecoration: 'none' }}>tusmentor.com</a>
      </div>
    </footer>
  );
}

/* Login modal — fake auth surface for the interactive demo. */
function LoginModal({ open, onClose }) {
  const P = PALETTE;
  if (!open) return null;
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(11,27,46,0.55)',
      backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center', padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: '#fff', borderRadius: 20, padding: 36, width: 380, maxWidth: '100%',
        boxShadow: '0 30px 60px -20px rgba(7,46,88,0.4)', position: 'relative' }}>
        <button onClick={onClose} aria-label="Kapat" style={{ position: 'absolute', top: 16, right: 16, border: 0, background: P.slate100,
          width: 30, height: 30, borderRadius: 8, cursor: 'pointer', color: P.slate500, fontSize: 15 }}>✕</button>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}><LogoMark size={36} /></div>
        <h3 style={{ textAlign: 'center', fontSize: 22, fontWeight: 800, margin: '0 0 6px', color: P.slate900, letterSpacing: '-0.02em' }}>Tekrar hoş geldin</h3>
        <p style={{ textAlign: 'center', fontSize: 14, color: P.slate500, margin: '0 0 24px' }}>Panele girmek için giriş yap.</p>
        <form onSubmit={(e) => { e.preventDefault(); onClose(); }}>
          {[['E-posta', 'ayse@email.com', 'email'], ['Şifre', '••••••••', 'password']].map(([l, ph, ty]) => (
            <div key={l} style={{ marginBottom: 14 }}>
              <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: P.slate700, marginBottom: 6 }}>{l}</label>
              <input type={ty} placeholder={ph} required style={{ width: '100%', boxSizing: 'border-box', border: `1px solid ${P.slate200}`,
                borderRadius: 10, padding: '12px 14px', fontSize: 14.5, fontFamily: 'inherit', outline: 'none', color: P.slate900 }} />
            </div>
          ))}
          <button type="submit" style={{ width: '100%', background: P.slate900, color: '#fff', border: 0, borderRadius: 10,
            padding: '13px', fontSize: 15, fontWeight: 700, fontFamily: 'inherit', cursor: 'pointer', marginTop: 6 }}>Giriş yap →</button>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { Contact, Footer, LoginModal });