import React, { useState, useEffect } from 'react';
import { Home, User, LogIn, Users, PlusCircle, UserPlus, ListOrdered, Menu } from 'lucide-react'; // Menggunakan ikon dari lucide-react

// Komponen Navbar
const Navbar = ({ setCurrentPage, isOpen, toggleMenu }) => {
  return (
    <nav className="bg-gradient-to-r from-blue-700 to-blue-900 text-white p-4 shadow-lg rounded-b-lg">
      <div className="container mx-auto flex justify-between items-center">
        <h1 className="text-3xl font-extrabold tracking-tight cursor-pointer" onClick={() => setCurrentPage('home')}>
          SSDG Korwil Banten
        </h1>
        <div className="md:hidden">
          <button onClick={toggleMenu} className="focus:outline-none p-2 rounded-md hover:bg-blue-700 transition-colors">
            <Menu size={28} className="text-white" />
          </button>
        </div>
        {/* Menu navigasi responsif */}
        <ul className={`md:flex md:space-x-6 text-lg font-medium ${isOpen ? 'block' : 'hidden'} md:block absolute md:relative top-16 left-0 w-full md:w-auto bg-blue-800 md:bg-transparent shadow-lg md:shadow-none p-4 md:p-0 rounded-lg md:rounded-none z-10`}>
          <li className="my-2 md:my-0">
            <button onClick={() => setCurrentPage('home')} className="flex items-center space-x-2 hover:text-blue-200 transition-colors duration-200 w-full text-left p-2 rounded-md">
              <Home size={20} />
              <span>Halaman Utama</span>
            </button>
          </li>
          <li className="my-2 md:my-0">
            <button onClick={() => setCurrentPage('login')} className="flex items-center space-x-2 hover:text-blue-200 transition-colors duration-200 w-full text-left p-2 rounded-md">
              <LogIn size={20} />
              <span>Login</span>
            </button>
          </li>
          <li className="my-2 md:my-0">
            <button onClick={() => setCurrentPage('manageMembers')} className="flex items-center space-x-2 hover:text-blue-200 transition-colors duration-200 w-full text-left p-2 rounded-md">
              <Users size={20} />
              <span>Manajemen Anggota</span>
            </button>
          </li>
          <li className="my-2 md:my-0">
            <button onClick={() => setCurrentPage('registerMember')} className="flex items-center space-x-2 hover:text-blue-200 transition-colors duration-200 w-full text-left p-2 rounded-md">
              <UserPlus size={20} />
              <span>Daftar Anggota</span>
            </button>
          </li>
          <li className="my-2 md:my-0">
            <button onClick={() => setCurrentPage('registeredMembers')} className="flex items-center space-x-2 hover:text-blue-200 transition-colors duration-200 w-full text-left p-2 rounded-md">
              <ListOrdered size={20} />
              <span>Anggota Terdaftar</span>
            </button>
          </li>
        </ul>
      </div>
    </nav>
  );
};

// Komponen Halaman Utama
const HomePage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] p-4 sm:p-6 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg shadow-xl m-2 sm:m-4">
      <div className="bg-white p-6 md:p-12 rounded-xl shadow-2xl text-center max-w-sm sm:max-w-xl md:max-w-2xl transform hover:scale-105 transition-transform duration-300 w-full">
        <h2 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-blue-800 mb-4 sm:mb-6 animate-fade-in-down">
          Selamat Datang di SSDG Korwil Banten
        </h2>
        <p className="text-base sm:text-lg md:text-xl text-gray-700 leading-relaxed mb-6 sm:mb-8 animate-fade-in-up">
          Platform ini dirancang untuk mempermudah pengelolaan anggota dan kegiatan SSDG Korwil Banten.
          Semoga keberadaan aplikasi ini dapat meningkatkan efisiensi dan koordinasi dalam organisasi kita.
        </p>
        <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
          <button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
            Mulai Sekarang
          </button>
          <button className="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
            Pelajari Lebih Lanjut
          </button>
        </div>
      </div>
    </div>
  );
};

