{% extends "base.html" %}

{% block title %}Create Account - Command Center{% endblock %}

{% block content %}
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;">
    <div style="width: 100%; max-width: 480px;">
        <!-- Logo -->
        <div style="text-align: center; margin-bottom: 2rem;">
            <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                    <rect width="32" height="32" rx="8" fill="hsl(240, 5.9%, 10%)"/>
                    <path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span style="font-size: 1.25rem; font-weight: 700; color: var(--foreground);">Command Center</span>
            </div>
            <p style="font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem;">
                Start your revenue intelligence journey
            </p>
        </div>

        <!-- Register Card -->
        <div class="card">
            <div class="card-header">
                <h1 class="card-title">Create your account</h1>
                <p class="card-description">
                    Get started with revenue forecasting and business intelligence
                </p>
            </div>
            <div class="card-content">
                <form method="POST" action="{{ url_for('auth.register') }}">
                    <div class="form-group">
                        <label for="full_name" class="form-label">Full Name</label>
                        <input type="text" id="full_name" name="full_name" class="form-input" 
                               placeholder="John Smith" required autofocus>
                    </div>
                    <div class="form-group">
                        <label for="email" class="form-label">Work Email</label>
                        <input type="email" id="email" name="email" class="form-input" 
                               placeholder="you@company.com" required>
                    </div>
                    <div class="form-group">
                        <label for="company" class="form-label">Company Name <span class="text-muted">(optional)</span></label>
                        <input type="text" id="company" name="company" class="form-input" 
                               placeholder="Acme Landscaping">
                    </div>
                    <div class="form-group">
                        <label for="phone" class="form-label">Phone <span class="text-muted">(optional)</span></label>
                        <input type="tel" id="phone" name="phone" class="form-input" 
                               placeholder="(555) 123-4567">
                    </div>
                    <div class="grid grid-2" style="gap: 1rem;">
                        <div class="form-group">
                            <label for="password" class="form-label">Password</label>
                            <input type="password" id="password" name="password" class="form-input" 
                                   placeholder="Min. 8 characters" required>
                        </div>
                        <div class="form-group">
                            <label for="confirm_password" class="form-label">Confirm</label>
                            <input type="password" id="confirm_password" name="confirm_password" class="form-input" 
                                   placeholder="Again" required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block btn-lg mt-4">Create account</button>
                </form>
            </div>
            <div class="card-footer" style="text-align: center;">
                <p style="font-size: 0.875rem; color: var(--muted-foreground);">
                    Already have an account? 
                    <a href="{{ url_for('auth.login') }}" style="color: var(--primary); font-weight: 500;">Sign in</a>
                </p>
            </div>
        </div>

        <!-- Marketing link -->
        <p style="text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted-foreground);">
            <a href="{{ url_for('marketing.index') }}" style="color: var(--muted-foreground);">
                ← Back to commandsovereignty.com
            </a>
        </p>
    </div>
</div>
{% endblock %}