Untitled

// app/[clientId]/page.tsx

"use client"

import { useEffect, useState } from "react"
import { Instagram, Mail } from "lucide-react"
import { useRouter } from "next/navigation"
import { notFound } from "next/navigation"
import { LoginForm } from "@/components/login-form"
import { Gallery } from "@/components/gallery"
import { WelcomeHero } from "@/components/welcome-hero"
import { DownloadAll } from "@/components/download-all"
import { getClientConfig } from "@/lib/client-config"
import { BackgroundBeams } from "@/components/ui/background-beams"
import Cursor from '@/components/cursor/cursor';
import { Button } from "@/components/ui/button"
import { FooterWithContact } from "@/components/footer-with-contact"
import { ClientThemeProvider } from "@/components/client-theme-provider" // Import our new component

export default function ClientPage({ params }: { params: { clientId: string } }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [isLoading, setIsLoading] = useState(true)
  const router = useRouter()
  
  const clientConfig = getClientConfig(params.clientId)
  
  if (!clientConfig) {
    notFound()
  }

  useEffect(() => {
    // Check for hash-based password
    const hash = window.location.hash
    if (hash.startsWith("#password=")) {
      const password = hash.slice(10)
      if (password === clientConfig.password) {
        document.cookie = `auth-${params.clientId}=true; path=/`
        setIsAuthenticated(true)
        // Optionally remove the hash from URL
        window.history.replaceState(null, '', window.location.pathname)
      }
    }

    // Check for existing authentication
    const authCookie = document.cookie
      .split("; ")
      .find((row) => row.startsWith(`auth-${params.clientId}=`))
    
    setIsAuthenticated(authCookie?.split("=")[1] === "true")
    setIsLoading(false)
  }, [params.clientId, clientConfig.password])

  if (isLoading) {
    return null
  }

  // Wrap everything in the ClientThemeProvider
  return (
    <ClientThemeProvider clientConfig={clientConfig}>
      {!isAuthenticated ? (
        <main className="relative flex min-h-screen flex-col items-center justify-center p-4 bg-black">
          {/* Preserved highlight image code (commented out for now)
          <div className="absolute inset-0 overflow-hidden">
            <img
              src={clientConfig.highlightImage}
              alt="Hochzeits-Highlight"
              className="h-full w-full object-cover object-center"
            />
            <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
          </div>
          <Cursor />
          */}
          
          {/* Background Beams */}
          <BackgroundBeams className="opacity-100" />
          
          {/* Login Form Container */}
          <div className="relative z-10">
            <LoginForm 
              clientId={params.clientId} 
              onSuccess={() => setIsAuthenticated(true)} 
            />
          </div>
          <Cursor />
        </main>
      ) : (
        // After authentication, render the original layout
        <>
          <WelcomeHero config={clientConfig} />
          <main className="container mx-auto min-h-screen flex flex-col">
            <div className="space-y-8 px-4 py-8 md:space-y-12 md:py-12 flex-grow">
              <DownloadAll />
              <Gallery 
                sections={clientConfig.sections} 
                clientConfig={clientConfig}
              />
            </div>
            <FooterWithContact clientConfig={clientConfig} />
          </main>
          <Cursor />
        </>
      )}
    </ClientThemeProvider>
  )
}