'use client';

import { motion } from 'motion/react';
import { ArrowRight, CheckCircle2 } from 'lucide-react';
import Image from 'next/image';

export default function AboutSection() {
  return (
    <section className="py-32 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-20 items-center">
          
          {/* Left: Images */}
          <div className="relative">
            <motion.div
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7 }}
              className="relative rounded-3xl overflow-hidden glass border-white/10 p-2 z-10 w-[80%]"
            >
              <div className="relative aspect-[4/5] rounded-2xl overflow-hidden">
                <Image
                  src="https://attractiveit.com/images/attractive_expert2.webp"
                  alt="Our Team"
                  fill
                  className="object-cover"
                />
                <div className="absolute inset-0 bg-brand-blue/20 mix-blend-overlay" />
              </div>
            </motion.div>

            <motion.div
              initial={{ opacity: 0, y: 50 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.7, delay: 0.3 }}
              className="absolute -bottom-10 -right-4 w-[60%] rounded-3xl overflow-hidden glass border-white/10 p-2 z-20 shadow-2xl"
            >
              <div className="bg-[#020617] rounded-2xl p-6">
                <div className="text-4xl font-display font-bold text-white mb-2">10+</div>
                <div className="text-sm text-gray-400">Years of crafting digital excellence across the globe.</div>
              </div>
            </motion.div>
            
            {/* Decorative Blur */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-brand-purple/20 blur-[100px] -z-10" />
          </div>

          {/* Right: Content */}
          <div className="flex flex-col items-start">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 px-4 py-2 rounded-full glass-card border-white/10 mb-6"
            >
              <span className="text-xs font-medium tracking-wide text-brand-purple uppercase">About Attractive IT</span>
            </motion.div>

            <motion.h2
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
              className="text-4xl md:text-5xl font-display font-bold mb-6 leading-tight"
            >
              Innovation meets <br />
              <span className="text-gradient">Flawless Execution</span>
            </motion.h2>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
              className="text-gray-400 text-lg mb-8 leading-relaxed"
            >
              At Attractive IT, we believe in the power of digital transformation. We blend cutting-edge technology with premium design to create solutions that not only look spectacular but deliver measurable business results.
            </motion.p>

            <div className="space-y-4 mb-10">
              {['Award-winning UI/UX Design', 'Enterprise-grade Security', 'Custom AI Models & Automation'].map((item, i) => (
                <motion.div
                  key={item}
                  initial={{ opacity: 0, x: 20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.3 + (i * 0.1) }}
                  className="flex items-center gap-3"
                >
                  <div className="w-6 h-6 rounded-full bg-brand-cyan/20 flex items-center justify-center">
                    <CheckCircle2 className="w-4 h-4 text-brand-cyan" />
                  </div>
                  <span className="text-gray-200">{item}</span>
                </motion.div>
              ))}
            </div>

            <motion.button
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.6 }}
              className="group relative px-8 py-3 glass-card rounded-full text-white font-medium hover:border-brand-purple/50 transition-all flex items-center gap-2"
            >
              Discover Our Story <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </motion.button>
          </div>

        </div>
      </div>
    </section>
  );
}