// Home page App — depends on components/shell.jsx for Nav + useTweaks + ACCENTS

function App(){
  const T = window.__TWEAKS__ || {};
  useTweaks();
  const [audience, setAudience] = React.useState(T.audience || "company");
  const [headline, setHeadline] = React.useState(T.headline || HEADLINES.company.default);
  const persist = (edits) => window.parent.postMessage({type:"__edit_mode_set_keys", edits}, "*");

  React.useEffect(()=>{ setHeadline(HEADLINES[audience].default); }, [audience]);

  React.useEffect(()=>{
    const audBtns = document.querySelectorAll("#audBtns button");
    audBtns.forEach(b=>{
      b.setAttribute("aria-pressed", b.dataset.aud === audience);
      b.onclick = ()=>{ setAudience(b.dataset.aud); persist({audience: b.dataset.aud}); };
    });
    const input = document.getElementById("headlineInput");
    if(input){
      input.value = headline;
      input.oninput = (e)=>{ setHeadline(e.target.value); persist({headline: e.target.value}); };
    }
  });

  return (
    <>
      <Nav audience={audience} setAudience={setAudience} current="home"/>
      <Hero audience={audience} setAudience={setAudience} headline={headline}/>
      <Marquee/>
      <HowItWorks audience={audience}/>
      <Features audience={audience}/>
      <Verification/>
      <SocialProof/>
      <Pricing audience={audience}/>
      <FinalCTA audience={audience} setAudience={setAudience}/>
      <BigFooter/>
    </>
  );
}

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