import { useState } from 'react'
import SeedCard from './SeedCard'

export default function Seeds({ onInquiry }) {
  const seeds = [
    {
      id: 1,
      name: 'Basmati Rice',
      hindiName: 'बासमती चावल',
      category: 'धान',
      icon: '🌾',
      price: 280,
      unit: 'kg',
      yield: '40-45 quintal/acre',
      duration: '120-140 दिन',
      season: 'खरीफ'
    },
    {
      id: 2,
      name: 'Wheat',
      hindiName: 'गेहूं',
      category: 'गेहूं',
      icon: '🌾',
      price: 320,
      unit: 'quintal',
      yield: '50-55 quintal/acre',
      duration: '120-150 दिन',
      season: 'रबी'
    },
    {
      id: 3,
      name: 'Maize',
      hindiName: 'मक्का',
      category: 'मक्का',
      icon: '🌽',
      price: 250,
      unit: 'kg',
      yield: '30-35 quintal/acre',
      duration: '90-110 दिन',
      season: 'खरीफ/रबी'
    },
    {
      id: 4,
      name: 'Moong Dal',
      hindiName: 'मूंग दाल',
      category: 'दालें',
      icon: '🫘',
      price: 180,
      unit: 'kg',
      yield: '8-10 quintal/acre',
      duration: '60-70 दिन',
      season: 'खरीफ/ज़ायद'
    },
    {
      id: 5,
      name: 'Arhar Dal',
      hindiName: 'अरहर दाल',
      category: 'दालें',
      icon: '🫘',
      price: 220,
      unit: 'kg',
      yield: '12-15 quintal/acre',
      duration: '150-180 दिन',
      season: 'खरीफ'
    },
    {
      id: 6,
      name: 'Mustard',
      hindiName: 'सरसों',
      category: 'तेल',
      icon: '🌼',
      price: 450,
      unit: 'quintal',
      yield: '12-15 quintal/acre',
      duration: '130-150 दिन',
      season: 'रबी'
    },
    {
      id: 7,
      name: 'Tomato',
      hindiName: 'टमाटर',
      category: 'सब्जी',
      icon: '🍅',
      price: 1500,
      unit: 'packet',
      yield: '200-250 quintal/acre',
      duration: '90-120 दिन',
      season: 'साल भर'
    },
    {
      id: 8,
      name: 'Onion',
      hindiName: 'प्याज',
      category: 'सब्जी',
      icon: '🧅',
      price: 800,
      unit: 'packet',
      yield: '150-200 quintal/acre',
      duration: '90-120 दिन',
      season: 'रबी'
    },
    {
      id: 9,
      name: 'Potato',
      hindiName: 'आलू',
      category: 'सब्जी',
      icon: '🥔',
      price: 1200,
      unit: 'quintal',
      yield: '150-200 quintal/acre',
      duration: '90-120 दिन',
      season: 'रबी'
    },
    {
      id: 10,
      name: 'Cotton',
      hindiName: 'कपास',
      category: 'कपास',
      icon: '☁️',
      price: 750,
      unit: 'packet',
      yield: '15-20 quintal/acre',
      duration: '150-180 दिन',
      season: 'खरीफ'
    },
    {
      id: 11,
      name: 'Soybean',
      hindiName: 'सोयाबीन',
      category: 'दालें',
      icon: '🫘',
      price: 380,
      unit: 'kg',
      yield: '15-20 quintal/acre',
      duration: '90-110 दिन',
      season: 'खरीफ'
    },
    {
      id: 12,
      name: 'Groundnut',
      hindiName: 'मूंगफली',
      category: 'तेल',
      icon: '🥜',
      price: 420,
      unit: 'kg',
      yield: '20-25 quintal/acre',
      duration: '120-140 दिन',
      season: 'खरीफ'
    }
  ]

  const categories = ['सभी', 'धान', 'गेहूं', 'मक्का', 'दालें', 'सब्जी', 'तेल']
  const [selectedCategory, setSelectedCategory] = useState('सभी')

  const filteredSeeds = selectedCategory === 'सभी' 
    ? seeds 
    : seeds.filter(s => s.category === selectedCategory)

  return (
    <section id="seeds" className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-4xl font-bold text-kisan-soil mb-4">
            हमारे बीज उत्पाद
          </h2>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            प्रमाणित गुणवत्ता और उच्च उपज वाले बीज। 
            हर फसल के लिए सर्वश्रेष्ठ बीज।
          </p>
        </div>

        <div className="flex flex-wrap justify-center gap-3 mb-10">
          {categories.map((cat) => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-6 py-2 rounded-full font-medium transition ${
                selectedCategory === cat
                  ? 'bg-kisan-green text-white'
                  : 'bg-white text-gray-700 hover:bg-kisan-green hover:text-white'
              }`}
            >
              {cat}
            </button>
          ))}
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          {filteredSeeds.map((seed, index) => (
            <div 
              key={seed.id}
              className="opacity-0 animate-fade-in"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <SeedCard seed={seed} onInquiry={onInquiry} />
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}