unai/src/app/admissions/page.tsx

'use client';

import React, { useState } from 'react';
import { 
  GraduationCap, Calendar, CheckCircle, MapPin, Mail, Phone, 
  FileText, Award, AlertCircle, BookOpen, CreditCard, ArrowRight
} from 'lucide-react';

export default function AdmissionsPage() {
  const [activeTab, setActiveTab] = useState('requirements');

  // Application process steps for UTAS Oman
  const applicationSteps = [
    {
      step: 1,
      title: 'Choose Your Program',
      description: 'Explore our undergraduate and postgraduate programs aligned with Oman Vision 2040.',
      timeline: '1-2 weeks',
      action: 'Browse Programs'
    },
    {
      step: 2,
      title: 'Submit Application',
      description: 'Complete online application with required documents and pay application fee.',
      timeline: '2-3 days',
      action: 'Apply Online'
    },
    {
      step: 3,
      title: 'Document Verification',
      description: 'Our admissions team verifies your academic credentials and documents.',
      timeline: '1-2 weeks',
      action: 'Track Status'
    },
    {
      step: 4,
      title: 'Assessment & Interview',
      description: 'Complete entrance exam or interview if required for your program.',
      timeline: '1 week',
      action: 'Schedule Test'
    },
    {
      step: 5,
      title: 'Admission Decision',
      description: 'Receive your admission decision and enrollment instructions.',
      timeline: '1-2 weeks',
      action: 'Check Result'
    },
    {
      step: 6,
      title: 'Enrollment & Registration',
      description: 'Confirm enrollment, pay fees, and register for courses.',
      timeline: '1 week',
      action: 'Complete Enrollment'
    }
  ];

  // Entry requirements by level
  const requirements = {
    undergraduate: [
      {
        category: 'Academic Requirements',
        items: [
          'High School Diploma or equivalent (minimum 60%)',
          'Strong performance in relevant subjects (Math, Science, English)',
          'Grade 12 certificate with subject-specific requirements'
        ]
      },
      {
        category: 'English Proficiency',
        items: [
          'IELTS Academic: 5.5 overall (5.0 in each band)',
          'TOEFL iBT: 71 overall',
          'UTAS English Placement Test (available on campus)',
          'High school English: Grade B or above'
        ]
      },
      {
        category: 'Additional Requirements',
        items: [
          'Completed application form',
          'Recent passport-size photographs',
          'Copy of passport/Emirates ID',
          'Medical fitness certificate (for some programs)'
        ]
      }
    ],
    postgraduate: [
      {
        category: 'Academic Requirements',
        items: [
          'Bachelor\'s degree from recognized institution',
          'Minimum GPA of 2.5/4.0 or equivalent',
          'Relevant undergraduate degree for chosen program',
          'Professional experience (for MBA and some programs)'
        ]
      },
      {
        category: 'English Proficiency',
        items: [
          'IELTS Academic: 6.0-6.5 overall (depending on program)',
          'TOEFL iBT: 79-88 overall',
          'UTAS English Placement Test',
          'Previous degree taught in English (with certification)'
        ]
      },
      {
        category: 'Program-Specific Requirements',
        items: [
          'Statement of purpose (500-1000 words)',
          'Letters of recommendation (2-3)',
          'CV/Resume with work experience',
          'Portfolio (for design and creative programs)',
          'GMAT/GRE scores (for some business programs)'
        ]
      }
    ]
  };

  // Application documents checklist
  const documentChecklist = [
    { document: 'Completed application form', required: true, note: 'Available online' },
    { document: 'Academic transcripts (certified)', required: true, note: 'Original + translation if needed' },
    { document: 'English proficiency test results', required: true, note: 'IELTS/TOEFL or equivalent' },
    { document: 'Copy of passport/Emirates ID', required: true, note: 'Valid identification' },
    { document: 'Passport-size photographs', required: true, note: '4 recent photos' },
    { document: 'Statement of purpose', required: false, note: 'For postgraduate programs' },
    { document: 'Letters of recommendation', required: false, note: '2-3 letters for postgraduate' },
    { document: 'CV/Resume', required: false, note: 'For postgraduate and professional programs' },
    { document: 'Portfolio', required: false, note: 'For design and creative programs' },
    { document: 'Medical certificate', required: false, note: 'For specific programs only' }
  ];

  // Important dates and deadlines
  const importantDates = [
    { event: 'Fall Semester Application Deadline', date: 'July 15, 2025', type: 'deadline' },
    { event: 'Fall Semester Classes Begin', date: 'September 1, 2025', type: 'start' },
    { event: 'Spring Semester Application Deadline', date: 'December 15, 2025', type: 'deadline' },
    { event: 'Spring Semester Classes Begin', date: 'February 1, 2026', type: 'start' },
    { event: 'Summer Session Application Deadline', date: 'April 15, 2026', type: 'deadline' },
    { event: 'Summer Session Classes Begin', date: 'June 1, 2026', type: 'start' }
  ];

  // Application fees
  const applicationFees = [
    { category: 'Undergraduate Programs', fee: 'OMR 25', note: 'Non-refundable application fee' },
    { category: 'Postgraduate Programs', fee: 'OMR 50', note: 'Non-refundable application fee' },
    { category: 'International Students', fee: '+OMR 25', note: 'Additional processing fee' },
    { category: 'Late Application', fee: '+OMR 25', note: 'After deadline submission' }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero Section */}
      <div className="bg-gradient-to-r from-blue-900 via-indigo-900 to-purple-900 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
          <div className="text-center">
            <h1 className="text-4xl md:text-5xl font-bold mb-6">
              Join UTAS Oman
            </h1>
            <p className="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
              Start your journey toward academic excellence and career success. Apply now for our world-class programs 
              designed to meet Oman&apos;s Vision 2040 goals.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center gap-2">
                <FileText className="w-5 h-5" />
                Apply Online Now
              </button>
              <button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-900 transition-colors flex items-center gap-2">
                <BookOpen className="w-5 h-5" />
                View Programs
              </button>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        {/* Application Process */}
        <section className="mb-16">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Application Process</h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Follow these simple steps to apply for your chosen program at UTAS Oman
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {applicationSteps.map((step, index) => (
              <div key={step.step} className="relative">
                <div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
                  <div className="flex items-center mb-4">
                    <div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
                      {step.step}
                    </div>
                    <div className="flex-1">
                      <h3 className="text-lg font-semibold text-gray-900">{step.title}</h3>
                      <p className="text-sm text-blue-600">{step.timeline}</p>
                    </div>
                  </div>
                  <p className="text-gray-600 mb-4">{step.description}</p>
                  <button className="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center gap-1">
                    {step.action}
                    <ArrowRight className="w-4 h-4" />
                  </button>
                </div>
                {index < applicationSteps.length - 1 && (
                  <div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
                    <ArrowRight className="w-8 h-8 text-gray-300" />
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* Requirements Tabs */}
        <section className="mb-16">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Entry Requirements</h2>
            <p className="text-lg text-gray-600">
              Requirements vary by program level. Select your study level below.
            </p>
          </div>

          <div className="bg-white rounded-xl shadow-lg overflow-hidden">
            {/* Tab Navigation */}
            <div className="border-b border-gray-200">
              <nav className="flex">
                <button
                  onClick={() => setActiveTab('requirements')}
                  className={`px-6 py-4 text-sm font-medium ${
                    activeTab === 'requirements'
                      ? 'border-b-2 border-blue-500 text-blue-600'
                      : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  Academic Requirements
                </button>
                <button
                  onClick={() => setActiveTab('documents')}
                  className={`px-6 py-4 text-sm font-medium ${
                    activeTab === 'documents'
                      ? 'border-b-2 border-blue-500 text-blue-600'
                      : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  Required Documents
                </button>
                <button
                  onClick={() => setActiveTab('deadlines')}
                  className={`px-6 py-4 text-sm font-medium ${
                    activeTab === 'deadlines'
                      ? 'border-b-2 border-blue-500 text-blue-600'
                      : 'text-gray-500 hover:text-gray-700'
                  }`}
                >
                  Deadlines & Fees
                </button>
              </nav>
            </div>

            {/* Tab Content */}
            <div className="p-8">
              {activeTab === 'requirements' && (
                <div className="space-y-8">
                  {/* Undergraduate Requirements */}
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                      <GraduationCap className="w-6 h-6 text-blue-600" />
                      Undergraduate Programs
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {requirements.undergraduate.map((req, index) => (
                        <div key={index} className="border border-gray-200 rounded-lg p-6">
                          <h4 className="text-lg font-medium text-gray-900 mb-4">{req.category}</h4>
                          <ul className="space-y-2">
                            {req.items.map((item, itemIndex) => (
                              <li key={itemIndex} className="flex items-start gap-2">
                                <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                                <span className="text-gray-600 text-sm">{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Postgraduate Requirements */}
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                      <Award className="w-6 h-6 text-purple-600" />
                      Postgraduate Programs
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {requirements.postgraduate.map((req, index) => (
                        <div key={index} className="border border-gray-200 rounded-lg p-6">
                          <h4 className="text-lg font-medium text-gray-900 mb-4">{req.category}</h4>
                          <ul className="space-y-2">
                            {req.items.map((item, itemIndex) => (
                              <li key={itemIndex} className="flex items-start gap-2">
                                <CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
                                <span className="text-gray-600 text-sm">{item}</span>
                              </li>
                            ))}
                          </ul>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'documents' && (
                <div>
                  <h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                    <FileText className="w-6 h-6 text-blue-600" />
                    Document Checklist
                  </h3>
                  <div className="space-y-4">
                    {documentChecklist.map((doc, index) => (
                      <div key={index} className="flex items-start gap-4 p-4 border border-gray-200 rounded-lg">
                        <div className="mt-1">
                          {doc.required ? (
                            <AlertCircle className="w-5 h-5 text-red-600" />
                          ) : (
                            <CheckCircle className="w-5 h-5 text-green-600" />
                          )}
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2 mb-1">
                            <h4 className="font-medium text-gray-900">{doc.document}</h4>
                            <span className={`px-2 py-1 text-xs rounded-full ${
                              doc.required 
                                ? 'bg-red-100 text-red-800' 
                                : 'bg-green-100 text-green-800'
                            }`}>
                              {doc.required ? 'Required' : 'Optional'}
                            </span>
                          </div>
                          <p className="text-sm text-gray-600">{doc.note}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {activeTab === 'deadlines' && (
                <div className="space-y-8">
                  {/* Important Dates */}
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                      <Calendar className="w-6 h-6 text-blue-600" />
                      Important Dates
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {importantDates.map((date, index) => (
                        <div key={index} className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg">
                          <div className={`w-3 h-3 rounded-full ${
                            date.type === 'deadline' ? 'bg-red-500' : 'bg-green-500'
                          }`}></div>
                          <div className="flex-1">
                            <h4 className="font-medium text-gray-900">{date.event}</h4>
                            <p className="text-sm text-gray-600">{date.date}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Application Fees */}
                  <div>
                    <h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
                      <CreditCard className="w-6 h-6 text-green-600" />
                      Application Fees
                    </h3>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      {applicationFees.map((fee, index) => (
                        <div key={index} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
                          <div>
                            <h4 className="font-medium text-gray-900">{fee.category}</h4>
                            <p className="text-sm text-gray-600">{fee.note}</p>
                          </div>
                          <div className="text-right">
                            <p className="text-lg font-semibold text-green-600">{fee.fee}</p>
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>

        {/* Contact & Support */}
        <section className="mb-16">
          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-gray-900 mb-4">Need Help with Your Application?</h2>
              <p className="text-lg text-gray-600">
                Our admissions team is here to support you throughout the application process.
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <Phone className="w-8 h-8" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Call Us</h3>
                <p className="text-gray-600 mb-2">+968 2414 3555</p>
                <p className="text-sm text-gray-500">Mon-Thu: 8AM-4PM, Fri: 8AM-12PM</p>
              </div>
              
              <div className="text-center">
                <div className="w-16 h-16 bg-green-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <Mail className="w-8 h-8" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Email Us</h3>
                <p className="text-gray-600 mb-2">admissions@utas.edu.om</p>
                <p className="text-sm text-gray-500">Response within 24 hours</p>
              </div>
              
              <div className="text-center">
                <div className="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <MapPin className="w-8 h-8" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2">Visit Us</h3>
                <p className="text-gray-600 mb-2">Campus Tours Available</p>
                <p className="text-sm text-gray-500">Schedule your visit online</p>
              </div>
            </div>
          </div>
        </section>

        {/* Final CTA */}
        <section className="text-center">
          <div className="bg-gradient-to-r from-blue-900 to-purple-900 rounded-2xl p-8 text-white">
            <h2 className="text-3xl font-bold mb-4">Ready to Start Your Application?</h2>
            <p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
              Take the first step toward your future. Join UTAS Oman and be part of Oman&apos;s Vision 2040.
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
                Start Application
              </button>
              <button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-900 transition-colors">
                Download Application Guide
              </button>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}