"use client";

import { TopBar } from '@/components/layout/top-bar';
import { MobileNav } from '@/components/layout/mobile-nav';
import { DemoBanner } from '@/components/demo/demo-banner';
import { DataProviderProvider } from '@/lib/demo/data-provider-context';
import { demoProvider } from '@/lib/demo/demo-provider';

export default function DemoAppLayout({ children }: { children: React.ReactNode }) {
  return (
    <DataProviderProvider value={demoProvider}>
      <div className="min-h-screen bg-background">
        <div className="pointer-events-none fixed inset-0 bg-gradient-to-br from-primary/[0.02] via-transparent to-brand-clay/[0.02]" />
        <DemoBanner />
        <TopBar />

        <main className="max-w-6xl mx-auto px-4 sm:px-8 py-6 lg:py-10 pb-28 md:pb-12">
          {children}
        </main>

        <MobileNav />
      </div>
    </DataProviderProvider>
  );
}
