import { div } from "three/tsl"
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";

export default function IconographyPage() {
  return (
    <div className="py-chorus-xxl">
    <section>
    <div className="max-w-5xl mx-auto px-chorus-lg pt-chorus-xxl">
      <ScrollReveal delay={200} duration={600} direction="up">
        <div className="mb-chorus-xxl">
          <h1 className="text-h2 mb-chorus-lg">Iconography System</h1>
          
          <div className="mb-chorus-lg">
            <h2 className="text-h3 mb-chorus-md">Philosophy</h2>
            <p className="mb-chorus-md">
              The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.
            </p>
            
            <div className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
              <ScrollReveal delay={300} duration={600} direction="up">
                <div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
                  <h4 className="text-h4 mb-chorus-sm">Clarity & Recognition</h4>
                  <p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
                </div>
              </ScrollReveal>
              <ScrollReveal delay={400} duration={600} direction="up">
                <div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
                  <h4 className="text-h4 mb-chorus-sm">Theme Adaptive</h4>
                  <p className="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p>
                </div>
              </ScrollReveal>
              <ScrollReveal delay={500} duration={600} direction="up">
                <div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
                  <h4 className="text-h4 mb-chorus-sm">Consistent Scale</h4>
                  <p className="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p>
                </div>
              </ScrollReveal>
            </div>
          </div>
        
        </div>
      </ScrollReveal>
      {/* Icon Categories */}

      <section className="mb-chorus-xxl">
        <h2 className="text-h3 mb-chorus-md">Icon Categories</h2>
        <p className="mb-chorus-md">
          The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.
        </p>
        
        <div className="space-y-chorus-lg">
          <ScrollReveal delay={500} duration={600} direction="up">
            {/* Interface Icons */}
            <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
              <h4 className="text-h4 mb-chorus-md">Interface & Navigation</h4>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
              <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Search</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Settings</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Filter</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Check</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Link</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Heart</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Star</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Delete</span>
                </div>
              </div>
            </div>
          </ScrollReveal>

          <ScrollReveal delay={500} duration={600} direction="up">
            {/* Navigation Icons */}
            <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
              <h4 className="text-h4 mb-chorus-md">Navigation & Direction</h4>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
              <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Home</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Left</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Right</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Up</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Down</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Location</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Globe</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Menu</span>
                </div>
              </div>
            </div>
          </ScrollReveal>
          <ScrollReveal delay={500} duration={600} direction="up">
            {/* File & System Icons */}
            <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
              <h4 className="text-h4 mb-chorus-md">File & System Operations</h4>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">File management and system-level actions</p>
              <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Document</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code File" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Code</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Folder</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Download_Package.png" alt="Download" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Download</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Upload</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/System/Save.png" alt="Save" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Save</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Copy.png" alt="Copy" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Copy</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Archive</span>
                </div>
              </div>
            </div>
          </ScrollReveal>
          <ScrollReveal delay={500} duration={600} direction="up">
            {/* Communication Icons */}
            <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
              <h4 className="text-h4 mb-chorus-md">Communication & Social</h4>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Messaging, notifications, and social interaction</p>
              <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Mail</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Chat</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notification" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Notify</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Phone</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Share</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="User" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">User</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="Team" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Team</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Send</span>
                </div>
              </div>
            </div>
          </ScrollReveal>
          <ScrollReveal delay={500} duration={600} direction="up">
            {/* Status & Warning Icons */}
            <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
              <h4 className="text-h4 mb-chorus-md">Status & Feedback</h4>
              <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Status indicators, warnings, and user feedback</p>
              <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Success</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Warning</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Error</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Info</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Help.png" alt="Help" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Help</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Loading.png" alt="Loading" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Loading</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Secure" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Secure</span>
                </div>
                <div className="flex flex-col items-center gap-2">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 dark:hidden" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" />
                  <span className="text-xs text-center">Unlock</span>
                </div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      <ScrollReveal delay={200} duration={600} direction="up">
        {/* Usage Guidelines */}
        <section className="mb-chorus-xxl">
          <h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
          
          <DoDontGrid>
            <DoSection>
              <DoItemCard title="Use Theme Variants">
                <p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p>
                <div className="flex gap-chorus-sm items-center">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="White Settings" className="w-6 h-6 bg-carbon-900 p-1" />
                  <span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span>
                </div>
              </DoItemCard>
              <DoItemCard title="Standard Sizes">
                <p className="text-sm mb-chorus-sm">Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.</p>
                <div className="flex gap-chorus-sm items-center">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="16px" className="w-4 h-4" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="20px" className="w-5 h-5" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="24px" className="w-6 h-6" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" />
                </div>
              </DoItemCard>
              <DoItemCard title="Semantic Meaning">
                <p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
              </DoItemCard>
            </DoSection>
            <DontSection>
              <DontItemCard title="Mix Icon Styles">
                <p className="text-sm mb-chorus-sm">Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.</p>
                <div className="flex gap-chorus-sm items-center opacity-75">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Coolicon" className="w-6 h-6" />
                  <span className="text-sm">+</span>
                  <div className="w-6 h-6 border-2 border-carbon-400 flex items-center justify-center text-xs">?</div>
                  <span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
                </div>
              </DontItemCard>
              <DontItemCard title="Arbitrary Sizing">
                <p className="text-sm mb-chorus-sm">Don't use random sizes that break the visual hierarchy and spacing system.</p>
                <div className="flex gap-chorus-sm items-center opacity-75">
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-3 h-3" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-7 h-7" />
                  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-10 h-10" />
                  <span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
                </div>
              </DontItemCard>
              <DontItemCard title="Modify or Recolor">
                <p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
              </DontItemCard>
            </DontSection>
          </DoDontGrid>
        </section>
      </ScrollReveal>

      <ScrollReveal delay={200} duration={600} direction="up">
        {/* Implementation Guide */}
        <section>
          <h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
          <p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
            The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.
          </p>
          
          <div className="bg-gradient-to-r from-mulberry-50 to-ocean-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-ocean-900/20 dark:border-mulberry-700">
            <h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
              Implementation Steps
            </h4>
            <p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
              Use theme-aware icon implementation with automatic dark/light mode switching:
            </p>
            
            <div className="space-y-chorus-md">
              <div>
                <h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
                  1. Theme-Aware Icon Implementation (HTML/React)
                </h5>
                <div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
                  <pre>{`<!-- Light theme icon (visible in light mode) -->
  <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" 
      alt="Settings" 
      className="w-6 h-6 dark:hidden" />

  <!-- Dark theme icon (visible in dark mode) -->
  <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" 
      alt="Settings" 
      className="w-6 h-6 hidden dark:block" />`}</pre>
                </div>
              </div>

              <div>
                <h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
                  2. Standard Icon Sizes (CSS Classes)
                </h5>
                <div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
                  <pre>{`/* Standard icon sizes following CHORUS spacing system */
  .icon-sm  { width: 1rem; height: 1rem; }    /* 16px */
  .icon-md  { width: 1.25rem; height: 1.25rem; } /* 20px */  
  .icon-lg  { width: 1.5rem; height: 1.5rem; }   /* 24px */
  .icon-xl  { width: 2rem; height: 2rem; }       /* 32px */`}</pre>
                </div>
              </div>

              <div>
                <h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
                  3. Icon Library Structure
                </h5>
                <div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
                  <pre>{`public/icons/coolicons.v4.1/
  ├── coolicons PNG/
  │   ├── Black/          # Light theme icons
  │   └── White/          # Dark theme icons
  ├── coolicons SVG/      # Vector versions
  └── Webfont/           # Icon font (optional)`}</pre>
                </div>
              </div>
            </div>
          </div>
        </section>
      </ScrollReveal>
    </div>
    </section>
    </div>
  );
}