// kako-radi.jsx — Kako radi
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)'}}>Kako radi</span></div>
        <h1>Kako radi<br/><span className="neon">become.promo</span></h1>
        <p className="lede">WhatsApp flow od selfija do mjerljivog brand ambasadora. Bez aplikacija, bez logina.</p>
        <div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:24}}>
          <a className="btn btn-primary" href="ambasadori.html">Postani ambasador <span className="arr">↗</span></a>
          <a className="btn btn-outline-neon" href="brandovi.html">Za brandove</a>
        </div>
      </div>
    </header>
  );
}

function FlowStrip() {
  return (
    <section style={{paddingTop:48}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">U jednoj rečenici</span>
          <div>
            <h2 className="sec-title">Od selfija do <span className="neon">mjerljivog ambasadora</span>.</h2>
            <p className="sec-lede">Cijeli flow odvija se kroz WhatsApp. Selfie otvara kampanju. Račun dokazuje kupnju. Referral širi doseg. Status i nagrade drže ambasadore aktivnima.</p>
          </div>
        </div>
        <div className="flow reveal">
          {['Selfie','Karikatura','Share','Račun','Status','Nagrada'].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>
      </div>
    </section>
  );
}

function Phases() {
  const phases = [
    { n:'01', tag:'Selfie Start', h:'Potrošač šalje selfie kroz WhatsApp.', p:'Bez instalacije, bez registracije. Korisnik klikne link, otvori WhatsApp i pošalje selfie. Za nekoliko minuta dobiva personaliziranu brand karikaturu.', status:'Fan' },
    { n:'02', tag:'Receipt Growth', h:'Slanje računa dokazuje kupnju.', p:'Korisnik kupuje brand proizvod u bilo kojoj trgovini i šalje fotografiju računa kroz isti WhatsApp flow. Automatska validacija otključava viši status.', status:'Buyer' },
    { n:'03', tag:'Viral Fan', h:'Referral link širi kampanju organički.', p:'Svaka brand karikatura sadrži personalizirani referral link. Dijeljenje na storyu ili profilu automatski poziva prijatelje u istu kampanju.', status:'Promoter' },
    { n:'04', tag:'Ambassador Club', h:'Najaktivniji postaju Verified Ambassadori.', p:'Korisnici s najvišim statusom ulaze u posebne brand programe — nagrade, sampling, eveneti i ekskluzivni pozivi.', status:'Verified Ambassador' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Četiri faze</span>
          <div>
            <h2 className="sec-title">Svaka faza <span className="neon">otključava više</span>.</h2>
            <p className="sec-lede">Sustav je dizajniran da zadržava aktivnost — svaka akcija donosi nešto novo, a ne samo jednokratni vizual.</p>
          </div>
        </div>
        <div className="phases reveal">
          {phases.map(ph => (
            <div key={ph.n} className="phase">
              <div className="big-n">{ph.n}</div>
              <span className="tag">{ph.tag}</span>
              <h4>{ph.h}</h4>
              <p>{ph.p}</p>
              <div className="status">Status: <b>{ph.status}</b></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Tehnologija() {
  const cards = [
    { n:'01', h:'WhatsApp Business API', p:'Cijeli flow odvija se unutar WhatsAppa. Nema novih aplikacija ni logina — korisnici su već tamo.' },
    { n:'02', h:'AI selfie karikature', p:'BuyChat AI generira personalizirane brand vizuale od korisnikovog selfija unutar nekoliko minuta.' },
    { n:'03', h:'OCR validacija računa', p:'Fotografija računa prolazi automatsku provjeru — prepoznavanje proizvoda, datuma i iznosa.' },
    { n:'04', h:'Referral tracking', p:'Svaki korisnik dobiva jedinstveni link koji prati koliko prijatelja je ušlo u kampanju kroz njega.' },
    { n:'05', h:'Status i reward engine', p:'Automatski sustav dodjeljuje statuse i nagrade na temelju akcija — bez ručnog rada brand tima.' },
    { n:'06', h:'Business Portal analytics', p:'Brandovi prate kampanju u realnom vremenu — prijave, selfiji, računi, referral klikovi, konverzije.' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Tehnologija</span>
          <div>
            <h2 className="sec-title">BuyChat vodi <span className="neon">cijelu tehničku izvedbu</span>.</h2>
            <p className="sec-lede">Brand ne treba implementirati ništa. BuyChat vodi WhatsApp flow, AI vizuale, validaciju, referral i reward logiku.</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 DualCTA() {
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Tvoj sljedeći korak</span>
          <div>
            <h2 className="sec-title">Jesi li <span className="neon">potrošač</span> ili <span className="neon">brand</span>?</h2>
            <p className="sec-lede">Oba puta počinju ovdje. Potrošači u WhatsAppu, brandovi u Business Portalu.</p>
          </div>
        </div>
        <div className="split reveal">
          <div className="split-card b2c">
            <span className="audience">Potrošač</span>
            <h3>Želim postati ambasador</h3>
            <p>Sudjelovanje je besplatno. Prijava traje manje od minute kroz WhatsApp.</p>
            <a className="btn btn-primary" href="ambasadori.html">Postani ambasador <span className="arr">↗</span></a>
          </div>
          <div className="split-card b2b">
            <span className="audience">Brand</span>
            <h3>Želim pokrenuti pilot kampanju</h3>
            <p>500 EUR pilot s Business Portal pristupom. Napredne opcije dostupne nakon prijave.</p>
            <a className="btn btn-outline-neon" href="pilot.html">Pokreni pilot za 500 EUR <span className="arr">↗</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="kako-radi.html" />
      <PageHeader />
      <FlowStrip />
      <Phases />
      <Tehnologija />
      <DualCTA />
      <SiteFooter />
      <MobCTA isB2BPage={false} />
    </>
  );
}

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