/* Main shell — sticky header, global grid backdrop, tab routing, footer pill */
const { useState: useStateApp } = React;

const TABS = [
  { id: "overview",   label: "Overview",   icon: BookOpen, Component: OverviewTab },
  { id: "colors",     label: "Colors",     icon: Palette,  Component: ColorsTab },
  { id: "typography", label: "Typography", icon: Type,     Component: TypographyTab },
  { id: "patterns",   label: "Patterns",   icon: Layers,   Component: PatternsTab },
  { id: "components", label: "Components", icon: Layout,   Component: ComponentsTab },
  { id: "product-ui", label: "Product UI", icon: SlidersHorizontal, Component: ProductUITab },
  { id: "assets",     label: "Assets",     icon: ImageIcon, Component: AssetsTab },
];

const App = () => {
  const [active, setActive] = useStateApp("overview");
  const Active = TABS.find((t) => t.id === active).Component;

  const pageBg = {
    background: BRAND.surface.canvas,
    backgroundImage: `linear-gradient(to right, ${BRAND.surface.grid} 1px, transparent 1px), linear-gradient(to bottom, ${BRAND.surface.grid} 1px, transparent 1px)`,
    backgroundSize: "40px 40px",
    minHeight: "100vh",
  };

  return (
    <div style={pageBg}>
      {/* Sticky header */}
      <header
        className="sticky top-0 z-40"
        style={{
          background: "rgba(239,239,239,0.78)",
          backdropFilter: "saturate(140%) blur(12px)",
          WebkitBackdropFilter: "saturate(140%) blur(12px)",
          borderBottom: `1px solid ${BRAND.surface.border}`,
        }}
      >
        <div className="max-w-7xl mx-auto px-6 md:px-10 py-4 flex items-center justify-between gap-6">
          <div>
            <div
              className="font-mono"
              style={{
                fontSize: 11,
                fontWeight: 700,
                letterSpacing: "0.22em",
                color: BRAND.ink.subtle,
              }}
            >
              BLADESTACK.IO
            </div>
            <div
              style={{
                fontSize: 20,
                fontWeight: 700,
                letterSpacing: "-0.015em",
                color: BRAND.ink.body,
                marginTop: 2,
              }}
            >
              Brand &amp; Style Guide
            </div>
          </div>
          <nav
            className="hidden xl:flex items-center gap-1 p-1 rounded-full"
            style={{
              background: BRAND.surface.card,
              border: `1px solid ${BRAND.surface.border}`,
              boxShadow: "0 1px 0 rgba(15,23,42,0.03)",
            }}
          >
            {TABS.map((t) => (
              <TabButton
                key={t.id}
                icon={t.icon}
                label={t.label}
                active={active === t.id}
                onClick={() => setActive(t.id)}
              />
            ))}
          </nav>
        </div>
        {/* Mobile tabs */}
        <div className="xl:hidden px-4 pb-3 overflow-x-auto">
          <div
            className="inline-flex items-center gap-1 p-1 rounded-full"
            style={{
              background: BRAND.surface.card,
              border: `1px solid ${BRAND.surface.border}`,
            }}
          >
            {TABS.map((t) => (
              <TabButton
                key={t.id}
                icon={t.icon}
                label={t.label}
                active={active === t.id}
                onClick={() => setActive(t.id)}
              />
            ))}
          </div>
        </div>
      </header>

      {/* Body */}
      <main className="max-w-7xl mx-auto px-6 md:px-10 py-10 md:py-14">
        <Active />
      </main>

      {/* Footer pill */}
      <footer className="max-w-7xl mx-auto px-6 md:px-10 pb-12">
        <div
          className="rounded-full overflow-hidden flex items-center justify-between gap-4 px-5 py-3"
          style={{
            border: `1px solid ${BRAND.surface.border}`,
            background: BRAND.surface.card,
          }}
        >
          <div className="flex items-center gap-3 min-w-0">
            <span
              className="inline-block rounded-full"
              style={{
                width: 14,
                height: 14,
                background: `linear-gradient(90deg, ${BRAND.primary[500]} 0%, ${BRAND.primary[500]} 50%, ${BRAND.secondary[500]} 50%, ${BRAND.secondary[500]} 100%)`,
                border: `1px solid ${BRAND.surface.border}`,
              }}
            />
            <span style={{ fontSize: 13, color: BRAND.ink.muted }}>
              Click any swatch to copy the hex code.
            </span>
          </div>
          <span
            className="font-mono hidden sm:inline-block"
            style={{ fontSize: 12, color: BRAND.ink.subtle, letterSpacing: "0.02em" }}
          >
            Primary #4353FF · Secondary #5BC9B1
          </span>
        </div>
      </footer>
    </div>
  );
};

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