<?php session_start(); ?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengering Ikan IoT</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <style>
        body {
            background: url('assets/img/bg.jpg') center/cover no-repeat;
            font-family: 'Inter', sans-serif;
        }
        .hidden-form { display: none; }
    </style>
</head>

<body class="min-h-screen flex items-center justify-center p-4 relative">

<!-- 🔥 BLUR BACKGROUND -->
<div class="absolute inset-0 bg-black/40 backdrop-blur-sm z-0"></div>

<!-- 🔥 CARD UTAMA -->
<div class="relative z-10 max-w-4xl w-full flex flex-col md:flex-row 
            rounded-3xl overflow-hidden shadow-2xl 
            bg-white/20 backdrop-blur-xl border border-white/30">

    <!-- 🔵 KIRI -->
    <div class="md:w-1/2 bg-blue-500/60 backdrop-blur-lg 
                p-12 text-white flex flex-col justify-between items-center text-center">

        <div>
            <h1 class="text-2xl font-bold">PENGERING IKAN IoT</h1>
            <div class="mt-8 overflow-hidden rounded-2xl shadow-xl">
    <img src="assets/img/ikan.jpg"
         class="w-full h-48 object-cover transition duration-300 hover:scale-110">
</div>
        </div>

        <p class="text-sm italic mt-[-20px]">Monitoring real-time</p>

    </div>

    <!-- ⚪ KANAN -->
    <div class="md:w-1/2 p-8 md:p-12 bg-white/60 backdrop-blur-lg">

        <div id="login-section">
            <?php include 'login_form.php'; ?>
        </div>

        <div id="register-section" class="hidden-form">
            <?php include 'register_form.php'; ?>
        </div>

    </div>
</div>

<script>
function toggleForm(type) {
    const login = document.getElementById('login-section');
    const register = document.getElementById('register-section');

    if (type === 'register') {
        login.classList.add('hidden-form');
        register.classList.remove('hidden-form');
    } else {
        register.classList.add('hidden-form');
        login.classList.remove('hidden-form');
    }
}
</script>

<script type="module" src="firebase-auth.js"></script>
</body>
</html>
