/* App shell — Sef Tablet */
const TABS = [
  { key: "audit", label: "Audit", num: "01", Component: () => <TabAudit/> },
  { key: "wireframes", label: "5 direcții", num: "02", Component: () => <TabWireframes/> },
  { key: "matrix", label: "Matrice", num: "03", Component: () => <TabMatrix/> },
  { key: "hifi", label: "Recomandare", num: "04", Component: () => <TabHifi/> },
];
function App() {
  const [tab, setTab] = React.useState("audit");
  const Active = TABS.find((t) => t.key === tab)?.Component || (() => null);
  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <header className="sticky top-0 z-40 border-b border-slate-200 bg-white/95 backdrop-blur-sm">
        <div className="max-w-7xl mx-auto px-8 py-4 flex items-center justify-between gap-6">
          <div className="flex items-center gap-3 min-w-0">
            <a href="LaFix UX Hub.html" className="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-900 text-white shrink-0 hover:bg-slate-800"><span className="text-sm font-bold tracking-tight">LF</span></a>
            <div className="min-w-0">
              <p className="text-[11px] uppercase tracking-[0.18em] text-slate-500 font-semibold">UX Lead · audit · <a href="LaFix UX Hub.html" className="text-indigo-600 hover:underline normal-case tracking-normal">hub ↗</a></p>
              <h1 className="text-base font-semibold text-slate-900 leading-tight">Șef atelier — pe podea (tablet)</h1>
            </div>
          </div>
          <nav className="hidden md:flex items-center gap-1 rounded-lg bg-slate-100 p-1">
            {TABS.map((t) => <button key={t.key} onClick={() => setTab(t.key)} className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium ${tab === t.key ? "bg-white text-slate-900 shadow-sm" : "text-slate-600"}`}><span className={`text-[10px] font-mono ${tab===t.key?"text-indigo-600":"text-slate-400"}`}>{t.num}</span>{t.label}</button>)}
          </nav>
          <select value={tab} onChange={(e) => setTab(e.target.value)} className="md:hidden rounded-md border border-slate-300 bg-white px-3 py-2 text-sm font-medium">{TABS.map((t) => <option key={t.key} value={t.key}>{t.num} · {t.label}</option>)}</select>
        </div>
      </header>
      <main><Active/></main>
      <footer className="border-t border-slate-200 bg-white mt-10">
        <div className="max-w-7xl mx-auto px-8 py-6 flex flex-wrap items-center justify-between gap-4 text-xs text-slate-500">
          <div className="flex items-center gap-2"><span className="inline-flex h-5 w-5 items-center justify-center rounded bg-slate-900 text-white text-[9px] font-bold">LF</span><span>UX Lead — Quorum PDD</span></div>
          <div className="flex items-center gap-2"><span>Surse:</span><Cite>03_PERSONAS</Cite><Cite>05_UI §6</Cite><Cite>07_EVIDENCE R1+A1</Cite></div>
        </div>
      </footer>
    </div>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);