/* app.jsx — composition, scroll reveal, tweaks, mount */

const HEADLINES = {
  "Strategy plan": "Turn any goal into a<br><span class='accent'>scored strategic plan.</span>",
  "Follow through": "Strategy planning,<br>finally made <span class='accent'>doable.</span>",
  "Remembers you": "Your AI strategist that <span class='accent'>plans,<br>scores, and executes</span> with you.",
};
const SUBS = {
  "Strategy plan": "Gen Coach builds a two-part strategy — direction and execution — scores its quality, then coaches you through it. Real strategic planning, not another to-do list.",
  "Follow through": "Describe your goal in plain words. Gen Coach drafts the strategy, scores how good it is, and stays with you daily to execute. The full loop, in one place.",
  "Remembers you": "A strategy coach that turns ambition into a structured, scored plan — then remembers your context and accompanies you, day by day, until it's done.",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Strategy plan",
  "accent": "#5B4FE9"
}/*EDITMODE-END*/;

function useReveal() {
  React.useEffect(() => {
    const reveal = (el) => el.classList.add("in-view");
    const els = Array.from(document.querySelectorAll("[data-reveal]"));
    if (!("IntersectionObserver" in window)) { els.forEach(reveal); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
    }, { threshold: 0.1, rootMargin: "0px 0px -6% 0px" });
    els.forEach((el) => { if (!el.classList.contains("in-view")) io.observe(el); });
    // safety: never leave anything invisible
    const t = setTimeout(() => els.forEach(reveal), 2600);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  return (
    <React.Fragment>
      <Nav />
      <Hero headline={HEADLINES[t.headline]} sub={SUBS[t.headline]} />
      <Insight />
      <HowItWorks />
      <TryIt />
      <Features />
      <Differentiator />
      <Pricing />
      <FinalCTA />
      <Footer />
      <Reveal />

      <TweaksPanel>
        <TweakSection label="Hero message" />
        <TweakRadio
          label="Headline angle"
          value={t.headline}
          options={["Strategy plan", "Follow through", "Remembers you"]}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakSection label="Brand accent" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#5B4FE9", "#0EA66B", "#15181E", "#E8743B"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

function Reveal() { useReveal(); return null; }

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