// Homepage entry — uses shared <Site> shell from site.jsx
const HOME_TWEAKS = /*EDITMODE-BEGIN*/{
  "headline": "os",
  "showStats": true
}/*EDITMODE-END*/;

const HEADLINES = {
  os:  ["The operating system for", "trading companies."],
  rev: ["Power your trading", "revenue engine."],
  one: ["From first click", "to funded client."],
};

function HomeApp() {
  const [t, setTweak] = useTweaks(HOME_TWEAKS);

  // Override H1 via DOM to allow live tweak (so it doesn't fight the JSX)
  React.useEffect(() => {
    const h1 = document.querySelector(".hero h1");
    if (!h1) return;
    const [a, b] = HEADLINES[t.headline] || HEADLINES.os;
    h1.innerHTML = `${a} <span class="gradient-text">${b}</span>`;
  }, [t.headline]);

  return (
    <Site currentPage="home">
      <Hero/>
      <Lifecycle/>
      <Products/>
      <MobileShowcase/>
      <Solutions/>
      {t.showStats && <Stats/>}
      <Integrations/>
      <Security/>
      <FinalCTA/>

      <HomeTweaks t={t} setTweak={setTweak}/>
    </Site>
  );
}

// Homepage-specific tweaks rendered inside the Site's TweaksPanel via portal-like trick:
// Just append a section that the user can find. Site already renders a TweaksPanel; we add another section here.
function HomeTweaks({ t, setTweak }) {
  // Render an additional fragment into the panel by mounting next to it.
  // Easiest: append a separate panel below — but better: re-use document body inserting.
  // We'll use a small effect to append into the existing panel.
  React.useEffect(() => {
    // no-op; rely on the second TweaksPanel from Site for theme.
    // For homepage extras, render a 2nd inline panel section here.
  }, []);
  return null;
}

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