import React, { useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import { motion } from "framer-motion";
import {
  Activity,
  Award,
  BarChart3,
  Bell,
  CalendarDays,
  CheckCircle2,
  ChevronRight,
  CircleUserRound,
  CloudUpload,
  Download,
  ExternalLink,
  FileBadge,
  FileCheck2,
  FileDown,
  GraduationCap,
  LayoutDashboard,
  Lock,
  Mail,
  Menu,
  Moon,
  PenLine,
  Phone,
  QrCode,
  Search,
  Settings,
  ShieldCheck,
  Sparkles,
  Sun,
  Trash2,
  UserPlus,
  Users,
  XCircle
} from "lucide-react";
import "./styles.css";

const students = [
  {
    id: 1,
    studentName: "Gadela Haarshithamai",
    email: "haarshithamai@college.edu",
    mobile: "+91 98765 43210",
    collegeName: "Aurora Institute of Technology",
    course: "B.Tech CSE",
    photo:
      "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=320&q=80",
    internshipDomain: "AI & Animation",
    projectName: "AI Animated Short Film",
    startDate: "2024-02-01",
    endDate: "2024-06-30",
    duration: "5 Months",
    mentorName: "Picmkr Academy Team",
    attendance: 92,
    status: "Verified",
    mode: "Online",
    internshipId: "PICINT24058",
    certificateId: "PIC-INT-2024-058",
    issueDate: "2024-07-01"
  },
  {
    id: 2,
    studentName: "Likhith R",
    email: "likhith.r@college.edu",
    mobile: "+91 90000 11223",
    collegeName: "Sree Vidyanikethan Engineering College",
    course: "B.Des Animation",
    photo:
      "https://images.unsplash.com/photo-1507591064344-4c6ce005b128?auto=format&fit=crop&w=320&q=80",
    internshipDomain: "Generative AI Design",
    projectName: "AI Product Poster Generator",
    startDate: "2024-03-10",
    endDate: "2024-06-10",
    duration: "3 Months",
    mentorName: "A. Sharma",
    attendance: 88,
    status: "Verified",
    mode: "Offline",
    internshipId: "PICINT24057",
    certificateId: "PIC-INT-2024-057",
    issueDate: "2024-06-15"
  },
  {
    id: 3,
    studentName: "Ananya S",
    email: "ananya.s@college.edu",
    mobile: "+91 94444 22110",
    collegeName: "Vignan University",
    course: "B.Sc Visual Effects",
    photo:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=320&q=80",
    internshipDomain: "3D Animation",
    projectName: "Character Rigging Studio",
    startDate: "2024-01-15",
    endDate: "2024-05-15",
    duration: "4 Months",
    mentorName: "K. Reddy",
    attendance: 95,
    status: "Verified",
    mode: "Online",
    internshipId: "PICINT24056",
    certificateId: "PIC-INT-2024-056",
    issueDate: "2024-05-20"
  },
  {
    id: 4,
    studentName: "Karthik M",
    email: "karthik.m@college.edu",
    mobile: "+91 81234 55667",
    collegeName: "Narayana College",
    course: "BCA",
    photo:
      "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=320&q=80",
    internshipDomain: "Motion Graphics",
    projectName: "Brand Motion Identity",
    startDate: "2023-08-01",
    endDate: "2023-10-30",
    duration: "3 Months",
    mentorName: "Picmkr Academy Team",
    attendance: 61,
    status: "Invalid",
    mode: "Online",
    internshipId: "PICINT24055",
    certificateId: "PIC-INT-2024-055",
    issueDate: "2023-11-02"
  }
];

const certificates = [
  "Internship Certificate",
  "Completion Certificate",
  "Recommendation Letter"
];

const PHP_API_BASE = "/api";
const PHP_ADMIN_TOKEN = "picmkr-admin-token-change-this";

function cn(...classes) {
  return classes.filter(Boolean).join(" ");
}

function phpRecordToStudent(record) {
  if (!record?.student || !record?.certificate) {
    return null;
  }

  const { student, certificate } = record;
  return {
    id: student.id,
    studentName: student.student_name,
    email: student.email,
    mobile: student.mobile,
    collegeName: student.college_name,
    course: student.course,
    photo: student.photo || "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=320&q=80",
    internshipDomain: student.internship_domain,
    projectName: student.project_name,
    startDate: student.start_date,
    endDate: student.end_date,
    duration: calculateDuration(student.start_date, student.end_date),
    mentorName: student.mentor_name,
    attendance: Number(student.attendance || 0),
    status: certificate.verification_status || "Verified",
    mode: student.mode || "Online",
    internshipId: certificate.internship_id,
    certificateId: certificate.certificate_id,
    issueDate: certificate.issue_date
  };
}

function studentToPhpPayload(record) {
  return {
    student_name: record.studentName,
    photo: record.photo,
    email: record.email,
    mobile: record.mobile,
    college_name: record.collegeName,
    course: record.course,
    internship_domain: record.internshipDomain,
    project_name: record.projectName,
    start_date: record.startDate,
    end_date: record.endDate,
    mentor_name: record.mentorName,
    attendance: record.attendance,
    status: "completed",
    mode: record.mode,
    certificate_id: record.certificateId,
    internship_id: record.internshipId,
    issue_date: record.issueDate,
    verification_status: record.status
  };
}

function Logo({ compact = false, light = false }) {
  return (
    <div className="flex items-center gap-2">
      <svg
        aria-label="Picmkr AI & Animation Academy logo"
        className={cn(compact ? "h-8 w-20" : "h-12 w-32")}
        viewBox="0 0 180 64"
        fill="none"
      >
        <path
          d="M12 25c18-21 34 19 52 0 18-20 33 19 52 0"
          stroke="#FF7A00"
          strokeWidth="6"
          strokeLinecap="round"
        />
        <path
          d="M13 39c18-21 34 19 52 0 18-20 33 19 52 0"
          stroke="#FF7A00"
          strokeWidth="4"
          strokeLinecap="round"
          opacity=".75"
        />
        <circle cx="12" cy="25" r="4" fill="#FF7A00" />
        <circle cx="116" cy="25" r="4" fill="#FF7A00" />
        <path d="M132 14h34v8h-34zM132 29h42v8h-42zM132 44h28v7h-28z" fill="#FF7A00" />
      </svg>
      {!compact && (
        <div className="leading-none">
          <div className={cn("text-2xl font-black tracking-wide", light ? "text-white" : "text-black dark:text-white")}>
            PICMKR
          </div>
          <div className="text-[11px] font-black tracking-[0.1em] text-picmkr-orange">
            AI & ANIMATION
          </div>
          <div className={cn("text-[8px] font-bold tracking-[0.28em]", light ? "text-white/75" : "text-slate-500")}>
            ACADEMY
          </div>
        </div>
      )}
    </div>
  );
}

function CircuitField() {
  return (
    <div className="pointer-events-none absolute inset-0 overflow-hidden">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_52%,rgba(255,122,0,.24),transparent_34%),linear-gradient(90deg,rgba(0,0,0,.98),rgba(0,0,0,.88))]" />
      <svg className="absolute inset-y-0 right-0 h-full w-3/4 opacity-60" viewBox="0 0 900 560" fill="none">
        {Array.from({ length: 22 }).map((_, i) => (
          <motion.path
            key={i}
            d={`M${120 + i * 24} ${60 + (i % 8) * 52}h${130 + (i % 4) * 44}v${30 + (i % 5) * 18}h${150 + (i % 3) * 34}`}
            stroke="#FF7A00"
            strokeWidth="2"
            strokeLinecap="round"
            initial={{ pathLength: 0, opacity: 0.2 }}
            animate={{ pathLength: 1, opacity: [0.18, 0.85, 0.18] }}
            transition={{ duration: 3 + i * 0.12, repeat: Infinity, delay: i * 0.08 }}
          />
        ))}
        {Array.from({ length: 28 }).map((_, i) => (
          <motion.circle
            key={`dot-${i}`}
            cx={160 + (i * 71) % 680}
            cy={70 + (i * 43) % 420}
            r="4"
            fill="#FF7A00"
            animate={{ opacity: [0.2, 1, 0.2], scale: [0.7, 1.35, 0.7] }}
            transition={{ duration: 2.2, repeat: Infinity, delay: i * 0.17 }}
          />
        ))}
      </svg>
    </div>
  );
}

