import LandingLayout from '@/Layouts/LandingLayout'; import { motion, AnimatePresence } from 'framer-motion'; import { Head } from '@inertiajs/react'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faShieldHalved, faFileInvoiceDollar, faWallet, faHeadset } from '@fortawesome/free-solid-svg-icons'; import { faWhatsapp } from '@fortawesome/free-brands-svg-icons'; import { useState, useEffect, useMemo } from 'react'; // Import useMemo export default function BiayaPage({ campus, tuitionData }) { // Tema fallback lengkap const theme = campus?.theme || { gradientFrom: 'from-gray-700', gradientTo: 'to-gray-900', primary: 'bg-gray-600', activeBg: 'bg-gray-700', textColor: 'text-gray-600', badgeBg: 'bg-gray-100', shadowColor: 'hover:shadow-gray-200/50', borderColor: 'border-gray-500' }; // Data fallback lengkap const currentCampus = campus || { name: "Kampus Kami", whatsappNumber: '6281234567890' }; // Pastikan availableTabs menggunakan useMemo const availableTabs = useMemo(() => tuitionData ? Object.keys(tuitionData) : [], [tuitionData]); const [activeTab, setActiveTab] = useState(availableTabs[0] || null); // Reset tab aktif jika data kampus berubah (misal ganti slug) useEffect(() => { if (availableTabs.length > 0 && !availableTabs.includes(activeTab)) { setActiveTab(availableTabs[0] || null); } }, [availableTabs, activeTab]); // Ambil data yang relevan const currentProgramData = tuitionData[activeTab]?.tableData || []; const currentRegistrationFees = tuitionData[activeTab]?.registrationFees || []; // Remove duplicates and keep the first entry for each registration fee type const uniqueRegistrationFees = Array.from(new Map(currentRegistrationFees.map(fee => [fee.type, fee])).values()); // Varian animasi const containerVariants = { hidden: {}, visible: { transition: { staggerChildren: 0.05 } } }; const itemVariants = { hidden: { opacity: 0, y: 10 }, visible: { opacity: 1, y: 0 } }; // Animasi geser sedikit const whatsappButtonVariants = { initial: { scale: 1 }, animate: { scale: [1, 1.05, 1], transition: { duration: 1.5, ease: "easeInOut", repeat: Infinity, delay: 1 } }, hover: { scale: 1.05, transition: { duration: 0.3 } } }; // Style background berpola halus const backgroundPatternStyle = { backgroundImage: 'radial-gradient(circle at 1px 1px, #e2e8f0 0.5px, transparent 0)', backgroundSize: '20px 20px', }; return ( {/* Header Halaman */}
Rincian Biaya Pendidikan Biaya transparan dan terjangkau untuk program studi di {campus.name}.
{/* Konten Utama */}
{/* Jaminan Biaya & Biaya Awal */}

Jaminan Biaya Kuliah Tetap

Nikmati ketenangan selama masa studi. Biaya kuliah dapat diangsur bulanan dengan nominal FLAT hingga Anda wisuda.

{uniqueRegistrationFees.length > 0 ? ( uniqueRegistrationFees.map((fee, index) => (
Biaya Pendaftaran {fee.type}

Rp {fee.fee},-
)) ) : (

Biaya Pendaftaran

Tidak Tersedia

)}

Biaya Awal

Termasuk Angsuran ke-1, Uang Masuk, dan Kartu Tanda Mahasiswa (KTM).

 {/* --- Tab "Pil" Dinamis --- */} {availableTabs.length > 0 && (
{availableTabs.map((tab) => { const isActive = activeTab === tab; return ( setActiveTab(tab)} layout // ⭐ Tambahkan layout untuk transisi halus // ⭐ Styling yang membuat tombol menjadi pil aktif className={`flex-1 rounded-full py-2 text-sm font-medium transition-all duration-300 focus:outline-none ${isActive ? `text-white shadow-md ${theme.primary}` : 'text-slate-700 hover:text-black bg-transparent'}` } whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }} > {tab} ); })}
)} {/* --- Akhir Tab Dinamis --- */} {/* Kontainer Tabel dengan Animasi */} {activeTab && (
{/* Header Tabel Berwarna */} {/* Body Tabel */} {currentProgramData.map((item, index) => ( ))}
Program Studi Biaya Awal Angsuran Normal / Bulan Promo Angsuran / Bulan
{item.major} Rp {item.initialFee} Rp {item.oldMonthlyFee} /bulan Rp {item.newMonthlyFee} /bulan
)}
{/* CTA (Tidak ada perubahan) */}

Punya Pertanyaan Seputar Pendaftaran?

Tim kami siap membantu Anda. Hubungi kami via WhatsApp untuk respon cepat dan informasi lengkap tentang {currentCampus.name}.

Tanya via WhatsApp
); }