web/src/components/app-shell.tsx

"use client";

import { usePathname } from "next/navigation";
import type { ReactNode } from "react";

import { TopNav } from "@/components/top-nav";
import { useBranding } from "@/lib/branding";

export function AppShell({ children }: { children: ReactNode }) {
  const pathname = usePathname();
  const branding = useBranding({ applyDocument: true });
  const normalizedPath = pathname.replace(/\/+$/, "") || "/";
  const isLoginPage = normalizedPath === "/login";
  const isImagePage = normalizedPath === "/image";

  if (isLoginPage) {
    return <main className="h-dvh overflow-hidden text-stone-900">{children}</main>;
  }

  if (isImagePage) {
    return (
      <main className="app-page-background min-h-screen overflow-x-hidden px-4 pt-0 pb-2 text-stone-900 sm:px-6 lg:px-8">
        <div className="app-page-background fixed inset-x-0 top-0 z-40 px-4 pt-[env(safe-area-inset-top)] pb-2 sm:px-6 sm:pt-2 lg:px-8">
          <div className="mx-auto max-w-[1440px]">
            <TopNav branding={branding} />
          </div>
        </div>
        <div className="mx-auto box-border flex min-h-screen max-w-[1440px] flex-col gap-2 pt-[calc(env(safe-area-inset-top)+4.5rem)] sm:gap-5 sm:pt-[5.25rem]">
          {children}
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen overflow-x-hidden bg-[radial-gradient(circle_at_top_left,_rgba(255,255,255,0.92),_rgba(245,239,231,0.96)_42%,_rgba(240,235,227,0.99)_100%)] px-4 pt-0 pb-2 text-stone-900 sm:px-6 sm:pt-2 lg:px-8">
      <div className="mx-auto box-border flex min-h-screen max-w-[1440px] flex-col gap-2 pt-[env(safe-area-inset-top)] sm:gap-5 sm:pt-0">
        <TopNav branding={branding} />
        {children}
      </div>
    </main>
  );
}