function ShieldVisual() {
  return (
    <motion.div
      className="relative mx-auto grid h-[300px] w-[300px] place-items-center sm:h-[380px] sm:w-[380px]"
      initial={{ opacity: 0, scale: 0.82, y: 24 }}
      animate={{ opacity: 1, scale: 1, y: 0 }}
      transition={{ duration: 0.8 }}
    >
      <motion.div
        className="absolute h-48 w-48 rounded-full border border-picmkr-orange/70 bg-picmkr-orange/10 shadow-glow"
        animate={{ rotate: 360 }}
        transition={{ duration: 14, repeat: Infinity, ease: "linear" }}
      />
      <div className="absolute bottom-8 h-16 w-64 rounded-[50%] bg-picmkr-orange/25 blur-xl" />
      <motion.div
        className="relative rounded-[36px] border border-orange-200/50 bg-gradient-to-b from-orange-400 to-orange-700 p-7 shadow-glow"
        animate={{ y: [0, -12, 0] }}
        transition={{ duration: 4, repeat: Infinity }}
      >
        <ShieldCheck className="h-32 w-32 text-white drop-shadow-2xl sm:h-40 sm:w-40" strokeWidth={1.6} />
      </motion.div>
    </motion.div>
  );
}

function Nav({ page, setPage, dark, setDark }) {
  const [open, setOpen] = useState(false);
  const items = [
    ["home", "Home"],
    ["verify", "Verify Certificate"],
    ["student", "Student Login"],
    ["admin", "Admin"],
    ["college", "For Colleges"],
    ["support", "Contact Us"]
  ];

  return (
    <header className="sticky top-0 z-50 border-b border-black/5 bg-white/86 backdrop-blur-xl dark:border-white/10 dark:bg-black/84">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 lg:px-8">
        <button className="text-left" onClick={() => setPage("home")} aria-label="Go to home">
          <Logo />
        </button>
        <nav className="hidden items-center gap-7 text-sm font-semibold lg:flex">
          {items.map(([key, label]) => (
            <button
              key={key}
              onClick={() => setPage(key)}
              className={cn(
                "transition hover:text-picmkr-orange",
                page === key ? "text-picmkr-orange" : "text-slate-700 dark:text-slate-200"
              )}
            >
              {label}
            </button>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <button
            className="grid h-10 w-10 place-items-center rounded-full border border-slate-200 text-slate-700 transition hover:border-picmkr-orange hover:text-picmkr-orange dark:border-white/10 dark:text-white"
            onClick={() => setDark(!dark)}
            aria-label="Toggle dark mode"
          >
            {dark ? <Sun size={18} /> : <Moon size={18} />}
          </button>
          <button
            className="hidden rounded-lg bg-picmkr-orange px-5 py-3 text-sm font-bold text-white shadow-lg shadow-orange-500/25 transition hover:-translate-y-0.5 lg:block"
            onClick={() => setPage("student")}
          >
            Student Login
          </button>
          <button className="grid h-10 w-10 place-items-center rounded-full border border-slate-200 lg:hidden dark:border-white/10" onClick={() => setOpen(!open)} aria-label="Open menu">
            <Menu size={20} />
          </button>
        </div>
      </div>
      {open && (
        <div className="border-t border-slate-100 bg-white px-4 py-3 dark:border-white/10 dark:bg-black lg:hidden">
          {items.map(([key, label]) => (
            <button
              key={key}
              className="block w-full rounded-lg px-3 py-3 text-left text-sm font-semibold hover:bg-orange-50 hover:text-picmkr-orange dark:hover:bg-white/10"
              onClick={() => {
                setPage(key);
                setOpen(false);
              }}
            >
              {label}
            </button>
          ))}
        </div>
      )}
    </header>
  );
}

function FeatureStrip() {
  const features = [
    [ShieldCheck, "100% Verified", "Authentic & Secure"],
    [Activity, "Instant Verification", "Quick & Reliable"],
    [QrCode, "QR Code Enabled", "Scan & Verify"],
    [Lock, "Trusted by Colleges", "Reliable & Transparent"]
  ];

  return (
    <div className="mx-auto -mt-16 grid max-w-7xl gap-3 px-4 sm:grid-cols-2 lg:grid-cols-4 lg:px-8">
      {features.map(([Icon, title, text]) => (
        <motion.div
          key={title}
          className="flex items-center gap-4 rounded-xl border border-slate-200 bg-white p-5 shadow-soft dark:border-white/10 dark:bg-zinc-950"
          whileHover={{ y: -4 }}
        >
          <div className="grid h-12 w-12 shrink-0 place-items-center rounded-xl border border-orange-100 bg-orange-50 text-picmkr-orange dark:border-orange-500/20 dark:bg-orange-500/10">
            <Icon size={26} />
          </div>
          <div>
            <div className="font-black">{title}</div>
            <div className="text-sm text-slate-500 dark:text-slate-400">{text}</div>
          </div>
        </motion.div>
      ))}
    </div>
  );
}

function Home({ setPage }) {
  return (
    <main>
      <section className="relative overflow-hidden rounded-b-[34px] bg-black pb-32 pt-12 text-white">
        <CircuitField />
        <div className="relative mx-auto grid max-w-7xl items-center gap-10 px-4 lg:grid-cols-[1.03fr_.97fr] lg:px-8">
          <motion.div initial={{ opacity: 0, y: 22 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.7 }}>
            <Logo light />
            <h1 className="mt-14 max-w-3xl text-5xl font-black leading-tight sm:text-6xl lg:text-7xl">
              Verify Internship Certificates <span className="text-picmkr-orange">Instantly</span>
            </h1>
            <p className="mt-6 max-w-2xl text-xl leading-8 text-white/84">
              Authentic internship records issued by <span className="font-black text-picmkr-orange">Picmkr AI & Animation Academy.</span>
            </p>
            <div className="mt-10 flex flex-col gap-4 sm:flex-row">
              <button className="rounded-lg bg-picmkr-orange px-8 py-4 text-sm font-black uppercase tracking-wide text-white shadow-glow transition hover:-translate-y-1" onClick={() => setPage("verify")}>
                Verify Certificate
              </button>
              <button className="rounded-lg border border-picmkr-orange px-8 py-4 text-sm font-black uppercase tracking-wide text-white transition hover:bg-picmkr-orange" onClick={() => setPage("student")}>
                Student Login
              </button>
            </div>
          </motion.div>
          <ShieldVisual />
        </div>
      </section>
      <FeatureStrip />
      <section className="mx-auto grid max-w-7xl gap-5 px-4 py-16 lg:grid-cols-3 lg:px-8">
        {[
          ["Email Verification", "Students and colleges can confirm records through verified email trails."],
          ["QR Tamper Protection", "Certificate IDs resolve to locked verification URLs with audit tracking."],
          ["College Access", "Placement cells can validate batches, exports, and internship outcomes."]
        ].map(([title, text]) => (
          <div key={title} className="rounded-xl border border-slate-200 bg-white p-7 shadow-sm dark:border-white/10 dark:bg-zinc-950">
            <Sparkles className="mb-5 text-picmkr-orange" />
            <h2 className="text-xl font-black">{title}</h2>
            <p className="mt-3 leading-7 text-slate-600 dark:text-slate-400">{text}</p>
          </div>
        ))}
      </section>
    </main>
  );
}

function Field({ label, placeholder, icon: Icon, value, onChange, type = "text" }) {
  return (
    <label className="block">
      <span className="mb-2 block text-sm font-bold text-slate-700 dark:text-slate-200">{label}</span>
      <span className="flex items-center gap-3 rounded-lg border border-slate-200 bg-white px-4 py-3 transition focus-within:border-picmkr-orange focus-within:ring-4 focus-within:ring-orange-500/10 dark:border-white/10 dark:bg-zinc-900">
        {Icon && <Icon size={18} className="text-picmkr-orange" />}
        <input
          className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-slate-400"
          placeholder={placeholder}
          value={value}
          onChange={(event) => onChange(event.target.value)}
          type={type}
        />
      </span>
    </label>
  );
}

function StatusBadge({ status }) {
  const map = {
    Verified: "bg-green-100 text-green-700 dark:bg-green-500/15 dark:text-green-300",
    Invalid: "bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-300",
    Expired: "bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300"
  };
  return <span className={cn("inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-black", map[status])}>{status === "Verified" ? <CheckCircle2 size={14} /> : status === "Invalid" ? <XCircle size={14} /> : <Activity size={14} />}{status}</span>;
}

function QrArt() {
  const active = [0, 1, 3, 5, 7, 8, 10, 13, 15, 16, 18, 19, 21, 24, 26, 27, 29, 31, 33, 34, 36, 39, 41, 43, 45, 48, 49, 52, 53, 55, 57, 59, 61, 62, 63, 65, 68, 70, 72, 74, 76, 78, 80];
  return (
    <div className="grid h-36 w-36 grid-cols-9 gap-1 rounded-lg bg-white p-3 shadow-inner">
      {Array.from({ length: 81 }).map((_, index) => (
        <div key={index} className={cn("rounded-[2px]", active.includes(index) ? "bg-black" : "bg-white")} />
      ))}
    </div>
  );
}

function Verification({ initialResult = false, records = students }) {
  const [internshipId, setInternshipId] = useState("PICINT24058");
  const [certificateId, setCertificateId] = useState("PIC-INT-2024-058");
  const [email, setEmail] = useState("");
  const [result, setResult] = useState(initialResult ? records[0] : null);

  const verify = async () => {
    const match = records.find((student) => {
      const idsMatch =
        student.internshipId.toLowerCase() === internshipId.toLowerCase().trim() ||
        student.certificateId.toLowerCase() === certificateId.toLowerCase().trim();
      const emailMatch = !email || student.email.toLowerCase() === email.toLowerCase().trim();
      return idsMatch && emailMatch;
    });

    if (match) {
      setResult(match);
      return;
    }

    try {
      const response = await fetch(`${PHP_API_BASE}/verify-certificate.php`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ internshipId, certificateId, email })
      });
      const data = await response.json();
      const phpMatch = phpRecordToStudent(data);
      setResult(phpMatch || { ...students[0], studentName: "Certificate Not Found", status: "Invalid" });
    } catch {
      setResult({ ...students[0], studentName: "Certificate Not Found", status: "Invalid" });
    }
  };

  return (
    <main className="tech-page min-h-[calc(100vh-74px)] px-4 py-10 lg:px-8">
      <div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-[.82fr_1.18fr]">
        <section className="rounded-2xl border border-slate-200 bg-white/92 p-6 shadow-soft backdrop-blur dark:border-white/10 dark:bg-zinc-950/92">
          <div className="flex items-center gap-3">
            <div className="grid h-12 w-12 place-items-center rounded-xl bg-orange-50 text-picmkr-orange dark:bg-orange-500/10">
              <QrCode />
            </div>
            <div>
              <h1 className="text-2xl font-black">Verify Certificate</h1>
              <p className="text-sm text-slate-500">Enter certificate details to verify authenticity.</p>
            </div>
          </div>
          <div className="mt-8 space-y-5">
            <Field label="Internship ID" placeholder="Enter Internship ID" icon={FileBadge} value={internshipId} onChange={setInternshipId} />
            <Field label="Certificate ID" placeholder="Enter Certificate ID" icon={Award} value={certificateId} onChange={setCertificateId} />
            <Field label="Student Email (Optional)" placeholder="Enter student email" icon={Mail} value={email} onChange={setEmail} type="email" />
            <button className="flex w-full items-center justify-center gap-2 rounded-lg bg-picmkr-orange px-5 py-4 font-black text-white shadow-lg shadow-orange-500/20 transition hover:-translate-y-0.5" onClick={verify}>
              <ShieldCheck size={18} /> Verify Certificate
            </button>
          </div>
          <div className="mt-8 rounded-xl border border-slate-200 bg-slate-50 p-5 dark:border-white/10 dark:bg-white/5">
            <h2 className="font-black">Why Verify?</h2>
            <div className="mt-4 grid gap-3 text-sm text-slate-600 dark:text-slate-300">
              <span className="flex items-center gap-2"><Lock size={16} className="text-picmkr-orange" /> Ensure authenticity</span>
              <span className="flex items-center gap-2"><ShieldCheck size={16} className="text-picmkr-orange" /> Prevent fraud</span>
              <span className="flex items-center gap-2"><CheckCircle2 size={16} className="text-picmkr-orange" /> Trusted and secure</span>
            </div>
          </div>
        </section>
        <ResultCard student={result || records[0]} muted={!result} />
      </div>
    </main>
  );
}

