/* App shell — toggle between the two designs, persisted */

function App() {
  const [v, setV] = React.useState(() => localStorage.getItem("ct-design") || "A");
  React.useEffect(() => { localStorage.setItem("ct-design", v); }, [v]);

  return (
    <React.Fragment>
      <div className="switcher" role="tablist">
        <button className={v === "A" ? "on" : ""} onClick={() => setV("A")}>Design A · Dark</button>
        <button className={v === "B" ? "on" : ""} onClick={() => setV("B")}>Design B · Light</button>
        <button className={v === "C" ? "on" : ""} onClick={() => setV("C")}>Design C · Hero</button>
      </div>
      {v === "A" ? <DesignDark /> : v === "B" ? <DesignLight /> : <DesignAbout />}
    </React.Fragment>
  );
}

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