/* app.jsx — composition + tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "palette": ["#16CFBD", "#2FB1F0", "#5C6CF2"],
  "showPipeline": true
}/*EDITMODE-END*/;

function applyPalette(p) {
  if (!Array.isArray(p) || p.length < 3) return;
  const [teal, sky, indigo] = p;
  const root = document.documentElement.style;
  root.setProperty("--brand-teal", teal);
  root.setProperty("--brand-sky", sky);
  root.setProperty("--brand-indigo", indigo);
  root.setProperty("--grad", `linear-gradient(118deg, ${teal} 0%, ${sky} 48%, ${indigo} 100%)`);
  root.setProperty("--grad-soft", `linear-gradient(118deg, ${hexA(teal,0.14)} 0%, ${hexA(sky,0.14)} 48%, ${hexA(indigo,0.14)} 100%)`);
  root.setProperty("--accent", sky);
  root.setProperty("--accent-soft", hexA(sky, 0.10));
  root.setProperty("--accent-border", hexA(sky, 0.28));
}
function hexA(hex, a) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`;
}

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

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const scrollToCta = useCallback(() => {
    document.getElementById("cta")?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, []);

  return (
    <React.Fragment>
      <Nav onCta={scrollToCta} />
      <main>
        <Hero variant={t.heroVariant} onCta={scrollToCta} />
        <Features />
        <Lifecycle />
        <DashboardPreview />
        <Comparison />
        <Security />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero direction" />
        <TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={["split", "centered"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <TweakSection label="Brand color" />
        <TweakColor
          label="Gradient"
          value={t.palette}
          options={[
            ["#16CFBD", "#2FB1F0", "#5C6CF2"],
            ["#10C8A8", "#19B0E0", "#2F7BF0"],
            ["#1FA8D6", "#2F7BF0", "#6A5CF2"],
            ["#13C2C2", "#2A8FF0", "#7B5CF0"]
          ]}
          onChange={(v) => setTweak("palette", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

(function mount() {
  const boot = document.getElementById("boot");
  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
  const hide = () => { if (boot) { boot.classList.add("hide"); setTimeout(() => boot.remove(), 450); } };
  setTimeout(hide, 80);
})();