// Komponen Halaman Login
const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleLogin = (e) => {
    e.preventDefault();
    if (username === 'admin' && password === 'admin123') {
      setMessage(<span className="text-green-600 font-semibold">Login Berhasil! Selamat datang, Admin.</span>);
    } else {
      setMessage(<span className="text-red-600 font-semibold">Username atau password salah.</span>);
    }
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] p-4 sm:p-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg shadow-xl m-2 sm:m-4">
      <div className="bg-white p-6 md:p-10 rounded-xl shadow-2xl w-full max-w-sm md:max-w-md transform hover:scale-105 transition-transform duration-300">
        <h2 className="text-3xl sm:text-4xl font-extrabold text-purple-800 text-center mb-6 sm:mb-8">
          <LogIn size={32} sm:size={40} className="inline-block mr-2 sm:mr-3 text-purple-600" />
          Halaman Login
        </h2>
        <form onSubmit={handleLogin} className="space-y-4 sm:space-y-6">
          <div>
            <label htmlFor="username" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Username:
            </label>
            <input
              type="text"
              id="username"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-200"
              value={username}
              onChange={(e) => setUsername(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="password" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Password:
            </label>
            <input
              type="password"
              id="password"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 mb-2 sm:mb-3 leading-tight focus:outline-none focus:ring-2 focus:ring-purple-400 transition duration-200"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button
            type="submit"
            className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 sm:py-3 px-3 sm:px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 shadow-lg transform hover:-translate-y-1 transition duration-300"
          >
            Masuk
          </button>
        </form>
        {message && <p className="mt-4 sm:mt-6 text-center text-base sm:text-lg">{message}</p>}
      </div>
    </div>
  );
};

// Komponen Halaman Manajemen Anggota (Placeholder)
const ManageMembersPage = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] p-4 sm:p-6 bg-gradient-to-br from-green-50 to-teal-100 rounded-lg shadow-xl m-2 sm:m-4">
      <div className="bg-white p-6 md:p-12 rounded-xl shadow-2xl text-center w-full max-w-sm sm:max-w-xl md:max-w-2xl transform hover:scale-105 transition-transform duration-300">
        <h2 className="text-3xl sm:text-4xl font-extrabold text-green-800 mb-4 sm:mb-6">
          <Users size={32} sm:size={40} className="inline-block mr-2 sm:mr-3 text-green-600" />
          Manajemen Anggota
        </h2>
        <p className="text-base sm:text-lg md:text-xl text-gray-700 leading-relaxed">
          Halaman ini akan menampilkan fungsionalitas untuk mengelola anggota, seperti mengedit informasi,
          menghapus anggota, atau mengubah status keanggotaan.
          Fitur-fitur ini akan diimplementasikan lebih lanjut saat terhubung ke backend.
        </p>
        <button className="mt-6 sm:mt-8 bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition-all duration-300 transform hover:-translate-y-1">
          Lihat Opsi Manajemen
        </button>
      </div>
    </div>
  );
};

