// brandovi.jsx — Za brandove
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 Hero() {
  return (
    <header className="hero">
      <div className="wrap">
        <div className="hero-frame reveal">
          <video className="hero-vid" src="assets/hero_movie.mp4" autoPlay muted loop playsInline />
          <div className="hero-overlay" aria-hidden="true"></div>
          <div className="hero-content">
            <span className="hero-tag">ZA FMCG BRANDOVE</span>
            <h1>Aktivirajte stvarne kupce kao mjerljive brand promotore</h1>
            <p className="hero-sub">become.promo koristi WhatsApp, selfie karikature, račune, referral linkove i rewarde kako bi potrošače pretvorio u aktivne brand ambasadore.</p>
            <div className="hero-actions">
              <a className="btn btn-primary" href="pilot.html">Pokreni pilot za 500 EUR <span className="arr">↗</span></a>
              <a className="btn btn-outline-neon" href="kako-radi.html">Pogledaj kako radi</a>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}

function Problem() {
  const cards = [
    { n:'×', h:'Klikovi nisu dokaz kupnje', p:'Metrika se zaustavlja na engagementu, bez veze prema polici.' },
    { n:'×', h:'Influenceri nisu uvijek kupci', p:'Plaćeni doseg bez stvarne kupnje proizvoda.' },
    { n:'×', h:'Potrošači rijetko dijele oglase', p:'Klasični creative nema razloga za organsko širenje.' },
    { n:'×', h:'Brand ne zna tko stvarno kupuje', p:'Identitet kupaca ostaje skriven između retailera i brand vlasnika.' },
    { n:'×', h:'Nema ponovljene aktivnosti', p:'Kampanja često završava na prvoj prijavi, bez ambasadorske baze.' },
    { n:'×', h:'Reward bez konteksta', p:'Generički pokloni ne stvaraju vezanost uz proizvod ni kategoriju.' },
  ];
  return (
    <section style={{paddingTop:48}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Problem</span>
          <div>
            <h2 className="sec-title">Klasične kampanje stvaraju reach, ali ne uvijek <span className="neon">stvarne promotore</span>.</h2>
            <p className="sec-lede">Klikovi nisu dokaz kupnje. Influenceri nisu nužno stvarni kupci. Brand često ne zna tko zaista kupuje i preporučuje proizvod.</p>
          </div>
        </div>
        <div className="cards reveal">
          {cards.map(c => (
            <div key={c.h} className="card">
              <span className="num">{c.n}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Rjesenje() {
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Rješenje</span>
          <div>
            <h2 className="sec-title">Become.Promo model povezuje <span className="neon">engagement, kupnju i viralnost</span>.</h2>
            <p className="sec-lede">Selfie otvara kampanju. Račun dokazuje kupnju. Referral širi doseg. Status i nagrade grade lojalnost.</p>
          </div>
        </div>
        <div className="flow reveal" style={{marginBottom:32}}>
          {['Selfie','Karikatura','Referral','Račun','Status','Reward'].map((s,i,a) => (
            <React.Fragment key={s}>
              <span className="step-chip">{s}</span>
              {i < a.length - 1 && <span className="step-arr">→</span>}
            </React.Fragment>
          ))}
        </div>
        <p className="reveal" style={{color:'var(--ink-2)',fontSize:17,lineHeight:1.6,maxWidth:'75ch'}}>
          Korisnik prvo ulazi kroz zabavni selfie flow. Zatim kupnjom i slanjem računa potvrđuje stvarni interes. Dijeljenjem referral linka može postati promotor, a najaktivniji ulaze u Ambassador Club.
        </p>
      </div>
    </section>
  );
}

function StoDobivate() {
  const cards = [
    { n:'01', h:'Više ulaza u kampanju', p:'Selfie je jednostavan i zabavan početak.' },
    { n:'02', h:'Personalizirani UGC', p:'Svaki korisnik dobiva branded sadržaj koji može dijeliti.' },
    { n:'03', h:'Referral efekt', p:'Korisnici sami pozivaju prijatelje kroz svoj link.' },
    { n:'04', h:'Dokaz kupnje', p:'Račun potvrđuje da je proizvod stvarno kupljen.' },
    { n:'05', h:'Statusni sustav', p:'Kupci napreduju od Fana do Brand Ambassadora.' },
    { n:'06', h:'Sampling baza', p:'Najbolji promotori mogu postati kandidati za testiranje novih proizvoda.' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Što dobivate</span>
          <div>
            <h2 className="sec-title">Šest poluga koje pokreću <span className="neon">cijelu kampanju</span>.</h2>
            <p className="sec-lede">Svaka poluga je mjerljiva i radi u koraku s ostalima — bez ručnog rada na strani brand tima.</p>
          </div>
        </div>
        <div className="cards reveal">
          {cards.map(c => (
            <div key={c.n} className="card">
              <span className="num">{c.n}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PilotBlock() {
  const inc = ['30 dana pilot okvira','Osnovni WhatsApp entry flow','Jedan selfie template','Osnovna referral mehanika','Mini report','Onboarding kroz Business Portal'];
  const exc = ['Media budžet','Reward fond','Fizička dostava','Napredna OCR validacija','Veći campaign paketi','Retailer reward integracija'];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="pilot reveal">
          <div>
            <span className="eyebrow">Brz početak</span>
            <h2 style={{marginTop:14}}>Pokrenite pilot za <span className="neon">500 EUR</span>.</h2>
            <p className="lede">Brz i jednostavan način da testirate može li vaš brand aktivirati prve selfie promotore.</p>
            <div className="price-row">
              <span className="price-num">€500</span>
              <span className="price-meta">/ 30 dana pilota</span>
            </div>
            <a className="btn btn-primary" href="pilot.html" style={{marginTop:24,display:'inline-flex'}}>Plati 500 EUR i otvori Business Portal <span className="arr">↗</span></a>
          </div>
          <div className="pilot-grid">
            <div>
              <h5>Što je uključeno</h5>
              <ul className="pilot-list">
                {inc.map(i => <li key={i}><span className="ic">✓</span>{i}</li>)}
              </ul>
            </div>
            <div>
              <h5>Što nije uključeno</h5>
              <ul className="pilot-list">
                {exc.map(i => <li key={i} className="no"><span className="ic">×</span>{i}</li>)}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Portal() {
  const cards = [
    { n:'▸', h:'Brand podaci i proizvodi', p:'Unos podataka o brandu, kategoriji, ciljevima i konkretnim proizvodima koji ulaze u kampanju.' },
    { n:'▸', h:'Cilj kampanje', p:'Izaberi želiš li selfie reach, viralnost, dokaz kupnje, rewarde ili izgradnju Ambassador Cluba.' },
    { n:'▸', h:'Napredni moduli', p:'Pregled naprednih opcija po nazivu — samo nakon login-a vidiš pune cijene većih paketa.' },
    { n:'▸', h:'Zatraži nadogradnju', p:'Iz portala šalješ zahtjev za prelazak iz pilota u veću kampanju.' },
    { n:'▸', h:'Detaljne cijene', p:'Cijene većih paketa prikazuju se samo u portalu, ne javno.' },
    { n:'▸', h:'Status pilota', p:'Realan pregled napretka, broj prijava, selfija i računa u realnom vremenu.' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Business Portal</span>
          <div>
            <h2 className="sec-title">Business Portal otvara se <span className="neon">nakon uplate</span>.</h2>
            <p className="sec-lede">Nakon plaćanja 500 EUR brand dobiva login u Business Portal. Tamo se unose podaci, ciljevi kampanje i pregledaju napredne opcije.</p>
          </div>
        </div>
        <div className="cards reveal">
          {cards.map(c => (
            <div key={c.h} className="card">
              <span className="num">{c.n}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Moduli() {
  const cards = [
    { n:'Modul', h:'Selfie Start', p:'Šira selfie kampanja s više vizuala i većim brojem sudionika.' },
    { n:'Modul', h:'Receipt Growth', p:'Kampanje s računima, dokazom kupnje i pragovima.' },
    { n:'Modul', h:'Viral Fan', p:'Jači referral, organsko širenje i nagrade za promotore.' },
    { n:'Modul', h:'Ambassador Club', p:'Premium programi, fizičke nagrade i sampling novih proizvoda.' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Šira slika</span>
          <div>
            <h2 className="sec-title">Pilot je početak. Veće opcije <span className="neon">dostupne u portalu</span>.</h2>
            <p className="sec-lede">Prikazujemo samo nazive modula. Pune cijene i parametri otključavaju se nakon prijave kroz pilot.</p>
          </div>
        </div>
        <div className="cards reveal">
          {cards.map(c => (
            <div key={c.h} className="card">
              <span className="num">{c.n}</span>
              <h3>{c.h}</h3>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{marginTop:32,display:'flex',gap:12,flexWrap:'wrap'}}>
          <a className="btn btn-primary" href="pilot.html">Pokreni pilot i vidi opcije u portalu <span className="arr">↗</span></a>
          <a className="btn btn-ghost" href="kontakt.html">Razgovaraj s timom</a>
        </div>
      </div>
    </section>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="brandovi.html" />
      <Hero />
      <Problem />
      <Rjesenje />
      <StoDobivate />
      <PilotBlock />
      <Portal />
      <Moduli />
      <SiteFooter />
      <MobCTA isB2BPage={true} />
    </>
  );
}

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