function ResultCard({ student, muted = false }) {
  const statusText = student.status === "Verified" ? "This certificate is valid and issued by Picmkr AI & Animation Academy." : "This certificate could not be validated by the Picmkr records system.";
  return (
    <motion.section
      className={cn("rounded-2xl border border-slate-200 bg-white p-6 shadow-soft dark:border-white/10 dark:bg-zinc-950", muted && "opacity-80")}
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
    >
      <div className="flex flex-col justify-between gap-5 border-b border-slate-200 pb-5 dark:border-white/10 sm:flex-row">
        <div>
          <h1 className="text-2xl font-black">Certificate Verification Result</h1>
          <p className="mt-1 text-sm text-slate-500">Your certificate has been checked against official records.</p>
        </div>
        <div className="rounded-xl border border-slate-200 px-5 py-3 text-center dark:border-white/10">
          <div className="flex items-center justify-center gap-2 text-2xl font-black text-green-600">
            <ShieldCheck /> {student.status === "Verified" ? "VERIFIED" : student.status.toUpperCase()}
          </div>
          <p className="mt-1 max-w-[260px] text-xs text-slate-500">{statusText}</p>
        </div>
      </div>
      <div className="grid gap-6 py-6 lg:grid-cols-[1fr_190px]">
        <div className="flex flex-col gap-6 sm:flex-row">
          <img className="h-44 w-full rounded-xl object-cover sm:w-44" src={student.photo} alt={student.studentName} />
          <div className="min-w-0">
            <h2 className="break-words text-3xl font-black">{student.studentName}</h2>
            <p className="mt-2 text-lg text-slate-700 dark:text-slate-300">
              Internship in <span className="font-black text-picmkr-orange">{student.internshipDomain}</span>
            </p>
            <div className="mt-5 grid gap-3 text-sm text-slate-600 dark:text-slate-300">
              <span className="flex items-center gap-2"><GraduationCap size={16} className="text-picmkr-orange" /> Picmkr AI & Animation Academy</span>
              <span className="flex items-center gap-2"><CalendarDays size={16} className="text-picmkr-orange" /> {formatDate(student.startDate)} to {formatDate(student.endDate)} ({student.duration})</span>
              <span className="flex items-center gap-2"><FileCheck2 size={16} className="text-picmkr-orange" /> {student.projectName}</span>
            </div>
            <div className="mt-4 flex flex-wrap gap-2">
              <StatusBadge status={student.status} />
              <span className="rounded-full bg-slate-100 px-3 py-1 text-xs font-black text-slate-600 dark:bg-white/10 dark:text-slate-200">{student.mode}</span>
            </div>
          </div>
        </div>
        <div className="grid justify-center border-l-0 border-slate-200 pl-0 dark:border-white/10 lg:border-l lg:pl-6">
          <QrArt />
          <div className="mt-3 text-center">
            <div className="text-xs text-slate-500">Scan to Verify</div>
            <div className="mt-1 font-black">{student.certificateId}</div>
          </div>
        </div>
      </div>
      <div className="grid gap-4 border-t border-slate-200 pt-5 text-sm dark:border-white/10 md:grid-cols-2">
        <Info label="Internship ID" value={student.internshipId} />
        <Info label="Domain" value={student.internshipDomain} />
        <Info label="Certificate ID" value={student.certificateId} />
        <Info label="Project" value={student.projectName} />
        <Info label="Issue Date" value={formatDate(student.issueDate)} />
        <Info label="Mentor" value={student.mentorName} />
        <Info label="Mode" value={student.mode} />
        <Info label="Certificate Status" value={student.status} strong />
      </div>
      <div className="mt-7 flex flex-col justify-center gap-3 sm:flex-row">
        <button className="flex items-center justify-center gap-2 rounded-lg bg-picmkr-orange px-7 py-3 font-black text-white transition hover:-translate-y-0.5">
          <Download size={18} /> Download Certificate PDF
        </button>
        <button className="rounded-lg border border-slate-300 px-7 py-3 font-black transition hover:border-picmkr-orange hover:text-picmkr-orange dark:border-white/20">
          Certificate Preview
        </button>
      </div>
    </motion.section>
  );
}

