const Dashboard = ({ onNavigate }) => {
  return (
    <div className="animate-fade-in-up">
      <h1 className="text-3xl font-bold text-gray-800 mb-2">Welcome Sushil, Lecturer in Computer Engineering</h1>
      <p className="text-gray-500 mb-8">Select an operational cluster to begin management.</p>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {/* Student Management Card */}
        <div onClick={() => onNavigate('students')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-blue-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-blue-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l9-5-9-5-9 5 9 5z"></path><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Student Management</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Register new students, allocate academic batches, and modify enrollment hierarchies.</p>
        </div>

        {/* Course Management Card */}
        <div onClick={() => onNavigate('courses')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-emerald-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-emerald-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Course Management</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Modify the K-Scheme library, tune Course Outcomes (CO) mapping, and allocate faculties.</p>
        </div>

        {/* Mark Entry Card K3 */}
        <div onClick={() => onNavigate('k3')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-purple-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-purple-50 text-purple-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-purple-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Practical Marks (K3)</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Centralized engine for capturing Continuous Lab Assessments and FA-PR records.</p>
        </div>

        {/* Mark Entry Card K4 */}
        <div onClick={() => onNavigate('k4')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-rose-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-rose-50 text-rose-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-rose-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Practical SA (K4)</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Summative assessment matrix for calculating terminal SA-PR scores.</p>
        </div>

        {/* Mark Entry Card K5 */}
        <div onClick={() => onNavigate('k5')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-yellow-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-yellow-50 text-yellow-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-yellow-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Theory Marks (K5)</h3>
          <p className="text-gray-500 text-sm leading-relaxed">System for capturing Unit Tests, Microprojects, and mapping final FA-TH metrics.</p>
        </div>

        {/* Mark Entry Card K6 */}
        <div onClick={() => onNavigate('k6')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-teal-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-teal-50 text-teal-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-teal-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">SLA Entry (K6)</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Configure SLA architecture per-subject and execute student proficiency scoring.</p>
        </div>

        {/* K6 Upload Card */}
        <div onClick={() => onNavigate('k6-upload')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-emerald-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-emerald-50 text-emerald-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-emerald-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">K6 Bulk Upload</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Fast-track SLA marks entry by uploading Excel templates directly to the portal.</p>
        </div>
        
        {/* Reports Hub Card */}
        <div onClick={() => onNavigate('reports')} className="bg-white p-8 rounded-2xl shadow border border-transparent hover:border-indigo-100 hover:shadow-xl transition-all cursor-pointer flex flex-col items-center text-center group">
          <div className="w-20 h-20 bg-indigo-50 text-indigo-600 rounded-full flex items-center justify-center mb-6 group-hover:-translate-y-2 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-300 shadow-sm">
            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
          </div>
          <h3 className="text-xl font-bold text-gray-900 mb-2">Central Reports</h3>
          <p className="text-gray-500 text-sm leading-relaxed">Cross-filter matrices by department, term, semester, and K-format for exports.</p>
        </div>
      </div>
    </div>
  );
};
window.Dashboard = Dashboard;