```vue
<script setup>
import { ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';
import { LogIn, Eye, EyeOff, Sparkles } from 'lucide-vue-next';

const showPassword = ref(false);

const form = useForm({
    email: '',
    password: '',
    remember: false,
});

const submit = () => {
    form.post(route('login.store'));
};
</script>

<template>

    <Head title="Login" />

    <div class="min-h-screen bg-gray-50 flex items-center justify-center px-4 py-8">
        <div class="w-full max-w-md">
            <div class="bg-white rounded-3xl shadow-xl border border-gray-100 p-8 sm:p-10">

                <!-- Logo -->
                <div class="flex justify-center mb-6">
                    <div class="w-16 h-16 rounded-2xl bg-red-50 flex items-center justify-center text-red-600">
                        <Sparkles :size="30" />
                    </div>
                </div>

                <!-- Heading -->
                <div class="text-center mb-8">
                    <h1 class="text-2xl font-bold text-gray-800">
                        Login
                    </h1>
                    <p class="mt-2 text-sm text-gray-500">
                        Masuk ke Panel Pengurus OSIS
                    </p>
                </div>

                <form @submit.prevent="submit" class="space-y-5">

                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            Email
                        </label>

                        <input id="email" v-model="form.email" type="email" autocomplete="email"
                            placeholder="Masukkan email"
                            class="w-full px-4 py-3 rounded-2xl border border-gray-200 bg-gray-50 text-sm text-gray-800 outline-none transition focus:border-red-400 focus:ring-4 focus:ring-red-50">

                        <p v-if="form.errors.email" class="mt-2 text-xs text-red-500">
                            {{ form.errors.email }}
                        </p>
                    </div>

                    <!-- Password -->
                    <div>
                        <label for="password" class="block text-sm font-medium text-gray-700 mb-2">
                            Password
                        </label>

                        <div class="relative">
                            <input id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'"
                                autocomplete="current-password" placeholder="Masukkan password"
                                class="w-full px-4 py-3 pr-12 rounded-2xl border border-gray-200 bg-gray-50 text-sm text-gray-800 outline-none transition focus:border-red-400 focus:ring-4 focus:ring-red-50">

                            <button type="button" @click="showPassword = !showPassword"
                                class="absolute right-3 top-1/2 -translate-y-1/2 p-2 text-gray-400 hover:text-gray-600 rounded-xl transition"
                                :title="showPassword ? 'Sembunyikan password' : 'Tampilkan password'">
                                <EyeOff v-if="showPassword" :size="18" />
                                <Eye v-else :size="18" />
                            </button>
                        </div>

                        <p v-if="form.errors.password" class="mt-2 text-xs text-red-500">
                            {{ form.errors.password }}
                        </p>
                    </div>

                    <!-- Remember -->
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input v-model="form.remember" type="checkbox"
                            class="w-4 h-4 rounded border-gray-300 text-red-600 focus:ring-red-500">

                        <span class="text-sm text-gray-500">
                            Ingat saya
                        </span>
                    </label>

                    <!-- Submit -->
                    <button type="submit" :disabled="form.processing"
                        class="w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-2xl bg-red-600 text-white text-sm font-semibold shadow-sm transition hover:bg-red-700 disabled:opacity-60 disabled:cursor-not-allowed">
                        <LogIn :size="18" />

                        <span>
                            {{ form.processing ? 'Memproses...' : 'Masuk' }}
                        </span>
                    </button>
                </form>

                <!-- Footer -->
                <div class="mt-8 text-center">
                    <p class="text-xs text-gray-400">
                        OSIS Kartini &copy; 2026
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
```
