import { CreditCard, ShieldCheck, Lock } from "lucide-react";
import { PaymentForm } from "./components/payment-form";
import { Button } from "@/components/ui/button";
import Link from "next/link";

export default function StudentPaymentsPage() {
    return (
        <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-100">
            <div className="max-w-2xl mx-auto px-4 py-10">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="mb-8">
                        <div className="flex items-center gap-3 mb-4">
                            <div className="h-10 w-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-md shadow-blue-200">
                                <CreditCard className="h-5 w-5 text-white" />
                            </div>
                            <div>
                                <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
                                    Student Payments
                                </h1>
                                <p className="text-sm text-slate-500">
                                    Securely pay your academic fees
                                </p>
                            </div>
                        </div>

                        {/* Trust badges */}
                        <div className="flex items-center gap-4 mt-4">
                            <div className="flex items-center gap-1.5 text-xs text-slate-500">
                                <Lock className="h-3 w-3 text-green-500" />
                                <span>SSL Secured</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-xs text-slate-500">
                                <ShieldCheck className="h-3 w-3 text-green-500" />
                                <span>Bank-level encryption</span>
                            </div>
                        </div>
                    </div>
                    <Button className="rounded-sm" asChild>
                        <Link href="/dashboard/student/history/student-payments/tuition" className="text-sm">
                            Click to Pay As A First Year Students
                        </Link>
                    </Button>
                </div>

                {/* Form card */}
                <div className="bg-white rounded-2xl shadow-sm shadow-slate-200/80 border border-slate-100 p-6 md:p-8">
                    <PaymentForm />
                </div>

                {/* Footer note */}
                <p className="text-center text-xs text-slate-400 mt-6">
                    Payments are processed through our secure payment gateway. For
                    support, contact{" "}
                    <a
                        href="mailto:finance@university.edu.ng"
                        className="text-blue-500 hover:underline"
                    >
                        finance@university.edu.ng
                    </a>
                </p>
            </div>
        </div>
    );
}