/* ============================================================
   App shell — topbar + mode switcher
   ============================================================ */
/* global React, ReactDOM, HomeownerMode, EnterpriseMode, CityMode, Icon */
const { useState: useStateApp } = React;

function Topbar({ mode, setMode }) {
  return (
    <header className="topbar">
      <div className="topbar-brand">
        <div className="topbar-brand-mark">L</div>
        <div className="topbar-brand-name">Lepton <span className="topbar-brand-sub">/ Solar</span></div>
      </div>
      <div style={{ display: "flex", justifyContent: "center" }}>
        <div className="modetabs">
          <button className={mode === "home" ? "is-active" : ""} onClick={() => setMode("home")}>
            <Icon name="home" size={12} color="currentColor"/>
            Homeowner
          </button>
          <button className={mode === "enterprise" ? "is-active" : ""} onClick={() => setMode("enterprise")}>
            <Icon name="warehouse" size={12} color="currentColor"/>
            Enterprise portfolio
          </button>
          <button className={mode === "city" ? "is-active" : ""} onClick={() => setMode("city")}>
            <Icon name="diamond" size={12} color="currentColor"/>
            City analysis
          </button>
        </div>
      </div>
      <div className="topbar-right"></div>
    </header>
  );
}

function App() {
  const [mode, setMode] = useStateApp("home");
  return (
    <div className="app-shell">
      <Topbar mode={mode} setMode={setMode}/>
      <div className="viewport" style={{ display: "grid", gridTemplateRows: "1fr", minHeight: 0 }}>
        <div style={{ minHeight: 0, position: "relative" }}>
          {mode === "home" && <HomeownerMode />}
          {mode === "enterprise" && <EnterpriseMode />}
          {mode === "city" && <CityMode />}
        </div>
      </div>
    </div>
  );
}

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