// app.jsx — Čarli Brand Ambassador kampanja

const { useEffect } = React;

function applyTheme(t) {
  const root = document.documentElement;
  root.dataset.grain = t.grain ? "on" : "off";
  if (t.neon) {
    root.style.setProperty("--neon", t.neon);
    root.style.setProperty("--neon-soft", t.neon);
  }
}

/* ── Icons (inline SVG) ─────────────────────────────── */
const IconWA = () =>
<svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
    <path d="M27 16a11 11 0 0 1-16.5 9.5L4 27l1.6-6A11 11 0 1 1 27 16z" />
    <circle cx="11" cy="16" r="0.6" fill="currentColor" />
    <circle cx="16" cy="16" r="0.6" fill="currentColor" />
    <circle cx="21" cy="16" r="0.6" fill="currentColor" />
  </svg>;

const IconBolt = () => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" /></svg>;
const IconCart = () => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 4h2l2.4 12.3a2 2 0 0 0 2 1.7H19a2 2 0 0 0 2-1.6L22.5 8H6" /><circle cx="10" cy="21" r="1.5" /><circle cx="18" cy="21" r="1.5" /></svg>;
const IconChart = () => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21V5M3 21h18M7 17l4-5 3 3 5-7" /></svg>;
const IconGift = () => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="8" width="18" height="5" rx="1" /><path d="M12 8v13M5 13v8h14v-8M8 8a3 3 0 1 1 4-3 3 3 0 1 1 4 3" /></svg>;
const IconUsers = () => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3.5" /><path d="M2.5 20a6.5 6.5 0 0 1 13 0M16 11a3 3 0 1 0 0-6M22 20a6 6 0 0 0-4-5.7" /></svg>;
const IconShield = () => <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3z" /><path d="m9 12 2 2 4-4" /></svg>;
const IconCheck = () => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7" /></svg>;
const IconX = () => <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 6l12 12M18 6 6 18" /></svg>;

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-row">
        <a href="#" className="brand">
          <span className="brand-dot" aria-hidden="true"></span>
          <span>Brand<span style={{ color: "var(--ink-3)", fontWeight: 500, marginLeft: 8 }}>.promo</span></span>
        </a>
        <div className="nav-links">
          <a href="#kako">Kako radi</a>
          <a href="#nagrade">Nagrade</a>
          <a href="#tko">Tko može</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-ghost" href="#faq" style={{ height: 38, padding: "0 16px", fontSize: 12 }}>Pitanja?</a>
          <a className="btn btn-primary" href="#prijava" style={{ height: 38, padding: "0 18px", fontSize: 12 }}>
            Prijavi se <span className="arr">↗</span>
          </a>
        </div>
      </div>
    </nav>);

}

function Hero({ t }) {
  return (
    <header className="hero">
      <div className="wrap">
        <div className="hero-frame">
          <div className="hero-img"></div>

          <div className="hero-content">
            <span className="hero-tag">{t.tag}</span>
            <h1>{t.headline}</h1>
            <p className="hero-sub">{t.subhead}</p>
            <div className="hero-actions">
              <a className="btn btn-primary" href="#prijava">
                Postani ambasador <span className="arr">↗</span>
              </a>
              <a className="btn btn-outline-neon" href="#kako">
                Kako radi
              </a>
            </div>
          </div>

          <div className="wa-medallion" aria-hidden="true">
            <IconWA />
          </div>
        </div>

        <div className="ticker" aria-hidden="true">
          <div className="ticker-track">
            <span><b>+340%</b> rast user-generated sadržaja</span>
            <span><b>2.4M</b> organskih impressiona / mjesec</span>
            <span><b>18</b> kategorija FMCG-a</span>
            <span><b>WhatsApp-first</b> komunikacija</span>
            <span><b>+340%</b> rast user-generated sadržaja</span>
            <span><b>2.4M</b> organskih impressiona / mjesec</span>
            <span><b>18</b> kategorija FMCG-a</span>
            <span><b>WhatsApp-first</b> komunikacija</span>
          </div>
        </div>
      </div>
    </header>);

}

