import React from 'react';

const Hero: React.FC = () => {
  return (
    <section id="home" className="relative min-h-screen flex items-center pt-20 overflow-hidden">
      <div className="absolute inset-0 z-0">
        <img 
          src="https://images.unsplash.com/photo-1581092160562-40aa08e78837?auto=format&fit=crop&q=80&w=2000" 
          alt="Control Room" 
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-slate-900/80 md:bg-transparent md:bg-gradient-to-r md:from-slate-900/90 md:to-slate-900/20"></div>
      </div>

      <div className="container mx-auto px-6 relative z-10">
        <div className="max-w-5xl">
          <div className="inline-block px-4 py-1.5 mb-6 rounded-full bg-blue-600/20 border border-blue-400/30 text-blue-400 text-[10px] font-bold uppercase industrial-tracking animate-pulse font-industrial">
            Next-Gen Industrial Solutions
          </div>
          <h1 className="text-5xl md:text-8xl font-extralight text-white mb-8 leading-[1.05] premium-kerning font-premium">
            Engineering <span className="text-blue-500 font-normal">Precision</span> <br className="hidden md:block"/> for Industrial Networks
          </h1>
          <p className="text-lg md:text-xl text-slate-300 mb-10 leading-relaxed max-w-2xl font-premium font-light opacity-80">
            Hanmo Control & Network Co., Ltd. delivers global-standard DCS and SCADA infrastructure for mission-critical industrial ecosystems and digital transformation.
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <a href="#services" className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold shadow-xl transition-all hover:-translate-y-1 text-center font-industrial text-xs tracking-widest uppercase">
              Our Expertise
            </a>
            <a href="#contact" className="bg-white/10 hover:bg-white/20 text-white border border-white/20 backdrop-blur-md px-8 py-4 rounded-xl font-bold transition-all text-center font-industrial text-xs tracking-widest uppercase">
              Schedule Consultation
            </a>
          </div>
        </div>
        
        <div className="mt-20 grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8 max-w-5xl">
          {[
            { label: 'Installed Nodes', value: '1,500+' },
            { label: 'Uptime', value: '99.99%' },
            { label: 'Certified Experts', value: '60+' },
            { label: 'Years Active', value: '15' },
          ].map((stat, i) => (
            <div key={i} className="p-6 bg-white/5 backdrop-blur-xl rounded-2xl border border-white/10 group hover:bg-white/10 transition-colors">
              <div className="text-3xl md:text-4xl font-extralight text-white mb-2 font-premium premium-kerning">{stat.value}</div>
              <div className="text-[10px] text-slate-400 uppercase industrial-tracking font-industrial font-semibold">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Hero;