components/About.js

export default function About() {
  return (
    <section id="about" className="py-20 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-4xl font-bold text-kisan-soil mb-6">
              किसानों की सेवा में
              <span className="text-kisan-green"> 25+ वर्ष</span>
            </h2>
            <p className="text-gray-600 text-lg mb-6">
              किसान बीज सेवा भारत के किसानों को उच्च गुणवत्ता वाले बीज प्रदान करने के लिए समर्पित है। 
              हम समझते हैं कि एक किसान के लिए बीज की गुणवत्ता कितनी महत्वपूर्ण है।
            </p>
            
            <div className="space-y-4">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-kisan-green/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <span className="text-2xl">✓</span>
                </div>
                <div>
                  <h4 className="font-semibold text-kisan-soil">प्रमाणित गुणवत्ता</h4>
                  <p className="text-gray-600 text-sm">सभी बीज ICAR और राज्य कृषि विभाग द्वारा प्रमाणित</p>
                </div>
              </div>
              
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-kisan-green/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <span className="text-2xl">🚚</span>
                </div>
                <div>
                  <h4 className="font-semibold text-kisan-soil">देश भर में डिलीवरी</h4>
                  <p className="text-gray-600 text-sm">गांव तक मुफ्त डिलीवरी</p>
                </div>
              </div>
              
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 bg-kisan-green/10 rounded-xl flex items-center justify-center flex-shrink-0">
                  <span className="text-2xl">📞</span>
                </div>
                <div>
                  <h4 className="font-semibold text-kisan-soil">24/7 सहायता</h4>
                  <p className="text-gray-600 text-sm">कृषि विशेषज्ञों से मुफ्त सलाह</p>
                </div>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="bg-gradient-to-br from-kisan-green to-kisan-dark rounded-2xl p-6 text-white">
              <p className="text-4xl font-bold">100%</p>
              <p className="text-kisan-light">प्रमाणित बीज</p>
            </div>
            <div className="bg-gradient-to-br from-kisan-gold to-orange-400 rounded-2xl p-6 text-white">
              <p className="text-4xl font-bold">5000+</p>
              <p className="text-white/80">खुश किसान</p>
            </div>
            <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl p-6 text-white">
              <p className="text-4xl font-bold">50+</p>
              <p className="text-blue-200">जिलों में सेवा</p>
            </div>
            <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl p-6 text-white">
              <p className="text-4xl font-bold">24/7</p>
              <p className="text-purple-200">सहायता</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}