// kampanje.jsx — Aktivne kampanje
const { useEffect, useState } = 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)'}}>Aktivne kampanje</span></div>
        <h1>Pripremamo<br/>brand<br/><span className="neon">kampanje</span>.</h1>
        <p className="lede">Prijavi se na WhatsApp listu i prvi saznaj kada se otvori kampanja za tvoju zemlju i kategoriju.</p>
        <p style={{marginTop:12,color:'var(--ink-2)',fontSize:13,lineHeight:1.5,maxWidth:'50ch'}}>Kampanje se pokreću kada brand odluči aktivirati become.promo. Prijava je besplatna i bez obaveza.</p>
      </div>
    </header>
  );
}

function WaitlistForm() {
  const [sent, setSent] = useState(false);

  function handleSubmit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <section id="prijava" style={{paddingTop:48}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Prijava na listu</span>
          <div>
            <h2 className="sec-title">Budi <span className="neon">prvi obaviješten</span>.</h2>
            <p className="sec-lede">Šaljemo WhatsApp poruku čim se otvori kampanja za tvoju zemlju i kategoriju. Bez spam poruka, bez newslettera.</p>
          </div>
        </div>
        <div className="form-box reveal" style={{maxWidth:640}}>
          {sent ? (
            <div style={{padding:'24px 0',textAlign:'center'}}>
              <div style={{fontSize:32,marginBottom:12}}>✓</div>
              <p style={{color:'var(--neon)',fontFamily:'var(--mono)',fontSize:13,letterSpacing:'.1em',textTransform:'uppercase',margin:0}}>Hvala — na listi si!</p>
              <p style={{color:'var(--ink-2)',marginTop:8,fontSize:14}}>Pišemo ti čim krene prva kampanja za tvoju kategoriju.</p>
            </div>
          ) : (
            <form onSubmit={handleSubmit}>
              <div className="field">
                <label htmlFor="wa-num">WhatsApp broj</label>
                <input id="wa-num" type="tel" placeholder="+385 91 234 5678" required />
              </div>
              <div className="field-row">
                <div className="field">
                  <label htmlFor="zemlja">Zemlja</label>
                  <select id="zemlja" required>
                    <option value="HR">Hrvatska</option>
                    <option value="SI">Slovenija</option>
                    <option value="BA">Bosna i Hercegovina</option>
                    <option value="RS">Srbija</option>
                    <option value="other">Druga</option>
                  </select>
                </div>
                <div className="field">
                  <label htmlFor="kategorija">Kategorija interesa</label>
                  <select id="kategorija">
                    <option>Bilo koja</option>
                    <option>Hrana i piće</option>
                    <option>Kućanstvo</option>
                    <option>Ljepota i njega</option>
                    <option>Kućni ljubimci</option>
                    <option>Djeca</option>
                  </select>
                </div>
              </div>
              <button className="btn btn-primary" type="submit">Prijavi se na WhatsApp listu <span className="arr">↗</span></button>
              <span className="form-fine">Prijava je besplatna. Šaljemo poruku samo kad se otvori kampanja za tvoju zemlju.</span>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Kategorije() {
  const cats = [
    { n:'01', h:'Hrana i piće', p:'Kampanje za prehrambene brandove — od snackova do pića. Selfie s omiljenim proizvodom.' },
    { n:'02', h:'Kućanstvo', p:'Deterdženti, sredstva za čišćenje i kućanski proizvodi koje svaki dan koristiš.' },
    { n:'03', h:'Ljepota i njega', p:'Kozmetika, parfemi, njega kože i kose. Personalizirani brand vizuali za beauty kategoriju.' },
    { n:'04', h:'Kućni ljubimci', p:'Hrana i oprema za ljubimce. Kampanje koje spajaju vlasnike i brand.' },
    { n:'05', h:'Djeca', p:'Dječja hrana, igračke i oprema. Kampanje za roditelje koji kupuju za svoju obitelj.' },
    { n:'06', h:'Ostale kategorije', p:'Droge i apotekarski proizvodi, sportska prehrana i ostale FMCG kategorije.' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Kategorije</span>
          <div>
            <h2 className="sec-title">Kampanje za sve <span className="neon">FMCG kategorije</span>.</h2>
            <p className="sec-lede">become.promo radi s brandovima iz svih glavnih FMCG kategorija. Prijavi se za kategoriju koja ti je najzanimljivija.</p>
          </div>
        </div>
        <div className="cards reveal">
          {cats.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 App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="kampanje.html" />
      <PageHeader />
      <WaitlistForm />
      <Kategorije />
      <SiteFooter />
      <MobCTA isB2BPage={false} />
    </>
  );
}

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