// Hazırlayanlar / Credits + Geri Bildirim sayfası
function CreditsPage() {
  const t = window.t;
  const isEn = window.LANG === 'en';
  const user = (window.APP_DATA && window.APP_DATA.user) || {};

  const [category, setCategory] = useState('general');
  const [subject, setSubject] = useState('');
  const [message, setMessage] = useState('');
  const [sending, setSending] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (message.trim().length < 10) {
      setError(isEn ? 'Message must be at least 10 characters' : 'Mesaj en az 10 karakter olmalı');
      return;
    }
    setSending(true);
    setError('');
    try {
      const res = await fetch('api/feedback', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-Lang': window.LANG || 'tr' },
        credentials: 'same-origin',
        body: JSON.stringify({
          category,
          subject: subject.trim() || null,
          message: message.trim(),
          pageUrl: location.href,
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || t('iletisim.error_generic'));
        setSending(false);
        return;
      }
      setSent(true);
    } catch (err) {
      setError(t('app.connection_error'));
      setSending(false);
    }
  };

  const socialBtnStyle = (bg) => ({
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    padding: '10px 16px',
    borderRadius: 10,
    background: bg,
    color: '#fff',
    fontWeight: 600,
    fontSize: 14,
    textDecoration: 'none',
    transition: 'transform 0.15s, box-shadow 0.15s',
    boxShadow: 'var(--shadow-sm)',
  });

  const inputStyle = {
    width: '100%',
    padding: '10px 12px',
    borderRadius: 10,
    border: '1.5px solid var(--line-strong)',
    fontFamily: 'inherit',
    fontSize: 14,
    background: 'var(--bg)',
    color: 'var(--ink)',
    outline: 'none',
  };

  return (
    <div className="page fade-up" style={{ maxWidth: 720 }}>
      <div className="page-header">
        <div className="kicker">{t('credits.kicker')}</div>
        <h1 className="page-title">{t('credits.title')}</h1>
      </div>

      <div className="card" style={{
        padding: 36,
        display: 'flex',
        flexDirection: 'column',
        gap: 24,
        background: 'linear-gradient(135deg, var(--lavender-soft) 0%, transparent 70%)',
        border: '1px solid var(--line)',
        marginBottom: 24,
      }}>
        <div className="row" style={{ gap: 18, alignItems: 'center' }}>
          <img
            src="images/ruhat.jpg"
            alt={t('credits.author_name')}
            style={{
              width: 84, height: 84, borderRadius: 20,
              objectFit: 'cover',
              boxShadow: 'var(--shadow-md)',
              flexShrink: 0,
              display: 'block',
              border: '2px solid var(--bg-elevated)',
            }}
          />
          <div>
            <div style={{ fontSize: 22, fontWeight: 700, fontFamily: 'var(--font-display)', letterSpacing: '-0.02em' }}>
              {t('credits.author_name')}
            </div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
              {t('credits.author_role').toUpperCase()}
            </div>
          </div>
        </div>

        <p style={{
          fontSize: 17,
          lineHeight: 1.6,
          color: 'var(--ink-2)',
          fontFamily: 'var(--font-display)',
          fontWeight: 500,
          margin: 0,
        }}>
          {t('credits.body')}
        </p>

        <div>
          <div className="kicker" style={{ marginBottom: 12 }}>{t('credits.connect')}</div>
          <div className="row" style={{ gap: 10, flexWrap: 'wrap' }}>
            <a
              href="https://www.linkedin.com/in/ruhatcansecereli/"
              target="_blank"
              rel="noopener noreferrer"
              style={socialBtnStyle('#0A66C2')}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zm1.78 13.02H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z"/></svg>
              LinkedIn
            </a>
            <a
              href="https://instagram.com/ruhatcansecereli"
              target="_blank"
              rel="noopener noreferrer"
              style={socialBtnStyle('linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%)')}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-md)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'var(--shadow-sm)'; }}
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.86 5.86 0 0 0-2.13 1.38A5.86 5.86 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.79.73 1.46 1.38 2.13a5.86 5.86 0 0 0 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 0 0 2.13-1.38 5.86 5.86 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 0 0-1.38-2.13A5.86 5.86 0 0 0 19.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.4-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>
              Instagram
            </a>
          </div>
        </div>

        <p style={{
          fontSize: 14,
          lineHeight: 1.6,
          color: 'var(--ink-3)',
          margin: 0,
          paddingTop: 8,
          borderTop: '1px dashed var(--line)',
        }}>
          {t('credits.note')}
        </p>
      </div>

      {/* Geri bildirim formu */}
      <div className="card" style={{ padding: 28 }}>
        <div className="kicker" style={{ marginBottom: 6 }}>{t('nav.feedback').toUpperCase()}</div>
        <h2 style={{ fontSize: 22, fontFamily: 'var(--font-display)', letterSpacing: '-0.02em', margin: '0 0 8px' }}>
          {t('feedback.title')}
        </h2>
        <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.5, margin: '0 0 18px' }}>
          {t('feedback.lede')}
          {user && user.email && <> <span style={{ color: 'var(--ink-3)' }}>· {t('feedback.your_info')}</span></>}
        </p>

        {sent ? (
          <div className="fade-up" style={{
            padding: 20,
            background: 'var(--moss-soft)',
            borderRadius: 12,
            border: '1.5px solid var(--moss)',
            color: '#2a4a2c',
          }}>
            <div style={{ fontSize: 32, marginBottom: 6 }}>✓</div>
            <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 4 }}>{t('iletisim.success_title')}</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.55 }}>{t('iletisim.success_body')}</div>
          </div>
        ) : (
          <form onSubmit={submit}>
            {error && (
              <div style={{
                padding: '10px 14px',
                background: 'var(--coral-soft)',
                color: '#8a2a18',
                borderRadius: 10,
                fontSize: 13,
                marginBottom: 14,
              }}>{error}</div>
            )}

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>{t('iletisim.category_label')}</span>
                <select value={category} onChange={e => setCategory(e.target.value)} style={inputStyle}>
                  <option value="general">{t('iletisim.cat_general')}</option>
                  <option value="bug">{t('iletisim.cat_bug')}</option>
                  <option value="suggestion">{t('iletisim.cat_suggestion')}</option>
                  <option value="content">{t('iletisim.cat_content')}</option>
                  <option value="kvkk">{t('iletisim.cat_kvkk')}</option>
                  <option value="other">{t('iletisim.cat_other')}</option>
                </select>
              </label>
              <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>{t('iletisim.subject_label')}</span>
                <input type="text" value={subject} onChange={e => setSubject(e.target.value)} maxLength={200} style={inputStyle} />
              </label>
            </div>

            <label style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>{t('iletisim.message_label')}</span>
              <textarea
                value={message}
                onChange={e => setMessage(e.target.value)}
                required
                minLength={10}
                maxLength={4000}
                rows={5}
                style={{ ...inputStyle, minHeight: 120, resize: 'vertical', lineHeight: 1.5 }}
              />
              <div style={{ textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
                {message.length} / 4000
              </div>
            </label>

            <button type="submit" className="btn btn-primary" disabled={sending} style={{ minWidth: 140, justifyContent: 'center' }}>
              {sending ? t('iletisim.sending') : t('iletisim.submit')}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

window.CreditsPage = CreditsPage;