{% extends 'base.html' %}
{% load static %}

{% block title %}{{ page_title|default:"راهنما و حریم خصوصی افزونه انتخاب رشته | چینش" }}{% endblock %}

{% block content %}
<style>
    .privacy-wrapper {
        max-width: 900px;
        margin: 0 auto;
        padding: 20px 0 80px;
    }

    /* عنوان صفحه با گرادیانت رسمی چینش */
    .privacy-header {
        text-align: center;
        margin-bottom: 45px;
    }
    .privacy-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(0, 200, 83, 0.08);
        color: var(--accent);
        padding: 6px 16px;
        border-radius: 30px;
        font-size: 13.5px;
        font-weight: 700;
        margin-bottom: 15px;
        border: 1px solid rgba(0, 200, 83, 0.2);
    }
    .privacy-header h1 {
        font-size: 30px;
        font-weight: 900;
        background: linear-gradient(135deg, var(--green-dark), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 12px;
    }
    .privacy-header p {
        color: var(--text-secondary);
        font-size: 15.5px;
        line-height: 1.8;
    }

    /* کارت معرفی کلی */
    .info-intro-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 28px;
        margin-bottom: 40px;
        box-shadow: var(--shadow-sm);
        position: relative;
        overflow: hidden;
    }
    .info-intro-card::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        background: var(--accent);
    }
    .info-intro-card h2 {
        font-size: 19px;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .info-intro-card h2 i {
        color: var(--accent);
    }
    .info-intro-card p {
        color: var(--text-secondary);
        font-size: 14.5px;
        line-height: 1.9;
        margin: 0;
        text-align: justify;
    }

    /* بخش مراحل با ساختار تایم‌لاین */
    .section-title {
        font-size: 20px;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .section-title i {
        color: var(--accent);
    }

    .flow-container {
        position: relative;
        padding-right: 40px;
        margin-bottom: 50px;
    }
    .flow-container::before {
        content: '';
        position: absolute;
        top: 20px;
        bottom: 20px;
        right: 18px;
        width: 4px;
        background: linear-gradient(to bottom, var(--accent), var(--green-light), var(--green-dark));
        border-radius: 10px;
        opacity: 0.3;
    }

    .flow-step {
        position: relative;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 24px;
        margin-bottom: 25px;
        box-shadow: var(--shadow-sm);
        display: flex;
        align-items: center;
        gap: 20px;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .flow-step:last-child {
        margin-bottom: 0;
    }
    .flow-step:hover {
        transform: translateX(-8px) translateY(-3px);
        box-shadow: var(--shadow-md);
        border-color: var(--accent);
    }

    .step-indicator {
        position: absolute;
        right: -60px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        background: var(--surface);
        border: 3px solid var(--accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: 18px;
        font-weight: bold;
        z-index: 2;
        transition: all 0.3s ease;
        box-shadow: 0 0 10px rgba(0, 200, 83, 0.2);
    }
    .flow-step:hover .step-indicator {
        background: var(--accent);
        color: #fff;
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 0 18px rgba(0, 200, 83, 0.4);
    }

    .step-icon-large {
        font-size: 34px;
        color: var(--green-light);
        opacity: 0.2;
        position: absolute;
        left: 20px;
        bottom: 12px;
        transition: all 0.3s ease;
    }
    .flow-step:hover .step-icon-large {
        opacity: 0.75;
        transform: scale(1.1) rotate(-6deg);
    }
    .step-text h3 {
        margin: 0 0 6px 0;
        font-size: 17.5px;
        color: var(--text-primary);
        font-weight: 700;
    }
    .step-text p {
        margin: 0;
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.8;
    }

    /* کارت‌های سه‌گانه حریم خصوصی و امنیت */
    .security-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 40px;
    }
    .security-card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 22px;
        text-align: center;
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
    }
    .security-card:hover {
        border-color: var(--accent);
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
    }
    .security-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto 16px;
        background: rgba(0, 200, 83, 0.1);
        color: var(--accent);
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }
    .security-card h4 {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 8px;
    }
    .security-card p {
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.7;
        margin: 0;
    }

    /* باکس اخطار شفاف‌سازی و بازبینی */
    .notice-box {
        background: #fffbeb;
        border: 1px solid #fef3c7;
        border-radius: var(--radius-lg);
        padding: 22px;
        margin-bottom: 50px;
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }
    .notice-icon {
        font-size: 24px;
        color: #d97706;
        margin-top: 2px;
    }
    .notice-content h4 {
        font-size: 15.5px;
        font-weight: 800;
        color: #92400e;
        margin: 0 0 6px 0;
    }
    .notice-content p {
        font-size: 13.5px;
        color: #78350f;
        line-height: 1.8;
        margin: 0;
    }

    /* بخش مخصوص بازبین‌های گوگل کروم (انگلیسی) */
    .reviewer-section {
        background: var(--surface);
        border: 1px dashed var(--border);
        border-radius: var(--radius-lg);
        padding: 30px;
        direction: ltr;
        text-align: left;
    }
    .reviewer-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }
    .reviewer-badge {
        background: #e0f2fe;
        color: #0369a1;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 6px;
        text-transform: uppercase;
    }
    .reviewer-section h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 0;
    }
    .reviewer-section p {
        font-size: 13.5px;
        color: var(--text-secondary);
        line-height: 1.7;
        margin-bottom: 12px;
    }
    .reviewer-list {
        margin: 0 0 16px 18px;
        padding: 0;
        color: var(--text-secondary);
        font-size: 13px;
        line-height: 1.8;
    }
    .reviewer-list li {
        margin-bottom: 6px;
    }

    /* ریسپانسیو */
    @media (max-width: 768px) {
        .security-grid {
            grid-template-columns: 1fr;
            gap: 15px;
        }
        .flow-container {
            padding-right: 30px;
        }
        .flow-container::before {
            right: 10px;
        }
        .step-indicator {
            right: -42px;
            width: 34px;
            height: 34px;
            font-size: 14px;
            border-width: 2px;
        }
        .flow-step {
            padding: 18px;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }
        .step-icon-large {
            display: none;
        }
        .privacy-header h1 {
            font-size: 23px;
        }
    }