function Info({ label, value, strong }) {
  return (
    <div className="grid grid-cols-[130px_12px_1fr] gap-3 sm:grid-cols-[150px_12px_1fr]">
      <span className="font-bold text-slate-500">{label}</span>
      <span className="text-slate-400">:</span>
      <span className={cn("break-words", strong && "font-black text-green-600")}>{value}</span>
    </div>
  );
}

function formatDate(value) {
  return new Intl.DateTimeFormat("en-IN", { day: "2-digit", month: "short", year: "numeric" }).format(new Date(value));
}

function Sidebar({ active, setActive, dark = false, admin = false }) {
  const items = admin
    ? [
        [LayoutDashboard, "Dashboard"],
        [Users, "Students"],
        [Award, "Certificates"],
        [FileCheck2, "Verification Records"],
        [FileDown, "Reports"],
        [BarChart3, "Analytics"],
        [Settings, "Settings"]
      ]
    : [
        [LayoutDashboard, "Dashboard"],
        [CircleUserRound, "Profile"],
        [GraduationCap, "My Internship"],
        [Award, "Certificates"],
        [Activity, "Attendance"],
        [Mail, "Messages"],
        [Settings, "Settings"]
      ];
  return (
    <aside className={cn("min-h-full w-full border-r p-4 lg:w-64", dark ? "border-white/10 bg-black text-white" : "border-slate-200 bg-black text-white")}>
      <Logo compact light />
      <div className="mt-8 space-y-2">
        {items.map(([Icon, label]) => (
          <button
            key={label}
            className={cn(
              "flex w-full items-center gap-3 rounded-lg px-4 py-3 text-left text-sm font-semibold transition",
              active === label ? "bg-picmkr-orange text-white" : "text-white/75 hover:bg-white/10 hover:text-white"
            )}
            onClick={() => setActive(label)}
          >
            <Icon size={18} /> {label}
            {active === label && <ChevronRight size={16} className="ml-auto" />}
          </button>
        ))}
      </div>
    </aside>
  );
}

