components/Layout/HeaderControls.tsx

import React from 'react';
import { motion } from 'framer-motion';
import { Volume2, VolumeX, Instagram, Phone } from 'lucide-react';
import { SOCIAL_LINKS } from '../../data/mockData';
import { useAudio } from '../../context/AudioContext';

const HeaderControls: React.FC = () => {
    const { isMuted, toggleMute, playHoverSound } = useAudio();

    return (
        <div className="fixed top-6 right-6 z-50 flex items-center gap-4">
            
            {/* Audio Controller */}
            <motion.button
                onClick={toggleMute}
                onMouseEnter={playHoverSound}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 1, duration: 0.5 }}
                className={`group flex items-center justify-center w-10 h-10 rounded-full bg-black/20 backdrop-blur-md transition-all duration-300 ${
                    isMuted 
                        ? "border border-red-500/30 hover:border-red-500/60 hover:bg-red-900/10" 
                        : "border border-white/10 hover:bg-brand-red/20"
                }`}
                aria-label={isMuted ? "Unmute Ambient Sound" : "Mute Ambient Sound"}
            >
                {isMuted ? (
                    <VolumeX className="w-4 h-4 text-red-500/60 group-hover:text-red-400 transition-colors" />
                ) : (
                    <div className="relative">
                        <Volume2 className="w-4 h-4 text-brand-gold" />
                        {/* Pulse Effect when active */}
                        <span className="absolute inset-0 rounded-full animate-ping opacity-75 bg-brand-gold/20"></span>
                    </div>
                )}
            </motion.button>

            {/* Social Dock */}
            <motion.div 
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 1.1, duration: 0.5 }}
                className="flex items-center gap-2 px-3 py-2 rounded-full bg-black/20 backdrop-blur-md border border-white/10"
            >
                <a 
                    href={SOCIAL_LINKS.instagram} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    onMouseEnter={playHoverSound}
                    className="p-1.5 rounded-full hover:bg-white/10 text-white/70 hover:text-brand-accent transition-colors"
                    aria-label="Instagram"
                >
                    <Instagram className="w-4 h-4" />
                </a>
                <a 
                    href={SOCIAL_LINKS.whatsapp} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    onMouseEnter={playHoverSound}
                    className="p-1.5 rounded-full hover:bg-white/10 text-white/70 hover:text-green-400 transition-colors"
                    aria-label="WhatsApp/Phone"
                >
                    <Phone className="w-4 h-4" />
                </a>
            </motion.div>
        </div>
    );
};

export default HeaderControls;