function Stats() {
  const items = [
  { lbl: "Aktivnih ambasadora", num: "12.4K", desc: "Stvarnih korisnika koji svaki mjesec generiraju sadržaj." },
  { lbl: "Organski reach", num: "2.4M", small: "/ mj", desc: "Doseg koji ne ovisi o oglasnom budžetu." },
  { lbl: "Konverzija na polici", num: "+38", small: "%", desc: "Lift prodaje u trgovinama s aktivnom kampanjom." },
  { lbl: "ROAS prosjek", num: "7.1×", desc: "Povrat na uloženo, mjereno preko 6 kvartala." }];

  return (
    <section style={{ paddingTop: 72 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Brojke</span>
          <div>
            <h2 className="sec-title">
              Emocija mjerljiva u <span className="neon">profitu</span>.
            </h2>
            <p className="sec-lede">
              Klasični influencer programi prodaju doseg. Mi prodajemo poluge koje pokreću košaricu — od selfija u dućanu do scan-and-pay konverzije.
            </p>
          </div>
        </div>
        <div className="stats">
          {items.map((s) =>
          <div key={s.lbl} className="stat">
              <div className="lbl">{s.lbl}</div>
              <div className="num">
                {s.num}{s.small && <small>{s.small}</small>}
              </div>
              <div className="desc">{s.desc}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Steps() {
  const steps = [
  { n: "01", t: "Prijavi se u 60 sekundi", d: "Ispuniš kratak obrazac, povežeš WhatsApp i Instagram. Bez portfelja, bez praga pratitelja." },
  { n: "02", t: "Snimi, podijeli, skeniraj", d: "Dobiješ tjedne misije: selfie s proizvodom, kratki reel, anketu u dućanu. WhatsApp bot vodi te kroz svaki korak." },
  { n: "03", t: "Naplati u realnom vremenu", d: "Svaka misija = bodovi. Bodovi se mijenjaju za novac, proizvode ili iskustva. Isplata isti tjedan, bez minimalnog praga." }];

  return (
    <section id="kako">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Kako radi</span>
          <div>
            <h2 className="sec-title">
              Tri koraka, <span className="neon">nula friction-a</span>.
            </h2>
            <p className="sec-lede">
              Cijela kampanja živi unutar WhatsAppa koji ionako koristiš. Bez novih aplikacija, bez logina, bez čekanja.
            </p>
          </div>
        </div>
        <div className="steps">
          {steps.map((s) =>
          <div key={s.n} className="step">
              <div className="big-n">{s.n}</div>
              <span className="n">Korak {s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Perks() {
  const items = [
  { i: <IconBolt />, t: "Tjedne isplate", d: "Bodovi se konvertiraju u novac svaki ponedjeljak. Bez minimalnog praga, bez papirologije.", meta: ["Cash-out", "Pon. 09:00"], cls: "perk lg" },
  { i: <IconGift />, t: "Bonus paketi proizvoda", d: "Svaki mjesec biraš box iz Čarli portfelja — od kućanstva do gourmet linija.", meta: ["Mj. drop", "Free"], cls: "perk lg" },
  { i: <IconChart />, t: "Real-time dashboard", d: "Vidiš svoj reach, klikove i zaradu. Sve u WhatsApp chatu, bez logina.", meta: ["Live", "Chat"], cls: "perk sm" },
  { i: <IconUsers />, t: "Tier sustav", d: "Bronza → Platina. Više misija, veće isplate, ekskluzivni eventi.", meta: ["4 razine"], cls: "perk sm" },
  { i: <IconCart />, t: "Misije u trgovinama", d: "Geo-targetiran zadatak kad uđeš u Konzum, Lidl ili Plodine. Skeniraš, snimaš, naplatiš.", meta: ["Geo-fence"], cls: "perk sm" },
  { i: <IconShield />, t: "Transparentni ugovor", d: "Sve uvjete vidiš prije svake misije. Otkažeš kad god, bez kazne.", meta: ["GDPR", "Croatian law"], cls: "perk sm" }];

  return (
    <section id="nagrade" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Što dobivaš</span>
          <div>
            <h2 className="sec-title">
              Nagrade koje se <span className="neon">stvarno isplate</span>.
            </h2>
            <p className="sec-lede">
              Ne lažni "shoutout" coupon. Realan novac, realni proizvodi, realna iskustva — vezana uz tvoju aktivnost, ne uz dobre ambasadorove dane.
            </p>
          </div>
        </div>
        <div className="perks">
          {items.map((p) =>
          <div key={p.t} className={p.cls}>
              <div className="icn">{p.i}</div>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
              <div className="meta">
                {p.meta.map((m, i) => <span key={i}><b>·</b> {m}</span>)}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Eligibility() {
  const yes = [
  "16+ godina i prebivalište u Hrvatskoj",
  "Aktivan WhatsApp broj",
  "Instagram, TikTok ili YouTube profil — bilo koja veličina",
  "Spremnost na 1–2 misije tjedno (cca. 20 min)",
  "Voliš kupovati i isprobavati nove proizvode"];

  const no = [
  "Ne treba ti agencija ni menadžer",
  "Ne treba ti minimalni broj pratitelja",
  "Ne tražimo ekskluzivnost s drugim brendovima",
  "Ne plaćaš ništa za ulazak ni održavanje"];

  return (
    <section id="tko" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Tko može sudjelovati</span>
          <div>
            <h2 className="sec-title">
              Niski prag, <span className="neon">visoki upside</span>.
            </h2>
            <p className="sec-lede">
              Program je dizajniran za stvarne ljude — ne profesionalne kreatore. Ako voliš preporučiti dobar proizvod prijateljici, već si kvalificiran.
            </p>
          </div>
        </div>
        <div className="elig">
          <div>
            <h3>Što trebaš</h3>
            <ul>
              {yes.map((x) =>
              <li key={x}><span className="check"><IconCheck /></span>{x}</li>
              )}
            </ul>
          </div>
          <div>
            <h3>Što NE trebaš</h3>
            <ul>
              {no.map((x) =>
              <li key={x} className="no"><span className="check"><IconX /></span>{x}</li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function FAQ() {
  const items = [
  { q: "Koliko mogu zaraditi mjesečno?", a: "Prosječni ambasador na Bronza tieru zarađuje 80–150 € mjesečno. Platina tier prelazi 600 € pri 4 misije tjedno. Točan iznos vidiš prije nego prihvatiš misiju." },
  { q: "Trebam li biti influencer?", a: "Ne. 78% naših ambasadora ima ispod 1.000 pratitelja. Algoritmi nagrađuju autentičnost, ne veličinu — a Čarli kampanja je dizajnirana oko toga." },
  { q: "Kako se isplaćuje novac?", a: "Direktno na tvoj bankovni račun (IBAN) ili PayPal, svaki ponedjeljak. Nema minimalnog praga — i 3 € se isplaćuju." },
  { q: "Moram li otkrivati da je sponzorirano?", a: "Da, i mi to automatski označujemo u svakom postu kroz WhatsApp bot. To je zakonska obaveza i znak povjerenja prema tvojoj zajednici." },
  { q: "Mogu li sudjelovati ako već radim s drugim brendovima?", a: "Možeš. Ne tražimo ekskluzivnost — jedino te molimo da unutar iste misije ne promičeš direktnu konkurenciju." },
  { q: "Što ako mi se misija ne svidi?", a: "Odbiješ je. Bez kazne, bez utjecaja na tier. Sljedeća misija stiže u uobičajenom rasporedu." }];

  return (
    <section id="faq" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Pitanja</span>
          <div>
            <h2 className="sec-title">
              Što ljudi pitaju <span className="neon">prije prijave</span>.
            </h2>
            <p className="sec-lede">
              Ne vidiš svoje pitanje? Pošalji WhatsApp poruku na <b style={{ color: "var(--neon)" }}>+385 91 11 11 007</b> — odgovara stvaran čovjek, ne bot.
            </p>
          </div>
        </div>
        <div className="faq">
          {items.map((it, i) =>
          <details key={i} {...i === 0 ? { open: true } : {}}>
              <summary>
                <span>{it.q}</span>
                <span className="plus" aria-hidden="true">+</span>
              </summary>
              <div className="ans">{it.a}</div>
            </details>
          )}
        </div>
      </div>
    </section>);

}

function Apply() {
  return (
    <section id="prijava" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="apply">
          <div>
            <span className="eyebrow">Prijavi se</span>
            <h2 style={{ marginTop: 18 }}>
              Postani <span className="neon"><span style={{color:"rgb(208,38,27)"}}>Brand</span></span> pro
            </h2>
            <p className="lede">
              Prijava traje 60 sekundi. Prvi WhatsApp brief stiže u roku od 24 h.
            </p>
            <div style={{ marginTop: 24, display: "flex", gap: 24, flexWrap: "wrap", color: "var(--ink-3)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".14em", textTransform: "uppercase" }}>
              <span>· GDPR usklađeno</span>
              <span>· Bez naknade</span>
              <span>· Otkaži kad god</span>
            </div>
          </div>
          <form onSubmit={(e) => {e.preventDefault();alert("Hvala — pišemo ti na WhatsApp u 24 h.");}}>
            <div className="apply-row">
              <div className="field">
                <label htmlFor="ime">Ime i prezime</label>
                <input id="ime" type="text" placeholder="Marija Horvat" required />
              </div>
              <div className="field">
                <label htmlFor="grad">Grad</label>
                <input id="grad" type="text" placeholder="Zagreb" required />
              </div>
            </div>
            <div className="field">
              <label htmlFor="wa">WhatsApp broj</label>
              <input id="wa" type="tel" placeholder="+385 91 234 5678" required />
            </div>
            <div className="apply-row">
              <div className="field">
                <label htmlFor="ig">Instagram / TikTok handle</label>
                <input id="ig" type="text" placeholder="@marija.h" />
              </div>
              <div className="field">
                <label htmlFor="dob">Dob</label>
                <select id="dob" defaultValue="">
                  <option value="" disabled>Odaberi</option>
                  <option>16–20</option>
                  <option>21–29</option>
                  <option>30–44</option>
                  <option>45+</option>
                </select>
              </div>
            </div>
            <div className="field">
              <label htmlFor="zasto">Zašto želiš biti ambasador? (opcionalno)</label>
              <textarea id="zasto" placeholder="Reci nam u 1–2 rečenice…" />
            </div>
            <div className="apply-btn-wrap">
              <button className="btn btn-primary" type="submit" style={{ marginTop: 6 }}>
                Pošalji prijavu <span className="arr">↗</span>
              </button>
            </div>
            <span className="apply-fine">Slanjem pristaješ na obradu podataka u svrhu kampanje. Politika privatnosti ↗</span>
          </form>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot">
          <div>
            <a href="#" className="brand">
              <span className="brand-dot" aria-hidden="true"></span>
              <span>Brand.promo</span>
            </a>
            <p className="colo">Brand.promo kampanja — sljedeća generacija FMCG lojalnosti, vođena od stvarnih ljudi.

            </p>
          </div>
          <div>
            <h5>Program</h5>
            <ul>
              <li><a href="#kako">Kako radi</a></li>
              <li><a href="#nagrade">Nagrade</a></li>
              <li><a href="#tko">Tko može</a></li>
              <li><a href="#prijava">Prijava</a></li>
            </ul>
          </div>
          <div>
            <h5>Resursi</h5>
            <ul>
              <li><a href="#">Smjernice</a></li>
              <li><a href="#">Brand kit</a></li>
              <li><a href="#">Press</a></li>
              <li><a href="#">Karijere</a></li>
            </ul>
          </div>
          <div>
            <h5>Kontakt</h5>
            <ul>
              <li><a href="#">WhatsApp · +385 91 555 0042</a></li>
              <li><a href="#">hello@carli.hr</a></li>
              <li><a href="#">Privatnost</a></li>
              <li><a href="#">Uvjeti</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>© 2026 BRAND.PROMO</span>
          <span>v1.0 · spring kampanja</span>
          <span>Made in Zagreb</span>
        </div>
      </div>
    </footer>);

}

function Tweaks({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Stil" />
      <TweakColor label="Neon boja" value={t.neon} onChange={(v) => setTweak("neon", v)} />
      <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak("grain", v)} />

      <TweakSection label="Hero copy" />
      <TweakText label="Tag (eyebrow)" value={t.tag} onChange={(v) => setTweak("tag", v)} />
      <TweakText label="Naslov" value={t.headline} onChange={(v) => setTweak("headline", v)} multiline />
      <TweakText label="Podnaslov" value={t.subhead} onChange={(v) => setTweak("subhead", v)} multiline />

      <TweakSection label="Brzi presetovi" />
      <TweakButton label="Acid green" onClick={() => setTweak("neon", "#22F07A")} />
      <TweakButton label="Cyan signal" onClick={() => setTweak("neon", "#22E6F0")} />
      <TweakButton label="Hot magenta" onClick={() => setTweak("neon", "#F022B0")} />
      <TweakButton label="Solar yellow" onClick={() => setTweak("neon", "#F0E022")} />
    </TweaksPanel>);

}

function MobCTA() {
  return (
    <div className="mob-cta">
      <a className="btn btn-primary" href="#prijava">
        Prijavi se odmah <span className="arr">↗</span>
      </a>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(window.__TWEAK_DEFAULTS);
  useEffect(() => {applyTheme(t);}, [t.neon, t.grain]);

  return (
    <>
      <div className="glow g1" aria-hidden="true"></div>
      <div className="glow g2" aria-hidden="true"></div>
      <Nav />
      <Hero t={t} />
      <Stats />
      <Steps />
      <Perks />
      <Eligibility />
      <FAQ />
      <Apply />
      <Footer />
      <Tweaks t={t} setTweak={setTweak} />
      <MobCTA />
    </>);

}

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