// pilot.jsx — 500 EUR Pilot
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="brandovi.html">Za brandove</a> / <span style={{color:'var(--neon)'}}>500 EUR Pilot</span></div>
        <h1>500 EUR<br/><span className="neon">Pilot</span></h1>
        <p className="lede">Testirajte može li vaš brand aktivirati prve selfie promotore kroz WhatsApp kampanju.</p>
        <div style={{display:'flex',gap:12,flexWrap:'wrap',marginTop:24}}>
          <a className="btn btn-primary" href="#plati">Pokreni pilot <span className="arr">↗</span></a>
          <a className="btn btn-ghost" href="brandovi.html">Saznaj više o modelu</a>
        </div>
      </div>
    </header>
  );
}

function PilotCijena() {
  const inc = [
    '30 dana pilot okvira',
    'Osnovni WhatsApp entry flow',
    'Jedan brand selfie template',
    'Osnovna referral mehanika',
    'Mini report na kraju pilota',
    'Onboarding kroz Business Portal',
  ];
  const exc = [
    'Media budžet',
    'Reward fond za nagrade potrošačima',
    'Fizička dostava nagrada',
    'Napredna OCR validacija računa',
    'Veći campaign paketi',
    'Retailer reward integracija',
  ];
  return (
    <section style={{paddingTop:48}}>
      <div className="wrap">
        <div className="pilot reveal">
          <div>
            <span className="eyebrow">Pilot paket</span>
            <h2 style={{marginTop:14}}>Sve što trebaš za <span className="neon">prvu kampanju</span>.</h2>
            <p className="lede">Jedan fiksni iznos. Nema skrivenih troškova. Pilot se aktivira unutar 5–10 radnih dana od uplate i dostave brand materijala.</p>
            <div className="price-row">
              <span className="price-num">€500</span>
              <span className="price-meta">/ 30 dana pilota</span>
            </div>
            <p style={{marginTop:16,color:'var(--ink-2)',fontSize:14,lineHeight:1.6,maxWidth:'44ch'}}>
              Nakon plaćanja brand dobiva login u Business Portal. Tamo se unose podaci o brandu, cilj kampanje i pregledavaju napredne opcije s detaljnim cijenama.
            </p>
          </div>
          <div className="pilot-grid">
            <div>
              <h5>Uključuje</h5>
              <ul className="pilot-list">
                {inc.map(i => <li key={i}><span className="ic">✓</span>{i}</li>)}
              </ul>
            </div>
            <div>
              <h5>Ne uključuje</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 ForKoga() {
  const cards = [
    { n:'01', h:'FMCG brandovi svih veličina', p:'Od regionalnih do globalnih brandova koji žele testirati WhatsApp-first pristup aktivaciji potrošača.' },
    { n:'02', h:'Brandovi bez ambasadorske baze', p:'Pilot je idealan za brand koji počinje od nule i želi izgraditi prve mjerljive promotore.' },
    { n:'03', h:'Marketinški timovi s ograničenim budžetom', p:'500 EUR je ulazni prag koji omogućuje testiranje modela prije većih kampanjskih investicija.' },
    { n:'04', h:'Brandovi koji žele dokaz kupnje', p:'Kampanje s računima daju stvarni signal o kupnji — ne samo klikove i impressione.' },
    { n:'05', h:'Regionalni brandovi na CEE tržištu', p:'Hrvatska, Slovenija, Bosna i Hercegovina, Srbija i šira regija.' },
    { n:'06', h:'Brandovi novih proizvoda', p:'Novi SKU koji traži prvih 100 ambasadora koji su stvarno isprobali i kupili proizvod.' },
  ];
  return (
    <section style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Za koga</span>
          <div>
            <h2 className="sec-title">Za koje brandove je <span className="neon">pilot idealan</span>.</h2>
            <p className="sec-lede">Pilot je najkorisniji za brandove koji žele mjerljiv dokaz koncepta bez velikog inicijalnog ulaganja.</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 Proces() {
  const koraci = [
    { n:'01', h:'Uplata i onboarding', p:'Plati pilot online. Dobivaš login u Business Portal unutar 1 radnog dana.' },
    { n:'02', h:'Unos brand podataka', p:'U portalu unosiš podatke o brandu, cilj kampanje i šalješ brand materijale (logo, boje, vizualni stil).' },
    { n:'03', h:'Priprema i aktivacija', p:'BuyChat tim priprema WhatsApp flow i selfie template. Kampanja je aktivna u 5–10 radnih dana.' },
    { n:'04', h:'Pilot u trajanju 30 dana', p:'Kampanja se pokreće. Možeš pratiti napredak u Business Portalu — prijave, selfiji, referral klikovi, računi.' },
    { n:'05', h:'Mini report', p:'Na kraju pilota dobivaš izvještaj s rezultatima i preporukom za sljedeći korak.' },
    { n:'06', h:'Napredak iz portala', p:'Iz Business Portala možeš zatražiti nadogradnju na veće pakete s detaljnim cijenama.' },
  ];
  return (
    <section id="plati" style={{paddingTop:0}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Proces</span>
          <div>
            <h2 className="sec-title">Kako izgleda <span className="neon">pokretanje pilota</span>.</h2>
            <p className="sec-lede">Od uplate do aktivne kampanje u 5–10 radnih dana.</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>
        <PilotContactForm />
      </div>
    </section>
  );
}

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

  return (
    <div className="form-box reveal" style={{marginTop:48,maxWidth:640}}>
      <h3 style={{margin:'0 0 8px',fontSize:22,fontWeight:700,letterSpacing:'-.02em'}}>Pokreni pilot</h3>
      <p style={{margin:'0 0 24px',color:'var(--ink-2)',fontSize:15,lineHeight:1.6}}>Popuni formu i kontaktiramo te s uputama za plaćanje i onboarding.</p>
      {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}}>Upit primljen!</p>
          <p style={{color:'var(--ink-2)',marginTop:8,fontSize:14}}>Kontaktiramo te unutar jednog radnog dana s uputama za plaćanje.</p>
        </div>
      ) : (
        <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
          <div className="field-row">
            <div className="field">
              <label htmlFor="pilot-ime">Ime i prezime</label>
              <input id="pilot-ime" type="text" placeholder="Ivan Kovač" required />
            </div>
            <div className="field">
              <label htmlFor="pilot-brand">Brand / Tvrtka</label>
              <input id="pilot-brand" type="text" placeholder="Naziv tvrtke" required />
            </div>
          </div>
          <div className="field">
            <label htmlFor="pilot-email">Poslovni email</label>
            <input id="pilot-email" type="email" placeholder="ivan@brand.com" required />
          </div>
          <div className="field-row">
            <div className="field">
              <label htmlFor="pilot-zemlja">Zemlja</label>
              <select id="pilot-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="pilot-kat">Kategorija</label>
              <select id="pilot-kat">
                <option>Hrana i piće</option>
                <option>Kućanstvo</option>
                <option>Ljepota i njega</option>
                <option>Kućni ljubimci</option>
                <option>Djeca</option>
                <option>Ostalo</option>
              </select>
            </div>
          </div>
          <button className="btn btn-primary" type="submit" style={{width:'100%',justifyContent:'center',height:52,marginTop:8}}>
            Pokreni pilot za 500 EUR <span className="arr">↗</span>
          </button>
          <span className="form-fine">Nema automatskog plaćanja. Kontaktiramo te s uputama. Bez skrivenih troškova.</span>
        </form>
      )}
    </div>
  );
}

function App() {
  useScrollReveal();
  return (
    <>
      <SiteNav currentPage="pilot.html" />
      <PageHeader />
      <PilotCijena />
      <ForKoga />
      <Proces />
      <SiteFooter />
      <MobCTA isB2BPage={true} />
    </>
  );
}

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