// pg-lower.jsx — Gallery, Submit form, SEO, Footer — Coral/Purple Glassmorphism

const { useState: useSt, useRef: useRf } = React;

/* ─── GALLERY SECTION ─── */
function GallerySection({ filteredPrompts, onModelSelect, onCategorySelect, darkMode }) {
  return (
    <section style={{ maxWidth: 1400, margin: '0 auto', padding: '20px 24px 60px' }}>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
        marginBottom: 28, flexWrap: 'wrap', gap: 8,
      }}>
        <h2 style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 'clamp(20px, 3vw, 26px)', fontWeight: 700,
          color: 'var(--text-primary)', margin: 0, letterSpacing: -0.5,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <MI name="grid_view" sz={24} color="var(--coral)" />
          {filteredPrompts.length} ta prompt topildi
        </h2>
        <p style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 14, color: 'var(--text-muted)', margin: 0, fontWeight: 500,
        }}>
          Bir bosishda nusxalang va AI da sinab ko'ring
        </p>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(340px, 1fr))',
        gap: 24,
      }}>
        {filteredPrompts.map((p, i) => (
          <PromptCard key={p.id} prompt={p} index={i}
            onModelClick={onModelSelect}
            onCategoryClick={onCategorySelect}
            darkMode={darkMode} />
        ))}
      </div>

      {filteredPrompts.length === 0 && (
        <div style={{
          textAlign: 'center', padding: '80px 20px',
          fontFamily: "'Plus Jakarta Sans', sans-serif",
        }}>
          <MI name="search_off" sz={56} color="var(--text-muted)" />
          <h3 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text-primary)', margin: '16px 0 8px' }}>
            Hech narsa topilmadi
          </h3>
          <p style={{ fontSize: 14, color: 'var(--text-muted)' }}>
            Filterlarni o'zgartirib ko'ring
          </p>
        </div>
      )}
    </section>
  );
}


