// faq.jsx — FAQ
const { useEffect } = React;

function useScrollReveal() {
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); }
      });
    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
    document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);
}

function PageHeader() {
  return (
    <header className="page-hd">
      <div className="wrap">
        <div className="crumb"><a href="index.html">become.promo</a> / <span style={{color:'var(--neon)'}}>FAQ</span></div>
        <h1>Pitanja koja<br/>ljudi stvarno<br/><span className="neon">pitaju</span>.</h1>
        <p className="lede">Odgovori za potrošače i brandove. Ne vidiš odgovor? Piši nam na WhatsApp.</p>
      </div>
    </header>
  );
}

function FaqPotrosaci() {
  const items = [
    { q: 'Što je become.promo?', a: 'become.promo je platforma koja spaja potrošače i FMCG brandove kroz WhatsApp kampanje. Potrošači šalju selfie, dobivaju personaliziranu brand karikaturu i mogu napredovati kroz statuse slanjem računa i pozivanjem prijatelja.' },
    { q: 'Je li sudjelovanje besplatno?', a: 'Da, sudjelovanje je potpuno besplatno za potrošače. Kampanje financiraju brandovi. Ti ne plaćaš ništa, a možeš dobiti nagrade, statuse i brand vizuale.' },
    { q: 'Kako se prijaviti?', a: 'Prijavi se na WhatsApp listu na stranici Aktivne kampanje. Kada se otvori kampanja za tvoju zemlju i kategoriju, dobit ćeš WhatsApp poruku s uputama za ulazak u flow.' },
    { q: 'Što je brand karikatura?', a: 'Brand karikatura je personalizirani vizual napravljen od tvog selfija — s brand elementima, tvojim imenom ili statusom. Svaki sudionik dobiva vlastiti vizual koji može koristiti kao profilnu sliku ili dijeliti na storyu.' },
    { q: 'Kako funkcionira slanje računa?', a: 'Kupnji brand proizvoda — u bilo kojoj trgovini — fotografi račun i pošalji ga kroz WhatsApp flow. Validacija je automatska. Račun otključava Buyer status i može donijeti dodatne nagrade.' },
    { q: 'Što je Ambassador Club?', a: 'Ambassador Club je razina za najaktivnije sudionike s Verified Ambassador statusom. Mogu dobiti fizičke nagrade, biti pozvani na sampling novih proizvoda i ulaziti u ekskluzivne brand programe.' },
    { q: 'Mogu li sudjelovati u više kampanja?', a: 'Da. Svaka kampanja je vezana uz specifičan brand. Možeš sudjelovati u više kampanja različitih brandova istovremeno.' },
    { q: 'Kako se briše moj profil i podaci?', a: 'U bilo kojem trenutku možeš zatražiti brisanje svojih podataka. Pošalji zahtjev na kontakt@become.promo ili putem WhatsApp podrške. Podatke brišemo unutar 30 dana sukladno GDPR-u.' },
  ];
  return (
    <section id="potrosaci" style={{paddingTop:48}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Za potrošače</span>
          <div>
            <h2 className="sec-title">Pitanja <span className="neon">potrošača</span>.</h2>
            <p className="sec-lede">Sve što trebaš znati o sudjelovanju, karikaturama, računima i nagradama.</p>
          </div>
        </div>
        <div className="faq reveal">
          {items.map((it, i) => (
            <details key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="plus" aria-hidden="true">+</span>
              </summary>
              <div className="ans">{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function FaqBrandovi() {
  const items = [
    { q: 'Što je 500 EUR Pilot?', a: '500 EUR Pilot je ulazni paket koji brand-ovima omogućuje testiranje become.promo modela. Uključuje 30 dana pilot okvira, osnovni WhatsApp entry flow, jedan selfie template, osnovu referral mehaniku i mini report. Nakon pilota brand dobiva login u Business Portal s naprednim opcijama.' },
    { q: 'Što nije uključeno u pilot?', a: 'Pilot ne uključuje media budžet, reward fond za nagrade, fizičku dostavu nagrada, naprednu OCR validaciju računa, veće campaign pakete ni retailer reward integraciju. Sve napredne opcije dostupne su u Business Portalu nakon prijave.' },
    { q: 'Što je Business Portal?', a: 'Business Portal je privatni dashboard koji brand dobiva nakon plaćanja pilota. Tamo se unose brand podaci, ciljevi kampanje i pregledaju napredni moduli s detaljnim cijenama. Cijene većih paketa prikazuju se samo u portalu, ne javno.' },
    { q: 'Koji brandovi mogu koristiti become.promo?', a: 'become.promo je dizajniran primarno za FMCG brandove — hrana i piće, kućanstvo, ljepota i njega, kućni ljubimci, dječji proizvodi. Kontaktiraj nas ako nisi siguran pripada li tvoja kategorija.' },
    { q: 'Kako se mjere rezultati kampanje?', a: 'Pilot dolazi s mini reportom koji prikazuje broj prijava, selfija, referral klikova i poslanih računa. Napredni analytics dostupan je u Business Portalu.' },
    { q: 'Koliko dugo traje implementacija?', a: 'Osnovni pilot može biti spreman za pokretanje unutar 5-10 radnih dana od uplate i dostave brand materijala.' },
    { q: 'Mogu li proširiti kampanju nakon pilota?', a: 'Da. Iz Business Portala možeš zatražiti nadogradnju na veće pakete. Tamo ćeš vidjeti pune cijene i parametre naprednih modula.' },
  ];
  return (
    <section id="brandovi" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Za brandove</span>
          <div>
            <h2 className="sec-title">Pitanja <span className="neon">brandova</span>.</h2>
            <p className="sec-lede">Sve što trebaš znati o pilotu, portalu i proširenju kampanje.</p>
          </div>
        </div>
        <div className="faq reveal">
          {items.map((it, i) => (
            <details key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="plus" aria-hidden="true">+</span>
              </summary>
              <div className="ans">{it.a}</div>
            </details>
          ))}
        </div>
        <div className="reveal" style={{marginTop:40,display:'flex',gap:12,flexWrap:'wrap'}}>
          <a className="btn btn-primary" href="pilot.html">Pokreni pilot za 500 EUR <span className="arr">↗</span></a>
          <a className="btn btn-ghost" href="kontakt.html">Postavi dodatno pitanje</a>
        </div>
      </div>
    </section>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="faq.html" />
      <PageHeader />
      <FaqPotrosaci />
      <FaqBrandovi />
      <SiteFooter />
      <MobCTA isB2BPage={false} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);