'use client'

import * as motion from 'framer-motion/m'
import { Shield, Clock, Truck, Leaf, DollarSign, Headphones } from 'lucide-react'
import { useCurrencyStore } from '@/store/currencyStore'

export default function AboutWhyChooseUs() {
  const formatAmount = useCurrencyStore((s) => s.formatAmount)
  const reasons = [
    { icon: Leaf, title: 'Farm Fresh', desc: 'Direct from local farms to your table', color: 'primary' },
    { icon: Clock, title: '30-Min Delivery', desc: 'Fastest delivery in Lahore', color: 'secondary' },
    { icon: Truck, title: 'Free Shipping', desc: `On orders above ${formatAmount(1000)}`, color: 'primary' },
    { icon: Shield, title: 'Quality Guarantee', desc: '100% satisfaction or refund', color: 'secondary' },
    { icon: DollarSign, title: 'Best Prices', desc: 'Competitive rates daily', color: 'primary' },
    { icon: Headphones, title: '24/7 Support', desc: 'Always here to help', color: 'secondary' },
  ]
  return (
    <section className="py-16 bg-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <motion.span
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            className="inline-flex items-center gap-2 bg-primary/10 px-4 py-2 rounded-full mb-4"
          >
            <Shield className="w-4 h-4 text-primary" />
            <span className="text-primary font-semibold text-sm uppercase tracking-wide">Why Us</span>
          </motion.span>
          
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.1 }}
            className="text-3xl md:text-4xl font-bold text-gray-800 mb-4"
          >
            Why Choose <span className="text-primary">DesiCart</span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2 }}
            className="text-gray-600 max-w-2xl mx-auto"
          >
            We`re committed to making your grocery shopping experience exceptional
          </motion.p>
        </div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {reasons.map((reason, index) => (
            <motion.div
              key={reason.title}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: index * 0.05 }}
              whileHover={{ y: -5 }}
              className="bg-gray-50 rounded-xl p-6 text-center hover:shadow-md transition-all duration-300"
            >
              <div className={`w-12 h-12 rounded-full bg-${reason.color}/10 flex items-center justify-center mx-auto mb-4`}>
                <reason.icon className={`w-6 h-6 text-${reason.color}`} />
              </div>
              <h3 className="font-bold text-gray-800 mb-2">{reason.title}</h3>
              <p className="text-sm text-gray-500">{reason.desc}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}