// ambasadori.jsx — Za ambasadore
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"><span style={{color:'var(--neon)'}}>Za ambasadore</span></div>
        <h1>Brand<br/>Ambassador<br/>Kampanja</h1>
        <p className="lede">Kreni sa selfie Brandom i nagradi svoju vlastitu promo kampanju.</p>
        <div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:24}}>
          <a className="btn btn-primary" href="#prijava">Prijavi se putem WhatsAppa <span className="arr">↗</span></a>
          <a className="btn btn-outline-neon" href="#faze">Pogledaj faze rasta</a>
        </div>
        <p style={{marginTop:12,color:'var(--ink-2)',fontSize:13,lineHeight:1.5,maxWidth:'50ch'}}>Sudjelovanje je besplatno. Dapače, možeš samo dobiti nagradne brand pakete. Aktivne kampanje ovise o dostupnim brandovima u tvojoj zemlji.</p>
      </div>
    </header>
  );
}

function Faze() {
  const phases = [
    { n:'01', tag:'Selfie Start', h:'Pošalji selfie i dobij svoju prvu brand karikaturu.', p:'Bez komplicirane prijave. Pošalji selfie kroz WhatsApp i za nekoliko minuta dobiješ personalizirani brand vizual. Možeš ga odmah koristiti za profilnu sliku, story ili dijeljenje prijateljima.', status:'Fan' },
    { n:'02', tag:'Receipt Growth', h:'Pošalji račun i dokaži stvarnu kupnju.', p:'Kupi brand proizvod u bilo kojoj trgovini. Pošalji fotografiju računa kroz WhatsApp. Račun otključava viši status, dodatne bodove, nove vizuale i mogućnost osvajanja nagrada.', status:'Buyer' },
    { n:'03', tag:'Viral Fan', h:'Podijeli svoju sliku i pozovi prijatelje.', p:'Svaka brand karikatura dolazi s tvojim osobnim referral linkom. Kad prijatelj klikne tvoj link i uđe u kampanju, automatski napreduješ prema statusu promotora. Više prijatelja — brži napredak.', status:'Promoter' },
    { n:'04', tag:'Ambassador Club', h:'Najaktivniji dobivaju nagrade i ekskluzivne pozive.', p:'Dokazani ambasadori s visokim statusom ulaze u posebne brand programe. To može uključivati fizičke nagrade, sampling novih proizvoda prije stavljanja u prodaju i ekskluzivne brand evenete.', status:'Verified Ambassador' },
  ];
  return (
    <section id="faze" style={{paddingTop:48}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Četiri faze</span>
          <div>
            <h2 className="sec-title">Kako rasteš kao <span className="neon">brand ambasador</span>.</h2>
            <p className="sec-lede">Svaka faza otključava više: bolju karikaturu, viši status, veće nagrade i ekskluzivne brand programe.</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 Nagrade() {
  const cards = [
    { n:'01', h:'Personalizirana brand karikatura', p:'Svaki sudionik dobiva vlastitu AI karikaturu s brand elementima — za profilnu sliku, story i dijeljenje.' },
    { n:'02', h:'Besplatno sudjelovanje', p:'Program je potpuno besplatan za potrošače. Brandovi financiraju kampanje.' },
    { n:'03', h:'Status koji raste s aktivnošću', p:'Od Fana do Verified Ambassadora — svaka aktivnost donosi novi status i privilegije.' },
    { n:'04', h:'Referral nagrade', p:'Svaki prijatelj kojeg pozoveš donosi ti bod koji ubrzava napredak prema višem statusu.' },
    { n:'05', h:'Brand nagrade', p:'Digitalne nagrade, retail rewardi, fizički pokloni ili posebni brand paketi za najaktivnije.' },
    { n:'06', h:'Sampling novih proizvoda', p:'Verified Ambassadori mogu biti odabrani za testiranje novih brand proizvoda prije izlaska na tržište.' },
  ];
  return (
    <section id="nagrade" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Nagrade i benefiti</span>
          <div>
            <h2 className="sec-title">Što dobivaš kao <span className="neon">brand ambasador</span>.</h2>
            <p className="sec-lede">Sudjelovanje je besplatno. Svi benefiti ovise o tvojoj aktivnosti i dostupnim brandovima u tvojoj kategoriji i zemlji.</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 KakoPrijaviti() {
  const koraci = [
    { n:'01', h:'Pričekaj poziv ili se prijavi na listu', p:'Kada se otvori kampanja za tvoju zemlju i kategoriju, dobit ćeš WhatsApp poruku s uputama za ulazak u flow.' },
    { n:'02', h:'Pošalji selfie kroz WhatsApp', p:'Klikni link u poruci, pošalji selfie i za nekoliko minuta dobiješ svoju prvu brand karikaturu.' },
    { n:'03', h:'Dijeli i pozovi prijatelje', p:'Podijeli karikaturu na storyu ili profilu. Tvoj referral link automatski je u opisu slike.' },
    { n:'04', h:'Pošalji račun za viši status', p:'Kupi brand proizvod i pošalji račun kroz isti WhatsApp flow. Račun otključava Buyer status i dodatne nagrade.' },
  ];
  return (
    <section id="prijava" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Kako se prijaviti</span>
          <div>
            <h2 className="sec-title">Četiri koraka do <span className="neon">prvog statusa</span>.</h2>
            <p className="sec-lede">Cijeli proces odvija se kroz WhatsApp koji već koristiš. Bez novih aplikacija, bez logina.</p>
          </div>
        </div>
        <div className="cards reveal">
          {koraci.map(k => (
            <div key={k.n} className="card">
              <span className="num">{k.n}</span>
              <h3>{k.h}</h3>
              <p>{k.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Transparentnost() {
  return (
    <section id="klub" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Transparentnost</span>
          <div>
            <h2 className="sec-title">Što trebate znati <span className="neon">prije prijave</span>.</h2>
            <p className="sec-lede">Volimo jasnoću. Ovo su ključne informacije o sudjelovanju u become.promo kampanjama.</p>
          </div>
        </div>
        <div className="form-box reveal" style={{maxWidth:720}}>
          <div style={{display:'flex',flexDirection:'column',gap:20}}>
            <div>
              <h3 style={{margin:'0 0 8px',fontSize:18,fontWeight:600,color:'var(--ink)'}}>Kampanje su vezane uz specifične brandove</h3>
              <p style={{margin:0,color:'var(--ink-2)',lineHeight:1.6,fontSize:15}}>Svaka kampanja pokrenuta je od strane konkretnog branda. Možeš sudjelovati u više kampanja različitih brandova.</p>
            </div>
            <div>
              <h3 style={{margin:'0 0 8px',fontSize:18,fontWeight:600,color:'var(--ink)'}}>Dostupnost ovisi o tvojoj zemlji i kategoriji</h3>
              <p style={{margin:0,color:'var(--ink-2)',lineHeight:1.6,fontSize:15}}>Kampanje se pokreću kada brand odluči aktivirati become.promo u tvojoj regiji. Prijavi se na listu i bit ćeš prvi obaviješten.</p>
            </div>
            <div>
              <h3 style={{margin:'0 0 8px',fontSize:18,fontWeight:600,color:'var(--ink)'}}>Nagrade nisu zajamčene unaprijed</h3>
              <p style={{margin:0,color:'var(--ink-2)',lineHeight:1.6,fontSize:15}}>Vrsta i vrijednost nagrada ovisi o kampanjskom budžetu branda. Sve uvjete vidiš unutar konkretne kampanje, prije nego prihvatiš sudjelovanje.</p>
            </div>
            <div>
              <h3 style={{margin:'0 0 8px',fontSize:18,fontWeight:600,color:'var(--ink)'}}>GDPR i zaštita podataka</h3>
              <p style={{margin:0,color:'var(--ink-2)',lineHeight:1.6,fontSize:15}}>Tvoji podaci koriste se isključivo u svrhu kampanje. Možeš zatražiti brisanje podataka u bilo kojem trenutku. Detalji u <a href="privatnost.html" style={{color:'var(--neon)'}}>pravilima privatnosti</a>.</p>
            </div>
            <div style={{marginTop:8,paddingTop:20,borderTop:'1px solid var(--line)'}}>
              <p style={{margin:'0 0 16px',color:'var(--ink-2)',fontSize:14,fontFamily:'var(--mono)',letterSpacing:'.06em',textTransform:'uppercase'}}>Prijavi se na listu — bit ćeš prvi obaviješten</p>
              <a className="btn btn-primary" href="kampanje.html">Prijavi se na WhatsApp listu <span className="arr">↗</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="ambasadori.html" />
      <PageHeader />
      <Faze />
      <Nagrade />
      <KakoPrijaviti />
      <Transparentnost />
      <SiteFooter />
      <MobCTA isB2BPage={false} />
    </>
  );
}

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