// Komponen Formulir Pendaftaran Anggota
const RegisterMemberPage = ({ addMember }) => {
  const [name, setName] = useState('');
  const [nikKtp, setNikKtp] = useState('');
  const [gender, setGender] = useState('');
  const [whatsapp, setWhatsapp] = useState('');
  const [occupation, setOccupation] = useState('');
  const [notes, setNotes] = useState('');
  const [address, setAddress] = useState('');
  const [district, setDistrict] = useState(''); // Kecamatan
  const [regency, setRegency] = useState(''); // Kabupaten
  const [profilePhoto, setProfilePhoto] = useState(null);
  const [profilePhotoPreview, setProfilePhotoPreview] = useState(null); // Untuk menampilkan pratinjau gambar
  const [message, setMessage] = useState('');

  const handlePhotoChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      if (file.size > 480 * 480) { // Simple client-side size check (480*480 bytes as max size)
        setMessage(<span className="text-red-600 font-semibold">Ukuran file terlalu besar. Maksimal 480KB.</span>);
        setProfilePhoto(null);
        setProfilePhotoPreview(null);
        return;
      }
      setProfilePhoto(file);

      // Create a preview for the image
      const reader = new FileReader();
      reader.onloadend = () => {
        const img = new Image();
        img.onload = () => {
          if (img.width > 480 || img.height > 480) {
            setMessage(<span className="text-red-600 font-semibold">Dimensi gambar terlalu besar. Maksimal 480x480 pixel.</span>);
            setProfilePhoto(null);
            setProfilePhotoPreview(null);
          } else {
            setProfilePhotoPreview(reader.result);
            setMessage(''); // Clear any previous error messages
          }
        };
        img.src = reader.result;
      };
      reader.readAsDataURL(file);
    } else {
      setProfilePhoto(null);
      setProfilePhotoPreview(null);
      setMessage('');
    }
  };


  const handleSubmit = (e) => {
    e.preventDefault();
    if (!name || !nikKtp || !gender || !whatsapp || !occupation || !address || !district || !regency) {
      setMessage(<span className="text-red-600 font-semibold">Mohon lengkapi semua bidang yang wajib (kecuali Keterangan & Photo Profile).</span>);
      return;
    }
    // Perbaikan: Validasi ukuran file dan dimensi di sisi klien
    if (profilePhoto) {
        if (profilePhoto.size > 480 * 1024) { // 480KB in bytes
            setMessage(<span className="text-red-600 font-semibold">Ukuran file terlalu besar. Maksimal 480KB.</span>);
            return;
        }
        if (profilePhotoPreview) {
            const img = new Image();
            img.src = profilePhotoPreview;
            if (img.width > 480 || img.height > 480) {
                setMessage(<span className="text-red-600 font-semibold">Dimensi gambar terlalu besar. Maksimal 480x480 pixel.</span>);
                return;
            }
        }
    }


    const newMember = {
      id: Date.now(), // ID unik sederhana
      name,
      nikKtp,
      gender,
      whatsapp,
      occupation,
      notes,
      address,
      district,
      regency,
      profilePhoto: profilePhotoPreview, // Store base64 string for preview/display
      registrationDate: new Date().toLocaleDateString('id-ID'),
    };
    addMember(newMember);
    setMessage(<span className="text-green-600 font-semibold">Anggota berhasil didaftarkan!</span>);
    // Reset form fields
    setName('');
    setNikKtp('');
    setGender('');
    setWhatsapp('');
    setOccupation('');
    setNotes('');
    setAddress('');
    setDistrict('');
    setRegency('');
    setProfilePhoto(null);
    setProfilePhotoPreview(null);
  };

  return (
    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-80px)] p-4 sm:p-6 bg-gradient-to-br from-orange-50 to-yellow-100 rounded-lg shadow-xl m-2 sm:m-4">
      <div className="bg-white p-6 md:p-10 rounded-xl shadow-2xl w-full max-w-sm sm:max-w-xl md:max-w-2xl transform hover:scale-105 transition-transform duration-300">
        <h2 className="text-3xl sm:text-4xl font-extrabold text-orange-800 text-center mb-6 sm:mb-8">
          <UserPlus size={32} sm:size={40} className="inline-block mr-2 sm:mr-3 text-orange-600" />
          Formulir Daftar Anggota
        </h2>
        <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
          <div>
            <label htmlFor="name" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Nama Lengkap:
            </label>
            <input
              type="text"
              id="name"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="nikKtp" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              NIK KTP:
            </label>
            <input
              type="text"
              id="nikKtp"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={nikKtp}
              onChange={(e) => setNikKtp(e.target.value)}
              required
            />
          </div>
          <div>
            <label className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Jenis Kelamin:
            </label>
            <div className="flex items-center space-x-4">
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  className="form-radio text-orange-600 h-5 w-5"
                  name="gender"
                  value="Laki-Laki"
                  checked={gender === 'Laki-Laki'}
                  onChange={(e) => setGender(e.target.value)}
                  required
                />
                <span className="ml-2 text-gray-700">Laki-Laki</span>
              </label>
              <label className="inline-flex items-center">
                <input
                  type="radio"
                  className="form-radio text-orange-600 h-5 w-5"
                  name="gender"
                  value="Perempuan"
                  checked={gender === 'Perempuan'}
                  onChange={(e) => setGender(e.target.value)}
                  required
                />
                <span className="ml-2 text-gray-700">Perempuan</span>
              </label>
            </div>
          </div>
          <div>
            <label htmlFor="whatsapp" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Nomor WA:
            </label>
            <input
              type="tel"
              id="whatsapp"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={whatsapp}
              onChange={(e) => setWhatsapp(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="occupation" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Pekerjaan:
            </label>
            <input
              type="text"
              id="occupation"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={occupation}
              onChange={(e) => setOccupation(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="notes" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Keterangan:
            </label>
            <textarea
              id="notes"
              rows="2"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={notes}
              onChange={(e) => setNotes(e.target.value)}
            ></textarea>
          </div>
          <div>
            <label htmlFor="address" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Alamat:
            </label>
            <textarea
              id="address"
              rows="3"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={address}
              onChange={(e) => setAddress(e.target.value)}
              required
            ></textarea>
          </div>
          <div>
            <label htmlFor="district" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Kecamatan:
            </label>
            <input
              type="text"
              id="district"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={district}
              onChange={(e) => setDistrict(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="regency" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Kabupaten:
            </label>
            <input
              type="text"
              id="regency"
              className="shadow appearance-none border rounded-lg w-full py-2 sm:py-3 px-3 sm:px-4 text-gray-800 leading-tight focus:outline-none focus:ring-2 focus:ring-orange-400 transition duration-200"
              value={regency}
              onChange={(e) => setRegency(e.target.value)}
              required
            />
          </div>
          <div>
            <label htmlFor="profilePhoto" className="block text-gray-700 text-sm sm:text-base font-bold mb-2">
              Photo Profile: (Max 480x480px, {'<'} 480KB) {/* Perbaikan dilakukan di sini */}
            </label>
            <input
              type="file"
              id="profilePhoto"
              accept="image/*"
              className="block w-full text-sm text-gray-800
                file:mr-4 file:py-2 file:px-4
                file:rounded-full file:border-0
                file:text-sm file:font-semibold
                file:bg-orange-50 file:text-orange-700
                hover:file:bg-orange-100
              "
              onChange={handlePhotoChange}
            />
            {profilePhotoPreview && (
              <div className="mt-4 flex flex-col items-center">
                <p className="text-gray-700 text-sm mb-2">Pratinjau Foto:</p>
                <img src={profilePhotoPreview} alt="Profile Preview" className="w-24 h-24 object-cover rounded-full border-2 border-orange-400 shadow-md" />
              </div>
            )}
          </div>

          <button
            type="submit"
            className="w-full bg-orange-600 hover:bg-orange-700 text-white font-bold py-2 sm:py-3 px-3 sm:px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 shadow-lg transform hover:-translate-y-1 transition duration-300"
          >
            Daftarkan Anggota
          </button>
        </form>
        {message && <p className="mt-4 sm:mt-6 text-center text-base sm:text-lg">{message}</p>}
      </div>
    </div>
  );
};

// Komponen Halaman Anggota Terdaftar
const RegisteredMembersPage = ({ members }) => {
  return (
    <div className="flex flex-col items-center min-h-[calc(100vh-80px)] p-4 sm:p-6 bg-gradient-to-br from-blue-100 to-indigo-200 rounded-lg shadow-xl m-2 sm:m-4">
      <div className="bg-white p-6 md:p-12 rounded-xl shadow-2xl w-full max-w-full lg:max-w-6xl transform hover:scale-105 transition-transform duration-300 overflow-x-auto">
        <h2 className="text-3xl sm:text-4xl font-extrabold text-blue-800 text-center mb-6 sm:mb-8">
          <ListOrdered size={32} sm:size={40} className="inline-block mr-2 sm:mr-3 text-blue-600" />
          Anggota Terdaftar
        </h2>
        {members.length === 0 ? (
          <p className="text-center text-gray-600 text-base sm:text-lg">Belum ada anggota terdaftar. Silakan daftarkan anggota baru!</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="min-w-full bg-white border border-gray-300 rounded-lg shadow-md">
              <thead className="bg-blue-600 text-white">
                <tr>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold rounded-tl-lg">No.</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Nama</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">NIK KTP</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Jenis Kelamin</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Nomor WA</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Pekerjaan</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Keterangan</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Alamat</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Kecamatan</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Kabupaten</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold">Photo Profile</th>
                  <th className="py-2 px-3 text-left text-xs sm:text-sm font-semibold rounded-tr-lg">Tanggal Daftar</th>
                </tr>
              </thead>
              <tbody>
                {members.map((member, index) => (
                  <tr key={member.id} className="border-b border-gray-200 last:border-b-0 hover:bg-blue-50 transition-colors duration-200">
                    <td className="py-2 px-3 text-gray-800 text-xs sm:text-sm">{index + 1}</td>
                    <td className="py-2 px-3 text-gray-800 text-xs sm:text-sm font-medium">{member.name}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.nikKtp}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.gender}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.whatsapp}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.occupation}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.notes}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.address}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.district}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.regency}</td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">
                        {member.profilePhoto ? (
                            <img src={member.profilePhoto} alt="Profile" className="w-12 h-12 object-cover rounded-full" />
                        ) : (
                            <span className="text-gray-500">Tidak ada foto</span>
                        )}
                    </td>
                    <td className="py-2 px-3 text-gray-700 text-xs sm:text-sm">{member.registrationDate}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </div>
  );
};

// Komponen Utama Aplikasi
const App = () => {
  const [currentPage, setCurrentPage] = useState('home');
  const [members, setMembers] = useState([]);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // Menambahkan anggota baru ke daftar
  const addMember = (newMember) => {
    setMembers((prevMembers) => [...prevMembers, newMember]);
  };

  // Mengubah status menu navigasi (untuk mobile)
  const toggleMenu = () => {
    setIsMenuOpen(!isMenuOpen);
  };

  // Tutup menu saat halaman berubah (untuk mobile)
  useEffect(() => {
    if (isMenuOpen) {
      setIsMenuOpen(false);
    }
  }, [currentPage]);

  // Render halaman berdasarkan currentPage
  const renderPage = () => {
    switch (currentPage) {
      case 'home':
        return <HomePage />;
      case 'login':
        return <LoginPage />;
      case 'manageMembers':
        return <ManageMembersPage />;
      case 'registerMember':
        return <RegisterMemberPage addMember={addMember} />;
      case 'registeredMembers':
        return <RegisteredMembersPage members={members} />;
      default:
        return <HomePage />;
    }
  };

  return (
    <div className="min-h-screen bg-gray-50 font-inter">
      {/* Tailwind CSS Script (akan di-inject oleh lingkungan Canvas) */}
      <script src="https://cdn.tailwindcss.com"></script>
      <Navbar setCurrentPage={setCurrentPage} isOpen={isMenuOpen} toggleMenu={toggleMenu} />
      <main className="container mx-auto mt-2 sm:mt-4 px-2 sm:px-4">
        {renderPage()}
      </main>
      {/* Custom CSS for fade-in animations */}
      <style>
        {`
        @keyframes fade-in-down {
          from {
            opacity: 0;
            transform: translateY(-20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes fade-in-up {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        .animate-fade-in-down {
          animation: fade-in-down 0.8s ease-out;
        }

        .animate-fade-in-up {
          animation: fade-in-up 0.8s ease-out 0.2s backwards; /* Delay for sequential animation */
        }
        `}
      </style>
    </div>
  );
};

export default App;