/* ─── SUBMIT FORM ─── */
function SubmitPromptForm({ formRef }) {
  const [form, setForm] = useSt({
    name: '', phone: '', prompt: '', result: '',
    category: '', model: '',
  });
  const [submitted, setSubmitted] = useSt(false);
  const [errors, setErrors] = useSt({});

  const handlePhone = (val) => {
    let d = val.replace(/\D/g, '');
    if (d.startsWith('998')) d = d.slice(3);
    if (d.length > 9) d = d.slice(0, 9);
    let f = '+998';
    if (d.length > 0) f += ' ' + d.slice(0, 2);
    if (d.length > 2) f += ' ' + d.slice(2, 5);
    if (d.length > 5) f += ' ' + d.slice(5, 7);
    if (d.length > 7) f += ' ' + d.slice(7, 9);
    setForm(prev => ({ ...prev, phone: f }));
  };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = "Ismingizni kiriting";
    if (form.phone.replace(/\D/g, '').length < 12) e.phone = "To'liq telefon raqam kiriting";
    if (!form.prompt.trim()) e.prompt = "Prompt namunasini kiriting";
    if (!form.result.trim()) e.result = "Natijani yozing";
    if (!form.category) e.category = "Bo'limni tanlang";
    if (!form.model) e.model = "Modelni tanlang";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const handleSubmit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSubmitted(true);
    if (window.__showToast) window.__showToast("Prompt muvaffaqiyatli yuborildi!");
    setTimeout(() => {
      setSubmitted(false);
      setForm({ name: '', phone: '', prompt: '', result: '', category: '', model: '' });
    }, 3000);
  };

  const inputStyle = (err) => ({
    width: '100%', padding: '13px 16px', borderRadius: 14,
    border: `1.5px solid ${err ? '#ef4444' : 'var(--glass-border)'}`,
    background: 'var(--glass-bg)',
    backdropFilter: 'blur(10px)',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 14, color: 'var(--text-primary)',
    outline: 'none', transition: 'all 0.25s',
    boxSizing: 'border-box',
  });

  const labelStyle = {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 13, fontWeight: 600, color: 'var(--text-primary)',
    marginBottom: 6, display: 'flex', alignItems: 'center', gap: 5,
  };

  const errStyle = {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 11.5, color: '#ef4444', marginTop: 4, fontWeight: 500,
  };

  const cats = CATEGORIES.filter(c => c.id !== 'all');
  const models = MODELS.filter(m => m.id !== 'all');

  return (
    <section ref={formRef} id="submit-form" style={{
      maxWidth: 1400, margin: '0 auto', padding: '60px 24px 80px',
    }}>
      <div style={{
        background: 'var(--glass-bg)',
        backdropFilter: 'var(--glass-blur)', WebkitBackdropFilter: 'var(--glass-blur)',
        borderRadius: 28, padding: 'clamp(24px, 4vw, 48px)',
        border: '1px solid var(--glass-border)',
        boxShadow: '0 12px 48px rgba(255,94,58,0.06)',
        maxWidth: 800, margin: '0 auto',
      }}>
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 60, height: 60, borderRadius: 18, marginBottom: 16,
            background: 'var(--gradient-soft)',
            border: '1px solid rgba(255,94,58,0.1)',
          }}>
            <MI name="lightbulb" sz={30} color="var(--coral)" />
          </div>
          <h2 style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 'clamp(22px, 3vw, 30px)', fontWeight: 800,
            color: 'var(--text-primary)', margin: '0 0 8px',
            letterSpacing: -0.5,
          }}>Prompt qo'shish</h2>
          <p style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 14, color: 'var(--text-secondary)', margin: 0,
          }}>O'zingizning samarali promptingizni jamiyat bilan baham ko'ring</p>
        </div>

        {submitted ? (
          <div style={{
            textAlign: 'center', padding: '40px 20px',
            fontFamily: "'Plus Jakarta Sans', sans-serif",
          }}>
            <MI name="celebration" sz={56} color="var(--coral)" />
            <h3 style={{ fontSize: 22, fontWeight: 700, color: '#059669', margin: '16px 0 8px' }}>
              Rahmat!
            </h3>
            <p style={{ fontSize: 15, color: 'var(--text-secondary)' }}>
              Sizning promptingiz moderatsiyadan o'tgach, galereyaga qo'shiladi.
            </p>
          </div>
        ) : (
          <form onSubmit={handleSubmit}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 20 }}>
              <div>
                <label style={labelStyle}><MI name="person" sz={16} color="var(--text-muted)" /> Ism *</label>
                <input style={inputStyle(errors.name)} placeholder="Ismingiz"
                  value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} />
                {errors.name && <div style={errStyle}>{errors.name}</div>}
              </div>
              <div>
                <label style={labelStyle}><MI name="phone" sz={16} color="var(--text-muted)" /> Telefon raqam *</label>
                <input style={inputStyle(errors.phone)} placeholder="+998 XX XXX XX XX"
                  value={form.phone} onChange={e => handlePhone(e.target.value)} />
                {errors.phone && <div style={errStyle}>{errors.phone}</div>}
              </div>
            </div>

            <div style={{ marginTop: 20 }}>
              <label style={labelStyle}><MI name="edit_note" sz={16} color="var(--text-muted)" /> Prompt namunasi *</label>
              <textarea style={{ ...inputStyle(errors.prompt), minHeight: 100, resize: 'vertical' }}
                placeholder="Sizning prompt matniningiz..."
                value={form.prompt} onChange={e => setForm(f => ({ ...f, prompt: e.target.value }))} />
              {errors.prompt && <div style={errStyle}>{errors.prompt}</div>}
            </div>

            <div style={{ marginTop: 20 }}>
              <label style={labelStyle}><MI name="target" sz={16} color="var(--text-muted)" /> Natijasi — nima uchun ishlatiladi? *</label>
              <textarea style={{ ...inputStyle(errors.result), minHeight: 70, resize: 'vertical' }}
                placeholder="Bu prompt qanday natija beradi..."
                value={form.result} onChange={e => setForm(f => ({ ...f, result: e.target.value }))} />
              {errors.result && <div style={errStyle}>{errors.result}</div>}
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: 20, marginTop: 20 }}>
              <div>
                <label style={labelStyle}><MI name="category" sz={16} color="var(--text-muted)" /> Bo'lim *</label>
                <select style={{ ...inputStyle(errors.category), cursor: 'pointer',
                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")`,
                  backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center',
                }}
                  value={form.category} onChange={e => setForm(f => ({ ...f, category: e.target.value }))}>
                  <option value="">Bo'limni tanlang</option>
                  {cats.map(c => <option key={c.id} value={c.id}>{c.icon} {c.name}</option>)}
                </select>
                {errors.category && <div style={errStyle}>{errors.category}</div>}
              </div>
              <div>
                <label style={labelStyle}><MI name="smart_toy" sz={16} color="var(--text-muted)" /> AI modeli *</label>
                <select style={{ ...inputStyle(errors.model), cursor: 'pointer',
                  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E")`,
                  backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center',
                }}
                  value={form.model} onChange={e => setForm(f => ({ ...f, model: e.target.value }))}>
                  <option value="">Modelni tanlang</option>
                  <option value="all">Hammasi (random)</option>
                  {models.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
                </select>
                {errors.model && <div style={errStyle}>{errors.model}</div>}
              </div>
            </div>

            <button type="submit" style={{
              marginTop: 28, width: '100%',
              padding: '15px 32px', borderRadius: 16, border: 'none',
              background: 'var(--gradient-main)',
              color: '#fff', cursor: 'pointer',
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 15, fontWeight: 700,
              boxShadow: '0 6px 24px rgba(255,94,58,0.3)',
              transition: 'all 0.3s',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}
              onMouseOver={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 32px rgba(255,94,58,0.35)'; }}
              onMouseOut={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 6px 24px rgba(255,94,58,0.3)'; }}>
              <MI name="send" sz={20} color="#fff" />
              Promptni yuborish
            </button>
          </form>
        )}
      </div>
    </section>
  );
}


