<?php
require_once __DIR__ . '/config/config.php';

if (isLoggedIn()) redirect(SITE_URL . '/user/dashboard.php');

$error = $success = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $auth = new Auth();
    $result = $auth->register(
        $_POST['name']             ?? '',
        $_POST['email']            ?? '',
        $_POST['password']         ?? '',
        $_POST['confirm_password'] ?? ''
    );
    if ($result['success']) {
        $success = 'Account created! You can now sign in.';
    } else {
        $error = $result['message'];
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Account — <?php echo SITE_NAME; ?></title>
    <link rel="icon" type="image/png" href="/assets/images/logo.png">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap">
    <style>
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --bg:     #0B0C10;
            --glass:  rgba(15,16,22,0.72);
            --border: rgba(255,255,255,0.08);
            --gold-1: #FFD700;
            --gold-2: #FFA500;
            --muted:  #8A8FA8;
            --font:   'Plus Jakarta Sans', 'Segoe UI', sans-serif;
        }

        body {
            font-family: var(--font);
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.25rem;
            overflow: hidden;
        }

        /* ── Starfield ──────────────────────── */
        canvas#stars {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        /* ── Card ───────────────────────────── */
        .card {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 420px;
            background: var(--glass);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border);
            border-radius: 20px;
            padding: 2rem 1.75rem 1.75rem;
            box-shadow: 0 8px 40px rgba(0,0,0,0.45);
        }

        /* ── Logo block ─────────────────────── */
        .logo-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.45rem;
            margin-bottom: 1.6rem;
            overflow: visible;
        }
        .logo-block img {
            width: 48px;
            height: 48px;
            min-width: 48px;
            min-height: 48px;
            object-fit: contain;
            display: block;
            filter: drop-shadow(0 0 10px rgba(255,215,0,0.35));
        }
        .page-title {
            font-size: 0.78rem;
            font-weight: 500;
            color: var(--muted);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        /* ── Alerts ─────────────────────────── */
        .alert {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-size: 0.875rem;
            font-weight: 500;
            margin-bottom: 1.1rem;
        }
        .alert-error   { background: rgba(239,68,68,0.12);  border: 1px solid rgba(239,68,68,0.3);  color: #F87171; }
        .alert-success { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.3); color: #34D399; }

        /* ── Form ───────────────────────────── */
        .form-group { margin-bottom: 1rem; }

        .form-label {
            display: block;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 0.45rem;
        }

        .form-control {
            width: 100%;
            padding: 0.78rem 1rem;
            background: rgba(15,16,22,0.65);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            color: #fff;
            font-family: var(--font);
            font-size: 0.95rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .form-control::placeholder { color: rgba(138,143,168,0.6); }
        .form-control:focus {
            outline: none;
            border-color: rgba(255,215,0,0.45);
            box-shadow: 0 0 0 3px rgba(255,215,0,0.08);
        }

        /* ── Submit button ──────────────────── */
        .btn-submit {
            width: 100%;
            padding: 0.88rem;
            background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
            color: #0B0C10;
            border: none;
            border-radius: 10px;
            font-family: var(--font);
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            letter-spacing: 0.03em;
            margin-top: 0.35rem;
            transition: transform 0.18s ease, box-shadow 0.18s ease;
        }
        .btn-submit:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 22px rgba(255,165,0,0.38);
        }

        /* ── Footer link ────────────────────── */
        .footer-link {
            text-align: center;
            margin-top: 1.35rem;
            font-size: 0.865rem;
            color: var(--muted);
        }
        .footer-link a {
            color: var(--gold-1);
            text-decoration: none;
            font-weight: 600;
            transition: opacity 0.18s;
        }
        .footer-link a:hover { opacity: 0.75; }
    </style>
</head>
<body>
    <canvas id="stars"></canvas>

    <div class="card">
        <!-- Logo -->
        <div class="logo-block">
            <img src="/assets/images/logo.png" alt="WeaverSM">
            <span class="page-title">Create your account</span>
        </div>

        <!-- Alerts -->
        <?php if ($error): ?>
        <div class="alert alert-error">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><circle cx="12" cy="16" r="0.5" fill="currentColor"/></svg>
            <?php echo htmlspecialchars($error); ?>
        </div>
        <?php endif; ?>
        <?php if ($success): ?>
        <div class="alert alert-success">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            <?php echo htmlspecialchars($success); ?>
        </div>
        <?php endif; ?>

        <!-- Form -->
        <form method="POST" autocomplete="off">
            <div class="form-group">
                <label class="form-label">Full Name</label>
                <input type="text" name="name" class="form-control" required
                       placeholder="Enter your name"
                       value="<?php echo htmlspecialchars($_POST['name'] ?? ''); ?>">
            </div>
            <div class="form-group">
                <label class="form-label">Email Address</label>
                <input type="email" name="email" class="form-control" required
                       placeholder="you@example.com"
                       value="<?php echo htmlspecialchars($_POST['email'] ?? ''); ?>">
            </div>
            <div class="form-group">
                <label class="form-label">Password</label>
                <input type="password" name="password" class="form-control" required
                       placeholder="8+ chars, uppercase, number"
                       autocomplete="new-password">
            </div>
            <div class="form-group">
                <label class="form-label">Confirm Password</label>
                <input type="password" name="confirm_password" class="form-control" required
                       placeholder="Repeat your password"
                       autocomplete="new-password">
            </div>
            <button type="submit" class="btn-submit">Create Account</button>
        </form>

        <div class="footer-link">
            Already have an account? <a href="login.php">Sign In</a>
        </div>
    </div>

    <script>
    /* Starfield */
    (function(){
        const c = document.getElementById('stars');
        const ctx = c.getContext('2d');
        let stars = [];
        function resize(){ c.width = innerWidth; c.height = innerHeight; }
        function init(){
            stars = Array.from({length: 140}, () => ({
                x: Math.random() * c.width,
                y: Math.random() * c.height,
                r: Math.random() * 1.1 + 0.2,
                a: Math.random(),
                da: (Math.random() - 0.5) * 0.004
            }));
        }
        function draw(){
            ctx.clearRect(0, 0, c.width, c.height);
            stars.forEach(s => {
                s.a = Math.max(0.05, Math.min(1, s.a + s.da));
                if (s.a <= 0.05 || s.a >= 1) s.da *= -1;
                ctx.beginPath();
                ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(255,255,255,${s.a})`;
                ctx.fill();
            });
            requestAnimationFrame(draw);
        }
        window.addEventListener('resize', () => { resize(); init(); });
        resize(); init(); draw();
    })();
    </script>
</body>
</html>
