/* global React, ReactDOM,
   Nav, Hero, SocialProof, ProblemSection, EvidenceEngine, ResearchModes,
   DemoSection, SampleReport, TrustSection, Testimonials, UseCases, FinalCTA, Footer,
   useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakColor, TweakToggle, TweakSlider
*/

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "dark",
  "accent": "yellow",
  "headline": "signals",
  "density": "comfortable",
  "heroVariant": "composed",
  "showGrid": true
}/*EDITMODE-END*/;

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

  // CTA handler: route to platform.neroview.com sub-paths
  const onCTA = (kind) => {
    if (kind === "demo") {
      // scroll to demo section
      const el = document.getElementById("demo");
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    } else if (kind === "signin") {
      // would route to https://platform.neroview.com/sign-in in prod
      window.open("#", "_self");
    }
  };

  // suppress the grid background per tweak
  React.useEffect(() => {
    document.documentElement.style.setProperty(
      "--grid-line-final",
      t.showGrid ? "var(--grid-line)" : "transparent"
    );
  }, [t.showGrid]);

  return (
    <div
      className="app"
      data-mode={t.mode}
      data-accent={t.accent}
      data-density={t.density}
    >
      <Nav onCTA={onCTA} />
      <Hero tweaks={t} onCTA={onCTA} />
      <SocialProof />
      <ProblemSection />
      <EvidenceEngine />
      <ResearchModes />
      <DemoSection />
      <SampleReport />
      <TrustSection />
      <Testimonials />
      <UseCases />
      <FinalCTA onCTA={onCTA} />
      <Footer />

      <TweaksPanel title="Tweaks · NeroView">
        <TweakSection label="Aesthetic mode" />
        <TweakSelect
          label="Mode"
          value={t.mode}
          options={[
            { value: "dark", label: "Cinematic dark" },
            { value: "light", label: "Editorial light" },
            { value: "hybrid", label: "Hybrid (alternating)" },
          ]}
          onChange={(v) => setTweak("mode", v)}
        />
        <TweakRadio
          label="Accent"
          value={t.accent}
          options={["yellow", "amber", "electric", "lime"]}
          onChange={(v) => setTweak("accent", v)}
        />

        <TweakSection label="Headline variant" />
        <TweakSelect
          label="Hero headline"
          value={t.headline}
          options={[
            { value: "signals",  label: "From signals → decisions" },
            { value: "receipts", label: "AI research, with receipts" },
            { value: "mean",     label: "What customers really mean" },
            { value: "evidence", label: "Every insight has evidence" },
            { value: "watch",    label: "Watch less. Understand more." },
          ]}
          onChange={(v) => setTweak("headline", v)}
        />

        <TweakSection label="Hero visual" />
        <TweakSelect
          label="Treatment"
          value={t.heroVariant}
          options={[
            { value: "composed",      label: "Composed product mock" },
            { value: "constellation", label: "Evidence constellation" },
            { value: "pipeline",      label: "Pipeline diagram" },
            { value: "report",        label: "Report emerging" },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["comfortable", "compact"]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakToggle
          label="Hero grid lines"
          value={t.showGrid}
          onChange={(v) => setTweak("showGrid", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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