// faq.jsx — Întrebări frecvente

const { useState: useStateF, useMemo: useMemoF } = React;

const FAQ_DATA = {
  inscriere: { label: 'Înscriere & Cerințe', ico: '📋', items: [
    { q: 'Câți bani trebuie să plătesc ca să fiu în 4U Agency?', a: 'Niciun ban. Înscrierea și colaborarea cu 4U Agency sunt 100% gratuite pentru creatori. Noi suntem plătiți de TikTok, nu de tine.' },
    { q: 'Care sunt cerințele minime pentru a mă înscrie?', a: 'Trebuie să ai minim 18 ani și să-ți dorești sincer să faci live pe TikTok. Dacă nu vrei să faci live, înscrierea în agenție nu are sens.' },
    { q: 'Cât durează procesul de înscriere?', a: 'Câteva minute. Procesul e rapid și complet online — nu trebuie să te deplasezi nicăieri.' },
    { q: 'Trebuie să am un cont TikTok cu un anumit număr de followers ca să mă înscriu?', a: 'Nu. Nu cerem un număr minim de followers. Avem nevoie doar să ai dorința reală de a face live și să fii implicat și dedicat — restul construim împreună.' },
  ]},
  castiguri: { label: 'Câștiguri & Plăți', ico: '💰', items: [
    { q: 'Câți bani pot face realist într-o lună?', a: 'Depinde de cât timp aloci, ce nișă alegi și cât de consistent ești. Folosește calculatorul de câștiguri din site pentru o estimare bazată pe datele reale ale creatorilor TikTok.' },
    { q: 'Cum și când sunt plătit?', a: 'Direct de TikTok, în contul tău bancar. Banii pe care îi câștigi din live nu trec prin 4U Agency — TikTok îți face transferul direct.' },
    { q: 'TikTok ia comision din câștigurile mele? Cât?', a: 'Da, TikTok reține un procent. Tu primești 53% din încasările live (dacă îți faci misiunile săptămânale), restul rămâne la TikTok.' },
    { q: '4U Agency ia comision din câștigurile mele?', a: 'Nu. Zero comision din câștigurile tale TikTok. Noi suntem plătiți separat de TikTok pentru rezultatele creatorilor noștri — tu primești integral cei 53% pe care ți-i datorează TikTok.' },
    { q: 'Cum primesc bonusurile lunare? Pe ce criterii?', a: 'Bonusurile sunt plătite lunar, începând cu data de 10 a fiecărei luni. Pentru a fi eligibil, trebuie să îndeplinești simultan în fiecare lună: minim 22 zile de live, minim 80 ore de live și minim 50.000 diamante.' },
  ]},
  beneficii: { label: 'Beneficii & Servicii', ico: '🎁', items: [
    { q: 'Ce primesc concret dacă sunt creator 4U?', a: 'Acces la module TikTok structurate, manager de cont dedicat, posibilitatea de a face live din studiourile noastre (București și Cluj), bonusuri lunare în diamante, comunitate de creatori și suport 24/7.' },
    { q: 'Pot folosi studiourile 4U gratuit?', a: 'Studiourile noastre nu sunt gratuite. Se aplică un procent din încasările de pe live. Procentul exact este confidențial și se discută individual, doar cu creatorii care sunt cu adevărat interesați.' },
    { q: 'Pot vorbi cu un manager dedicat?', a: 'Da. Imediat ce ești înscris în agenție, ți se alocă un manager de cont care te ghidează pas cu pas — de la primul live până la strategiile de creștere.' },
  ]},
  contract: { label: 'Contract & Reguli', ico: '📜', items: [
    { q: 'Trebuie să semnez un contract pe termen lung?', a: 'Nu există contract fizic. Totul se face online, pe baza unui link de invitație. Procesul e simplu, rapid și transparent.' },
    { q: 'Pot pleca oricând din agenție?', a: 'Da. La fel cum soliciți înscrierea, poți solicita oricând și ieșirea din agenție. Decizia nu depinde de noi — TikTok procesează automat cererea ta.' },
    { q: 'Ce reguli trebuie să respect ca creator 4U?', a: 'Doar regulile comunității impuse de TikTok. Noi nu adăugăm reguli suplimentare — îți respectăm libertatea creativă atâta timp cât rămâi în limitele platformei.' },
  ]},
  locatie: { label: 'Locație & Tehnic', ico: '🌍', items: [
    { q: 'Pot face live din alt oraș decât București/Cluj?', a: 'Da, poți face live de oriunde — de la tine de acasă sau din alt oraș. Acoperim creatori din 8 țări: România, Germania, Austria, Elveția, UK, Italia, Spania și MENA.' },
    { q: 'Ce echipament am nevoie ca să fac live de calitate?', a: 'Depinde de nivelul la care vrei să ajungi. Te poți descurca foarte bine cu un telefon performant, dar pentru un setup avansat ai nevoie de: laptop/calculator performant, cameră profesională + obiectiv, lumini, placă de sunet, microfon, placă de captură și trepied.' },
  ]},
};

