"use client";

import { motion } from "framer-motion";
import { 
  CheckCircle, 
  XCircle, 
  AlertTriangle, 
  FileImage, 
  Users, 
  Vote, 
  Award,
  Clock,
  Mail
} from "lucide-react";

const eligibilityRules = [
  { text: "Must be a current student of St. Joseph Engineering College (SJEC)", allowed: true },
  { text: "Must have a valid SJEC email address (@sjec.ac.in) to submit artwork", allowed: true },
  { text: "One submission per category per participant", allowed: true },
  { text: "Participants can enter multiple categories", allowed: true },
  { text: "Alumni and faculty are not eligible to participate", allowed: false },
  { text: "Group submissions are not allowed", allowed: false },
];

const submissionRules = [
  {
    icon: FileImage,
    title: "File Requirements",
    rules: [
      "Accepted formats: JPG, PNG, PDF",
      "Maximum file size: 10MB",
      "Minimum resolution: 1920x1080 pixels",
      "Digital art must be in RGB color mode",
    ],
  },
  {
    icon: CheckCircle,
    title: "Content Guidelines",
    rules: [
      "All artwork must be original and created by the participant",
      "No AI-generated artwork will be accepted",
      "Artwork must not contain offensive, inappropriate, or copyrighted content",
      "Previously published work may be submitted if you own the rights",
    ],
  },
  {
    icon: Clock,
    title: "Submission Details",
    rules: [
      "Include a title (max 100 characters)",
      "Provide a description of your artwork (max 500 characters)",
      "Select the appropriate category",
      "Fill in accurate artist details",
    ],
  },
];

const categoryRules = [
  {
    title: "Digital Art",
    description: "Artwork created using digital tools and software",
    requirements: [
      "Created using software like Photoshop, Illustrator, Procreate, etc.",
      "Digital paintings, illustrations, and photo manipulations accepted",
      "Must be entirely digitally created (no scanned traditional art)",
      "3D renders and digital sculptures are accepted",
    ],
  },
  {
    title: "Paintings",
    description: "Traditional paintings in any medium",
    requirements: [
      "Oil, acrylic, watercolor, or any traditional painting medium",
      "Submit high-quality photographs or scans of your work",
      "Physical artwork must be completed before submission deadline",
      "Mixed media paintings are accepted",
    ],
  },
  {
    title: "Poster Making",
    description: "Creative posters with impactful messages",
    requirements: [
      "Can be digital or traditional",
      "Must have a clear theme or message",
      "Text and typography should be legible",
      "Theme: Open (artist's choice)",
    ],
  },
];

const votingRules = [
  { text: "Voting is open to the general public", icon: Users },
  { text: "One vote per email address per artwork", icon: Vote },
  { text: "CAPTCHA verification required to prevent spam", icon: AlertTriangle },
  { text: "Vote counts will be hidden during the voting period", icon: Award },
  { text: "Voting period: March 1-5, 2026", icon: Clock },
  { text: "Results will be announced via email", icon: Mail },
];

const disqualificationReasons = [
  "Submission of AI-generated artwork",
  "Plagiarism or copyright infringement",
  "Submitting work created by someone else",
  "Multiple submissions in the same category",
  "Inappropriate or offensive content",
  "Vote manipulation or fraudulent voting",
  "Missing or false participant information",
];

