{% extends "subscriptions/base.html" %}
{% load static %}

{% block title %}Create Your SwiftPOS Account — Free 3-Day Trial{% endblock %}
{% block meta_description %}Register your business on SwiftPOS and get a 3-day free trial instantly. No credit card required.{% endblock %}

{% block extra_style %}
.reg-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 68px);
    gap: 0;
}
@media (max-width: 768px) { .reg-wrap { grid-template-columns: 1fr; } }

.reg-hero {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #6366f1 100%);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}
.reg-hero h1 { font-size: 2.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 1rem; }
.reg-hero p { font-size: 1rem; opacity: 0.85; line-height: 1.6; margin-bottom: 2rem; }
.reg-perks { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.reg-perks li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; opacity: 0.9; }
.reg-perks .perk-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; flex-shrink: 0;
}

.reg-form-wrap {
    background: #fff;
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.reg-form-title { font-size: 1.6rem; font-weight: 800; color: var(--text-dark); margin-bottom: 0.3rem; }
.reg-form-sub { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; }

.form-group { margin-bottom: 1.25rem; }
.form-label { font-size: 0.82rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.4rem; display: block; }
.form-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg);
}
.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
    background: #fff;
}
.form-input.error { border-color: var(--danger); }

.btn-register {
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, #7c3aed, #6366f1);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    margin-top: 0.5rem;
}
.btn-register:hover { opacity: 0.92; transform: translateY(-1px); }
.btn-register:active { transform: translateY(0); }

.trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #d4f1e4, #a7f3d0);
    color: #065f46;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.login-link { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin-top: 1.5rem; }
.login-link a { color: var(--primary); font-weight: 600; text-decoration: none; }
{% endblock %}

{% block content %}
<div class="reg-wrap">
    <!-- HERO SIDE -->
    <div class="reg-hero d-none d-md-flex">
        <h1>Start selling smarter<br>with SwiftPOS</h1>
        <p>Nigeria's most powerful multi-tenant Point of Sale system. Set up in minutes, scale as you grow.</p>
        <ul class="reg-perks">
            <li><div class="perk-icon"><i class="fas fa-gift"></i></div> 3-day free trial — no card needed</li>
            <li><div class="perk-icon"><i class="fas fa-bolt"></i></div> Instant account setup</li>
            <li><div class="perk-icon"><i class="fas fa-shield-alt"></i></div> Secure multi-tenant isolation</li>
            <li><div class="perk-icon"><i class="fas fa-chart-line"></i></div> Real-time sales analytics</li>
            <li><div class="perk-icon"><i class="fas fa-barcode"></i></div> Barcode POS, bulk import & more</li>
            <li><div class="perk-icon"><i class="fas fa-users"></i></div> Multi-staff, multi-branch support</li>
        </ul>
    </div>

    <!-- FORM SIDE -->
    <div class="reg-form-wrap">
        <div class="trial-badge"><i class="fas fa-star"></i> 3-Day Free Trial — No Credit Card</div>
        <h2 class="reg-form-title">Create your account</h2>
        <p class="reg-form-sub">Get your business online in under 2 minutes.</p>

        <form method="post" action="/register/" id="registerForm" novalidate>
            {% csrf_token %}

            <div class="form-group">
                <label class="form-label" for="company_name">Business / Company Name *</label>
                <input type="text" id="company_name" name="company_name" class="form-input"
                       placeholder="e.g. Mama Titi Foodstuff" required autocomplete="organization"
                       value="{{ form_data.company_name|default:'' }}">
            </div>

            <div class="form-group">
                <label class="form-label" for="email">Business Email *</label>
                <input type="email" id="email" name="email" class="form-input"
                       placeholder="you@yourbusiness.com" required autocomplete="email"
                       value="{{ form_data.email|default:'' }}">
                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">
                    Your username will be the part of your email before the @ symbol.
                </small>
            </div>

            <div class="form-group">
                <label class="form-label" for="phone">Phone Number</label>
                <input type="tel" id="phone" name="phone" class="form-input"
                       placeholder="08012345678" autocomplete="tel"
                       value="{{ form_data.phone|default:'' }}">
            </div>

            <div class="form-group">
                <label class="form-label" for="password">Password *</label>
                <input type="password" id="password" name="password" class="form-input"
                       placeholder="Minimum 8 characters" required autocomplete="new-password">
            </div>

            <div class="form-group">
                <label class="form-label" for="password2">Confirm Password *</label>
                <input type="password" id="password2" name="password2" class="form-input"
                       placeholder="Repeat your password" required autocomplete="new-password">
            </div>

            <button type="submit" class="btn-register" id="registerBtn">
                <i class="fas fa-rocket"></i> Start My Free Trial
            </button>
        </form>

        <p class="login-link">Already have an account? <a href="/accounts/login/">Log in here</a></p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.getElementById('registerForm').addEventListener('submit', function () {
    const btn = document.getElementById('registerBtn');
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating account...';
    btn.disabled = true;
});
</script>
{% endblock %}