import React from 'react';
import InputImagePanel from './panels/InputImagePanel';
import ConvolutionPanel from './panels/ConvolutionPanel';
import ReLUPanel from './panels/ReLUPanel';
import PoolingPanel from './panels/PoolingPanel';
import DeepLayerPanel from './panels/DeepLayerPanel';
import FlatteningPanel from './panels/FlatteningPanel';
import BackpropagationPanel from './panels/BackpropagationPanel';

const CNNVisualizer: React.FC = () => {
  return (
    <div className="flex flex-col items-center w-full">
      <header className="w-full py-8 px-4 text-center bg-gradient-to-r from-indigo-900 to-purple-900">
        <h1 className="text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
          Convolutional Neural Network Visualized
        </h1>
        <p className="mt-4 text-lg text-blue-200 max-w-2xl mx-auto">
          Explore how CNNs process images through multiple layers of abstraction
        </p>
      </header>
      
      <main className="w-full max-w-6xl mx-auto">
        <InputImagePanel />
        <ConvolutionPanel />
        <ReLUPanel />
        <PoolingPanel />
        <DeepLayerPanel />
        <FlatteningPanel />
        <BackpropagationPanel />
      </main>

      <footer className="w-full py-8 text-center text-gray-500 text-sm">
        <p>© 2025 CNN Visualizer</p>
      </footer>
    </div>
  );
};

export default CNNVisualizer;