export default function RulesPage() {
  return (
    <main className="min-h-screen bg-black pt-32 pb-20">
      {/* Hero Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center"
        >
          <span className="inline-block bg-lime-400 text-black px-4 py-1.5 text-xs font-bold tracking-wider rounded-full mb-6">
            COMPETITION RULES
          </span>
          <h1 className="text-4xl sm:text-5xl lg:text-6xl font-black tracking-tight text-white mb-6">
            Rules & <span className="text-lime-400">Guidelines</span>
          </h1>
          <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
            Please read all rules carefully before participating. Violation of any 
            rules may result in disqualification.
          </p>
        </motion.div>
      </section>

      {/* Eligibility Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
            <Users className="w-8 h-8 text-lime-400" />
            Eligibility
          </h2>
          <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 md:p-8">
            <div className="grid gap-4">
              {eligibilityRules.map((rule, index) => (
                <div
                  key={index}
                  className="flex items-start gap-3 p-3 rounded-xl bg-zinc-800/50"
                >
                  {rule.allowed ? (
                    <CheckCircle className="w-5 h-5 text-lime-400 flex-shrink-0 mt-0.5" />
                  ) : (
                    <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
                  )}
                  <span className="text-zinc-300">{rule.text}</span>
                </div>
              ))}
            </div>
          </div>
        </motion.div>
      </section>

      {/* Submission Rules Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
            <FileImage className="w-8 h-8 text-lime-400" />
            Submission Rules
          </h2>
          <div className="grid md:grid-cols-3 gap-6">
            {submissionRules.map((section, index) => (
              <div
                key={index}
                className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6"
              >
                <div className="w-12 h-12 rounded-xl bg-lime-400/10 flex items-center justify-center mb-4">
                  <section.icon className="w-6 h-6 text-lime-400" />
                </div>
                <h3 className="text-white font-bold text-lg mb-4">{section.title}</h3>
                <ul className="space-y-3">
                  {section.rules.map((rule, ruleIndex) => (
                    <li key={ruleIndex} className="flex items-start gap-2 text-zinc-400 text-sm">
                      <span className="text-lime-400 mt-1">•</span>
                      {rule}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </motion.div>
      </section>

      {/* Category Rules Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
            <Award className="w-8 h-8 text-lime-400" />
            Category Guidelines
          </h2>
          <div className="space-y-6">
            {categoryRules.map((category, index) => (
              <div
                key={index}
                className="bg-zinc-900 border border-zinc-800 rounded-2xl p-6 md:p-8"
              >
                <div className="flex flex-col md:flex-row md:items-start gap-6">
                  <div className="flex-1">
                    <h3 className="text-xl font-bold text-lime-400 mb-2">
                      {category.title}
                    </h3>
                    <p className="text-zinc-400 mb-4">{category.description}</p>
                  </div>
                  <div className="flex-1">
                    <h4 className="text-white font-semibold mb-3">Requirements:</h4>
                    <ul className="space-y-2">
                      {category.requirements.map((req, reqIndex) => (
                        <li key={reqIndex} className="flex items-start gap-2 text-zinc-400 text-sm">
                          <CheckCircle className="w-4 h-4 text-lime-400 flex-shrink-0 mt-0.5" />
                          {req}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </motion.div>
      </section>

      {/* Voting Rules Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
            <Vote className="w-8 h-8 text-lime-400" />
            Voting Rules
          </h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {votingRules.map((rule, index) => (
              <div
                key={index}
                className="bg-zinc-900 border border-zinc-800 rounded-xl p-4 flex items-center gap-4"
              >
                <div className="w-10 h-10 rounded-lg bg-lime-400/10 flex items-center justify-center flex-shrink-0">
                  <rule.icon className="w-5 h-5 text-lime-400" />
                </div>
                <span className="text-zinc-300 text-sm">{rule.text}</span>
              </div>
            ))}
          </div>
        </motion.div>
      </section>

      {/* Disqualification Section */}
      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
        >
          <h2 className="text-2xl sm:text-3xl font-black text-white mb-8 flex items-center gap-3">
            <AlertTriangle className="w-8 h-8 text-red-500" />
            Disqualification Criteria
          </h2>
          <div className="bg-red-500/10 border border-red-500/30 rounded-2xl p-6 md:p-8">
            <p className="text-zinc-300 mb-6">
              Participants may be disqualified for any of the following reasons:
            </p>
            <div className="grid sm:grid-cols-2 gap-3">
              {disqualificationReasons.map((reason, index) => (
                <div
                  key={index}
                  className="flex items-start gap-3 p-3 rounded-xl bg-zinc-900/50"
                >
                  <XCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
                  <span className="text-zinc-400 text-sm">{reason}</span>
                </div>
              ))}
            </div>
            <div className="mt-6 p-4 bg-zinc-900 rounded-xl">
              <p className="text-zinc-400 text-sm">
                <strong className="text-white">Note:</strong> All submissions will be 
                reviewed by moderators using AI detection tools and manual inspection. 
                Decisions made by the organizing committee are final.
              </p>
            </div>
          </div>
        </motion.div>
      </section>
    </main>
  );
}