function Ring({ value, label, color = "#FF7A00" }) {
  const angle = `${value * 3.6}deg`;
  return (
    <div className="grid justify-items-center">
      <div className="grid h-36 w-36 place-items-center rounded-full" style={{ background: `conic-gradient(${color} ${angle}, #E5E7EB 0)` }}>
        <div className="grid h-24 w-24 place-items-center rounded-full bg-white text-center dark:bg-zinc-950">
          <div>
            <div className="text-3xl font-black">{value}%</div>
            <div className="text-xs text-slate-500">{label}</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function StudentDashboard() {
  const [active, setActive] = useState("Dashboard");
  const student = students[0];
  return (
    <main className="min-h-[calc(100vh-74px)] bg-slate-50 dark:bg-zinc-950">
      <div className="mx-auto grid max-w-7xl border-x border-slate-200 bg-white dark:border-white/10 dark:bg-zinc-900 lg:grid-cols-[240px_1fr]">
        <Sidebar active={active} setActive={setActive} />
        <section className="p-5 sm:p-8">
          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div>
              <h1 className="text-2xl font-black">Welcome Back, <span className="text-picmkr-orange">{student.studentName}</span></h1>
              <p className="text-sm text-slate-500">Your internship records and certificates are ready.</p>
            </div>
            <div className="flex items-center gap-4">
              <Bell size={20} />
              <img src={student.photo} className="h-11 w-11 rounded-full object-cover" alt={student.studentName} />
            </div>
          </div>
          <div className="mt-7 grid gap-5 lg:grid-cols-3">
            <DashboardCard title="Internship Progress">
              <Ring value={85} label="Completed" />
              <p className="mt-4 text-center text-sm font-semibold text-slate-600 dark:text-slate-300">{student.duration} Internship</p>
            </DashboardCard>
            <DashboardCard title="Profile">
              <div className="space-y-3 text-sm">
                <InfoLine label="College" value={student.collegeName} />
                <InfoLine label="Course" value={student.course} />
                <InfoLine label="Mobile" value={student.mobile} />
                <InfoLine label="Email" value={student.email} />
              </div>
            </DashboardCard>
            <DashboardCard title="Attendance">
              <Ring value={student.attendance} label="Overall" color="#16A34A" />
              <p className="mt-4 text-center text-sm font-black text-green-600">Great Performance</p>
            </DashboardCard>
          </div>
          <div className="mt-5 grid gap-5 lg:grid-cols-[1.2fr_.8fr]">
            <DashboardCard title="Internship Details">
              <div className="grid gap-4 sm:grid-cols-2">
                <InfoLine label="Domain" value={student.internshipDomain} />
                <InfoLine label="Duration" value={student.duration} />
                <InfoLine label="Mentor" value={student.mentorName} />
                <InfoLine label="Project Assigned" value={student.projectName} />
                <InfoLine label="Start Date" value={formatDate(student.startDate)} />
                <InfoLine label="End Date" value={formatDate(student.endDate)} />
              </div>
            </DashboardCard>
            <DashboardCard title="Need Help?">
              <p className="text-sm text-slate-500">Contact the Picmkr support team for certificate or login assistance.</p>
              <div className="mt-6 flex flex-col gap-3 sm:flex-row">
                <button className="flex items-center justify-center gap-2 rounded-lg bg-picmkr-orange px-5 py-3 text-sm font-black text-white">
                  <Phone size={16} /> Contact Support
                </button>
                <button className="flex items-center justify-center gap-2 rounded-lg border border-green-300 px-5 py-3 text-sm font-black text-green-600">
                  <ExternalLink size={16} /> WhatsApp
                </button>
              </div>
            </DashboardCard>
          </div>
          <DashboardCard title="My Certificates" className="mt-5">
            <div className="grid gap-4 md:grid-cols-3">
              {certificates.map((name) => (
                <div key={name} className="rounded-xl border border-slate-200 p-4 dark:border-white/10">
                  <FileBadge className="text-picmkr-orange" />
                  <h3 className="mt-4 font-black">{name}</h3>
                  <p className="mt-1 text-xs text-slate-500">Issued on {formatDate(student.issueDate)}</p>
                  <div className="mt-5 flex gap-2">
                    <button className="flex-1 rounded-lg border border-orange-200 py-2 text-sm font-black text-picmkr-orange">View</button>
                    <button className="flex-1 rounded-lg bg-picmkr-orange py-2 text-sm font-black text-white">Download</button>
                  </div>
                </div>
              ))}
            </div>
          </DashboardCard>
        </section>
      </div>
    </main>
  );
}

function DashboardCard({ title, children, className }) {
  return (
    <section className={cn("rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-white/10 dark:bg-zinc-950", className)}>
      <h2 className="mb-5 font-black">{title}</h2>
      {children}
    </section>
  );
}

function InfoLine({ label, value }) {
  return (
    <div>
      <div className="text-xs font-bold uppercase text-slate-400">{label}</div>
      <div className="mt-1 font-black text-slate-800 dark:text-white">{value}</div>
    </div>
  );
}

function AdminInput({ label, value, onChange, type = "text", placeholder, required = false }) {
  return (
    <label className="block">
      <span className="mb-2 block text-xs font-black uppercase tracking-wide text-white/55">{label}</span>
      <input
        className="w-full rounded-lg border border-white/10 bg-black/35 px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-picmkr-orange focus:ring-4 focus:ring-orange-500/10"
        value={value}
        onChange={(event) => onChange(event.target.value)}
        type={type}
        placeholder={placeholder || label}
        required={required}
      />
    </label>
  );
}

function AdminSelect({ label, value, onChange, options }) {
  return (
    <label className="block">
      <span className="mb-2 block text-xs font-black uppercase tracking-wide text-white/55">{label}</span>
      <select
        className="w-full rounded-lg border border-white/10 bg-black/35 px-4 py-3 text-sm text-white outline-none transition focus:border-picmkr-orange focus:ring-4 focus:ring-orange-500/10"
        value={value}
        onChange={(event) => onChange(event.target.value)}
      >
        {options.map((option) => (
          <option key={option} value={option} className="bg-black">
            {option}
          </option>
        ))}
      </select>
    </label>
  );
}

function calculateDuration(startDate, endDate) {
  if (!startDate || !endDate) {
    return "Internship";
  }

  const start = new Date(startDate);
  const end = new Date(endDate);
  const months = Math.max(1, Math.round((end - start) / (1000 * 60 * 60 * 24 * 30)));
  return `${months} Month${months > 1 ? "s" : ""}`;
}

const emptyCertificateForm = {
  studentName: "",
  email: "",
  mobile: "",
  collegeName: "",
  course: "",
  photo: "",
  internshipDomain: "",
  projectName: "",
  startDate: "",
  endDate: "",
  duration: "",
  mentorName: "",
  attendance: "90",
  status: "Verified",
  mode: "Online",
  internshipId: "",
  certificateId: "",
  issueDate: ""
};

function AdminDashboard({ records = students, onAddCertificate }) {
  const [active, setActive] = useState("Dashboard");
  const [query, setQuery] = useState("");
  const [form, setForm] = useState(emptyCertificateForm);
  const [savedMessage, setSavedMessage] = useState("");
  const filtered = useMemo(() => records.filter((student) => `${student.studentName} ${student.certificateId} ${student.internshipDomain}`.toLowerCase().includes(query.toLowerCase())), [records, query]);
  const statCards = [
    ["Total Certificates", String(records.length), "Live records"],
    ["Verified Today", "86", "+8% this month"],
    ["Active Interns", String(records.filter((record) => record.status !== "Expired").length), "Currently valid"],
    ["Completed Interns", String(records.filter((record) => record.status === "Verified").length), "Verified records"]
  ];

  const updateForm = (key, value) => {
    setForm((current) => ({ ...current, [key]: value }));
  };

  const submitCertificate = async (event) => {
    event.preventDefault();
    const record = {
      id: Date.now(),
      ...form,
      photo:
        form.photo ||
        "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=320&q=80",
      attendance: Number(form.attendance || 0),
      duration: form.duration || calculateDuration(form.startDate, form.endDate)
    };

    try {
      const response = await fetch(`${PHP_API_BASE}/add-certificate.php`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${PHP_ADMIN_TOKEN}`
        },
        body: JSON.stringify(studentToPhpPayload(record))
      });
      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.message || "Unable to save certificate");
      }

      const savedRecord = phpRecordToStudent(data) || record;
      onAddCertificate(savedRecord);
      setForm(emptyCertificateForm);
      setSavedMessage(`${savedRecord.studentName} can now verify using ${savedRecord.certificateId}.`);
      return;
    } catch {
      setSavedMessage("Saved locally. Upload to PHP hosting to save in MySQL.");
    }

    onAddCertificate(record);
    setForm(emptyCertificateForm);
  };

  return (
    <main className="min-h-[calc(100vh-74px)] bg-black text-white">
      <div className="mx-auto grid max-w-7xl lg:grid-cols-[240px_1fr]">
        <Sidebar active={active} setActive={setActive} dark admin />
        <section className="p-5 sm:p-8">
          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div>
              <h1 className="text-2xl font-black">Admin Dashboard</h1>
              <p className="text-sm text-white/50">Secure certificate operations, analytics, and audit records.</p>
            </div>
            <div className="flex items-center gap-3 text-right">
              <div>
                <div className="text-sm font-black">Admin</div>
                <div className="text-xs text-white/50">Super Admin</div>
              </div>
              <img src={students[1].photo} className="h-11 w-11 rounded-full object-cover" alt="Admin" />
            </div>
          </div>
          <div className="mt-7 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
            {statCards.map(([label, value, trend]) => (
              <section key={label} className="rounded-xl border border-white/10 bg-white/[0.07] p-5">
                <p className="text-sm text-white/55">{label}</p>
                <h2 className="mt-2 text-3xl font-black">{value}</h2>
                <p className="mt-2 text-sm text-green-400">{trend}</p>
              </section>
            ))}
          </div>
          <div className="mt-5 grid gap-5 xl:grid-cols-[1.25fr_.75fr]">
            <section className="rounded-xl border border-white/10 bg-white/[0.07] p-5">
              <h2 className="font-black">Verification Overview</h2>
              <div className="mt-7 h-72">
                <svg className="h-full w-full" viewBox="0 0 640 280">
                  {[0, 1, 2, 3, 4].map((line) => (
                    <line key={line} x1="40" x2="620" y1={35 + line * 48} y2={35 + line * 48} stroke="rgba(255,255,255,.1)" />
                  ))}
                  <path d="M45 220 L95 175 L145 205 L195 128 L245 160 L295 188 L345 145 L395 154 L445 111 L495 128 L545 86 L605 42" fill="none" stroke="#FF7A00" strokeWidth="4" strokeLinecap="round" />
                  <path d="M45 220 L95 175 L145 205 L195 128 L245 160 L295 188 L345 145 L395 154 L445 111 L495 128 L545 86 L605 42 L605 240 L45 240Z" fill="url(#orangeFade)" />
                  <defs>
                    <linearGradient id="orangeFade" x1="0" x2="0" y1="0" y2="1">
                      <stop stopColor="#FF7A00" stopOpacity=".35" />
                      <stop offset="1" stopColor="#FF7A00" stopOpacity="0" />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </section>
            <section className="rounded-xl border border-white/10 bg-white/[0.07] p-5">
              <h2 className="font-black">Recent Verifications</h2>
              <div className="mt-5 space-y-4">
                {records.slice(0, 4).map((student, index) => (
                  <div key={student.id} className="flex items-center gap-3">
                    <img src={student.photo} className="h-11 w-11 rounded-full object-cover" alt={student.studentName} />
                    <div className="min-w-0 flex-1">
                      <div className="truncate text-sm font-black">{student.studentName}</div>
                      <div className="truncate text-xs text-white/50">{student.certificateId}</div>
                    </div>
                    <StatusBadge status={student.status} />
                    <div className="hidden text-xs text-white/45 sm:block">{index ? `${index * 15} mins ago` : "2 mins ago"}</div>
                  </div>
                ))}
              </div>
            </section>
          </div>
          <section className="mt-5 rounded-xl border border-white/10 bg-white/[0.07] p-5">
            <div className="flex flex-col justify-between gap-3 lg:flex-row lg:items-center">
              <div>
                <h2 className="font-black">Add Certificate Record</h2>
                <p className="mt-1 text-sm text-white/50">Create the student and certificate details used by the public verification form.</p>
              </div>
              {savedMessage && <span className="rounded-full bg-green-500/15 px-4 py-2 text-sm font-black text-green-300">{savedMessage}</span>}
            </div>
            <form className="mt-5 grid gap-4" onSubmit={submitCertificate}>
              <div className="grid gap-4 lg:grid-cols-3">
                <AdminInput label="Student Name" value={form.studentName} onChange={(value) => updateForm("studentName", value)} required />
                <AdminInput label="Student Email" value={form.email} onChange={(value) => updateForm("email", value)} type="email" required />
                <AdminInput label="Mobile Number" value={form.mobile} onChange={(value) => updateForm("mobile", value)} />
                <AdminInput label="College Name" value={form.collegeName} onChange={(value) => updateForm("collegeName", value)} required />
                <AdminInput label="Course" value={form.course} onChange={(value) => updateForm("course", value)} />
                <AdminInput label="Student Photo URL" value={form.photo} onChange={(value) => updateForm("photo", value)} />
                <AdminInput label="Internship Domain" value={form.internshipDomain} onChange={(value) => updateForm("internshipDomain", value)} required />
                <AdminInput label="Project Name" value={form.projectName} onChange={(value) => updateForm("projectName", value)} required />
                <AdminInput label="Mentor Name" value={form.mentorName} onChange={(value) => updateForm("mentorName", value)} required />
                <AdminInput label="Start Date" value={form.startDate} onChange={(value) => updateForm("startDate", value)} type="date" required />
                <AdminInput label="End Date" value={form.endDate} onChange={(value) => updateForm("endDate", value)} type="date" required />
                <AdminInput label="Issue Date" value={form.issueDate} onChange={(value) => updateForm("issueDate", value)} type="date" required />
                <AdminInput label="Internship ID" value={form.internshipId} onChange={(value) => updateForm("internshipId", value)} required />
                <AdminInput label="Certificate ID" value={form.certificateId} onChange={(value) => updateForm("certificateId", value)} required />
                <AdminInput label="Duration" value={form.duration} onChange={(value) => updateForm("duration", value)} placeholder="Auto, or e.g. 3 Months" />
                <AdminInput label="Attendance %" value={form.attendance} onChange={(value) => updateForm("attendance", value)} type="number" required />
                <AdminSelect label="Mode" value={form.mode} onChange={(value) => updateForm("mode", value)} options={["Online", "Offline"]} />
                <AdminSelect label="Certificate Status" value={form.status} onChange={(value) => updateForm("status", value)} options={["Verified", "Invalid", "Expired"]} />
              </div>
              <div className="flex flex-col gap-3 sm:flex-row">
                <button className="flex items-center justify-center gap-2 rounded-lg bg-picmkr-orange px-6 py-3 font-black text-white shadow-lg shadow-orange-500/20">
                  <FileBadge size={18} /> Save Certificate Details
                </button>
                <button type="button" className="rounded-lg border border-white/10 px-6 py-3 font-black text-white/80" onClick={() => setForm(emptyCertificateForm)}>
                  Clear Form
                </button>
              </div>
            </form>
          </section>
          <section className="mt-5 rounded-xl border border-white/10 bg-white/[0.07] p-5">
            <div className="flex flex-col justify-between gap-4 lg:flex-row lg:items-center">
              <h2 className="font-black">Student Management</h2>
              <label className="flex max-w-md flex-1 items-center gap-3 rounded-lg border border-white/10 bg-black/40 px-4 py-3">
                <Search size={18} className="text-picmkr-orange" />
                <input className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-white/40" placeholder="Search student, certificate, domain" value={query} onChange={(event) => setQuery(event.target.value)} />
              </label>
            </div>
            <div className="mt-5 overflow-x-auto">
              <table className="w-full min-w-[760px] text-left text-sm">
                <thead className="text-white/50">
                  <tr>
                    <th className="py-3">Student</th>
                    <th>Internship ID</th>
                    <th>Certificate ID</th>
                    <th>Domain</th>
                    <th>Status</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {filtered.map((student) => (
                    <tr key={student.id} className="border-t border-white/10">
                      <td className="py-4 font-black">{student.studentName}</td>
                      <td>{student.internshipId}</td>
                      <td>{student.certificateId}</td>
                      <td>{student.internshipDomain}</td>
                      <td><StatusBadge status={student.status} /></td>
                      <td>
                        <div className="flex gap-2">
                          <button className="grid h-9 w-9 place-items-center rounded-lg border border-white/10 text-picmkr-orange"><PenLine size={16} /></button>
                          <button className="grid h-9 w-9 place-items-center rounded-lg border border-white/10 text-red-400"><Trash2 size={16} /></button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </section>
          <section className="mt-5 rounded-xl border border-white/10 bg-white/[0.07] p-5">
            <h2 className="font-black">Quick Actions</h2>
            <div className="mt-5 grid gap-3 md:grid-cols-2 xl:grid-cols-4">
              {[
                [UserPlus, "Add Student"],
                [FileBadge, "Generate Certificate"],
                [CloudUpload, "Upload Certificate"],
                [FileDown, "Export Reports"]
              ].map(([Icon, label]) => (
                <button key={label} className="flex items-center justify-center gap-3 rounded-lg border border-white/10 bg-black/30 px-4 py-4 text-sm font-black transition hover:border-picmkr-orange hover:text-picmkr-orange">
                  <Icon size={20} /> {label}
                </button>
              ))}
            </div>
          </section>
        </section>
      </div>
    </main>
  );
}

function SimplePage({ title, text, icon: Icon, children }) {
  return (
    <main className="tech-page min-h-[calc(100vh-74px)] px-4 py-14 lg:px-8">
      <section className="mx-auto max-w-4xl rounded-2xl border border-slate-200 bg-white/92 p-8 shadow-soft dark:border-white/10 dark:bg-zinc-950/92">
        <div className="grid h-16 w-16 place-items-center rounded-xl bg-orange-50 text-picmkr-orange dark:bg-orange-500/10">
          <Icon size={32} />
        </div>
        <h1 className="mt-7 text-4xl font-black">{title}</h1>
        <p className="mt-4 text-lg leading-8 text-slate-600 dark:text-slate-300">{text}</p>
        {children}
      </section>
    </main>
  );
}

function LoginPage({ admin = false }) {
  return (
    <main className="tech-page min-h-[calc(100vh-74px)] px-4 py-14 lg:px-8">
      <section className="mx-auto grid max-w-5xl overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft dark:border-white/10 dark:bg-zinc-950 lg:grid-cols-[.9fr_1.1fr]">
        <div className="relative bg-black p-8 text-white">
          <CircuitField />
          <div className="relative">
            <Logo light />
            <h1 className="mt-16 text-4xl font-black">{admin ? "Secure Admin Login" : "Student Login"}</h1>
            <p className="mt-4 leading-7 text-white/70">
              {admin ? "Manage records, certificate IDs, QR codes, reports, and audit logs." : "Access profile, internship details, attendance, and downloadable certificates."}
            </p>
          </div>
        </div>
        <div className="p-8">
          <div className="space-y-5">
            <Field label="Email" placeholder="Enter email" icon={Mail} value="" onChange={() => {}} type="email" />
            <Field label="Password" placeholder="Enter password" icon={Lock} value="" onChange={() => {}} type="password" />
            <button className="w-full rounded-lg bg-picmkr-orange px-5 py-4 font-black text-white shadow-lg shadow-orange-500/20">{admin ? "Login as Admin" : "Login as Student"}</button>
          </div>
          <p className="mt-5 text-sm text-slate-500">JWT authentication, encrypted student data, admin role management, and audit logs are planned for backend integration.</p>
        </div>
      </section>
    </main>
  );
}

function App() {
  const [page, setPage] = useState("home");
  const [dark, setDark] = useState(false);
  const [records, setRecords] = useState(() => {
    try {
      const saved = localStorage.getItem("picmkrCertificateRecords");
      return saved ? JSON.parse(saved) : students;
    } catch {
      return students;
    }
  });

  const addCertificateRecord = (record) => {
    setRecords((currentRecords) => {
      const withoutDuplicate = currentRecords.filter(
        (item) =>
          item.certificateId.toLowerCase() !== record.certificateId.toLowerCase() &&
          item.internshipId.toLowerCase() !== record.internshipId.toLowerCase()
      );
      const nextRecords = [record, ...withoutDuplicate];
      localStorage.setItem("picmkrCertificateRecords", JSON.stringify(nextRecords));
      return nextRecords;
    });
  };

  const content = {
    home: <Home setPage={setPage} />,
    verify: <Verification records={records} />,
    result: <Verification initialResult records={records} />,
    student: <StudentDashboard />,
    admin: <AdminDashboard records={records} onAddCertificate={addCertificateRecord} />,
    college: (
      <SimplePage
        title="College Verification Access"
        text="Placement cells and academic coordinators can verify certificates, search student records, export batch reports, and validate QR-linked certificate URLs."
        icon={GraduationCap}
      >
        <div className="mt-8 grid gap-4 sm:grid-cols-3">
          {["Batch Verification", "CSV/PDF Reports", "Email Verification"].map((item) => (
            <div key={item} className="rounded-xl border border-slate-200 p-5 font-black dark:border-white/10">{item}</div>
          ))}
        </div>
      </SimplePage>
    ),
    support: (
      <SimplePage
        title="Contact Picmkr Support"
        text="Students, recruiters, colleges, and organizations can request certificate assistance, PDF downloads, QR validation, or record corrections."
        icon={Phone}
      >
        <div className="mt-8 flex flex-col gap-3 sm:flex-row">
          <button className="rounded-lg bg-picmkr-orange px-6 py-3 font-black text-white">Email Support</button>
          <button className="rounded-lg border border-green-300 px-6 py-3 font-black text-green-600">WhatsApp Support</button>
        </div>
      </SimplePage>
    )
  };

  return (
    <div className={cn(dark && "dark")}>
      <div className="min-h-screen bg-white font-body text-slate-950 dark:bg-black dark:text-white">
        <Nav page={page} setPage={setPage} dark={dark} setDark={setDark} />
        {content[page]}
      </div>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);