"use client"

import { motion } from "framer-motion"
import { Brain, Wallet, Zap } from "lucide-react"

export function FeatureShowcase() {
  const features = [
    {
      title: "Seamless Task Marketplace",
      description: "Browse thousands of AI-verified tasks. Filter by category, difficulty, and earning potential.",
      icon: Zap,
      delay: 0,
    },
    {
      title: "AI-Powered Verification",
      description: "Advanced AI models verify your work instantly. Get paid only for quality submissions.",
      icon: Brain,
      delay: 0.1,
    },
    {
      title: "Instant Payments",
      description: "Earn cUSD instantly on Celo Sepolia. Withdraw anytime with zero fees.",
      icon: Wallet,
      delay: 0.2,
    },
  ]

  return (
    <section className="relative py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 border-y-2 border-gray-200">
      <div className="max-w-7xl mx-auto">
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          viewport={{ once: true }}
        >
          <h2 className="text-3xl sm:text-4xl font-bold mb-4 text-gray-900">
            Why Choose{" "}
            <span className="text-primary">D.M.T.P</span>
          </h2>
          <p className="text-gray-600 text-base max-w-2xl mx-auto">
            The most advanced AI-powered microtask platform with instant payments and transparent verification.
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-6">
          {features.map((feature, i) => {
            const Icon = feature.icon
            return (
              <motion.div
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5, delay: feature.delay }}
                viewport={{ once: true }}
              >
                <div className="bg-white border-2 border-gray-200 p-6 h-full hover:border-primary transition-colors">
                  {/* Icon */}
                  <div className="w-12 h-12 bg-primary flex items-center justify-center mb-4 border-2 border-primary">
                    <Icon className="w-6 h-6 text-white" />
                  </div>

                  <h3 className="text-lg font-bold mb-2 text-gray-900">{feature.title}</h3>
                  <p className="text-gray-600 text-sm leading-relaxed">{feature.description}</p>
                </div>
              </motion.div>
            )
          })}
        </div>
      </div>
    </section>
  )
}