/* SRQ Analytics — v2 app (adds FAQ section for AEO) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#16635a", "#1f8a7d", "#bd8b4e"],
  "headingFont": "Serif",
  "paper": "#f4f0e6"
}/*EDITMODE-END*/;

const PALETTES = [
  ["#16635a", "#1f8a7d", "#bd8b4e"],
  ["#1d4e6b", "#2c7aa6", "#c98a4b"],
  ["#2f5d3a", "#3f8553", "#c4933f"],
  ["#3a3f6b", "#5a61a8", "#c0884e"],
];

const PAPERS = ["#f4f0e6", "#f3efe9", "#eef1ee", "#f1f0ee"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useReveal();

  const headingFamily = t.headingFont === "Sans"
    ? '"Hanken Grotesk", system-ui, sans-serif'
    : '"Spectral", Georgia, serif';

  const styleVars = {
    "--teal": t.palette[0],
    "--teal-bright": t.palette[1],
    "--brass": t.palette[2],
    "--brass-soft": t.palette[2],
    "--paper": t.paper,
    "--font-display": headingFamily,
  };

  return (
    <div style={styleVars}>
      <Nav />
      <main>
        <Hero />
        <Services />
        <Outcomes />
        <Approach />
        <Process />
        <About />
        <Faq />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand color" />
        <TweakColor
          label="Palette"
          value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak("palette", v)}
        />
        <TweakSection label="Surface" />
        <TweakColor
          label="Paper"
          value={t.paper}
          options={PAPERS}
          onChange={(v) => setTweak("paper", v)}
        />
        <TweakSection label="Typography" />
        <TweakRadio
          label="Headings"
          value={t.headingFont}
          options={["Serif", "Sans"]}
          onChange={(v) => setTweak("headingFont", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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