/* global React, ReactDOM, setAccent, rebuildTokens, accentKey, DSStyle, PersonaProvider, Nav, Hero, Problem, TheLoop, DailyFeature, WeeklyGoals, Habits, Notes, Platforms, ExampleMode, Privacy, FAQ, CTA, Footer, JoinModal, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio */
const { useState } = React;

const HEADLINES = {
  "Finish what matters": "Finish what matters in 84 days.",
  "Three goals, one focus": "Three goals. 84 days. One focus a day.",
  "Vision to today": "Run your 84-day cycle from vision to today.",
};

// accent swatches map to the real ds.jsx ACCENTS keys
const ACCENT_OPTS = { "#8463B0": "aubergine", "#6E50D1": "violet", "#34B88E": "emerald", "#C9622E": "copper" };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#8463B0",
  "headline": "Finish what matters",
  "cta": "Join the TestFlight"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [, bump] = useState(0);

  // apply accent into the real design system
  const key = ACCENT_OPTS[t.accent] || "aubergine";
  if (accentKey() !== key) { setAccent(key); }

  const cfg = { cta: t.cta, headline: HEADLINES[t.headline] || HEADLINES["Finish what matters"] };

  return (
    <PersonaProvider>
    <div style={{ background: "var(--bg)" }}>
      <DSStyle />
      <Nav cfg={cfg} />
      <Hero cfg={cfg} />
      <Problem />
      <TheLoop />
      <DailyFeature />
      <WeeklyGoals />
      <Habits />
      <Notes />
      <Platforms />
      <ExampleMode />
      <Privacy />
      <FAQ />
      <CTA cfg={cfg} />
      <Footer />
      <JoinModal />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent} options={Object.keys(ACCENT_OPTS)}
          onChange={(v) => { setTweak("accent", v); setAccent(ACCENT_OPTS[v] || "aubergine"); bump((n) => n + 1); }} />
        <TweakSection label="Copy" />
        <TweakRadio label="Headline" value={t.headline} options={Object.keys(HEADLINES)} onChange={(v) => setTweak("headline", v)} />
        <TweakRadio label="CTA label" value={t.cta} options={["Join the TestFlight", "Get early access", "Follow the launch"]} onChange={(v) => setTweak("cta", v)} />
      </TweaksPanel>
    </div>
    </PersonaProvider>
  );
}

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