<?php
// Start a session just in case we need it later
session_start();

// Get message parameters from the URL
// This block reads the success/error messages passed from register_process.php
$message = $_GET['message'] ?? '';
$message_type = $_GET['message_type'] ?? 'info';
$display_message = !empty($message);

if ($display_message) {
    // Determine colors for Tailwind CSS based on message type
    $color_bg = ($message_type === 'error') ? 'bg-red-800' : 'bg-green-800';
    $color_text = ($message_type === 'error') ? 'text-red-100' : 'text-green-100';
    $icon = ($message_type === 'error') ? '🛑' : '✅';
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up - Confluence King</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center">
    <div class="bg-gray-800 p-8 rounded-lg shadow-xl w-full max-w-md">
        <h2 class="text-2xl font-bold mb-6 text-center">Create Your Account</h2>
        
        <?php if ($display_message): ?>
            <div class="p-3 rounded-md mb-4 text-sm font-medium <?= $color_bg ?> <?= $color_text ?>">
                <?= $icon ?> <?= htmlspecialchars(urldecode($message)) ?>
            </div>
        <?php endif; ?>
        <form action="register_process.php" method="POST" id="register-form">
            
            <div class="mb-4">
                <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Full Name</label>
                <input type="text" id="name" name="name" required
                       class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-blue-500 text-white"
                       placeholder="John Doe">
            </div>

            <div class="mb-4">
                <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label>
                <input type="email" id="email" name="email" required
                       class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-blue-500 text-white"
                       placeholder="you@example.com">
            </div>

            <div class="mb-6">
                <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
                <input type="password" id="password" name="password" required minlength="8"
                       class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md focus:outline-none focus:ring-blue-500 text-white"
                       placeholder="Minimum 8 characters">
            </div>
          <div class="mb-6">
    <div class="flex items-center">
        <input id="terms" name="terms" type="checkbox" required
               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-600 rounded bg-gray-700">
        <label for="terms" class="ml-2 block text-sm text-gray-300">
            I agree to the 
            <a href="tos.html" target="_blank" class="text-blue-400 hover:underline font-medium">Terms of Service</a>
            and the acceptance of these terms.
        </label>
    </div>
</div>
            
            <button type="submit"
                    class="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 rounded-md font-medium">
                Sign Up
            </button>
        </form>
        <p class="text-center text-sm text-gray-400 mt-4">
            Already have an account? <a href="login.php" class="text-blue-400 hover:underline">Log in</a>
        </p>
    </div>
</body>
</html>