import React from 'react';
import { Terminal } from 'lucide-react';
import TerminalButton from './components/TerminalButton';
import ProfileContent from './components/ProfileContent';
import ProjectsContent from './components/ProjectsContent';

function App() {
  const [activeSection, setActiveSection] = React.useState('about');

  return (
    <div className="min-h-screen bg-gray-900 flex items-center justify-center overflow-hidden">
      {/* TV Container */}
      <div className="w-[95%] max-w-[1400px] relative h-[80vh]">
        {/* TV Frame */}
        <div className="absolute inset-0 tv-frame">
          {/* Screen Container with Convex Effect */}
          <div className="relative w-full h-full rounded-[20px] overflow-hidden tv-screen-container">
            {/* Convex Screen Effect */}
            <div className="absolute inset-0 tv-screen-convex"></div>

            {/* Screen Content */}
            <div className="relative h-full w-full bg-[#003300] p-6 font-mono text-[#00FF00] overflow-hidden z-10">
              <div className="animate-pulse mb-4">
                <Terminal className="inline-block mr-2" />
                <span className="text-sm">echo "Hey there!"</span>
              </div>

              {/* Split Screen Container */}
              <div className="flex gap-8 h-[calc(100%-3rem)]">
                {/* Left Column - Navigation */}
                <div className="w-64 space-y-3 overflow-y-auto custom-scrollbar">
                  <TerminalButton
                    onClick={() => setActiveSection('about')}
                    isSelected={activeSection === 'about'}
                  >
                    ABOUT
                  </TerminalButton>
                  <TerminalButton
                    onClick={() => setActiveSection('projects')}
                    isSelected={activeSection === 'projects'}
                  >
                    PROJECTS
                  </TerminalButton>
                  <TerminalButton
                    onClick={() => setActiveSection('skills')}
                    isSelected={activeSection === 'skills'}
                  >
                    SKILLS
                  </TerminalButton>
                  <TerminalButton
                    onClick={() => setActiveSection('contact')}
                    isSelected={activeSection === 'contact'}
                  >
                    CONTACT
                  </TerminalButton>
                  <TerminalButton
                    onClick={() => setActiveSection('resume')}
                    isSelected={activeSection === 'resume'}
                  >
                    RESUME
                  </TerminalButton>
                </div>

                {/* Vertical Separator */}
                <div className="w-px h-full bg-[#00FF00] opacity-30"></div>

                {/* Right Column - Content */}
                <div className="flex-1 overflow-y-auto pr-4 custom-scrollbar">
                  {activeSection === 'about' && <ProfileContent />}
                  {activeSection === 'projects' && (
                    <ProjectsContent markdownPath="/content/projects.md" />
                  )}
                </div>
              </div>
            </div>

            {/* Scan Line Effect */}
            <div className="absolute inset-0 pointer-events-none z-20" style={{
              background: 'linear-gradient(rgba(0, 17, 0, 0.1) 50%, rgba(0, 17, 0, 0.2) 50%)',
              backgroundSize: '100% 4px'
            }}></div>

            {/* Screen Glare */}
            <div className="screen-glare"></div>
          </div>
        </div>

        {/* TV Controls */}
        <div className="absolute -bottom-10 right-20 flex space-x-6">
          <div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
          <div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
          <div className="w-8 h-8 bg-gray-700 rounded-full shadow-inner"></div>
        </div>

        {/* TV Speaker Grills */}
        <div className="absolute -bottom-6 left-20 flex space-x-1.5">
          {[...Array(10)].map((_, i) => (
            <div key={i} className="w-1.5 h-6 bg-gray-700 rounded-full opacity-50"></div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default App;