<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Start Free Trial - <?= APP_NAME ?></title>
    <meta name="csrf-token" content="<?= Security::generateCsrfToken() ?>">
    <link rel="stylesheet" href="<?= APP_URL ?>/assets/css/app.css">
    <style>
        body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-base); padding: 20px; }
        .auth-card {
            width: 100%; max-width: 500px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius-xl);
            padding: 40px;
            box-shadow: var(--shadow-lg);
        }
        .auth-logo { text-align: center; margin-bottom: 30px; }
        .auth-logo span {
            font-size: 1.5rem; font-weight: 800;
            background: linear-gradient(135deg, var(--primary-light), var(--accent));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .auth-title { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; text-align: center; }
        .auth-subtitle { font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-bottom: 24px; }
        
        @media (max-width: 768px) {
            body { padding: 16px; }
            .auth-card { padding: 28px 24px; border-radius: var(--radius-lg); }
            .auth-logo { margin-bottom: 24px; }
            .auth-logo span { font-size: 1.3rem; }
            .auth-title { font-size: 1.2rem; }
            .auth-subtitle { font-size: 0.82rem; margin-bottom: 20px; }
            .form-row { grid-template-columns: 1fr; }
            .form-control { padding: 12px 14px; font-size: 16px; }
            .btn { padding: 13px 16px; font-size: 0.95rem; }
        }
        
        @media (max-width: 480px) {
            body { padding: 12px; }
            .auth-card { padding: 24px 20px; border-radius: var(--radius); }
            .auth-logo { margin-bottom: 20px; }
            .auth-logo span { font-size: 1.2rem; }
            .auth-title { font-size: 1.1rem; }
            .auth-subtitle { font-size: 0.8rem; margin-bottom: 18px; }
            .form-control { padding: 11px 12px; }
            .btn { padding: 12px 14px; font-size: 0.9rem; }
        }
    </style>
</head>
<body>

    <div class="auth-card">
        <div class="auth-logo">
            <a href="<?= APP_URL ?>/"><span>TellerPro</span></a>
        </div>
        <h1 class="auth-title">Create your account</h1>
        <p class="auth-subtitle">Start your <?= TRIAL_DAYS ?>-day free trial. No credit card required.</p>

        <?php if (!empty($error)): ?>
            <div class="alert alert-error">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                <?= e($error) ?>
            </div>
        <?php endif; ?>

        <form action="<?= APP_URL ?>/register" method="POST">
            <?= Security::csrfField() ?>
            
            <div class="form-group">
                <label class="form-label">Full Name <span class="required">*</span></label>
                <input type="text" name="name" class="form-control" required autofocus placeholder="John Doe">
            </div>

            <div class="form-group">
                <label class="form-label">Business Name <span class="required">*</span></label>
                <input type="text" name="business_name" class="form-control" required placeholder="Acme Retail Inc.">
            </div>
            
            <div class="form-group">
                <label class="form-label">Work Email <span class="required">*</span></label>
                <input type="email" name="email" class="form-control" required placeholder="john@acme.com">
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Password <span class="required">*</span></label>
                    <input type="password" name="password" class="form-control" required minlength="8" placeholder="••••••••">
                </div>
                <div class="form-group">
                    <label class="form-label">Confirm Password <span class="required">*</span></label>
                    <input type="password" name="confirm_password" class="form-control" required minlength="8" placeholder="••••••••">
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-full" style="justify-content:center; padding: 14px; margin-top:10px;">
                Create Account
            </button>
        </form>

        <div class="text-center mt-4">
            <p class="text-sm text-muted">Already have an account? <a href="<?= APP_URL ?>/login">Log in</a></p>
        </div>
    </div>

</body>
</html>