/* ─── SEO SECTION ─── */
function SEOSection() {
  return (
    <section style={{ maxWidth: 1400, margin: '0 auto', padding: '0 24px 80px' }}>
      <div style={{
        background: 'var(--glass-bg)',
        backdropFilter: 'var(--glass-blur)',
        borderRadius: 24, padding: 'clamp(24px, 4vw, 48px)',
        border: '1px solid var(--glass-border)',
      }}>
        <h2 style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 'clamp(18px, 2.5vw, 24px)', fontWeight: 700,
          color: 'var(--text-primary)', margin: '0 0 20px',
          letterSpacing: -0.3, display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <MI name="info" sz={24} color="var(--coral)" />
          Prompt Gallery — O'zbekistondagi eng katta prompt kutubxonasi
        </h2>
        <div style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 14.5, lineHeight: 1.8, color: 'var(--text-secondary)',
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <p style={{ margin: 0 }}>
            Prompt Gallery — bu sun'iy intellekt (AI) bilan ishlash uchun maxsus tayyorlangan promptlar to'plami.
            Bizning maqsadimiz O'zbekistondagi mutaxassislar, talabalar va tadbirkorlarga AI vositalaridan
            samarali foydalanishni osonlashtirish. Har bir prompt sinab ko'rilgan va amaliy natija beradi.
          </p>
          <p style={{ margin: 0 }}>
            ChatGPT o'zbek tilidagi promptlardan tortib, Claude, Gemini va boshqa zamonaviy modellar uchun
            optimallashtirilgan ko'rsatmalargacha — barchasi bir joyda. Marketing, dasturlash, biznes-reja tuzish,
            SEO, ta'lim va boshqa ko'plab sohalarda tayyor AI promptlar sizni kutmoqda.
          </p>
          <p style={{ margin: 0 }}>
            Tizimli prompt to'plami yordamida siz AI vositalaridan ancha samarali natijalar olasiz.
            Professional promptlar vaqtingizni tejaydi, ish sifatini oshiradi va sun'iy intellektning
            to'liq imkoniyatlaridan foydalanish imkonini beradi. Prompt Gallery — sizning AI yordamchingiz!
          </p>
        </div>
      </div>
    </section>
  );
}


