"use client"

import { motion } from "framer-motion"
import { CheckCircle2 } from "lucide-react"

const taskExamples = [
  {
    category: "Data Labeling",
    tasks: ["Image classification", "Object detection", "Text annotation"],
    earning: "$1.50 - $5.00",
    time: "5-15 min",
  },
  {
    category: "Content Moderation",
    tasks: ["Review flagged content", "Verify guidelines compliance", "Quality assurance"],
    earning: "$2.00 - $6.00",
    time: "10-20 min",
  },
  {
    category: "Surveys & Research",
    tasks: ["Market research", "User feedback", "Opinion surveys"],
    earning: "$1.00 - $4.00",
    time: "5-10 min",
  },
  {
    category: "Transcription",
    tasks: ["Audio transcription", "Video captioning", "Translation"],
    earning: "$3.00 - $8.00",
    time: "15-30 min",
  },
]

export function TaskExamples() {
  return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
      <div className="max-w-6xl 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">
            Available{" "}
            <span className="text-primary">
              Task Types
            </span>
          </h2>
          <p className="text-base text-gray-600">Choose from diverse tasks that match your skills and schedule</p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {taskExamples.map((task, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <div className="bg-white border-2 border-gray-200 hover:border-primary p-6 transition-colors h-full">
                <h3 className="text-lg font-bold mb-4 text-primary">
                  {task.category}
                </h3>
                <ul className="space-y-2 mb-6">
                  {task.tasks.map((item, i) => (
                    <li
                      key={i}
                      className="flex items-center gap-2 text-gray-700 text-sm"
                    >
                      <CheckCircle2 className="w-4 h-4 text-primary shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
                <div className="grid grid-cols-2 gap-4 pt-4 border-t-2 border-gray-200">
                  <div>
                    <p className="text-xs text-gray-500 mb-1">Earning</p>
                    <p className="font-bold text-primary text-sm">{task.earning}</p>
                  </div>
                  <div className="text-right">
                    <p className="text-xs text-gray-500 mb-1">Time</p>
                    <p className="font-bold text-gray-900 text-sm">{task.time}</p>
                  </div>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}