Untitled

        {/* Image Size Adjustment */}
        <Popover>
          <PopoverTrigger asChild>
            <div className="px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
              <Image className="h-5 w-5 text-zinc-300" />
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-72 p-4 bg-zinc-900 border-zinc-800 text-zinc-300" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="space-y-4">
              <h4 className="font-medium text-sm">Fotogröße anpassen</h4>
              <div className="flex items-center gap-3">
                <ZoomIn className="h-4 w-4 text-zinc-400" />
                <Slider 
                  value={[gridSize]}
                  min={1}
                  max={6}
                  step={1}
                  onValueChange={(value) => setGridSize(value[0])}
                  className="flex-1"
                />
                <ZoomOut className="h-4 w-4 text-zinc-400" />
              </div>
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-2" />
        
        {/* Dark/Light Mode Toggle */}
        <div className="px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
          <Sun className="h-5 w-5 text-zinc-300" />
        </div>
        
        <div className="h-6 w-px bg-zinc-700 mx-2" />
        
        {/* Table of Contents */}
        <Popover>
          <PopoverTrigger asChild>
            <div className="px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
              <List className="h-5 w-5 text-zinc-300" />
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-72 p-0 bg-zinc-900 border-zinc-800 text-zinc-300 max-h-96 overflow-y-auto" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="p-3 border-b border-zinc-800">
              <h4 className="font-medium">Inhaltsverzeichnis</h4>
            </div>
            <div className="p-2">
              {sections.map((section, index) => (
                <div
                  key={index}
                  onClick={() => scrollToSection(section.title)}
                  className="p-2 hover:bg-zinc-800 rounded cursor-pointer transition-colors"
                >
                  {section.title}
                </div>
              ))}
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-2" />
        
        {/* Personal Info */}
        <Popover>
          <PopoverTrigger asChild>
            <div className="px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors">
              <UserRound className="h-5 w-5 text-zinc-300" />
            </div>
          </PopoverTrigger>
          <PopoverContent 
            className="w-80 p-0 bg-zinc-900 border-zinc-800 text-zinc-300" 
            sideOffset={16}
            side="top"
            align="center"
          >
            <div className="overflow-hidden">
              {/* Header with gradient background */}
              <div className="bg-gradient-to-r from-indigo-600 to-purple-600 p-4">
                <h3 className="font-bold text-white text-lg">{clientConfig.photographerName}</h3>
                <p className="text-white/80 text-sm">{clientConfig.photographerCredit}</p>
              </div>
              
              {/* Main content */}
              <div className="p-4 space-y-4">
                {/* Contact details */}
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-zinc-300">
                    <Mail className="h-4 w-4 text-zinc-400" />
                    <a 
                      href={`mailto:${clientConfig.photographerEmail}`} 
                      className="text-sm hover:text-primary transition-colors"
                    >
                      {clientConfig.photographerEmail}
                    </a>
                  </div>
                  <div className="flex items-center gap-2 text-zinc-300">
                    <Instagram className="h-4 w-4 text-zinc-400" />
                    <a 
                      href={clientConfig.photographerInstagram} 
                      target="_blank" 
                      rel="noopener noreferrer" 
                      className="text-sm hover:text-primary transition-colors"
                    >
                      Instagram
                    </a>
                  </div>
                </div>
                
                {/* Brief description */}
                <p className="text-sm text-zinc-400 border-t border-zinc-800 pt-3">
                  Professioneller Fotograf mit Leidenschaft für Hochzeits- und Portraitfotografie. Fangen Sie besondere Momente mit einzigartiger Perspektive ein.
                </p>
                
                {/* Contact button */}
                <Button 
                  className="w-full" 
                  onClick={() => window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })}
                >
                  Kontaktieren
                </Button>
              </div>
            </div>
          </PopoverContent>
        </Popover>
        
        <div className="h-6 w-px bg-zinc-700 mx-2" />
        
        {/* Scroll to Top */}
        <div 
          className="px-3 md:px-4 flex items-center justify-center cursor-pointer hover:bg-zinc-800 rounded-full transition-colors"
          onClick={scrollToTop}
        >
          <ChevronUp className="h-5 w-5 text-zinc-300" />
        </div>
      </div>
    </motion.div>
  )
}

export default ScrollToolbar