// o-nama.jsx — O nama
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)'}}>O nama</span></div>
        <h1>O <span className="neon">become.promo</span></h1>
        <p className="lede">BuyChat servis koji spaja FMCG brandove i stvarne potrošače kroz WhatsApp kampanje.</p>
      </div>
    </header>
  );
}

function Sadrzaj() {
  return (
    <section style={{paddingTop:32}}>
      <div className="wrap">
        <div className="prose reveal">
          <h2>Što je become.promo?</h2>
          <p>
            become.promo je BuyChat servis dizajniran za FMCG brandove koji žele aktivirati stvarne kupce kao mjerljive brand ambasadore. Platforma spaja potrošače i brandove kroz WhatsApp kampanje koje kombiniraju AI selfie karikature, validaciju računa, referral mehaniku i reward sustav.
          </p>
          <p>
            Ime dolazi od koncepta: potrošač koji koristi brand <strong>postaje</strong> dio priče oko tog branda — lice kampanje, ambasador, promotor. Ne samo pasivni kupac.
          </p>

          <h2>Zašto WhatsApp?</h2>
          <p>
            WhatsApp je najkorištenija aplikacija za razmjenu poruka u regiji. Potrošači su već tamo — svaki dan. Kampanja koja živi u WhatsAppu ne zahtijeva instalaciju nove aplikacije, registraciju na novoj platformi ni learning curve koji ubija konverziju.
          </p>
          <p>
            become.promo koristi WhatsApp Business API kako bi cijeli flow — od prvog selfija do slanja računa i primanja nagrade — odvijao se unutar jednog razgovora koji korisnik već poznaje.
          </p>

          <h2>Tko stoji iza become.promo?</h2>
          <p>
            become.promo je servis koji vodi BuyChat tim iz Zagreba. BuyChat je specijaliziran za WhatsApp-first korisničke tokove i conversational commerce rješenja za FMCG sektor.
          </p>
          <p>
            Radimo s brandovima koji žele premostiti jaz između digitalnog engagementa i stvarne kupnje u fizičkim maloprodajama.
          </p>

          <h2>Naš pristup</h2>
          <ul>
            <li>Transparentnost prema potrošačima — uvjeti su jasni prije svake akcije</li>
            <li>Mjerljivost za brandove — svaka faza kampanje nosi konkretne metrike</li>
            <li>Minimalna frikcija — sve se odvija u WhatsAppu koji korisnici već koriste</li>
            <li>GDPR sukladnost — podaci se koriste isključivo u svrhu kampanje</li>
          </ul>

          <h2>Lokacija i kontakt</h2>
          <p>
            Sjedište: Zagreb, Hrvatska.<br />
            Email: <a href="mailto:kontakt@become.promo" style={{color:'var(--neon)'}}>kontakt@become.promo</a>
          </p>
        </div>
      </div>
    </section>
  );
}

function DualCTA() {
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Počni</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.</p>
          </div>
        </div>
        <div className="split reveal">
          <div className="split-card b2c">
            <span className="audience">Potrošač</span>
            <h3>Postani brand ambasador</h3>
            <p>Besplatno sudjelovanje. Selfie otvara kampanju. Status i nagrade za aktivnost.</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>Pokreni pilot kampanju</h3>
            <p>500 EUR pilot s Business Portal pristupom. Napredne opcije 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="o-nama.html" />
      <PageHeader />
      <Sadrzaj />
      <DualCTA />
      <SiteFooter />
      <MobCTA isB2BPage={false} />
    </>
  );
}

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