import React from 'react';
import Image from 'next/image';

const About: React.FC = () => {
  return (
    <section id="about" className="py-24 bg-feie-cream relative">
      <div className="container mx-auto px-6">
        <div className="flex flex-col md:flex-row items-center gap-16">
          
          {/* Image/Visual Area */}
          <div className="w-full md:w-1/2 relative">
             <div className="aspect-4/5 bg-feie-dark rounded-sm overflow-hidden relative shadow-xl">
                 <Image 
                    src="/assets/186-800x1000-grayscale.jpg" 
                    alt="Office architecture" 
                    fill
                    className="object-cover opacity-80 hover:scale-105 transition-transform duration-700"
                 />
                 <div className="absolute inset-0 border border-feie-gold/30 m-4 pointer-events-none"></div>
             </div>
             <div className="absolute -bottom-10 -right-10 w-48 h-48 bg-feie-gold/10 -z-10 rounded-full blur-3xl"></div>
          </div>

          {/* Text Content */}
          <div className="w-full md:w-1/2 space-y-8">
            <h2 className="text-sm font-bold tracking-widest text-feie-gold uppercase mb-2">关于我们 • About Us</h2>
            <h3 className="text-4xl md:text-5xl font-serif text-feie-dark leading-tight">
              专注技术沉淀 <br />
              <span className="italic text-gray-500">成就卓越品质</span>
            </h3>
            
            <div className="space-y-6 text-gray-600 font-light leading-relaxed">
              <p>
                南京市肥鹅信息技术有限公司坐落于历史悠久的六朝古都——南京。我们是一家专注于前沿信息技术研发与应用的高新技术企业。
              </p>
              <p>
                自成立以来，我们始终秉承"技术驱动、服务至上"的理念，深耕软件开发、系统集成及数字化转型咨询领域。我们拥有一支经验丰富、富有创造力的技术团队，致力于通过代码改变世界，用智慧连接未来。
              </p>
              <p>
                在溧水区这片充满活力的创新热土上，我们正以稳健的步伐，为各行各业的客户提供量身定制的IT解决方案，助力企业在数字经济浪潮中乘风破浪。
              </p>
            </div>

            <div className="pt-4 grid grid-cols-2 gap-8">
              <div>
                <h4 className="text-3xl font-serif text-feie-gold">100+</h4>
                <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">成功案例</p>
              </div>
              <div>
                <h4 className="text-3xl font-serif text-feie-gold">24/7</h4>
                <p className="text-sm text-gray-500 uppercase tracking-wider mt-1">技术支持</p>
              </div>
            </div>
          </div>

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

export default About;