'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import ThreeLogo from './ThreeLogo';
import Breadcrumb from './Breadcrumb';

// Mobile accordion menu component
interface MobileAccordionMenuProps {
  onClose: () => void;
}

const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
  const pathname = usePathname();
  const [expandedSections, setExpandedSections] = useState<string[]>(['overview']);

  // Same navigation structure as Sidebar
  const navCategories = [
    {
      id: 'overview',
      label: 'Overview',
      icon: 'Navigation/House_01',
      items: [
        { href: '/', section: 'overview', icon: 'Navigation/House_01', label: 'Brand Overview' },
        { href: '/identity', section: 'identity', icon: 'User/User_01', label: 'Brand Identity' },
        { href: '/usage', section: 'usage', icon: 'Interface/Book', label: 'Usage Guidelines' },
      ]
    },
    {
      id: 'visual-identity',
      label: 'Visual Identity',
      icon: 'Interface/Main_Component',
      items: [
        { href: '/visual-identity', section: 'visual-identity', icon: 'Interface/Main_Component', label: 'Visual Identity' },
        { href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
        { href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
        { href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
        { href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
        { href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
        { href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' },
        { href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' },
        { href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
      ]
    },
    {
      id: 'communications',
      label: 'Communications',
      icon: 'Communication/Chat',
      items: [
        { href: '/culture', section: 'culture', icon: 'Environment/Bulb', label: 'Culture' },
        { href: '/communications', section: 'communications', icon: 'Communication/Chat', label: 'Language Support' },
        { href: '/public-relations', section: 'public-relations', icon: 'Communication/Paper_Plane', label: 'Public Relations' },
        { href: '/investor-relations', section: 'investor-relations', icon: 'Interface/Chart_Line', label: 'Investor Relations' },
        { href: '/collaborators', section: 'collaborators', icon: 'User/Users_Group', label: 'Collaborators' },
        { href: '/social-media', section: 'social-media', icon: 'Communication/Share_iOS_Export', label: 'Social Media' },
      ]
    }
  ];

  const toggleSection = (sectionId: string) => {
    setExpandedSections(prev => 
      prev.includes(sectionId) 
        ? prev.filter(id => id !== sectionId)
        : [sectionId]
    );
  };

  React.useEffect(() => {
    const currentCategory = navCategories.find(category => 
      category.items.some(item => item.href === pathname)
    );
    
    if (currentCategory) {
      setExpandedSections([currentCategory.id]);
    }
  }, [pathname]);

  const isCurrentPage = (href: string) => pathname === href;
  const isCategoryActive = (category: any) => 
    category.items.some((item: any) => item.href === pathname);

  return (
    
    <nav className="p-chorus-md max-h-96 overflow-y-auto">
      {navCategories.map((category) => {
        const isExpanded = expandedSections.includes(category.id);
        const isActive = isCategoryActive(category);
        
        return (
          <div key={category.id} className="">
            <button
              onClick={() => toggleSection(category.id)}
              className={`w-full group flex items-center justify-between gap-2 px-chorus-sm py-chorus-xs text-left transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
                isActive 
                  ? 'bg-sand-100 text-mulberry-950 dark:bg-mulberry-800 dark:text-white font-medium' 
                  : 'text-carbon-700 dark:text-mulberry-300'
              }`}
              aria-expanded={isExpanded}
            >
              <div className="flex items-center gap-2 ">
                <img 
                  src={`/icons/coolicons.v4.1/coolicons PNG/Black/${category.icon}.png`} 
                  alt="" 
                  className="icon h-4 w-4 dark:hidden" 
                />
                <img 
                  src={`/icons/coolicons.v4.1/coolicons PNG/White/${category.icon}.png`} 
                  alt="" 
                  className="icon hidden h-4 w-4 dark:inline-flex" 
                />
                <span className="font-semibold">{category.label}</span>
              </div>
              
              <svg
                className={`w-4 h-4 transition-transform duration-300 ${isExpanded ? 'rotate-90' : ''}`}
                fill="currentColor"
                viewBox="0 0 20 20"
              >
                <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
              </svg>
            </button>

            {isExpanded && (
              <div className="ml-6">
                {category.items.map((item) => (
                  <Link
                    key={item.section}
                    href={item.href}
                    onClick={onClose}
                    className={`p-chorus-sm flex items-center gap-2 px-chorus-sm transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
                      isCurrentPage(item.href)
                        ? 'bg-sand-50 text-mulberry-950 dark:bg-mulberry-900 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400'
                        : 'text-carbon-600 dark:text-mulberry-400'
                    }`}
                  >
                    <img 
                      src={`/icons/coolicons.v4.1/coolicons PNG/Black/${item.icon}.png`} 
                      alt="" 
                      className="icon h-4 w-4 dark:hidden" 
                    />
                    <img 
                      src={`/icons/coolicons.v4.1/coolicons PNG/White/${item.icon}.png`} 
                      alt="" 
                      className="icon hidden h-4 w-4 dark:inline-flex" 
                    />
                    <span className="text-sm">{item.label}</span>
                  </Link>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </nav>
  );
};

const Header = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [showVisualAid, setShowVisualAid] = useState(false);
  const [theme, setTheme] = useState<'light' | 'dark'>('dark');
  const [accessibilityTheme, setAccessibilityTheme] = useState<string>('default');

  // Theme toggle functionality
  React.useEffect(() => {
    const isDark = document.documentElement.classList.contains('dark');
    setTheme(isDark ? 'dark' : 'light');
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
    
    if (newTheme === 'dark') {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  };

  const applyAccessibilityTheme = (themeType: string) => {
    // Remove existing accessibility themes
    document.documentElement.removeAttribute('data-theme');
    document.documentElement.removeAttribute('data-accessibility');
    
    // Apply new theme
    if (themeType !== 'default') {
      document.documentElement.setAttribute('data-theme', themeType);
      document.documentElement.setAttribute('data-accessibility', themeType);
    }
    
    setAccessibilityTheme(themeType);
    setShowVisualAid(false); // Close modal after selection
    
    // Dispatch custom event to notify ThreeLogo components
    window.dispatchEvent(new CustomEvent('accessibilityThemeChanged', { 
      detail: { theme: themeType } 
    }));
  };
  return (
    <header className="fixed top-0 left-0 right-0 z-30 bg-white/80 backdrop-blur dark:bg-mulberry-950/80 lg:left-64 shadow-lg">
      <div className="max-w-5xl mx-auto mb-chorus-sm px-chorus-sm">
        <div className="flex items-center justify-between ">
        {/* Mobile layout - hamburger + logo on left, controls on right */}
        <div className="flex items-center justify-between w-full lg:hidden py-chorus-sm">
          <div className="flex items-center gap-chorus-sm">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
              aria-label="Toggle mobile menu"
            >
              <svg
                className="w-4 h-4 text-carbon-700 dark:text-mulberry-300"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d={mobileMenuOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"}
                />
              </svg>
            </button>
            <div className="flex items-center gap-chorus-xs">
              <ThreeLogo width={32} height={32} />
              <span className="font-logo text-lg">CHORUS</span>
            </div>
          </div>
          
          {/* Mobile controls - theme toggle and visual aid */}
          <div className="flex items-center gap-chorus-xs">
            <button 
              onClick={toggleTheme}
              className="p-chorus-sm hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
              aria-label="Toggle theme"
            >
              <img 
                src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png" 
                alt="Switch to Dark Mode" 
                className="icon w-4 h-4 dark:hidden"
              />
              <img 
                src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png" 
                alt="Switch to Light Mode" 
                className="icon w-4 h-4 hidden dark:inline-flex"
              />
            </button>
            
            <button 
              onClick={() => setShowVisualAid(true)}
              className="p-chorus-xs hover:bg-sand-100 dark:hover:bg-mulberry-800 transition-colors"
              aria-label="Visual aid settings"
            >
              <svg className="icon h-4 w-4 text-carbon-700 dark:text-mulberry-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
                <circle cx="12" cy="12" r="3"/>
              </svg>
            </button>
          </div>
        </div>

        {/* Desktop primary navigation - hidden on mobile */}
        <nav className="primary-nav hidden lg:block">
          <ul className="horizontal-menu">
            <li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
                <div className="flex items-center gap-2 ml-chorus-sm">
                  <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
                  <img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
                  <span>Overview</span>
                </div>
              <ul className="flyout-menu backdrop-blur">
                <li className="item">
                  <Link href="/" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Brand Overview</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/identity" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Brand Identity</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/usage" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Book.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Book.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Usage Guidelines</span>
                  </Link>
                </li>
              </ul>
            </li>
            <li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur">
                <div className="flex items-center gap-2  ml-chorus-sm">
                  <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
                  <img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
                  <span>Visual Identity</span>
                
              </div>
              <ul className="flyout-menu backdrop-blur">
                <li className="item">
                  <Link href="/visual-identity" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Visual Identity</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/logo" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Logo System</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/typography" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Text.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Text.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Typography</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/colors" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Swatches_Palette.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Swatches_Palette.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Color Palette</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/iconography" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Main_Component.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Main_Component.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Iconography</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/accessibility" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Accessibility</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/components" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Components</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/motion" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Motion System</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/implementation" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Implementation</span>
                  </Link>
                </li>
              </ul>
            </li>
            <li className="dark:hover:bg-mulberry-700 hover:bg-sand-300">
                <div className="flex items-center gap-2  ml-chorus-sm">
                  <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
                  <img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
                  <span>Communications</span>
                
              </div>
              <ul className="flyout-menu backdrop-blur">
                <li className="item">
                  <Link href="/culture" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Bulb.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Bulb.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Culture</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/communications" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Language Support</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/public-relations" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Public Relations</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/investor-relations" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Chart_Line.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Chart_Line.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Investor Relations</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/collaborators" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Collaborators</span>
                  </Link>
                </li>
                <li className="item">
                  <Link href="/social-media" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
                    <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
                    <img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
                    <span>Social Media</span>
                  </Link>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
        </div>
      </div>
      
      {/* Breadcrumb - always visible */}
      <div className="max-w-5xl mx-auto px-chorus-lg">
        <Breadcrumb />
      </div>
      
      {/* Mobile accordion menu - only visible when hamburger is clicked */}
      {mobileMenuOpen && (
        <div className="lg:hidden bg-white/95 dark:bg-mulberry-950/95 backdrop-blur border-t border-nickel-200 dark:border-mulberry-800">
          <MobileAccordionMenu onClose={() => setMobileMenuOpen(false)} />
        </div>
      )}
      
      {/* Visual Aid Modal - fixed for mobile */}
      {showVisualAid && (
        <div className="fixed inset-0 z-[100] flex items-start justify-center bg-black/50 backdrop-blur-sm p-4 pt-24">
          <div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full max-h-[calc(100vh-8rem)] overflow-y-auto p-chorus-lg shadow-xl">
            <div className="flex items-center justify-between mb-chorus-md">
              <h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
              <button 
                onClick={() => setShowVisualAid(false)}
                className="text-carbon-600 hover:text-carbon-950 dark:text-gray-400 dark:hover:text-white"
              >
                <svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M18 6L6 18M6 6L18 18"/>
                </svg>
              </button>
            </div>
            
            <div className="space-y-chorus-md">
              <p className="text-sm text-carbon-600 dark:text-mulberry-300">
                Adjust the visual appearance for different color vision conditions. These settings affect the Möbius ring logo materials while preserving the overall design integrity.
              </p>
              
              <div className="space-y-chorus-sm">
                <h4 className="text-h4 text-carbon-950 dark:text-white">Color Vision Support</h4>
                <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">
                  8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
                </p>
                <div className="grid grid-cols-1 gap-2">
                  <button 
                    onClick={() => applyAccessibilityTheme('default')}
                    className={`p-chorus-sm text-left border-2 border-carbon-300 bg-carbon-50 hover:bg-carbon-100 dark:border-carbon-600 dark:bg-carbon-900 dark:hover:bg-carbon-800 transition-colors ${accessibilityTheme === 'default' ? 'ring-2 ring-carbon-500' : ''}`}
                  >
                    <strong className="text-carbon-950 dark:text-white">Default Vision</strong><br />
                    <small className="text-carbon-700 dark:text-carbon-300">Standard CHORUS 8-color system</small>
                  </button>
                  <button 
                    onClick={() => applyAccessibilityTheme('protanopia')}
                    className={`p-chorus-sm text-left border-2 border-ocean-400 bg-ocean-50 hover:bg-ocean-100 dark:border-ocean-600 dark:bg-ocean-900 dark:hover:bg-ocean-800 transition-colors ${accessibilityTheme === 'protanopia' ? 'ring-2 ring-ocean-500' : ''}`}
                  >
                    <strong className="text-ocean-900 dark:text-ocean-100">Protanopia (Red-blind)</strong><br />
                    <small className="text-ocean-700 dark:text-ocean-300">Ocean/Sand adaptations</small>
                  </button>
                  <button 
                    onClick={() => applyAccessibilityTheme('deuteranopia')}
                    className={`p-chorus-sm text-left border-2 border-eucalyptus-400 bg-eucalyptus-50 hover:bg-eucalyptus-100 dark:border-eucalyptus-600 dark:bg-eucalyptus-900 dark:hover:bg-eucalyptus-800 transition-colors ${accessibilityTheme === 'deuteranopia' ? 'ring-2 ring-eucalyptus-500' : ''}`}
                  >
                    <strong className="text-eucalyptus-900 dark:text-eucalyptus-100">Deuteranopia (Green-blind)</strong><br />
                    <small className="text-eucalyptus-700 dark:text-eucalyptus-300">Blue/Yellow enhanced contrast</small>
                  </button>
                  <button 
                    onClick={() => applyAccessibilityTheme('tritanopia')}
                    className={`p-chorus-sm text-left border-2 border-coral-400 bg-coral-50 hover:bg-coral-100 dark:border-coral-600 dark:bg-coral-900 dark:hover:bg-coral-800 transition-colors ${accessibilityTheme === 'tritanopia' ? 'ring-2 ring-coral-500' : ''}`}
                  >
                    <strong className="text-coral-900 dark:text-coral-100">Tritanopia (Blue-blind)</strong><br />
                    <small className="text-coral-700 dark:text-coral-300">Coral/Eucalyptus substitutions</small>
                  </button>
                  <button 
                    onClick={() => applyAccessibilityTheme('achromatopsia')}
                    className={`p-chorus-sm text-left border-2 border-nickel-400 bg-nickel-50 hover:bg-nickel-100 dark:border-nickel-600 dark:bg-nickel-900 dark:hover:bg-nickel-800 transition-colors ${accessibilityTheme === 'achromatopsia' ? 'ring-2 ring-nickel-500' : ''}`}
                  >
                    <strong className="text-nickel-900 dark:text-nickel-100">Achromatopsia (Color blind)</strong><br />
                    <small className="text-nickel-700 dark:text-nickel-300">High contrast grayscale only</small>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}
    </header>
  );
};

export default Header;