// C-suite App — section routing + theme + period.

function ExecApp() {
  const [section, setSection] = React.useState("overview");
  const [theme, setTheme] = React.useState(() => {
    try { return localStorage.getItem("thaihao-exec-theme") || "light"; } catch { return "light"; }
  });
  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try { localStorage.setItem("thaihao-exec-theme", theme); } catch {}
  }, [theme]);
  const [period, setPeriod] = React.useState("MTD");

  const crumbs = section === "overview"     ? ["Executive", "Overview"]
              : section === "leaderboards"  ? ["Executive", "Leaderboards"]
              : section === "quarterly"     ? ["Executive", "Quarterly pack"]
              : section === "compliance"    ? ["Executive", "Compliance"]
              : section === "targets"       ? ["Executive", "Annual targets"]
              : ["Executive"];

  return (
    <div className="workspace">
      <ExecSidebar section={section} setSection={setSection} />
      <div className="main">
        <ExecTopbar crumbs={crumbs} theme={theme} onToggleTheme={() => setTheme(t => t==="dark"?"light":"dark")} period={period} onChangePeriod={setPeriod} />
        <div className="content" key={section}>
          {section === "overview"     && <Overview period={period} />}
          {section === "leaderboards" && <Leaderboards />}
          {!["overview","leaderboards"].includes(section) && <Placeholder section={section} />}
        </div>
      </div>
    </div>
  );
}

function Placeholder({ section }) {
  const t = {
    quarterly:  { icon: "ti-file-text",  title: "Quarterly board pack", body: "Generated quarterly by the Reporting service. PDF + slide deck handoff to the board portal." },
    compliance: { icon: "ti-shield-half",title: "Compliance dashboard", body: "DSR queue, sanctions hit history, KYC pipeline, audit coverage, retention enforcement — full read." },
    targets:    { icon: "ti-target",     title: "Annual targets",       body: "Set, adjust, and track 2026 platform targets. Adjustments require dual approval (I7)." },
  }[section] || { icon: "ti-chart-arcs", title: section };
  return (
    <div style={{display:"flex", flexDirection:"column", alignItems:"center", gap:10, padding:"64px 0", color:"var(--on-surface-variant)"}}>
      <i className={"ti " + t.icon} style={{fontSize:48}}></i>
      <h2 style={{fontFamily:"var(--font-display)", fontSize:18, color:"var(--on-surface)", margin:0}}>{t.title}</h2>
      <p style={{maxWidth:480, textAlign:"center", margin:0, fontSize:13}}>{t.body}</p>
      <span style={{fontSize:11, fontFamily:"var(--font-mono)"}}>UI kit · prototype</span>
    </div>
  );
}

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