// Inboxli — main app entry
// Tweaks: hero copy (3 presets + free edit) + vibe (mellow / terakota / studio)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "vibe": "studio",
  "heroVariant": "retencija",
  "heroBefore": "You spend 80% of your budget on new customers, ",
  "heroMarker": "but they never",
  "heroItalic": "buy again.",
  "heroAfter": "",
  "heroSub": "Your best customers are already on your list. They just need a reason to come back - and that is exactly what we build.",
  "heroCta": "Get my audit",
  "heroSecondary": "See the results"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = useLang();
  const copy = INBOXLI_COPY[lang];

  React.useEffect(() => { document.title = copy.docTitle; }, [lang]);

  // apply vibe to <body data-vibe>
  React.useEffect(() => {
    document.body.setAttribute("data-vibe", t.vibe || "mellow");
  }, [t.vibe]);

  const applyPreset = (key, l) => {
    const p = INBOXLI_COPY[l || lang].hero.presets[key];
    if (!p) return;
    setTweak({
      heroVariant: key,
      heroBefore: p.before,
      heroMarker: p.marker,
      heroItalic: p.italic,
      heroAfter: p.after,
      heroSub: p.sub,
      heroCta: p.cta,
      heroSecondary: p.secondary
    });
  };

  // Hero copy follows the active language
  const firstRun = React.useRef(true);
  React.useEffect(() => {
    if (firstRun.current) {
      firstRun.current = false;
      const p = INBOXLI_COPY[lang].hero.presets[t.heroVariant || "retencija"];
      if (p && t.heroBefore !== p.before) applyPreset(t.heroVariant || "retencija", lang);
      return;
    }
    applyPreset(t.heroVariant || "retencija", lang);
  }, [lang]);

  // Quiz lives on its own page now — every audit CTA routes there.
  React.useEffect(() => {
    const onClick = (e) => {
      const trigger = e.target.closest("[data-open-form]");
      if (trigger) {
        e.preventDefault();
        if (window.__inboxliRouter) window.__inboxliRouter.toKviz();
        else window.location.href = "kviz.html";
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <>
      <Nav />
      <Hero
        headline={{
          before: t.heroBefore,
          marker: t.heroMarker,
          italic: t.heroItalic,
          after: t.heroAfter
        }}
        sub={t.heroSub}
        primaryCta={t.heroCta}
        secondaryCta={t.heroSecondary}
      />
      <LogoWall />
      <LossSection />
      <Stats />

      <section id="journey" className="journey">
        <div className="wrap">
          <div className="sec-head">
            <div className="kicker">{copy.journey.kicker}</div>
            <h2>
              {copy.journey.h2a}
              <span className="italic" style={{ color: "var(--accent-deep)" }}>{copy.journey.h2i}</span>
              {copy.journey.h2b}
              <span className="mark">{copy.journey.h2mark}</span>
              {copy.journey.h2c}
            </h2>
            <p>{copy.journey.lead}</p>
          </div>
          <JourneyTrack />
        </div>
      </section>

      <Services />

      <Cases />
      <BeforeAfter />
      <Process />
      <Testimonials />
      <FAQ />
      <FinalCTA />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Vibe" />
        <TweakRadio
          label="Style"
          value={t.vibe}
          options={["mellow", "terakota", "studio"]}
          onChange={(v) => setTweak("vibe", v)}
        />

        <TweakSection label="Language" />
        <TweakRadio
          label="Site language"
          value={lang}
          options={["en", "sr"]}
          onChange={(v) => setLang(v)}
        />

        <TweakSection label="Hero - preset" />
        <TweakRadio
          label="Variant"
          value={t.heroVariant}
          options={["retencija", "inbox", "lojalnost"]}
          onChange={(v) => applyPreset(v)}
        />

        <TweakSection label="Hero - copy" />
        <TweakText label="Before" value={t.heroBefore} onChange={(v) => setTweak("heroBefore", v)} />
        <TweakText label="Marker word" value={t.heroMarker} onChange={(v) => setTweak("heroMarker", v)} />
        <TweakText label="Italic word" value={t.heroItalic} onChange={(v) => setTweak("heroItalic", v)} />
        <TweakText label="After" value={t.heroAfter} onChange={(v) => setTweak("heroAfter", v)} />
        <TweakText label="Subhead" value={t.heroSub} onChange={(v) => setTweak("heroSub", v)} />
        <TweakText label="CTA primary" value={t.heroCta} onChange={(v) => setTweak("heroCta", v)} />
        <TweakText label="CTA secondary" value={t.heroSecondary} onChange={(v) => setTweak("heroSecondary", v)} />
      </TweaksPanel>
    </>
  );
}

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