/* ===========================================================
   RealListener — app root
   =========================================================== */
const { Nav, Hero, HowItWorks, WhoItsFor, Matching } = window.NT;
const { Pricing, Trust, FAQ, FinalCTA, Footer } = window.NT;

const ACCENTS = {
  Amber:  { accent: "#d8a657", a2: "#e8bd76", deep: "#b78636", tint: "rgba(216,166,87,0.12)",  line: "rgba(216,166,87,0.30)",  ring: "rgba(216,166,87,0.45)" },
  Bronze: { accent: "#c0916f", a2: "#d3a888", deep: "#9c7050", tint: "rgba(192,145,111,0.13)", line: "rgba(192,145,111,0.32)", ring: "rgba(192,145,111,0.46)" },
  Teal:   { accent: "#6fa39a", a2: "#8bbab1", deep: "#517a72", tint: "rgba(111,163,154,0.13)", line: "rgba(111,163,154,0.32)", ring: "rgba(111,163,154,0.46)" },
  Sage:   { accent: "#96a487", a2: "#aebaa0", deep: "#717f63", tint: "rgba(150,164,135,0.14)", line: "rgba(150,164,135,0.32)", ring: "rgba(150,164,135,0.46)" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Amber",
  "headingFont": "serif"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [theme, setTheme] = useState(() => {
    try { return localStorage.getItem("nt-theme") || "dark"; } catch (e) { return "dark"; }
  });

  // theme
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("nt-theme", theme); } catch (e) {}
  }, [theme]);

  // accent tweak
  useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.Amber;
    const r = document.documentElement.style;
    r.setProperty("--accent", a.accent);
    r.setProperty("--accent-2", a.a2);
    r.setProperty("--accent-deep", a.deep);
    r.setProperty("--accent-tint", a.tint);
    r.setProperty("--accent-line", a.line);
    r.setProperty("--ring", a.ring);
  }, [t.accent]);

  // heading font tweak
  useEffect(() => {
    document.documentElement.setAttribute("data-heading", t.headingFont);
  }, [t.headingFont]);

  const toggleTheme = () => setTheme((th) => (th === "dark" ? "light" : "dark"));

  return (
    <React.Fragment>
      <Nav theme={theme} onToggleTheme={toggleTheme} />
      <main>
        <Hero />
        <HowItWorks />
        <WhoItsFor />
        <Matching />
        <Pricing />
        <Trust />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor
          label="Accent color"
          value={ACCENTS[t.accent].accent}
          options={[ACCENTS.Amber.accent, ACCENTS.Bronze.accent, ACCENTS.Teal.accent, ACCENTS.Sage.accent]}
          onChange={(hex) => {
            const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].accent === hex) || "Amber";
            setTweak("accent", name);
          }}
        />
        <TweakSection label="Typography" />
        <TweakRadio
          label="Headlines"
          value={t.headingFont}
          options={["serif", "sans"]}
          onChange={(v) => setTweak("headingFont", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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