{% extends "base.html" %}

{% block title %}ثبت‌نام | عضویت در {{ site_name }}{% endblock %}

{% block meta_description %}ثبت‌نام در {{ site_name }} - عضویت رایگان، دریافت تخفیف‌های ویژه و خرید تجهیزات صنعتی با بهترین قیمت{% endblock %}

{% block content %}

<!-- ============================================================
     HERO
     ============================================================ -->
<section style="
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 40%, #2563eb 100%);
    padding: 40px 0 30px;
    color: white;
    border-radius: 0 0 40px 40px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
">
    <div style="position: absolute; top: -50%; right: -20%; width: 500px; height: 500px; background: rgba(37,99,235,0.1); border-radius: 50%;"></div>
    <div style="position: absolute; bottom: -30%; left: -10%; width: 400px; height: 400px; background: rgba(37,99,235,0.08); border-radius: 50%;"></div>
    
    <div class="container position-relative">
        <div class="row align-items-center">
            <div class="col-lg-8 col-md-10 col-12">
                <div style="display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;">
                    <span style="background: rgba(34,197,94,0.2); color: #4ade80; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(34,197,94,0.2);">
                        <i class="fas fa-gift me-1"></i> هدیه عضویت ۵۰ امتیاز
                    </span>
                    <span style="background: rgba(96,165,250,0.2); color: #60a5fa; padding: 4px 14px; border-radius: 50px; font-size: 12px; font-weight: 600; border: 1px solid rgba(96,165,250,0.2);">
                        <i class="fas fa-shield-alt me-1"></i> امنیت بالا
                    </span>
                </div>
                
                <h1 style="font-size: 38px; font-weight: 900; line-height: 1.2;">
                    به 
                    <span style="background: linear-gradient(135deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
                        {{ site_name }}
                    </span>
                    خوش آمدید
                </h1>
                <p style="font-size: 17px; opacity: 0.9; margin: 12px 0 0; max-width: 500px;">
                    همین حالا عضو شوید و از تخفیف‌های ویژه، امتیازات و خدمات منحصر به فرد بهره‌مند شوید
                </p>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
     REGISTER FORM
     ============================================================ -->
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-6 col-md-8 col-12">
            <div class="card shadow-sm border-0" style="border-radius: var(--radius-lg); overflow: hidden;">
                <!-- ===== هدر ===== -->
                <div style="
                    background: linear-gradient(135deg, #0f172a, #1e293b);
                    padding: 24px 30px;
                    color: white;
                    border-bottom: 3px solid var(--primary);
                ">
                    <div style="display: flex; align-items: center; gap: 14px;">
                        <div style="
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                            background: rgba(37,99,235,0.2);
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 24px;
                            color: var(--primary);
                        ">
                            <i class="fas fa-user-plus"></i>
                        </div>
                        <div>
                            <h3 style="margin: 0; font-weight: 700; font-size: 20px;">ایجاد حساب کاربری</h3>
                            <p style="margin: 0; opacity: 0.7; font-size: 13px;">ثبت‌نام رایگان و سریع</p>
                        </div>
                    </div>
                </div>
                
                <!-- ===== فرم ===== -->
                <div class="card-body" style="padding: 30px;">
                    <form method="POST" action="{{ url_for('register') }}">
                        <!-- ===== ۱. نام کامل (اجباری) ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-user text-primary me-1"></i> نام و نام خانوادگی <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="full_name" class="form-control" placeholder="نام و نام خانوادگی خود را وارد کنید" required style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                        </div>
                        
                        <!-- ===== ۲. شماره تماس (اجباری) ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-phone text-primary me-1"></i> شماره تماس <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="phone" class="form-control" placeholder="۰۹۱۲۳۴۵۶۷۸۹" required style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                            <small style="font-size: 12px; color: var(--gray-400);">مثال: ۰۹۱۲۳۴۵۶۷۸۹</small>
                        </div>
                        
                        <!-- ===== ۳. نام کاربری (اختیاری) ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-id-card text-primary me-1"></i> نام کاربری <span style="color: var(--gray-400); font-weight: 400;">(اختیاری)</span>
                            </label>
                            <input type="text" name="username" class="form-control" placeholder="نام کاربری خود را انتخاب کنید" style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                            <small style="font-size: 12px; color: var(--gray-400);">حداقل ۳ کاراکتر، فقط حروف و اعداد</small>
                        </div>
                        
                        <!-- ===== ۴. ایمیل (اختیاری) ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-envelope text-primary me-1"></i> ایمیل <span style="color: var(--gray-400); font-weight: 400;">(اختیاری)</span>
                            </label>
                            <input type="email" name="email" class="form-control" placeholder="example@email.com" style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                            <small style="font-size: 12px; color: var(--gray-400);">برای دریافت اطلاعیه‌ها و تخفیف‌ها</small>
                        </div>
                        
                        <!-- ===== ۵. آدرس (اختیاری) ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-map-marker-alt text-primary me-1"></i> آدرس <span style="color: var(--gray-400); font-weight: 400;">(اختیاری)</span>
                            </label>
                            <textarea name="address" class="form-control" rows="2" placeholder="آدرس خود را وارد کنید" style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);"></textarea>
                        </div>
                        
                        <!-- ===== ۶. کد پستی (اختیاری) ===== -->
                        <div style="margin-bottom: 16px;">
                            <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                <i class="fas fa-mailbox text-primary me-1"></i> کد پستی <span style="color: var(--gray-400); font-weight: 400;">(اختیاری)</span>
                            </label>
                            <input type="text" name="postal_code" class="form-control" placeholder="کد پستی خود را وارد کنید" style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                        </div>
                        
                        <!-- ===== ۷. رمز عبور (اجباری) ===== -->
                        <div class="row g-3">
                            <div class="col-md-6 col-12">
                                <div style="margin-bottom: 16px;">
                                    <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                        <i class="fas fa-lock text-primary me-1"></i> رمز عبور <span class="text-danger">*</span>
                                    </label>
                                    <input type="password" name="password" class="form-control" placeholder="حداقل ۶ کاراکتر" required style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                                    <small style="font-size: 12px; color: var(--gray-400);">حداقل ۶ کاراکتر</small>
                                </div>
                            </div>
                            <div class="col-md-6 col-12">
                                <div style="margin-bottom: 16px;">
                                    <label style="font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; color: var(--gray-700);">
                                        <i class="fas fa-check-circle text-primary me-1"></i> تکرار رمز عبور <span class="text-danger">*</span>
                                    </label>
                                    <input type="password" name="confirm_password" class="form-control" placeholder="تکرار رمز عبور" required style="border-radius: var(--radius-md); padding: 12px 16px; border: 2px solid var(--gray-200);">
                                </div>
                            </div>
                        </div>
                        
                        <!-- ===== قوانین ===== -->
                        <div style="margin: 20px 0;">
                            <div style="display: flex; align-items: flex-start; gap: 10px;">
                                <input type="checkbox" name="terms" id="terms" required style="width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary);">
                                <label for="terms" style="font-size: 13px; color: var(--gray-600); line-height: 1.6;">
                                    <a href="{{ url_for('rules') }}" style="color: var(--primary); font-weight: 600; text-decoration: none;">قوانین و شرایط</a> 
                                    و 
                                    <a href="{{ url_for('privacy') }}" style="color: var(--primary); font-weight: 600; text-decoration: none;">حریم خصوصی</a> 
                                    فروشگاه را مطالعه کرده و می‌پذیرم <span class="text-danger">*</span>
                                </label>
                            </div>
                        </div>
                        
                        <!-- ===== دکمه ثبت‌نام ===== -->
                        <button type="submit" class="btn w-100" style="
                            background: linear-gradient(135deg, #22c55e, #16a34a);
                            color: white;
                            border: none;
                            border-radius: var(--radius-md);
                            padding: 14px;
                            font-weight: 700;
                            font-size: 16px;
                            transition: var(--transition);
                            box-shadow: 0 4px 20px rgba(34,197,94,0.3);
                        ">
                            <i class="fas fa-user-plus me-2"></i> ثبت‌نام
                        </button>
                    </form>
                    
                    <!-- ===== لینک ورود ===== -->
                    <div style="text-align: center; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--gray-200);">
                        <p style="color: var(--gray-500); font-size: 14px; margin: 0;">
                            قبلاً ثبت‌نام کرده‌اید؟ 
                            <a href="{{ url_for('login') }}" style="color: var(--primary); font-weight: 600; text-decoration: none;">
                                وارد شوید <i class="fas fa-arrow-left me-1"></i>
                            </a>
                        </p>
                    </div>
                </div>
            </div>
            
            <!-- ===== مزایا ===== -->
            <div class="row g-3 mt-4">
                <div class="col-md-4 col-6">
                    <div style="background: white; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--gray-200); text-align: center;">
                        <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-gift"></i></div>
                        <div style="font-weight: 600; font-size: 13px; margin-top: 6px;">۵۰ امتیاز هدیه</div>
                    </div>
                </div>
                <div class="col-md-4 col-6">
                    <div style="background: white; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--gray-200); text-align: center;">
                        <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-tag"></i></div>
                        <div style="font-weight: 600; font-size: 13px; margin-top: 6px;">تخفیف‌های ویژه</div>
                    </div>
                </div>
                <div class="col-md-4 col-6">
                    <div style="background: white; padding: 16px; border-radius: var(--radius-md); border: 1px solid var(--gray-200); text-align: center;">
                        <div style="font-size: 28px; color: var(--primary);"><i class="fas fa-truck"></i></div>
                        <div style="font-weight: 600; font-size: 13px; margin-top: 6px;">ارسال رایگان</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
     CTA
     ============================================================ -->
<section style="margin: 50px 0;">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div style="background: linear-gradient(135deg, #0f172a, #1e293b); padding: 40px; border-radius: var(--radius-lg); text-align: center; position: relative; overflow: hidden;">
                    <div style="position: absolute; right: -30px; bottom: -30px; font-size: 120px; opacity: 0.03;">
                        <i class="fas fa-shopping-bag"></i>
                    </div>
                    <div style="position: relative; z-index: 1;">
                        <h3 style="color: white; font-weight: 700; font-size: 24px; margin-bottom: 8px;">
                            <i class="fas fa-store text-primary me-2"></i>
                            همین حالا خرید کنید
                        </h3>
                        <p style="color: var(--gray-400); max-width: 500px; margin: 0 auto 20px;">
                            پس از ثبت‌نام، از هزاران محصول با بهترین قیمت دیدن کنید
                        </p>
                        <a href="{{ url_for('products') }}" style="
                            display: inline-flex;
                            align-items: center;
                            gap: 10px;
                            background: linear-gradient(135deg, var(--primary), #7c3aed);
                            color: white;
                            padding: 12px 30px;
                            border-radius: 50px;
                            font-weight: 700;
                            font-size: 16px;
                            transition: var(--transition);
                            text-decoration: none;
                        ">
                            <i class="fas fa-shopping-bag"></i>
                            مشاهده محصولات
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .form-control:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 4px rgba(37,99,235,0.1) !important;
    }
    
    @media (max-width: 768px) {
        h1 { font-size: 28px !important; }
        .card-body { padding: 20px !important; }
    }
    
    @media (max-width: 576px) {
        h1 { font-size: 22px !important; }
        .btn { font-size: 14px !important; padding: 12px !important; }
        .form-control { font-size: 14px !important; padding: 10px 14px !important; }
    }
</style>
{% endblock %}