function FaqPage({ onNav }) {
  const [active, setActive] = useStateF('inscriere');
  const [search, setSearch] = useStateF('');
  const [expanded, setExpanded] = useStateF(null);

  const filtered = useMemoF(() => {
    if (!search.trim()) {
      return { mode: 'cat', items: FAQ_DATA[active].items.map((it, i) => ({ ...it, _id: `${active}-${i}` })) };
    }
    const q = search.toLowerCase();
    const all = [];
    Object.entries(FAQ_DATA).forEach(([k, v]) => {
      v.items.forEach((it, i) => {
        if (it.q.toLowerCase().includes(q) || it.a.toLowerCase().includes(q)) {
          all.push({ ...it, _cat: v.label, _id: `${k}-${i}` });
        }
      });
    });
    return { mode: 'search', items: all };
  }, [active, search]);

  const onCategoryClick = (k) => {
    setActive(k);
    setSearch('');
    setExpanded(null);
  };
  const onToggle = (id) => setExpanded(prev => (prev === id ? null : id));

  return (
    <div className="page">
      <FaqHero search={search} setSearch={setSearch} onNav={onNav} />
      <section style={{ padding: '40px 0 100px' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 32 }} className="faq-grid">
            <aside className="faq-side">
              <div style={{ position: 'sticky', top: 100 }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.15em', marginBottom: 12 }}>CATEGORII</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  {Object.entries(FAQ_DATA).map(([k, v]) => (
                    <button key={k} onClick={() => onCategoryClick(k)} className="hov" style={{
                      display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
                      borderRadius: 10, border: '.5px solid', borderColor: active === k && !search ? 'rgba(82,242,15,.4)' : 'transparent',
                      background: active === k && !search ? 'rgba(82,242,15,.08)' : 'transparent',
                      color: active === k && !search ? 'var(--txt-0)' : 'var(--txt-2)',
                      cursor: 'pointer', textAlign: 'left', fontSize: 14, fontWeight: 500,
                      transition: 'all .2s',
                    }}>
                      <span style={{ fontSize: 18 }}>{v.ico}</span>
                      <span style={{ flex: 1 }}>{v.label}</span>
                      <span className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>{v.items.length}</span>
                    </button>
                  ))}
                </div>
              </div>
            </aside>
            <div>
              {search && (
                <div className="pill" style={{ marginBottom: 24, background: 'rgba(82,242,15,.06)', borderColor: 'rgba(82,242,15,.2)' }}>
                  <span className="mono" style={{ fontSize: 11 }}>🔍 Rezultate căutare: {filtered.items.length} {filtered.items.length === 1 ? 'întrebare' : 'întrebări'}</span>
                </div>
              )}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {filtered.items.length === 0 && (
                  <div className="card-glass" style={{ padding: 32, textAlign: 'center' }}>
                    <div style={{ fontSize: 36, marginBottom: 12 }}>🔍</div>
                    <div className="display" style={{ fontSize: 18, marginBottom: 6 }}>Niciun rezultat</div>
                    <div style={{ color: 'var(--txt-2)', fontSize: 13 }}>Încearcă alți termeni sau contactează-ne direct.</div>
                  </div>
                )}
                {filtered.items.map(it => (
                  <Accordion key={it._id} q={it.q} a={it.a} cat={it._cat} open={expanded === it._id} onToggle={() => onToggle(it._id)} />
                ))}
              </div>
              <Reveal delay={200}>
                <div className="card-glass" style={{ padding: 32, marginTop: 32, textAlign: 'center', background: 'linear-gradient(135deg, rgba(82,242,15,.10), rgba(255,215,0,.05))', border: '.5px solid rgba(82,242,15,.25)' }}>
                  <h3 className="display" style={{ fontSize: 24, margin: '0 0 8px' }}>Nu ți-am răspuns la întrebare?</h3>
                  <p style={{ color: 'var(--txt-2)', fontSize: 14, marginBottom: 20 }}>Echipa 4U răspunde personal în maxim 24h.</p>
                  <button className="btn btn-primary" onClick={() => onNav('contact')}>Contactează-ne →</button>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr !important; } .faq-side > div { position: static !important; } }
        `}</style>
      </section>
    </div>
  );
}

function FaqHero({ search, setSearch, onNav }) {
  return (
    <section style={{ minHeight: '40vh', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', paddingTop: 120, paddingBottom: 40 }}>
      <Mesh />
      <Particles count={30} />
      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.05em' }}>FAQ</span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 6.5vw, 92px)', margin: 0 }}>
            Întrebări <span style={{ background: 'linear-gradient(135deg, var(--accent-1), var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>frecvente</span>.
          </h1>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ fontSize: 'clamp(17px, 1.3vw, 20px)', color: 'var(--txt-2)', marginTop: 20, maxWidth: 680, lineHeight: 1.55 }}>
            Răspunsuri la cele mai comune întrebări despre 4U Agency.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ marginTop: 24 }}><BackButton onNav={onNav} /></div>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ position: 'relative', maxWidth: 560, marginTop: 32 }}>
            <input className="input" type="text" value={search} onChange={e => setSearch(e.target.value)} placeholder="Caută o întrebare…" style={{ height: 56, paddingLeft: 52, fontSize: 15 }} />
            <span style={{ position: 'absolute', left: 18, top: '50%', transform: 'translateY(-50%)', color: 'var(--txt-3)', fontSize: 18 }}>🔍</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Accordion({ q, a, cat, open, onToggle }) {
  return (
    <div className="card" style={{ padding: 0, transition: 'all .25s', borderColor: open ? 'rgba(82,242,15,.3)' : 'var(--line)' }}>
      <button onClick={onToggle} className="hov" style={{
        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 24px', background: 'transparent', border: 0, color: 'var(--txt-0)',
        cursor: 'pointer', textAlign: 'left', gap: 16,
      }}>
        <span style={{ fontSize: 15, fontWeight: 500, flex: 1 }}>
          {cat && <span className="mono" style={{ fontSize: 10, color: 'var(--accent-1)', marginRight: 12, letterSpacing: '0.1em' }}>{cat.toUpperCase()}</span>}
          {q}
        </span>
        <span style={{ width: 28, height: 28, borderRadius: 999, background: 'rgba(82,242,15,.10)', border: '.5px solid rgba(82,242,15,.3)', display: 'grid', placeItems: 'center', color: 'var(--accent-1)', fontSize: 12, transform: open ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform .25s', flexShrink: 0 }}>▾</span>
      </button>
      <div style={{ maxHeight: open ? 600 : 0, overflow: 'hidden', transition: 'max-height .35s ease' }}>
        <div style={{ padding: '0 24px 20px', color: 'var(--txt-2)', fontSize: 14, lineHeight: 1.65 }}>{a}</div>
      </div>
    </div>
  );
}

window.FaqPage = FaqPage;
