import { motion } from 'framer-motion';

const About = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="space-y-4"
    >
      <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong">
        About Me
      </h1>
      
      <div className="border border-primary/50 p-6 bg-background/50 box-glow">
        <p className="font-pixel text-lg text-foreground/90 leading-relaxed mb-4">
          Hello, traveler. I'm Jory — a maker, tinkerer, and digital explorer navigating through hardware and code.
        </p>
        
        <p className="font-pixel text-foreground/80 leading-relaxed">
          From building custom speaker systems and experimenting with X-ray machines to running self-hosted server infrastructure, I love diving deep into projects that blend the physical and digital worlds.
        </p>
      </div>

      <div className="flex flex-col md:flex-row gap-4">
        {/* Skills/Interests taking left half */}
        <div className="md:w-1/2 flex flex-col gap-4">
          <div className="p-4 border border-primary/30">
            <h2 className="font-minecraft text-xl text-primary text-glow mb-2">Technical Skills</h2>
            <ul className="font-pixel text-foreground/80 space-y-1">
              <li>{'>'} Web Development (React, TypeScript)</li>
              <li>{'>'} Self-Hosting & VPS Infrastructure</li>
              <li>{'>'} Linux System Administration</li>
              <li>{'>'} Audio Engineering & DSP</li>
            </ul>
          </div>
          <div className="p-4 border border-primary/30">
            <h2 className="font-minecraft text-xl text-primary text-glow mb-2">Current Interests</h2>
            <ul className="font-pixel text-foreground/80 space-y-1">
              <li>{'>'} DIY Electronics & Hardware</li>
              <li>{'>'} DJ Mixing & Audio Visualization</li>
              <li>{'>'} Speaker Design & Crossovers</li>
              <li>{'>'} Automation & Scripting</li>
            </ul>
          </div>
        </div>

        {/* ASCII Art on right - centered in remaining space */}
        <div className="md:w-1/2 flex items-center justify-center">
          <pre className="font-mono text-[5px] sm:text-[6px] md:text-[7px] lg:text-[8px] xl:text-[9px] text-primary/50 leading-[1.15] select-none whitespace-pre">
{`                                    ,#/**,*,                                
                   .*,.*,     .*,/#%##%%%%%%%%%%###(((                          
                         .*/((######%%%%##%%%%%%%%%%%###(##/((                  
                   ..,**/(#((((#%####%%%#%%%%%%%%%%%%%#%%##(((*,.               
                ,/#########%%#%%%%%%###%%%%%%%#%%%#######(##((((//,*            
               *(###%%%%%%######(//(//((/(#(########%#%%%%######(#(//           
              ,(##%%%##((((/(//*************//////((####%%%%%###%#((/*          
             .###%%%##((/***/************************//((##%%%%###%%%(/.        
            ((#%%%#(/*****,,,*********,,,*****,*********/(##%%%%%##%%%%#/.      
          .((%%%%#(/*,,,,,,,,,,,,,,,,,,,,,,,*,,*,*********/((#%%%%%%#####(*.  , 
          //#%%%#(/*,,,,,,,,,,,,,,,,,,,,,*,,,,,,,,**********//#%%%%%%%%%%%##(/,.
         ,#######(/**,,,,,,,,,,,,,,,,,,,,,,,,,,*,,,,,*******///(%%%%%%%##(/((/, 
         .#####%#(/****,,,,,,,,,,,,,,,,,,,,,,,,,,,,*********///(##%%%%%%#(/*..  
         .#(#%%%#(/***,,,********,,,,,,,,,,,,,,**//////(((/////(#%%%%%%#(/,. ,. 
         ,/#%%%%#(/****/////((#%%###/***,,,***/(##((/*****/((//##%%%%%%/(/,.    
           (#%%%#(***********,**********,,,**////************//##%##%#,   ,... .
           /(%%#(/**,,***//(#%%##(////**,,,*/((///#%%%%##(//***/(#%##.          
           *//#((/,,,,**/(//(#%#/*(//******/////(/*(##(/(/(//***/(##(/.         
          //***/(*,,,*********/****/**//**//////////*/**********/(#(//*         
         .******/*,,,****************//****///(/////////*********/((//          
          ,,***/**,,,******************/****///////****/*************,          
           .**,,,*,,,***************///*****///(//**********/********           
             *****,,,,*************/******,***////*************,****            
              .,**,,,*******,***,***////////((/(//*************,**,             
                .**,,,******,**,,*****/**/////////*************,*,              
                   .,********,************///**//////**********,#%(             
                   .,******************//////(////////*********,%%%%%%,         
                    ,*************/////((((((((((((//********/*(%%%%%%%#        
                    .*****************************************/%%%%%%%%%%.      
             *%%%%%%%(/*******,,,,***************************(%%%%%%%%%%%%/     
        ,%%%%%%%%%%%%%#/*****,,,,,,,,,,,*,,*******,,*******/#%%%%%%%%%%%%%%*    
    /##%%%%%%%%%%%%%%%%/*//*****,,,,,,,,,,,,****,*******//(/#%%%%%%%%%%%%%%%%%#/
.%%#%%%%%%%%%%%%%%%%%%%/***/(/***,**,,,,,,,,,,*******/((////(%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%(******/////**************//((/******(%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%(/**,,,*******/((((//////////*******/(%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%(/**,,,,******,,,,,,,,,,************/(%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%(/***,,*****,,,,,,,,,,,****//******//(#%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%#(/****,********,,,,,,****///*******//(#%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%###(/******,,****,,*****/****/*******//((%%%%%%%%%%%%%%%%%%*
 (%%%%%%%%%%%%%%%#((((((//****,,,,***************/******///%%%%%%%%%%%%%%%%%%%%,
  /%%%%%%%%%%%%%%%#(((((////***,,,*********************//#%%%%%%%%%%%%%%%%%%%%%%`}
          </pre>
        </div>
      </div>
    </motion.div>
  );
};

export default About;