"use client";
import { useState } from "react";
import Image from "next/image";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";
import { FaGraduationCap, FaFileAlt, FaMoneyBillWave, FaAward, FaQuestionCircle } from "react-icons/fa";
// These should be proper images from your school
const ADMISSION_IMAGES = {
process: "/admission-process.jpg", // Replace with actual image
requirements: "/requirements.jpg", // Replace with actual image
fees: "/tuition-fees.jpg", // Replace with actual image
scholarships: "/scholarships.jpg", // Replace with actual image
faq: "/campus-life.jpg", // Replace with actual image
};
type Tab = {
title: string;
value: string;
icon: React.ReactNode;
content?: React.ReactNode;
};
export function AdmissionTabs() {
const tabs: Tab[] = [
{
title: "Application Process",
value: "process",
icon: <FaFileAlt />,
content: (
<div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
<div className="flex flex-col md:flex-row h-full">
<div className="w-full md:w-1/2 p-8 md:p-10">
<h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Application Process</h3>
<div className="space-y-4">
<div className="bg-white p-4 rounded-xl shadow-md">
<div className="flex items-center">
<div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">1</div>
<h4 className="font-semibold text-gray-800">Submit Online Application</h4>
</div>
<p className="mt-2 text-gray-600 pl-11">Complete the online application form with personal information and academic history.</p>
</div>
<div className="bg-white p-4 rounded-xl shadow-md">
<div className="flex items-center">
<div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">2</div>
<h4 className="font-semibold text-gray-800">Upload Documents</h4>
</div>
<p className="mt-2 text-gray-600 pl-11">Submit required documents including transcripts, ID proof, and recommendation letters.</p>
</div>
<div className="bg-white p-4 rounded-xl shadow-md">
<div className="flex items-center">
<div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">3</div>
<h4 className="font-semibold text-gray-800">Entrance Assessment</h4>
</div>
<p className="mt-2 text-gray-600 pl-11">Complete the required assessment test or interview as per your chosen program.</p>
</div>
<div className="bg-white p-4 rounded-xl shadow-md">
<div className="flex items-center">
<div className="bg-indigo-100 w-8 h-8 rounded-full flex items-center justify-center text-indigo-700 font-bold mr-3">4</div>
<h4 className="font-semibold text-gray-800">Admission Decision</h4>
</div>
<p className="mt-2 text-gray-600 pl-11">Receive your admission decision within 2-3 weeks after completing all steps.</p>
</div>
</div>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="mt-8 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-8 rounded-xl font-medium shadow-lg hover:shadow-indigo-200 transition-all"
>
Apply Now
</motion.button>
</div>
<div className="w-full md:w-1/2 relative h-60 md:h-auto">
<Image
src={ADMISSION_IMAGES.process}
alt="Application process"
layout="fill"
objectFit="cover"
className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
/>
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
<p className="text-white font-medium text-lg">Applications for 2025-26 Academic Year</p>
<p className="text-white/80">Deadline: August 15, 2025</p>
</div>
</div>
</div>
</div>
),
},
{
title: "Requirements",
value: "requirements",
icon: <FaGraduationCap />,
content: (
<div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
<div className="flex flex-col md:flex-row h-full">
<div className="w-full md:w-1/2 p-8 md:p-10">
<h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Admission Requirements</h3>
<div className="space-y-6">
<div>
<h4 className="text-lg font-semibold text-indigo-800 mb-2 flex items-center">
<span className="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
Academic Records
</h4>
<ul className="list-disc pl-6 text-gray-700 space-y-1">
<li>High School Transcripts with minimum GPA of 3.0</li>
<li>Standardized test scores (SAT/ACT)</li>
<li>Previous academic certificates</li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold text-indigo-800 mb-2 flex items-center">
<span className="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
Personal Documents
</h4>
<ul className="list-disc pl-6 text-gray-700 space-y-1">
<li>Valid ID proof/passport</li>
<li>Recent passport-sized photographs</li>
<li>Proof of residence</li>
</ul>
</div>
<div>
<h4 className="text-lg font-semibold text-indigo-800 mb-2 flex items-center">
<span className="inline-block w-2 h-2 bg-indigo-500 rounded-full mr-2"></span>
Additional Requirements
</h4>
<ul className="list-disc pl-6 text-gray-700 space-y-1">
<li>Two letters of recommendation</li>
<li>Personal statement/essay</li>
<li>Portfolio (for creative programs)</li>
<li>Interview (for selected programs)</li>
</ul>
</div>
</div>
<div className="mt-8 p-4 bg-indigo-50 rounded-lg border-l-4 border-indigo-500">
<p className="text-indigo-900 text-sm">
<strong>Note:</strong> Requirements may vary by program. Please check specific program
requirements before applying.
</p>
</div>
</div>
<div className="w-full md:w-1/2 relative h-60 md:h-auto">
<Image
src={ADMISSION_IMAGES.requirements}
alt="Admission requirements"
layout="fill"
objectFit="cover"
className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
/>
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
<p className="text-white font-medium text-lg">Required Documents</p>
<p className="text-white/80">All documents must be in PDF format</p>
</div>
</div>
</div>
</div>
),
},
{
title: "Tuition & Fees",
value: "fees",
icon: <FaMoneyBillWave />,
content: (
<div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
<div className="flex flex-col md:flex-row h-full">
<div className="w-full md:w-1/2 p-8 md:p-10">
<h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Tuition & Fees</h3>
<div className="space-y-6">
<div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="bg-indigo-600 text-white py-3 px-4">
<h4 className="font-semibold">Undergraduate Programs</h4>
</div>
<div className="p-4">
<table className="w-full text-sm">
<tbody>
<tr className="border-b border-gray-100">
<td className="py-3 text-gray-700">Tuition (per year)</td>
<td className="py-3 font-medium text-gray-900">$12,500</td>
</tr>
<tr className="border-b border-gray-100">
<td className="py-3 text-gray-700">Registration Fee</td>
<td className="py-3 font-medium text-gray-900">$250</td>
</tr>
<tr>
<td className="py-3 text-gray-700">Student Services</td>
<td className="py-3 font-medium text-gray-900">$850</td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="bg-white rounded-xl shadow-md overflow-hidden">
<div className="bg-purple-600 text-white py-3 px-4">
<h4 className="font-semibold">Graduate Programs</h4>
</div>
<div className="p-4">
<table className="w-full text-sm">
<tbody>
<tr className="border-b border-gray-100">
<td className="py-3 text-gray-700">Tuition (per year)</td>
<td className="py-3 font-medium text-gray-900">$15,800</td>
</tr>
<tr className="border-b border-gray-100">
<td className="py-3 text-gray-700">Registration Fee</td>
<td className="py-3 font-medium text-gray-900">$300</td>
</tr>
<tr>
<td className="py-3 text-gray-700">Research Access</td>
<td className="py-3 font-medium text-gray-900">$1,200</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div className="mt-8 flex gap-4">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-white border border-indigo-200 text-indigo-700 py-2 px-6 rounded-xl font-medium hover:bg-indigo-50 transition-colors"
>
Payment Plans
</motion.button>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-white border border-indigo-200 text-indigo-700 py-2 px-6 rounded-xl font-medium hover:bg-indigo-50 transition-colors"
>
Financial Aid
</motion.button>
</div>
</div>
<div className="w-full md:w-1/2 relative h-60 md:h-auto">
<Image
src={ADMISSION_IMAGES.fees}
alt="Tuition and fees"
layout="fill"
objectFit="cover"
className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
/>
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
<p className="text-white font-medium text-lg">Affordable Education</p>
<p className="text-white/80">Multiple payment options available</p>
</div>
</div>
</div>
</div>
),
},
{
title: "Scholarships",
value: "scholarships",
icon: <FaAward />,
content: (
<div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
<div className="flex flex-col md:flex-row h-full">
<div className="w-full md:w-1/2 p-8 md:p-10">
<h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Scholarships & Financial Aid</h3>
<div className="grid grid-cols-1 gap-6">
{[
{
title: "Academic Excellence Scholarship",
amount: "Up to 75% tuition waiver",
criteria: "GPA 3.8+ and outstanding academic achievements",
deadline: "June 30, 2025",
color: "from-blue-500 to-indigo-500"
},
{
title: "Leadership & Community Service",
amount: "Up to 50% tuition waiver",
criteria: "Demonstrated leadership and community involvement",
deadline: "July 15, 2025",
color: "from-purple-500 to-pink-500"
},
{
title: "Creative Arts Scholarship",
amount: "Up to 60% tuition waiver",
criteria: "Outstanding portfolio and creative achievements",
deadline: "July 30, 2025",
color: "from-amber-500 to-orange-500"
}
].map((scholarship, idx) => (
<div key={idx} className="bg-white rounded-xl shadow-md overflow-hidden">
<div className={`bg-gradient-to-r ${scholarship.color} text-white py-3 px-4`}>
<h4 className="font-semibold">{scholarship.title}</h4>
</div>
<div className="p-4 space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Award:</span>
<span className="font-medium text-gray-900">{scholarship.amount}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Criteria:</span>
<span className="font-medium text-gray-900 text-right">{scholarship.criteria}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Deadline:</span>
<span className="font-medium text-gray-900">{scholarship.deadline}</span>
</div>
</div>
</div>
))}
</div>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="mt-8 bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-3 px-8 rounded-xl font-medium shadow-lg hover:shadow-indigo-200 transition-all"
>
Apply for Scholarships
</motion.button>
</div>
<div className="w-full md:w-1/2 relative h-60 md:h-auto">
<Image
src={ADMISSION_IMAGES.scholarships}
alt="Scholarships"
layout="fill"
objectFit="cover"
className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
/>
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
<p className="text-white font-medium text-lg">Rewarding Excellence</p>
<p className="text-white/80">Over $2 million in scholarships awarded annually</p>
</div>
</div>
</div>
</div>
),
},
{
title: "FAQ",
value: "faq",
icon: <FaQuestionCircle />,
content: (
<div className="w-full h-full rounded-2xl overflow-hidden bg-gradient-to-br from-indigo-50 to-white border border-indigo-100 shadow-xl">
<div className="flex flex-col md:flex-row h-full">
<div className="w-full md:w-1/2 p-8 md:p-10">
<h3 className="text-2xl md:text-3xl font-bold text-indigo-900 mb-6">Frequently Asked Questions</h3>
<div className="space-y-4">
{[
{
question: "What is the application deadline?",
answer: "Regular admission deadline is August 15, 2025. Early decision applications are due by June 1, 2025."
},
{
question: "Can I apply to multiple programs?",
answer: "Yes, you can apply to up to three programs with a single application fee."
},
{
question: "Are there any application fee waivers?",
answer: "Fee waivers are available for students with financial need. Contact the admissions office for details."
},
{
question: "How long does the admission process take?",
answer: "Most decisions are made within 2-3 weeks after all required documents are received."
},
{
question: "Is on-campus housing guaranteed?",
answer: "On-campus housing is guaranteed for first-year students who apply by the priority deadline."
}
].map((faq, idx) => (
<motion.div
key={idx}
initial={{ height: "auto" }}
whileHover={{ backgroundColor: "rgba(238, 242, 255, 0.5)" }}
className="bg-white rounded-xl shadow-sm overflow-hidden p-4 transition-colors"
>
<h4 className="font-semibold text-indigo-800">{faq.question}</h4>
<p className="text-gray-600 mt-2">{faq.answer}</p>
</motion.div>
))}
</div>
<div className="mt-8 text-center">
<p className="text-gray-600 mb-4">Didn't find what you're looking for?</p>
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="bg-white border border-indigo-200 text-indigo-700 py-2 px-6 rounded-xl font-medium hover:bg-indigo-50 transition-colors"
>
Contact Admissions
</motion.button>
</div>
</div>
<div className="w-full md:w-1/2 relative h-60 md:h-auto">
<Image
src={ADMISSION_IMAGES.faq}
alt="Frequently asked questions"
layout="fill"
objectFit="cover"
className="rounded-b-2xl md:rounded-r-2xl md:rounded-bl-none"
/>
<div className="absolute inset-0 bg-gradient-to-t from-indigo-900/70 to-transparent flex flex-col justify-end p-6 md:p-8">
<p className="text-white font-medium text-lg">Still Have Questions?</p>
<p className="text-white/80">Our admissions team is here to help</p>
</div>
</div>
</div>
</div>
),
},
];
return (
<div className="h-auto md:h-[40rem] [perspective:1000px] relative flex flex-col max-w-6xl mx-auto w-full items-start justify-start">
<Tabs tabs={tabs} />
</div>
);
}
export const Tabs = ({
tabs: propTabs,
containerClassName,
activeTabClassName,
tabClassName,
contentClassName,
}: {
tabs: Tab[];
containerClassName?: string;
activeTabClassName?: string;
tabClassName?: string;
contentClassName?: string;
}) => {
const [active, setActive] = useState<Tab>(propTabs[0]);
const [tabs, setTabs] = useState<Tab[]>(propTabs);
const [hovering, setHovering] = useState(false);
const moveSelectedTabToTop = (idx: number) => {
const newTabs = [...propTabs];
const selectedTab = newTabs.splice(idx, 1);
newTabs.unshift(selectedTab[0]);
setTabs(newTabs);
setActive(newTabs[0]);
};
return (
<>
<div className="text-center mb-8">
<h2 className="text-3xl md:text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-700 to-purple-700">
Join Our Academic Community
</h2>
<p className="text-gray-600 mt-2 max-w-2xl mx-auto">
Explore our admission process and find everything you need to become part of Kautilya Academy.
</p>
</div>
<div
className={cn(
"flex flex-row items-center justify-center [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full mb-8",
containerClassName
)}
>
{propTabs.map((tab, idx) => (
<motion.button
key={tab.title}
onClick={() => {
moveSelectedTabToTop(idx);
}}
onMouseEnter={() => setHovering(true)}
onMouseLeave={() => setHovering(false)}
className={cn(
"relative px-6 py-4 rounded-full mx-1 flex items-center gap-2",
tabClassName
)}
style={{
transformStyle: "preserve-3d",
}}
whileHover={{ y: -3 }}
whileTap={{ y: 0 }}
>
{active.value === tab.value && (
<motion.div
layoutId="clickedbutton"
transition={{ type: "spring", bounce: 0.3, duration: 0.6 }}
className={cn(
"absolute inset-0 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full shadow-lg",
activeTabClassName
)}
/>
)}
<span className={`relative z-10 ${active.value === tab.value ? 'text-white' : 'text-gray-700'}`}>
{tab.icon}
</span>
<span className={`relative z-10 font-medium ${active.value === tab.value ? 'text-white' : 'text-gray-700'}`}>
{tab.title}
</span>
</motion.button>
))}
</div>
<FadeInDiv
tabs={tabs}
active={active}
key={active.value}
hovering={hovering}
className={cn("mt-2 h-full w-full", contentClassName)}
/>
</>
);
};
export const FadeInDiv = ({
className,
tabs,
active,
hovering,
}: {
className?: string;
key?: string;
tabs: Tab[];
active: Tab;
hovering?: boolean;
}) => {
const isActive = (tab: Tab) => {
return tab.value === tabs[0].value;
};
return (
<div className="relative w-full h-full">
{tabs.map((tab, idx) => (
<motion.div
key={tab.value}
layoutId={tab.value}
style={{
scale: 1 - idx * 0.05,
top: hovering ? idx * -30 : 0,
zIndex: -idx,
opacity: idx < 3 ? 1 - idx * 0.2 : 0,
}}
animate={{
y: isActive(tab) ? [0, 10, 0] : 0,
}}
transition={{
duration: 0.5,
ease: "easeInOut"
}}
className={cn("w-full h-full absolute top-0 left-0", className)}
>
{tab.content}
</motion.div>
))}
</div>
);
};