/* ─── FOOTER ─── */
function SiteFooter() {
  const catLinks = CATEGORIES.filter(c => c.id !== 'all').slice(0, 10);
  const modelLinks = MODELS.filter(m => m.id !== 'all').slice(0, 6);

  const linkStyle = {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 13.5, color: 'rgba(255,255,255,0.65)', textDecoration: 'none',
    transition: 'color 0.2s', display: 'block', padding: '3px 0', cursor: 'pointer',
  };

  const headingStyle = {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 14, fontWeight: 700, color: '#fff',
    marginBottom: 16, letterSpacing: -0.2,
  };

  return (
    <footer style={{
      background: 'linear-gradient(180deg, #1a1a2e 0%, #141425 100%)',
      padding: '64px 24px 0',
      borderTop: '1px solid rgba(255,255,255,0.05)',
    }}>
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: '40px 32px', paddingBottom: 48,
        borderBottom: '1px solid rgba(255,255,255,0.06)',
      }}>
        {/* Brand */}
        <div>
          <div style={{ marginBottom: 16 }}>
            <span style={{
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 20, fontWeight: 700, color: '#fff',
              letterSpacing: -0.3,
            }}>
              <span style={{ color: '#8B5CF6' }}>Prompt</span>{' '}Gallery
            </span>
          </div>
          <p style={{
            fontFamily: "'Plus Jakarta Sans', sans-serif",
            fontSize: 13.5, color: 'rgba(255,255,255,0.5)',
            lineHeight: 1.7, margin: '0 0 20px', maxWidth: 280,
          }}>
            O'zbekistondagi eng katta AI promptlar kutubxonasi.
            Professional promptlar bilan AI dan maksimal foyda oling.
          </p>
          <div style={{ display: 'flex', gap: 10 }}>
            {[{ n: 'Telegram', i: 'send' }, { n: 'Instagram', i: 'photo_camera' }, { n: 'YouTube', i: 'play_arrow' }].map(s => (
              <a key={s.n} href="#" style={{
                width: 38, height: 38, borderRadius: 10,
                background: 'rgba(255,255,255,0.06)',
                border: '1px solid rgba(255,255,255,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                textDecoration: 'none', transition: 'all 0.2s',
              }}
                onMouseOver={e => e.currentTarget.style.background = 'rgba(255,94,58,0.15)'}
                onMouseOut={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}>
                <MI name={s.i} sz={18} color="rgba(255,255,255,0.7)" />
              </a>
            ))}
          </div>
        </div>

        {/* Categories */}
        <div>
          <h4 style={headingStyle}>Sohalar</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {catLinks.map(c => (
              <a key={c.id} href={`/${c.slug}`} style={linkStyle}
                onMouseOver={e => e.currentTarget.style.color = '#fff'}
                onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.65)'}>
                {c.icon} {c.name}
              </a>
            ))}
          </div>
        </div>

        {/* Models */}
        <div>
          <h4 style={headingStyle}>AI Modellar</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {modelLinks.map(m => (
              <a key={m.id} href={`/${m.slug}`} style={linkStyle}
                onMouseOver={e => e.currentTarget.style.color = '#fff'}
                onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.65)'}>
                {m.name}
              </a>
            ))}
          </div>
        </div>

        {/* Pages */}
        <div>
          <h4 style={headingStyle}>Sahifalar</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {['Bosh sahifa', 'Prompt School', 'Blog', "Prompt qo'shish", 'Biz haqimizda'].map(t => (
              <a key={t} href="#" style={linkStyle}
                onMouseOver={e => e.currentTarget.style.color = '#fff'}
                onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.65)'}>
                {t}
              </a>
            ))}
          </div>
        </div>

        {/* Contact */}
        <div>
          <h4 style={headingStyle}>Bog'lanish</h4>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <a href="mailto:info@promptgallery.uz" style={{ ...linkStyle, display: 'flex', alignItems: 'center', gap: 6 }}
              onMouseOver={e => e.currentTarget.style.color = '#fff'}
              onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.65)'}>
              <MI name="mail" sz={16} color="rgba(255,255,255,0.5)" />
              info@promptgallery.uz
            </a>
            <a href="https://t.me/promptgallery" style={{ ...linkStyle, display: 'flex', alignItems: 'center', gap: 6 }}
              onMouseOver={e => e.currentTarget.style.color = '#fff'}
              onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.65)'}>
              <MI name="send" sz={16} color="rgba(255,255,255,0.5)" />
              @promptgallery
            </a>
            <span style={{ ...linkStyle, cursor: 'default', display: 'flex', alignItems: 'center', gap: 6 }}>
              <MI name="location_on" sz={16} color="rgba(255,255,255,0.5)" />
              Toshkent, O'zbekiston
            </span>
          </div>
        </div>
      </div>

      {/* Bottom bar */}
      <div style={{
        maxWidth: 1400, margin: '0 auto',
        padding: '24px 0',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 12,
      }}>
        <p style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 12.5, color: 'rgba(255,255,255,0.35)', margin: 0,
        }}>
          © 2024-2026 Prompt Gallery. Barcha huquqlar himoyalangan.
        </p>
        <div style={{ display: 'flex', gap: 20 }}>
          {['Maxfiylik siyosati', "Foydalanish shartlari"].map(t => (
            <a key={t} href="#" style={{
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 12.5, color: 'rgba(255,255,255,0.35)',
              textDecoration: 'none', transition: 'color 0.2s',
            }}
              onMouseOver={e => e.currentTarget.style.color = 'rgba(255,255,255,0.6)'}
              onMouseOut={e => e.currentTarget.style.color = 'rgba(255,255,255,0.35)'}>
              {t}
            </a>
          ))}
        </div>
      </div>
    </footer>
  );
}

