'use client'

import { useState } from 'react'
import { motion } from 'framer-motion'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { 
  Clock,
  MapPin,
  Users,
  TrendingUp,
  Shield,
  Star,
  CheckCircle,
  Calendar,
  DollarSign,
  Award,
  Target,
  Zap,
  Heart,
  Briefcase,
  Home,
  Phone,
  Mail,
  FileText,
  UserPlus
} from 'lucide-react'
import PageHero from '@/components/sections/PageHero'
import PartTimeRegistrationForm from '@/components/forms/PartTimeRegistrationForm'

export default function PartTimePage() {
  const [showRegistrationModal, setShowRegistrationModal] = useState(false)

  const jobBenefits = [
    {
      icon: DollarSign,
      title: "Fixed Monthly Salary",
      description: "Guaranteed ₹10,000 monthly salary regardless of sales"
    },
    {
      icon: TrendingUp,
      title: "1% Sales Incentive",
      description: "Earn 1% commission on every successful sale you make"
    },
    {
      icon: Clock,
      title: "Flexible Hours",
      description: "Work according to your available time schedule"
    },
    {
      icon: Award,
      title: "Sales Training",
      description: "Free product knowledge and sales technique training"
    }
  ]

  const jobRole = {
    id: 1,
    icon: Target,
    title: "Sales Executive",
    description: "Sell premium Kashmiri rice products to customers",
    requirements: [
      "Good communication skills", 
      "Basic smartphone knowledge", 
      "3-4 hours daily availability",
      "Willingness to learn"
    ],
    salary: "₹10,000/month",
    incentive: "1% commission on sales",
    totalEarnings: "₹10,000 + Sales Commission",
    color: "from-green-500 to-green-600"
  }

  const workProcess = [
    {
      step: 1,
      icon: UserPlus,
      title: "Apply Online",
      description: "Fill out our simple registration form"
    },
    {
      step: 2,
      icon: Phone,
      title: "Interview Call",
      description: "Quick phone interview to assess your skills"
    },
    {
      step: 3,
      icon: Award,
      title: "Training Provided",
      description: "Free online training and skill development"
    },
    {
      step: 4,
      icon: Zap,
      title: "Start Working",
      description: "Begin your part-time job and earn money"
    }
  ]

  return (
    <div className="min-h-screen bg-white">
      <PageHero
        title="Join Our Sales Team"
        subtitle="Sales Executive Position"
        description="₹10,000 guaranteed monthly salary + 1% commission. Flexible hours, comprehensive training, premium products."
        backgroundGradient="from-green-600 to-emerald-700"
        badge={{
          text: "Now Hiring"
        }}
        actions={[
          {
            label: "Apply Now",
            onClick: () => setShowRegistrationModal(true),
            variant: "primary"
          },
        ]}
      />

      {/* Job Benefits */}
      <section 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-16">
            <motion.h2 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-4xl font-bold text-gray-900 mb-4"
            >
              Why Work With Us?
            </motion.h2>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-xl text-gray-600 max-w-3xl mx-auto"
            >
              Guaranteed salary + unlimited earning potential
            </motion.p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {jobBenefits.map((benefit, index) => (
              <motion.div
                key={benefit.title}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="group"
              >
                <Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg group-hover:-translate-y-2">
                  <CardContent className="p-6 text-center">
                    <div className="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-200 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:from-purple-500 group-hover:to-purple-600 transition-all duration-300">
                      <benefit.icon className="h-8 w-8 text-purple-600 group-hover:text-white transition-colors duration-300" />
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-2">
                      {benefit.title}
                    </h3>
                    <p className="text-gray-600">
                      {benefit.description}
                    </p>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Available Job Roles */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <motion.h2 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-4xl font-bold text-gray-900 mb-4"
            >
              Position Details
            </motion.h2>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-xl text-gray-600 max-w-3xl mx-auto"
            >
              Everything you need to know about the role
            </motion.p>
          </div>

          <div className="flex justify-center">
            <div className="max-w-md w-full">
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: 0.1 }}
                className="group relative"
              >
                <Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg group-hover:-translate-y-2">
                  <CardHeader className="pb-4">
                    <div className="flex items-center space-x-4">
                      <div className={`w-12 h-12 bg-gradient-to-br ${jobRole.color} rounded-xl flex items-center justify-center`}>
                        <jobRole.icon className="h-6 w-6 text-white" />
                      </div>
                      <div className="flex-1">
                        <CardTitle className="text-lg font-bold text-gray-900">
                          {jobRole.title}
                        </CardTitle>
                        <Badge className="bg-green-100 text-green-800 mt-1">
                          {jobRole.totalEarnings}
                        </Badge>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent className="pt-0">
                    <p className="text-gray-600 mb-4">
                      {jobRole.description}
                    </p>
                    <div className="mb-4">
                      <div className="flex items-center justify-between text-sm mb-2">
                        <span className="text-gray-600">Base Salary:</span>
                        <span className="font-semibold text-green-600">{jobRole.salary}</span>
                      </div>
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-gray-600">Commission:</span>
                        <span className="font-semibold text-green-600">{jobRole.incentive}</span>
                      </div>
                    </div>
                    <h4 className="font-semibold text-gray-900 mb-2">Requirements:</h4>
                    <ul className="space-y-1">
                      {jobRole.requirements.map((req, reqIndex) => (
                        <li key={reqIndex} className="flex items-center text-sm text-gray-500">
                          <CheckCircle className="h-4 w-4 text-green-500 mr-2 flex-shrink-0" />
                          {req}
                        </li>
                      ))}
                    </ul>
                  </CardContent>
                </Card>
              </motion.div>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 bg-gradient-to-br from-purple-50 to-purple-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <motion.h2 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-4xl font-bold text-gray-900 mb-4"
            >
              How To Get Started
            </motion.h2>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-xl text-gray-600 max-w-3xl mx-auto"
            >
              Simple 4-step process to start earning
            </motion.p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {workProcess.map((process, index) => (
              <motion.div
                key={process.step}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
                className="text-center relative"
              >
                <div className="relative">
                  <div className="w-20 h-20 bg-white rounded-full shadow-lg flex items-center justify-center mx-auto mb-4">
                    <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-full flex items-center justify-center">
                      <process.icon className="h-8 w-8 text-white" />
                    </div>
                  </div>
                  <div className="absolute -top-2 -right-2 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center text-sm font-bold">
                    {process.step}
                  </div>
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-2">
                  {process.title}
                </h3>
                <p className="text-gray-600">
                  {process.description}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Success Stories */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <motion.h2 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="text-4xl font-bold text-gray-900 mb-4"
            >
              What Our Team Says
            </motion.h2>
            <motion.p 
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="text-xl text-gray-600 max-w-3xl mx-auto"
            >
              Real experiences from our sales team
            </motion.p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                name: "Priya Sharma",
                role: "Sales Executive",
                earnings: "₹13,500/month",
                story: "The guaranteed salary of ₹10,000 plus commission gives me financial security. Great training and support!",
                rating: 5
              },
              {
                name: "Rahul Gupta",
                role: "Sales Executive", 
                earnings: "₹15,200/month",
                story: "I love the 1% commission structure. The more I sell, the more I earn. Management is very supportive.",
                rating: 5
              },
              {
                name: "Anjali Verma",
                role: "Sales Executive",
                earnings: "₹12,800/month",
                story: "Perfect for someone who wants stable income with growth potential. Training helped me develop sales skills.",
                rating: 5
              }
            ].map((story, index) => (
              <motion.div
                key={story.name}
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
              >
                <Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg">
                  <CardContent className="p-6">
                    <div className="flex items-center space-x-1 mb-4">
                      {[...Array(story.rating)].map((_, i) => (
                        <Star key={i} className="h-5 w-5 text-yellow-400 fill-current" />
                      ))}
                    </div>
                    <p className="text-gray-600 mb-4 italic">"{story.story}"</p>
                    <div className="border-t pt-4">
                      <h4 className="font-bold text-gray-900">{story.name}</h4>
                      <p className="text-sm text-gray-500">{story.role}</p>
                      <Badge className="bg-green-100 text-green-800 mt-2">
                        Earning: {story.earnings}
                      </Badge>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* Part-Time Registration Modal */}
      <PartTimeRegistrationForm 
        isOpen={showRegistrationModal}
        onClose={() => setShowRegistrationModal(false)}
      />
    </div>
  )
}