import React from 'react';

const About: React.FC = () => {
  return (
    <section id="about" className="py-24 bg-slate-50">
      <div className="container mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div className="order-2 lg:order-1 relative">
            <div className="aspect-[4/3] md:aspect-square rounded-[2rem] overflow-hidden shadow-2xl">
              <img 
                src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=1000" 
                alt="Our Engineering Facility" 
                className="w-full h-full object-cover"
              />
            </div>
            <div className="absolute -bottom-6 -left-6 md:-bottom-10 md:-left-10 p-6 md:p-8 bg-blue-600 text-white rounded-3xl shadow-2xl max-w-[200px] md:max-w-[240px]">
              <div className="text-4xl md:text-5xl font-bold mb-2">15+</div>
              <div className="text-sm font-semibold opacity-90 uppercase tracking-widest leading-tight">Years of Industrial Excellence</div>
            </div>
          </div>

          <div className="order-1 lg:order-2">
            <h2 className="text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">Our Identity</h2>
            <h3 className="text-3xl md:text-5xl font-extrabold text-slate-900 mb-8 leading-tight">
              Designing the Future of Industrial Frameworks
            </h3>
            <p className="text-slate-600 mb-6 text-lg leading-relaxed">
              Hanmo Control & Network Co., Ltd. was established on the foundation that industrial automation must be inherently reliable, perfectly integrated, and intelligently scalable. 
            </p>
            <p className="text-slate-600 mb-10 leading-relaxed">
              As strategic partners for global leaders transitioning into Industry 4.0, our experts specialize in everything from site-wide instrumentation to enterprise-grade data management.
            </p>

            <div className="grid sm:grid-cols-2 gap-6">
              {[
                { title: 'Reliability Focused', icon: 'fa-shield-halved' },
                { title: 'Global Standards', icon: 'fa-globe' },
                { title: '24/7 Support', icon: 'fa-clock' },
                { title: 'Custom R&D', icon: 'fa-flask' },
              ].map((item, i) => (
                <div key={i} className="flex items-center gap-4 p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
                  <div className="w-10 h-10 bg-blue-50 rounded-lg flex items-center justify-center text-blue-600">
                    <i className={`fas ${item.icon}`}></i>
                  </div>
                  <span className="font-bold text-slate-800 text-sm">{item.title}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default About;