</style>

<div class="privacy-wrapper">
    
    <!-- هدر صفحه -->
    <div class="privacy-header">
        <div class="privacy-badge">
            <i class="fa-solid fa-puzzle-piece"></i>
            افزونه رسمی مرورگر کروم
        </div>
        <h1>راهنما، امنیت و سیاست حفظ حریم خصوصی</h1>
        <p>دستیار هوشمند انتقال مطمئن، سریع و بدون خطای کدرشته‌ها به سامانه انتخاب رشته سنجش</p>
    </div>

    <!-- کارت معرفی و چرایی ابزار -->
    <div class="info-intro-card">
        <h2>
            <i class="fa-solid fa-bullseye"></i>
            ماموریت این افزونه چیست؟
        </h2>
        <p>
            در انتخاب رشته کنکور سراسری، داوطلب تا ۱۵۰ کد رشته ۵ رقمی را انتخاب می‌کند. تایپ دستی این حجم از اعداد در سامانه سنجش خسته‌کننده بوده و بالاترین ریسک جابجایی ارقام و بروز خطای انسانی را به همراه دارد. افزونه اختصاصی چینش طراحی شده است تا کدهایی را که داوطلب پس از مشاوره در پنل کاربری چینش نهایی کرده است، با دقت ۱۰۰٪ و بدون اتلاف وقت مستقیماً در فیلدهای مربوطه در صفحه انتخاب رشته سازمان سنجش بنشاند.
        </p>
    </div>

    <!-- تایم‌لاین مراحل کارکرد -->
    <div class="section-title">
        <i class="fa-solid fa-route"></i>
        جریان گام‌به‌گام عملکرد
    </div>

    <div class="flow-container">
        
        <div class="flow-step">
            <div class="step-indicator">۱</div>
            <i class="fa-solid fa-list-ol step-icon-large"></i>
            <div class="step-text">
                <h3>چیدمان و تایید اولویت‌ها در چینش</h3>
                <p>داوطلب لیست اولویت رشته‌محل‌های خود را با مشاوره تخصصی در پنل کاربری سامانه چینش بررسی، مرتب‌سازی و نهایی می‌کند.</p>
            </div>
        </div>

        <div class="flow-step">
            <div class="step-indicator">۲</div>
            <i class="fa-solid fa-right-to-bracket step-icon-large"></i>
            <div class="step-text">
                <h3>ورود مستقل به سامانه سازمان سنجش</h3>
                <p>داوطلب با اطلاعات و رمز عبور شخصی خود مستقیماً وارد سایت رسمی سنجش (sanjesh.org) و صفحه فرم ثبت انتخاب رشته می‌شود.</p>
            </div>
        </div>

        <div class="flow-step">
            <div class="step-indicator">۳</div>
            <i class="fa-solid fa-keyboard step-icon-large"></i>
            <div class="step-text">
                <h3>انتقال خودکار و امن کدهای رشته</h3>
                <p>با فعال‌سازی افزونه توسط داوطلب، لیست کدهای تاییدشده از پنل خوانده شده و به ترتیب و بدون خطا در کادرهای فرم وارد می‌شوند.</p>
            </div>
        </div>

        <div class="flow-step">
            <div class="step-indicator">۴</div>
            <i class="fa-solid fa-clipboard-check step-icon-large"></i>
            <div class="step-text">
                <h3>بازبینی چشمی عناوین رشته‌ها و دانشگاه‌ها</h3>
                <p>داوطلب نام رشته‌ها و دانشگاه‌های لود شده در مقابل هر کد را با دقت بررسی چشمی نموده و از صحت اولویت‌ها اطمینان حاصل می‌کند.</p>
            </div>
        </div>

        <div class="flow-step">
            <div class="step-indicator">۵</div>
            <i class="fa-solid fa-shield-check step-icon-large"></i>
            <div class="step-text">
                <h3>ثبت نهایی و دریافت رسید سنجش</h3>
                <p>داوطلب کد امنیتی انتهای فرم را شخصاً تایپ کرده، دکمه «ثبت نهایی» را می‌فشارد و رسید و کد رهگیری رسمی سازمان سنجش را دریافت می‌کند.</p>
            </div>
        </div>

    </div>

    <!-- شفافیت امنیت و دیتا -->
    <div class="section-title">
        <i class="fa-solid fa-lock"></i>
        تعهدات امنیتی و حفظ محرمانگی
    </div>

    <div class="security-grid">
        <div class="security-card">
            <div class="security-icon">
                <i class="fa-solid fa-user-shield"></i>
            </div>
            <h4>عدم خواندن اطلاعات هویتی</h4>
            <p>افزونه به هیچ‌کدام از اطلاعات محرمانه (کد ملی، رمز عبور، شماره پرونده، نتایج یا کارنامه) دسترسی ندارد و آن‌ها را ذخیره نمی‌کند.</p>
        </div>

        <div class="security-card">
            <div class="security-icon">
                <i class="fa-solid fa-laptop-code"></i>
            </div>
            <h4>عملکرد کاملاً محلی (Client-Side)</h4>
            <p>انتقال داده‌ها صرفاً در محیط مرورگر شما انجام می‌شود و هیچ اطلاعاتی از سایت سنجش به سرورهای چینش ارسال نمی‌شود.</p>
        </div>

        <div class="security-card">
            <div class="security-icon">
                <i class="fa-solid fa-hand-pointer"></i>
            </div>
            <h4>عدم دخالت در ثبت نهایی</h4>
            <p>افزونه صرفاً نقش دستیار تایپ را دارد؛ کلیک روی دکمه ثبت نهایی منحصراً توسط خود داوطلب و پس از کنترل کامل صورت می‌گیرد.</p>
        </div>
    </div>

    <!-- باکس تذکر مهم -->
    <div class="notice-box">
        <i class="fa-solid fa-triangle-exclamation notice-icon"></i>
        <div class="notice-content">
            <h4>نکته بسیار مهم پیرامون ثبت نهایی</h4>
            <p>
                تزریق کدها به منزله ثبت‌نام قطعی نیست. داوطلب گرامی موظف است پس از اتمام درج کدها توسط افزونه، عناوین لود شده را خط‌به‌خط بررسی کرده و حتماً با وارد کردن کد کپچای انتهای صفحه، دکمه <strong>«ثبت نهایی و تایید»</strong> را در سامانه سنجش کلیک کرده و رسید دارای کد پیگیری را ذخیره نماید.
            </p>
        </div>
    </div>

    <!-- بخش انگلیسی برای بازبین‌های کروم وب‌استور -->
    <div class="reviewer-section">
        <div class="reviewer-header">
            <span class="reviewer-badge">Google Reviewers</span>
            <h3>Chrome Web Store Single Purpose & Privacy Compliance</h3>
        </div>
        <p><strong>Extension Name:</strong> Chinish Form Assistant</p>
        <p>
            <strong>Single Purpose:</strong> Chinish Form Assistant is a dedicated productivity tool designed exclusively for Iranian national university applicants. Its sole function is to eliminate human typing and order-swapping errors by safely transferring pre-arranged 5-digit academic course codes from the user's Chinish account directly into the standard input fields on the official university application portal (sanjesh.org).
        </p>
        <ul class="reviewer-list">
            <li><strong>Zero Sensitive Data Collection:</strong> The extension does not collect, track, read, store, or transmit any sensitive student credentials, government IDs (National ID), account passwords, or exam scores.</li>
            <li><strong>Data Flow:</strong> Operations are 100% client-side. The extension fetches user-curated course code IDs from chinish.ir and populates the text boxes on sanjesh.org locally.</li>
            <li><strong>Human-in-the-Loop:</strong> The extension solely assists with typing; it intentionally never triggers form submissions. Final verification and submission are performed manually by the applicant.</li>
        </ul>
    </div>

</div>
{% endblock %}