'use client'

import { motion } from 'framer-motion'
import { useInView } from 'framer-motion'
import { useRef } from 'react'
import { Code, Palette, Database, Smartphone, Award, Users, Clock, Target, ChevronRight } from 'lucide-react'

const About = () => {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-50px' })

  const expertise = [
    {
      icon: Code,
      title: 'Frontend Architecture',
      description: 'Building scalable, maintainable user interfaces with modern frameworks and TypeScript.',
      features: ['React Ecosystem', 'Performance Optimization', 'TypeScript', 'State Management']
    },
    {
      icon: Database,
      title: 'Backend Systems',
      description: 'Designing robust server architectures and efficient database solutions.',
      features: ['API Design', 'Database Architecture', 'Server Optimization', 'Security']
    },
    {
      icon: Palette,
      title: 'Product Design',
      description: 'Crafting intuitive user experiences that balance aesthetics and functionality.',
      features: ['UX Research', 'UI Design', 'Design Systems', 'User Testing']
    },
    {
      icon: Smartphone,
      title: 'Mobile Solutions',
      description: 'Developing cross-platform applications with native performance and seamless UX.',
      features: ['React Native', 'PWA', 'Performance', 'Cross-Platform']
    }
  ]

  const stats = [
    { icon: Award, number: '50+', label: 'Projects Delivered', suffix: '' },
    { icon: Users, number: '30+', label: 'Client Partnerships', suffix: '' },
    { icon: Clock, number: '6', label: 'Years of Excellence', suffix: '+' },
    { icon: Target, number: '100', label: 'Success Rate', suffix: '%' }
  ]

  return (
    <section id="about" ref={ref} className="py-28 lg:py-36 bg-background relative overflow-hidden">
      {/* Sophisticated Background Elements */}
      <div className="absolute inset-0">
        <div className="absolute top-20 left-10 w-72 h-72 bg-primary/3 rounded-full blur-3xl"></div>
        <div className="absolute bottom-20 right-10 w-72 h-72 bg-secondary/3 rounded-full blur-3xl"></div>
      </div>

      <div className="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        {/* Enhanced Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
          transition={{ duration: 0.8 }}
          className="text-center mb-24"
        >
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="inline-flex items-center gap-4 text-primary/70 mb-6"
          >
            <div className="w-12 h-px bg-linear-to-r from-transparent to-primary/40"></div>
            <span className="text-sm font-semibold tracking-widest uppercase text-primary">Professional Profile</span>
            <div className="w-12 h-px bg-linear-to-l from-transparent to-primary/40"></div>
          </motion.div>
          
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-5xl lg:text-6xl font-light text-text mb-6"
          >
            Building <span className="font-semibold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent">Digital Excellence</span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-xl text-text/60 max-w-3xl mx-auto leading-relaxed font-light"
          >
            Specializing in the modern stack: <span className="font-semibold text-primary">Next.js, MERN, Laravel & Python</span>. I architect and build the scalable, high-performance web applications that power your business growth.
          </motion.p>
        </motion.div>

        {/* Enhanced Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 lg:gap-24 mb-24">
          
          {/* Left Column - Professional Narrative */}
          <motion.div
            initial={{ opacity: 0, x: -40 }}
            animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -40 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="space-y-10"
          >
            {/* Professional Introduction */}
            <div className="space-y-8">
              <div className="pb-6 border-b border-gray-700/20">
                <h3 className="text-3xl font-light text-text mb-4">
                  Strategic <span className="font-semibold text-primary">Technology</span> Leadership
                </h3>
                <div className="w-16 h-1 bg-linear-to-r from-primary to-secondary mb-6"></div>
              </div>
              
              <div className="space-y-6 text-text/70 leading-relaxed">
                <p className="text-lg font-light">
                  I specialize in crafting <span className="text-secondary font-semibold">high-performance digital solutions</span> that solve complex business challenges—delivering scalable, user-focused applications that drive growth and deliver tangible ROI.
                </p>
                
                <p className="font-light">
                  I leverage a comprehensive full-stack toolkit—from modern frontend technologies like <span className="text-secondary font-semibold">Next.js and React</span> to powerful backend frameworks including <span className="text-secondary font-semibold">Laravel, Python, and Node.js</span>. This technical breadth allows me to architect solutions that are not just functional, but optimized for performance, scalability, and long-term maintainability.
                </p>
                
                <p className="font-light">
                  I believe in true partnership working closely with clients to transform their vision into technical reality. Every solution I deliver is engineered as a <span className="text-secondary font-semibold">strategic business asset</span>, built for reliability and designed to accelerate long-term growth.
                </p>
              </div>
            </div>

            {/* Enhanced Stats Grid */}
            <div className="grid grid-cols-2 gap-5 pt-8">
              {stats.map((stat, index) => (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, y: 30 }}
                  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                  transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                  className="group"
                >
                  <div className="bg-surface/40 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/10 hover:border-primary/20 transition-all duration-500 hover:transform hover:-translate-y-2">
                    <div className="flex items-center gap-4 mb-3">
                      <div className="w-12 h-12 bg-linear-to-br from-primary/10 to-primary/5 rounded-xl flex items-center justify-center group-hover:from-primary/20 group-hover:to-primary/10 transition-all duration-300">
                        <stat.icon className="w-6 h-6 text-primary" />
                      </div>
                      <div>
                        <div className="text-2xl font-bold text-text flex items-baseline gap-1">
                          {stat.number}<span className="text-primary">{stat.suffix}</span>
                        </div>
                        <div className="text-sm text-text/50 font-medium mt-1">{stat.label}</div>
                      </div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>

          {/* Right Column - Enhanced Expertise with 2 Cards Per Row */}
          <motion.div
            initial={{ opacity: 0, x: 40 }}
            animate={isInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 40 }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="space-y-8"
          >
            <div className="pb-6 border-b border-gray-700/20">
              <h3 className="text-3xl font-light text-text mb-4">
                Core <span className="font-semibold text-primary">Competencies</span>
              </h3>
              <div className="w-16 h-1 bg-linear-to-r from-primary to-secondary"></div>
            </div>

            {/* 2x2 Grid for Competencies */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
              {expertise.map((area, index) => (
                <motion.div
                  key={area.title}
                  initial={{ opacity: 0, y: 30 }}
                  animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
                  transition={{ duration: 0.6, delay: 0.6 + index * 0.15 }}
                  className="group"
                >
                  <div className="bg-surface/30 backdrop-blur-sm rounded-2xl p-6 border border-gray-700/10 hover:border-primary/20 transition-all duration-500 hover:transform hover:-translate-y-1 h-full">
                    <div className="flex flex-col h-full">
                      {/* Icon and Title */}
                      <div className="flex items-center gap-4 mb-4">
                        <div className="w-12 h-12 bg-linear-to-br from-primary/10 to-primary/5 rounded-xl flex items-center justify-center group-hover:from-primary/20 group-hover:to-primary/10 transition-all duration-300">
                          <area.icon className="w-6 h-6 text-primary" />
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-start justify-between">
                            <h4 className="text-lg font-semibold text-text group-hover:text-primary transition-colors duration-300 line-clamp-2">
                              {area.title}
                            </h4>
                            <ChevronRight className="w-5 h-5 text-primary/60 group-hover:text-primary transform group-hover:translate-x-1 transition-all duration-300 shrink-0 mt-1" />
                          </div>
                        </div>
                      </div>
                      
                      {/* Description */}
                      <p className="text-text/60 leading-relaxed mb-4 font-light text-sm flex-1">
                        {area.description}
                      </p>
                      
                      {/* Features */}
                      <div className="flex flex-wrap gap-2">
                        {area.features.map((feature, featureIndex) => (
                          <motion.span
                            key={feature}
                            initial={{ opacity: 0, scale: 0.8 }}
                            animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                            transition={{ duration: 0.4, delay: 0.8 + index * 0.15 + featureIndex * 0.05 }}
                            className="px-2 py-1 bg-background/50 text-text/70 text-xs font-medium rounded-lg border border-gray-600/20 hover:border-primary/30 hover:text-primary transition-all duration-300"
                          >
                            {feature}
                          </motion.span>
                        ))}
                      </div>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>

        {/* Enhanced Philosophy Section */}
        <motion.div
          initial={{ opacity: 0, y: 40 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
          transition={{ duration: 0.8, delay: 0.8 }}
          className="text-center"
        >
          <div className="max-w-5xl mx-auto">
            <div className="bg-linear-to-br from-surface/40 to-surface/20 backdrop-blur-sm rounded-3xl p-14 border border-gray-700/10 hover:border-primary/10 transition-all duration-500">
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }}
                transition={{ duration: 0.6, delay: 1 }}
                className="inline-flex items-center gap-3 text-primary/60 mb-6"
              >
                <div className="w-8 h-px bg-primary/30"></div>
                <span className="text-sm font-semibold tracking-widest uppercase">Development Philosophy</span>
                <div className="w-8 h-px bg-primary/30"></div>
              </motion.div>
              
              <h3 className="text-2xl font-light text-text mb-8">
                Excellence in Every <span className="font-semibold text-primary">Detail</span>
              </h3>
              
              <p className="text-xl text-text/60 leading-relaxed font-light max-w-4xl mx-auto italic">
                I believe exceptional digital products are born from the fusion of <span className="font-semibold not-italic text-primary">robust engineering</span> and <span className="font-semibold not-italic text-primary">intuitive design</span>. Its not just about building something that works, but crafting a scalable, high-performance foundation that delivers tangible business value and stands the test of time.
              </p>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  )
}

export default About