/* ─── FAQ SECTION ─── */
function FAQSection() {
  const faqs = [
    {
      q: "Prompt Gallery nima?",
      a: "Prompt Gallery — bu sun'iy intellekt (AI) modellari uchun maxsus tayyorlangan promptlar kutubxonasi. Bu yerda ChatGPT, Claude, Gemini va boshqa AI modellar uchun sinab ko'rilgan, professional darajadagi promptlarni topishingiz mumkin."
    },
    {
      q: "Promptlardan qanday foydalanaman?",
      a: "Har bir prompt kartasidagi \"Nusxalash\" tugmasini bosing — prompt avtomatik buferingizga ko'chiriladi. Keyin tegishli AI modeliga o'ting va promptni qo'ying. Yoki \"Sinab ko'rish\" tugmasini bosib to'g'ridan-to'g'ri AI modeliga o'ting."
    },
    {
      q: "Promptlar bepulmi?",
      a: "Ha, barcha promptlar bepul va ochiq foydalanish uchun. Siz istalgan promptni nusxalab, o'z ehtiyojlaringizga moslashtirib ishlatishingiz mumkin. Biz hamjamiyat uchun bepul resurs yaratishga intilamiz."
    },
    {
      q: "O'z promptimni qanday qo'shaman?",
      a: "Sahifadagi \"Prompt qo'shish\" tugmasini bosing yoki pastdagi formani to'ldiring. Ismingiz, kontakt ma'lumotlaringiz, prompt matni va natijasini kiriting. Moderatsiyadan o'tgach, sizning promptingiz galereyaga qo'shiladi."
    },
    {
      q: "Qaysi AI modellarini qo'llab-quvvatlaysiz?",
      a: "Biz ChatGPT, Claude, Gemini, Midjourney, DALL·E, Stable Diffusion, Copilot, Perplexity, Llama, Mistral va Grok modellarini qo'llab-quvvatlaymiz. Har bir prompt qaysi modelga mosligini ko'rsatib beradi."
    },
    {
      q: "Promptlar qaysi sohalarda mavjud?",
      a: "Marketing, dasturlash, kontent yozish, biznes, ta'lim, dizayn, SEO, ijtimoiy tarmoqlar, moliya, sog'liq, huquq, HR, mahsulot boshqaruvi, ma'lumotlar tahlili va boshqa ko'plab sohalarda tayyor promptlar mavjud."
    },
    {
      q: "Prompt School nima?",
      a: "Prompt School — bu AI bilan samarali ishlashni o'rgatuvchi bepul ta'lim bo'limi. U yerda prompt yozish san'ati, AI modellarining farqlari va professional prompt engineering bo'yicha qo'llanmalar mavjud."
    },
    {
      q: "Promptlarni o'zbek tilida ishlatsa bo'ladimi?",
      a: "Ha, aksariyat zamonaviy AI modellari o'zbek tilini tushunadi. Siz promptlarni ingliz tilida berganingizda ham natijani o'zbek tilida so'rashingiz mumkin. Ba'zi promptlarimiz to'g'ridan-to'g'ri o'zbek tilida tayyorlangan."
    },
  ];

  return (
    <section style={{ maxWidth: 1400, margin: '0 auto', padding: '0 24px 80px' }}>
      <div style={{ textAlign: 'center', marginBottom: 40 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          width: 56, height: 56, borderRadius: 16, marginBottom: 16,
          background: 'var(--gradient-soft)',
          border: '1px solid rgba(99,102,241,0.1)',
        }}>
          <MI name="help" sz={28} color="#6366F1" />
        </div>
        <h2 style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 'clamp(22px, 3vw, 32px)', fontWeight: 800,
          color: 'var(--text-primary)', margin: '0 0 8px',
          letterSpacing: -0.5,
        }}>Ko'p beriladigan savollar</h2>
        <p style={{
          fontFamily: "'Plus Jakarta Sans', sans-serif",
          fontSize: 15, color: 'var(--text-secondary)', margin: 0,
        }}>Prompt Gallery haqida eng ko'p so'raladigan savollar</p>
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
        gap: 20, maxWidth: 1000, margin: '0 auto',
      }}>
        {faqs.map((faq, i) => (
          <div key={i} style={{
            background: 'var(--glass-bg)',
            backdropFilter: 'var(--glass-blur)', WebkitBackdropFilter: 'var(--glass-blur)',
            borderRadius: 20, padding: '24px 28px',
            border: '1px solid var(--glass-border)',
            boxShadow: '0 4px 20px rgba(0,0,0,0.03)',
            transition: 'all 0.3s',
          }}>
            <h4 style={{
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 15, fontWeight: 700, color: 'var(--text-primary)',
              margin: '0 0 10px', lineHeight: 1.4,
              display: 'flex', alignItems: 'flex-start', gap: 8,
            }}>
              <MI name="quiz" sz={20} color="#6366F1" style={{ flexShrink: 0, marginTop: 1 }} />
              {faq.q}
            </h4>
            <p style={{
              fontFamily: "'Plus Jakarta Sans', sans-serif",
              fontSize: 13.5, color: 'var(--text-secondary)',
              margin: 0, lineHeight: 1.7, paddingLeft: 28,
            }}>
              {faq.a}
            </p>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { GallerySection, SubmitPromptForm, SEOSection, FAQSection, SiteFooter });