import { Suspense } from "react";
import Link from "next/link";
import { Logo } from "@/components/brand/logo";
import { CartBadge } from "@/components/cart-badge";
import { NotificationBell } from "@/components/notifications/notification-bell";
import { SearchBar } from "@/components/search-bar";
import { BuyerQueryProvider } from "./providers";

export const dynamic = "force-dynamic";

export default function BuyerLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <BuyerQueryProvider>
    <div className="min-h-screen flex flex-col">
      {/* Sustainability banner */}
      <div className="bg-forest-600 text-white text-center text-sm font-medium py-2.5 px-4">
        🌱 Resale is sustainable fashion — Every purchase keeps clothing out of landfills
      </div>

      {/* Nav bar */}
      <header className="bg-white border-b border-slate-200">
        <nav className="mx-auto flex max-w-7xl items-center gap-8 px-4 py-3">
          <Link href="/" className="shrink-0">
            <Logo height={26} priority />
          </Link>
          <div className="flex items-center gap-5">
            <Link href="/items?category=women" className="text-sm font-medium text-slate-500 hover:text-slate-900">
              Women
            </Link>
            <Link href="/items?category=men" className="text-sm font-medium text-slate-500 hover:text-slate-900">
              Men
            </Link>
            <Link href="/items?category=kids" className="text-sm font-medium text-slate-500 hover:text-slate-900">
              Kids
            </Link>
            <Link href="/items?category=home" className="text-sm font-medium text-slate-500 hover:text-slate-900">
              Home
            </Link>
          </div>
          <div className="hidden flex-1 justify-center px-8 md:flex">
            <Suspense>
              <SearchBar />
            </Suspense>
          </div>
          <div className="flex items-center gap-4 text-slate-500">
            <Link href="/saved" className="hover:text-slate-900 text-lg" aria-label="Saved items">
              ♡
            </Link>
            <NotificationBell />
            <CartBadge />
          </div>
        </nav>
      </header>

      {/* Content */}
      <main className="flex-1 bg-slate-50">{children}</main>

      {/* Trust bar footer */}
      <footer className="bg-slate-100 border-t border-slate-200">
        <div className="mx-auto max-w-7xl flex justify-center gap-10 px-4 py-4 text-xs font-medium text-slate-500">
          <span>🌱 Sustainable fashion</span>
          <span>✓ Every store verified</span>
          <span>↻ Full refund guarantee</span>
          <span>📦 Combined shipping</span>
        </div>
      </footer>
    </div>
    </BuyerQueryProvider>
  );
}