Frontends/cnn/src/components/panels/DeepLayerPanel.tsx

import React from 'react';
import PanelContainer from '../ui/PanelContainer';
import GlowingBox from '../ui/GlowingBox';
import { Layers } from 'lucide-react';

const DeepLayerPanel: React.FC = () => {
  return (
    <PanelContainer
      title="Deep Layer Abstraction"
      description="As we progress through deeper layers of the CNN, the network learns increasingly abstract representations of the input image, from simple edges to complex shapes and patterns."
      panelNumber={5}
    >
      <div className="flex flex-col items-center">
        <div className="relative w-full max-w-[800px] h-[400px] md:h-[500px]">
          {/* Layer 1: Edges and Corners */}
          <GlowingBox 
            color="from-blue-500 to-purple-500" 
            className="absolute top-0 left-0 w-[80%] max-w-[600px] transform rotate-[-2deg] z-10"
          >
            <div className="p-2">
              <h3 className="text-lg font-semibold text-blue-300 mb-2">Layer 1: Edges & Corners</h3>
              <div className="grid grid-cols-4 gap-2">
                {Array(8).fill(0).map((_, i) => (
                  <div key={i} className="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center">
                    <div className={`w-full h-full ${
                      i % 4 === 0 ? 'bg-gradient-to-r from-blue-500/30 to-transparent' :
                      i % 4 === 1 ? 'bg-gradient-to-b from-blue-500/30 to-transparent' :
                      i % 4 === 2 ? 'bg-gradient-to-tr from-blue-500/30 to-transparent' :
                      'bg-gradient-to-bl from-blue-500/30 to-transparent'
                    } rounded-sm`}></div>
                  </div>
                ))}
              </div>
            </div>
          </GlowingBox>
          
          {/* Layer 2: Simple Shapes */}
          <GlowingBox 
            color="from-purple-500 to-pink-500" 
            className="absolute top-[120px] left-[40px] md:left-[80px] w-[75%] max-w-[550px] transform rotate-[1deg] z-20"
          >
            <div className="p-2">
              <h3 className="text-lg font-semibold text-purple-300 mb-2">Layer 2: Simple Shapes</h3>
              <div className="grid grid-cols-4 gap-2">
                {Array(8).fill(0).map((_, i) => (
                  <div key={i} className="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center">
                    <div className="w-full h-full flex items-center justify-center">
                      {i % 4 === 0 && (
                        <div className="w-3/4 h-3/4 border-2 border-purple-500/40 rounded-full"></div>
                      )}
                      {i % 4 === 1 && (
                        <div className="w-3/4 h-3/4 border-2 border-purple-500/40"></div>
                      )}
                      {i % 4 === 2 && (
                        <div className="w-3/4 h-1/2 border-2 border-purple-500/40 rounded-md"></div>
                      )}
                      {i % 4 === 3 && (
                        <div className="w-3/4 h-3/4 border-2 border-purple-500/40 transform rotate-45"></div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </GlowingBox>
          
          {/* Layer 3: Complex Features */}
          <GlowingBox 
            color="from-pink-500 to-red-500" 
            className="absolute top-[240px] left-[80px] md:left-[160px] w-[70%] max-w-[500px] transform rotate-[-1deg] z-30"
          >
            <div className="p-2">
              <h3 className="text-lg font-semibold text-pink-300 mb-2">Layer 3: Complex Features</h3>
              <div className="grid grid-cols-4 gap-2">
                {Array(8).fill(0).map((_, i) => (
                  <div key={i} className="aspect-square bg-gray-900 rounded-md p-1 flex items-center justify-center overflow-hidden">
                    {i === 0 && (
                      <div className="relative w-full h-full">
                        <div className="absolute top-1/4 left-1/4 w-1/2 h-1/2 border-2 border-pink-500/40 rounded-full"></div>
                        <div className="absolute top-1/3 left-1/3 w-1/3 h-1/3 bg-pink-500/20 rounded-full"></div>
                      </div>
                    )}
                    {i === 1 && (
                      <div className="w-full h-full flex items-center justify-center">
                        <div className="w-3/4 h-1/2 bg-pink-500/20 rounded-t-full"></div>
                      </div>
                    )}
                    {i === 2 && (
                      <div className="w-full h-full flex flex-col items-center justify-center space-y-1">
                        <div className="w-2/3 h-1/4 bg-pink-500/20 rounded-sm"></div>
                        <div className="w-1/2 h-1/4 bg-pink-500/20 rounded-sm"></div>
                      </div>
                    )}
                    {i > 2 && (
                      <div className="w-full h-full flex items-center justify-center">
                        <div className={`w-3/4 h-3/4 ${
                          i % 3 === 0 ? 'border-t-2 border-r-2' : 
                          i % 3 === 1 ? 'border-l-2 border-b-2' : 'border-2'
                        } border-pink-500/40 rounded-md`}></div>
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </GlowingBox>
        </div>
        
        <div className="flex items-center justify-center mt-8">
          <Layers size={24} className="text-blue-400 mr-2" />
          <h3 className="text-xl font-semibold text-blue-300">Hierarchy of Features</h3>
        </div>
        
        <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-[800px]">
          <div className="bg-gray-800/60 rounded-lg p-4 border border-gray-700">
            <h4 className="text-md font-semibold text-blue-300 mb-2">Early Layers</h4>
            <p className="text-sm text-gray-300">
              Detect low-level features like edges, corners, and basic textures. These are the building blocks
              for more complex pattern recognition.
            </p>
          </div>
          
          <div className="bg-gray-800/60 rounded-lg p-4 border border-gray-700">
            <h4 className="text-md font-semibold text-purple-300 mb-2">Middle Layers</h4>
            <p className="text-sm text-gray-300">
              Combine edges and textures into more complex patterns and shapes like circles, squares, and simple
              object parts.
            </p>
          </div>
          
          <div className="bg-gray-800/60 rounded-lg p-4 border border-gray-700">
            <h4 className="text-md font-semibold text-pink-300 mb-2">Deep Layers</h4>
            <p className="text-sm text-gray-300">
              Recognize complex, high-level concepts specific to the training dataset, such as eyes, faces, or
              entire objects.
            </p>
          </div>
        </div>
      </div>
    </PanelContainer>
  );
};

export default DeepLayerPanel;