/* Akasha — app router + render */
const { useEffect: mE } = React;

function App() {
  const route = useRoute();
  const [toastNode, toast] = useToast();

  mE(() => { if (window.lucide) lucide.createIcons({ attrs: { "stroke-width": 1.3 } }); });

  const navMap = { post: "blog", write: "blog" };
  const current = navMap[route.name] || route.name;

  let page;
  switch (route.name) {
    case "services": page = <Services />; break;
    case "pricing": page = <Pricing />; break;
    case "voices": page = <Voices toast={toast} />; break;
    case "blog": page = <BlogList />; break;
    case "write": page = <Editor id={route.param} toast={toast} />; break;
    case "post": page = <Article id={route.param} />; break;
    case "about": page = <About />; break;
    case "beauty": page = <Beauty />; break;
    case "access": page = <Access />; break;
    case "contact": page = <Contact toast={toast} />; break;
    default: page = <Home />;
  }

  return (
    <div className="site">
      <Announce />
      <Nav current={current} />
      {page}
      <Footer />
      {toastNode}
    </div>
  );
}

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