'use client'

import { motion } from 'framer-motion'
import { Truck, Package, Users, Factory, Globe, Shield, Clock, CheckCircle, Calculator, Phone, Mail, Download, ArrowRight, Warehouse, Scale, Target } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Textarea } from '@/components/ui/textarea'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import PageHero from '@/components/sections/PageHero'

export default function BulkSupplyPage() {
  const bulkProducts = [
    {
      id: 1,
      name: 'Premium Basmati Rice',
      category: 'Rice & Grains',
      minOrder: '25 MT',
      pricing: '₹85-95/kg',
      packaging: '25kg, 50kg PP Bags',
      specifications: 'Extra Long Grain, Aged 2+ Years',
      image: '/api/placeholder/300/200',
      features: ['Export Quality', 'Sortex Cleaned', 'Moisture <12%']
    },
    {
      id: 2,
      name: 'Golden Sella Basmati',
      category: 'Rice & Grains',
      minOrder: '20 MT',
      pricing: '₹78-88/kg',
      packaging: '25kg, 50kg PP Bags',
      specifications: 'Parboiled, Golden Color',
      image: '/api/placeholder/300/200',
      features: ['Non-Sticky', 'Longer Shelf Life', 'Uniform Color']
    },
    {
      id: 5,
      name: 'Wheat Flour',
      category: 'Flour & Grains',
      minOrder: '50 MT',
      pricing: '₹28-35/kg',
      packaging: '25kg, 50kg PP Bags',
      specifications: 'Protein 11-12%, Ash <0.60%',
      image: '/api/placeholder/300/200',
      features: ['Fortified', 'Pest Free', 'Uniform Texture']
    },
  ]

  const services = [
    {
      icon: Factory,
      title: 'Custom Processing',
      description: 'Tailored processing solutions to meet your specific requirements and quality standards.',
      features: ['Custom Grading', 'Special Packaging', 'Quality Specifications']
    },
    {
      icon: Truck,
      title: 'Logistics Support',
      description: 'End-to-end logistics solutions from our facility to your destination worldwide.',
      features: ['Container Loading', 'Documentation', 'Tracking Support']
    },
    {
      icon: Shield,
      title: 'Quality Assurance',
      description: 'Comprehensive quality control with certifications and testing at every stage.',
      features: ['Pre-shipment Inspection', 'Quality Certificates', 'Sample Approval']
    },
    {
      icon: Globe,
      title: 'Export Services',
      description: 'Complete export facilitation with international compliance and documentation.',
      features: ['Export Documentation', 'Phytosanitary Certificates', 'COO Certificates']
    }
  ]

  const advantages = [
    {
      icon: Scale,
      title: 'Competitive Pricing',
      description: 'Direct from manufacturer pricing with volume-based discounts.',
      value: 'Up to 15% Savings'
    },
    {
      icon: Clock,
      title: 'Quick Turnaround',
      description: 'Fast processing and delivery to meet your timeline requirements.',
      value: '7-14 Days Delivery'
    },
    {
      icon: CheckCircle,
      title: 'Quality Guarantee',
      description: 'Assured quality with money-back guarantee on specifications.',
      value: '100% Quality Assurance'
    },
    {
      icon: Target,
      title: 'Flexible Terms',
      description: 'Customizable payment and delivery terms for long-term partnerships.',
      value: 'Flexible Payment Terms'
    }
  ]

  const specifications = [
    {
      parameter: 'Minimum Order Quantity',
      value: '3-50 MT (Product Dependent)',
      icon: Package
    },
    {
      parameter: 'Payment Terms',
      value: 'LC, TT, or Advance Payment',
      icon: Calculator
    },
    {
      parameter: 'Delivery Time',
      value: '7-21 Days from Order Confirmation',
      icon: Clock
    },
    {
      parameter: 'Packaging Options',
      value: 'PP Bags, Jute Bags, Cartons, Bulk',
      icon: Warehouse
    },
    {
      parameter: 'Quality Standards',
      value: 'FSSAI, ISO 22000, HACCP Certified',
      icon: Shield
    },
    {
      parameter: 'Documentation',
      value: 'COA, COO, Phytosanitary Available',
      icon: CheckCircle
    }
  ]

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-blue-50">
      {/* Hero Section */}
      <PageHero
        title="Supply Solutions"
        subtitle="Bulk"
        description="Premium quality food products in bulk quantities for distributors, retailers, and food manufacturers. Direct from source with competitive pricing and reliable supply chain."
        badge={{
          text: "Wholesale Solutions"
        }}
        icon={{
          component: Warehouse,
          bgColor: "bg-blue-600"
        }}
        features={[
          { icon: Package, label: "3+ MT Minimum Orders", color: "blue" },
          { icon: Globe, label: "Global Shipping", color: "green" },
          { icon: Shield, label: "Quality Certified", color: "purple" }
        ]}
        actions={[
          {
            label: "Get Quote",
            icon: Calculator,
            variant: "primary"
          },
          {
            label: "Download Catalog",
            icon: Download,
            variant: "secondary"
          }
        ]}
        backgroundGradient="from-blue-600/10 to-emerald-600/10"
        titleGradient="from-blue-600 to-emerald-600"
      />

      {/* Bulk Products Grid */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Bulk Product Portfolio
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              Premium quality products available in bulk quantities with competitive pricing and flexible terms.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {bulkProducts.map((product, index) => (
              <motion.div
                key={product.id}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                viewport={{ once: true }}
              >
                <Card className="h-full hover:shadow-xl transition-all duration-300 group border-0 shadow-lg overflow-hidden">
                  <div className="relative h-48 bg-gradient-to-br from-slate-100 to-slate-200">
                    <div className="absolute inset-0 flex items-center justify-center">
                      <Package className="w-16 h-16 text-slate-400" />
                    </div>
                    <Badge className="absolute top-3 left-3 bg-blue-600">
                      {product.category}
                    </Badge>
                  </div>
                  
                  <CardHeader className="pb-4">
                    <CardTitle className="text-xl font-bold text-slate-800 group-hover:text-blue-600 transition-colors">
                      {product.name}
                    </CardTitle>
                    <div className="flex justify-between items-center">
                      <span className="text-sm text-slate-500">Min Order:</span>
                      <Badge variant="outline" className="text-blue-700 border-blue-200">
                        {product.minOrder}
                      </Badge>
                    </div>
                  </CardHeader>
                  
                  <CardContent className="space-y-4">
                    <div className="grid grid-cols-2 gap-4 text-sm">
                      <div>
                        <span className="text-slate-500 block">Pricing Range</span>
                        <span className="font-semibold text-emerald-600">{product.pricing}</span>
                      </div>
                      <div>
                        <span className="text-slate-500 block">Packaging</span>
                        <span className="font-medium text-slate-700">{product.packaging}</span>
                      </div>
                    </div>
                    
                    <div>
                      <span className="text-slate-500 text-sm block mb-2">Specifications</span>
                      <p className="text-sm text-slate-600">{product.specifications}</p>
                    </div>
                    
                    <div className="flex flex-wrap gap-1">
                      {product.features.map((feature, idx) => (
                        <Badge key={idx} variant="secondary" className="text-xs">
                          {feature}
                        </Badge>
                      ))}
                    </div>
                    
                    <Button className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white">
                      Request Quote
                      <ArrowRight className="w-4 h-4 ml-2" />
                    </Button>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20 bg-gradient-to-r from-slate-50 to-blue-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Comprehensive Services
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              End-to-end support for your bulk procurement needs with professional service excellence.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {services.map((service, index) => {
              const IconComponent = service.icon
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card className="h-full text-center hover:shadow-lg transition-all duration-300 border-0 shadow-md bg-white/80 backdrop-blur-sm">
                    <CardContent className="p-6">
                      <div className="mb-6">
                        <div className="inline-flex p-4 bg-gradient-to-br from-blue-500 to-emerald-500 rounded-2xl shadow-lg">
                          <IconComponent className="w-8 h-8 text-white" />
                        </div>
                      </div>
                      
                      <h3 className="text-xl font-bold text-slate-800 mb-3">
                        {service.title}
                      </h3>
                      
                      <p className="text-slate-600 mb-4 leading-relaxed">
                        {service.description}
                      </p>
                      
                      <div className="space-y-2">
                        {service.features.map((feature, featureIndex) => (
                          <div key={featureIndex} className="flex items-center justify-center">
                            <CheckCircle className="w-4 h-4 text-green-500 mr-2" />
                            <span className="text-sm text-slate-600">{feature}</span>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Advantages Section */}
      <section className="py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Why Choose Our Bulk Supply?
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              Competitive advantages that make us your preferred bulk supply partner.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {advantages.map((advantage, index) => {
              const IconComponent = advantage.icon
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card className="h-full text-center hover:shadow-xl transition-all duration-300 border-0 shadow-lg bg-gradient-to-br from-white to-blue-50">
                    <CardContent className="p-8">
                      <div className="mb-6">
                        <div className="inline-flex p-4 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full shadow-lg">
                          <IconComponent className="w-8 h-8 text-white" />
                        </div>
                      </div>
                      
                      <h3 className="text-xl font-bold text-slate-800 mb-3">
                        {advantage.title}
                      </h3>
                      
                      <p className="text-slate-600 mb-4 leading-relaxed">
                        {advantage.description}
                      </p>
                      
                      <Badge className="bg-blue-100 text-blue-700 border-blue-200">
                        {advantage.value}
                      </Badge>
                    </CardContent>
                  </Card>
                </motion.div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Specifications Table */}
      <section className="py-20 bg-gradient-to-r from-slate-50 to-emerald-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-16"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Order Specifications
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              Complete order guidelines and specifications for bulk procurement.
            </p>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {specifications.map((spec, index) => {
              const IconComponent = spec.icon
              return (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  viewport={{ once: true }}
                >
                  <Card className="hover:shadow-lg transition-all duration-300 border-0 shadow-md bg-white">
                    <CardContent className="p-6">
                      <div className="flex items-start space-x-4">
                        <div className="p-3 bg-gradient-to-br from-emerald-500 to-blue-500 rounded-xl shadow-lg">
                          <IconComponent className="w-6 h-6 text-white" />
                        </div>
                        <div className="flex-1">
                          <h3 className="font-bold text-slate-800 mb-2">
                            {spec.parameter}
                          </h3>
                          <p className="text-slate-600 font-medium">
                            {spec.value}
                          </p>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </motion.div>
              )
            })}
          </div>
        </div>
      </section>

      {/* Quote Request Form */}
      <section className="py-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="text-center mb-12"
          >
            <h2 className="text-3xl md:text-4xl font-bold text-slate-800 mb-4">
              Request Bulk Quote
            </h2>
            <p className="text-lg text-slate-600">
              Get competitive pricing for your bulk requirements. Our team will respond within 24 hours.
            </p>
          </motion.div>

          <Card className="shadow-2xl border-0 bg-gradient-to-br from-white to-slate-50">
            <CardContent className="p-8">
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="company">Company Name *</Label>
                    <Input id="company" placeholder="Your Company Name" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="contact">Contact Person *</Label>
                    <Input id="contact" placeholder="Contact Person Name" />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="email">Email Address *</Label>
                    <Input id="email" type="email" placeholder="email@company.com" />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="phone">Phone Number *</Label>
                    <Input id="phone" placeholder="+91 98765 43210" />
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="product">Product Category</Label>
                    <Select>
                      <SelectTrigger>
                        <SelectValue placeholder="Select Category" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="rice">Rice & Grains</SelectItem>
                        <SelectItem value="spices">Spices</SelectItem>
                        <SelectItem value="flour">Flour & Grains</SelectItem>
                        <SelectItem value="pulses">Pulses</SelectItem>
                        <SelectItem value="mixed">Mixed Products</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="quantity">Estimated Quantity (MT)</Label>
                    <Input id="quantity" placeholder="e.g., 25 MT" />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="requirements">Detailed Requirements</Label>
                  <Textarea 
                    id="requirements" 
                    placeholder="Please specify products, quantities, quality requirements, delivery timeline, and any special instructions..."
                    rows={4}
                  />
                </div>

                <Button type="submit" className="w-full bg-blue-600 text-white hover:bg-blue-700 text-base py-3">
                  <Calculator className="w-5 h-5 mr-2" />
                  Submit Quote Request
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </section>
    </div>
  )
}