// App — single column, top to bottom: Header → Intro → ExampleShowcase → Pillars → Submission → Footer
// `example` is the selected worked example (Speed-to-Lead / Reputation). It is
// shared so the showcase selector and every pillar card stay in sync.
function App() {
  const [checks, setChecks] = React.useState(() =>
    window.PILLARS.map(p => p.check.map(() => false))
  );
  const [example, setExample] = React.useState(window.OFFERIQ_EXAMPLES[0].id);

  return (
    <>
      <Header />
      <main>
        <Intro />
        <ExampleShowcase selected={example} onSelect={setExample} />
        <PillarNav checks={checks} />
        <Pillars checks={checks} setChecks={setChecks} example={example} />
        <Submission checks={checks} />
      </main>
      <Footer />
    </>
  );
}

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