// myflyers.ai — multi-page site (v0.2)
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "wordmark": "coral",
  "lockup": "none",
  "accent": "coral",
  "theme": "light",
  "density": "comfortable"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const page = useHashRoute();

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    document.documentElement.setAttribute("data-accent", tweaks.accent);
  }, [tweaks.theme, tweaks.density, tweaks.accent]);

  const { accent, wordmark, lockup } = tweaks;

  return (
    <div className="page" data-page={page}>
      <TopNav wordmark={wordmark} lockup={lockup} accent={accent} currentPage={page} />

      <main>
        {page === "home" && <HomePage accent={accent} wordmark={wordmark} lockup={lockup} />}
        {page === "realtors" && <RealtorsPage accent={accent} wordmark={wordmark} />}
        {page === "strategy" && <StrategyEnginePage accent={accent} wordmark={wordmark} />}
        {page === "prelisting" && <PreListingPage accent={accent} wordmark={wordmark} />}
        {page === "loan-officers" && <LoanOfficersPage accent={accent} wordmark={wordmark} />}
      </main>

      <PageFooter wordmark={wordmark} lockup={lockup} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand">
          <TweakRadio
            label="Wordmark"
            value={tweaks.wordmark}
            onChange={(v) => setTweak("wordmark", v)}
            options={[
              { value: "coral", label: "Coral" },
              { value: "teal", label: "Teal" },
              { value: "gradient", label: "Gradient" },
            ]}
          />
          <TweakRadio
            label="Lola lockup"
            value={tweaks.lockup}
            onChange={(v) => setTweak("lockup", v)}
            options={[
              { value: "none", label: "None" },
              { value: "inline", label: "Inline" },
              { value: "stacked", label: "Stacked" },
            ]}
          />
          <TweakRadio
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak("accent", v)}
            options={[
              { value: "coral", label: "Coral" },
              { value: "teal", label: "Teal" },
              { value: "gradient", label: "Gradient" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Theme"
            value={tweaks.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "light", label: "Light" },
              { value: "dark", label: "Dark" },
            ]}
          />
          <TweakRadio
            label="Density"
            value={tweaks.density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "comfortable", label: "Comfortable" },
              { value: "compact", label: "Compact" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Navigate">
          <TweakSelect
            label="Page"
            value={page}
            onChange={(v) => {
              const p = PAGES.find(x => x.id === v);
              if (p) window.location.hash = p.href.slice(1);
            }}
            options={PAGES.map(p => ({ value: p.id, label: p.label }))}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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