'use client';

import { usePathname } from 'next/navigation';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import ChatWidget from '@/components/ChatWidget';

export default function LayoutWrapper({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const isDashboard = pathname?.startsWith('/dashboard');

  if (isDashboard) {
    // Dashboard has its own layout - render children directly
    return <>{children}</>;
  }

  // Regular pages with navbar, footer, and chat widget
  return (
    <>
      {/* Progressive Blur Effect */}
      <div className="gradient-blur" />
      <Navbar />
      <main>{children}</main>
      <Footer />
      <ChatWidget />
      {/* Background effect */}
      <div
        className="aura-background-component top-0 w-full h-screen -z-10 fixed"
        data-alpha-mask="80"
        style={{ maskImage: 'linear-gradient(transparent, black 0%, black 80%, transparent)' }}
      >
        <div className="aura-background-component top-0 w-full -z-10 absolute h-full">
          <div
            data-us-project="FixNvEwvWwbu3QX9qC3F"
            className="absolute w-full h-full left-0 top-0 -z-10"
          />
        </div>
      </div>
    </>
  );
}