"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardContent } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/badge";
import { Trophy, Star, Zap, Target } from "lucide-react";

export function GamificationSection() {
  return (
    <section className="py-20 bg-slate-50 dark:bg-neutral-900/50">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <Heading className="text-3xl md:text-4xl mb-6">Engagement Engine</Heading>
            <p className="text-lg text-muted-foreground mb-8">
              Gamification reduces dropout and increases completion. We turn learning into a rewarding journey.
            </p>
            
            <div className="space-y-6">
              <div className="bg-white dark:bg-neutral-800 p-6 rounded-xl shadow-sm border">
                <div className="flex justify-between mb-2">
                  <span className="font-semibold">Overall Progress</span>
                  <span className="text-primary font-bold">65%</span>
                </div>
                <Progress value={65} className="h-3" />
              </div>

              <div className="grid grid-cols-2 gap-4">
                <Card className="bg-primary/5 border-primary/20">
                  <CardContent className="p-4 flex flex-col items-center text-center">
                    <Trophy className="w-8 h-8 text-yellow-500 mb-2" />
                    <span className="text-sm font-bold">Skill Explorer</span>
                    <span className="text-xs text-muted-foreground">Badge Earned</span>
                  </CardContent>
                </Card>
                <Card className="bg-primary/5 border-primary/20">
                  <CardContent className="p-4 flex flex-col items-center text-center">
                    <Star className="w-8 h-8 text-blue-500 mb-2" />
                    <span className="text-sm font-bold">Curious Learner</span>
                    <span className="text-xs text-muted-foreground">Badge Earned</span>
                  </CardContent>
                </Card>
              </div>
            </div>
          </div>

          <div className="space-y-6">
            <div className="flex items-start gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg border">
              <Zap className="w-6 h-6 text-orange-500 shrink-0" />
              <div>
                <h4 className="font-bold">Weekly Challenges</h4>
                <p className="text-sm text-muted-foreground">Complete 3 practical tasks this week to earn 500 bonus points.</p>
              </div>
            </div>
            <div className="flex items-start gap-4 p-4 bg-white dark:bg-neutral-800 rounded-lg border">
              <Target className="w-6 h-6 text-green-500 shrink-0" />
              <div>
                <h4 className="font-bold">Monthly Hackathons</h4>
                <p className="text-sm text-muted-foreground">Join the "Build-a-Bot" challenge and win industry certifications.</p>
              </div>
            </div>
            <div className="p-6 bg-slate-900 text-white rounded-xl">
              <div className="flex items-center gap-4 mb-4">
                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center text-2xl">🤖</div>
                <div>
                  <p className="text-sm font-medium text-primary">AI Mentor</p>
                  <p className="text-lg italic">"Learn skills that actually matter in real life."</p>
                </div>
              </div>
              <div className="flex gap-2">
                <Badge variant="outline" className="text-white border-white/20">Creative Skills</Badge>
                <Badge variant="outline" className="text-white border-white/20">Motivation Nudges</Badge>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}