<?php include 'include/header.php'; ?>


<!-- Add Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<!-- Custom Styles -->
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');
   
    :root {
        --primary: #5b21b6;
        --primary-light: #7c3aed;
        --primary-dark: #4c1d95;
        --secondary: #0ea5e9;
        --success: #10b981;
        --warning: #f59e0b;
        --danger: #ef4444;
        --dark: #1e293b;
        --light: #f8fafc;
        --gray-50: #f9fafb;
        --gray-100: #f3f4f6;
        --gray-200: #e5e7eb;
        --gray-300: #d1d5db;
        --gray-600: #4b5563;
        --gray-700: #374151;
        --gray-800: #1f2937;
        --gray-900: #111827;
    }
   
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
   
    body {
        font-family: 'Inter', sans-serif;
        color: var(--gray-900);
        line-height: 1.6;
        background-color: var(--gray-50);
    }
   
    .font-poppins {
        font-family: 'Poppins', sans-serif;
    }
   
    .font-inter {
        font-family: 'Inter', sans-serif;
    }
   
    /* Container */
    .container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1rem;
    }
   
    /* Hero Section */
    .hero-section {
        background: white;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
   
    .hero-content {
        padding: 3rem 0;
    }
   
    .hero-icon {
        width: 64px;
        height: 64px;
        background: var(--primary);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 6px rgba(91, 33, 182, 0.2);
    }
   
    .hero-icon i {
        font-size: 2rem;
        color: white;
    }
   
    .hero-title {
        font-size: 3rem;
        font-weight: 800;
        color: var(--primary);
        margin: 1rem 0 0.5rem;
    }
   
    /* Layout */
    .main-layout {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 2.5rem 0;
    }
   
    @media (min-width: 1024px) {
        .main-layout {
            flex-direction: row;
        }
    }
   
    .sidebar {
        width: 100%;
    }
   
    @media (min-width: 1024px) {
        .sidebar {
            width: 25%;
            flex-shrink: 0;
        }
    }
   
    .main-content {
        width: 100%;
    }
   
    @media (min-width: 1024px) {
        .main-content {
            width: 75%;
        }
    }
   
    /* Card */
    .card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
        margin-bottom: 1.5rem;
    }
   
    .card:hover {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }
   
    .card-header {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid var(--gray-200);
        background: var(--gray-50);
    }
   
    .card-header-yellow {
        background: #eab308;
        color: white;
        border: none;
    }
   
    .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
   
    .card-body {
        padding: 0;
    }
   
    /* Navigation */
    .nav-list {
        list-style: none;
    }
   
    .nav-item {
        position: relative;
        border-bottom: 1px solid var(--gray-100);
    }
   
    .nav-item:last-child {
        border-bottom: none;
    }
   
    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        color: var(--gray-700);
        text-decoration: none;
        transition: all 0.2s ease;
        font-weight: 500;
        position: relative;
    }
   
    .nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--primary);
        transform: scaleY(0);
        transition: transform 0.2s ease;
    }
   
    .nav-link:hover,
    .nav-item.active .nav-link {
        background: #faf5ff;
        color: var(--primary);
    }
   
    .nav-link:hover::before,
    .nav-item.active .nav-link::before {
        transform: scaleY(1);
    }
   
    .nav-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: white;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }
   
    .nav-link:hover .nav-icon {
        transform: scale(1.1);
    }
   
    .icon-purple { background: var(--primary); }
    .icon-blue { background: var(--secondary); }
    .icon-green { background: var(--success); }
    .icon-orange { background: var(--warning); }
    .icon-red { background: var(--danger); }
   
    /* Stats Card */
    .stats-card {
        background: var(--primary);
        border-radius: 16px;
        padding: 1.5rem;
        color: white;
        margin-top: 1.5rem;
    }
   
    .stats-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
   
    .stats-header i {
        font-size: 2rem;
    }
   
    .stats-label {
        font-size: 0.875rem;
        opacity: 0.9;
    }
   
    .stats-value {
        font-size: 2rem;
        font-weight: 700;
    }
   
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin-top: 1rem;
    }
   
    .stats-item {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 12px;
        padding: 0.875rem;
        backdrop-filter: blur(10px);
    }
   
    .stats-item-label {
        font-size: 0.75rem;
        opacity: 0.9;
    }
   
    .stats-item-value {
        font-size: 1.25rem;
        font-weight: 700;
    }
   
    /* Content Section */
    .content-card {
        background: white;
        border-radius: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: 2.5rem;
    }
   
    .section-heading {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 2rem;
    }

    /* Policy Section */
    .policy-section {
        margin-bottom: 2rem;
    }

    .policy-header {
        background: #003366;
        color: white;
        padding: 0.875rem 1.25rem;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        border-radius: 4px;
    }

    .policy-content {
        color: var(--gray-700);
        font-size: 0.9375rem;
        line-height: 1.8;
        padding-left: 1rem;
    }

    .policy-content p {
        margin-bottom: 0.75rem;
    }

    .policy-content strong {
        font-weight: 600;
        color: var(--gray-900);
    }

    .policy-content ul {
        margin: 0.75rem 0;
        padding-left: 2rem;
        list-style-type: disc;
    }

    .policy-content li {
        margin-bottom: 0.5rem;
    }

    .closing-statement {
        background: var(--gray-50);
        border-left: 4px solid var(--primary);
        padding: 1.25rem 1.5rem;
        margin-top: 2rem;
        border-radius: 4px;
        color: var(--gray-700);
        font-size: 0.9375rem;
        line-height: 1.8;
    }
   
    /* Utility Classes */
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-4 { gap: 1rem; }
    .mb-4 { margin-bottom: 1rem; }
</style>

<main class="font-inter">
    <!-- Hero Section -->
    <div class="hero-section">
        <div class="container">
            <div class="hero-content">
                <div class="flex items-center gap-4 mb-4">
                    <div class="hero-icon">
                        <i class="fas fa-project-diagram"></i>
                    </div>
                    <div>
                        <h1 class="hero-title font-poppins">
                            Editorial Process
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Area -->
    <div class="container">
        <div class="main-layout">
            <!-- Left Sidebar -->
            <?php include 'include/sidebar.php'; ?>

            <!-- Right Content Area -->
            <section class="main-content">
                <div class="content-card">
                    <h2 class="section-heading font-poppins">Editorial Process</h2>
                    
                    <!-- Policy Section 1: Submission -->
                    <div class="policy-section">
                        <div class="policy-header">Submission</div>
                        <div class="policy-content">
                            <p><strong>Manuscript Submission:</strong> Authors submit their manuscripts through our online submission system. The manuscript must adhere to the journal's formatting and submission guidelines.</p>
                        </div>
                    </div>

                    <!-- Policy Section 2: Initial Evaluation -->
                    <div class="policy-section">
                        <div class="policy-header">Initial Evaluation</div>
                        <div class="policy-content">
                            <p><strong>Preliminary Check:</strong> The editorial office conducts an initial check to ensure the submission complies with the journal's guidelines and scope. Manuscripts that do not meet the basic criteria may be returned to the authors for revision or rejected outright.</p>
                        </div>
                    </div>

                    <!-- Policy Section 3: Peer Review -->
                    <div class="policy-section">
                        <div class="policy-header">Peer Review</div>
                        <div class="policy-content">
                            <p><strong>Editor Assignment:</strong> An appropriate editor with expertise in the manuscript's subject area is assigned to oversee the review process.</p>
                            <p><strong>Reviewer Selection:</strong> The assigned editor selects at least two independent reviewers who are experts in the relevant field. Reviewers are invited to provide a thorough and unbiased evaluation of the manuscript.</p>
                            <p><strong>Review Process:</strong> Reviewers evaluate the manuscript based on originality, methodological rigor, significance, clarity, and contribution to the field. They provide detailed feedback and recommend one of the following actions:</p>
                            <ul>
                                <li>Accept</li>
                                <li>Accepted with changes</li>
                                <li>Revisions</li>
                                <li>Reject</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Policy Section 4: Decision Making -->
                    <div class="policy-section">
                        <div class="policy-header">Decision Making</div>
                        <div class="policy-content">
                            <p><strong>Editor Decision:</strong> Based on the reviewers' feedback, the assigned editor makes a decision. If revisions are required, the manuscript is returned to the authors with detailed comments for improvement.</p>
                            <p><strong>Revision and Resubmission:</strong> Authors revise the manuscript according to the reviewers' and editor's comments and resubmit it for further evaluation. The revised manuscript may undergo additional rounds of review if necessary.</p>
                            <p><strong>Final Decision:</strong> The editor makes a final decision based on the revised manuscript and additional reviewer feedback (if applicable). The possible outcomes are acceptance or rejection.</p>
                        </div>
                    </div>

                    <!-- Policy Section 5: Publication -->
                    <div class="policy-section">
                        <div class="policy-header">Publication</div>
                        <div class="policy-content">
                            <p><strong>Copyediting and Proofreading:</strong> Accepted manuscripts undergo copyediting to correct any grammatical, typographical, or formatting errors.</p>
                            <p><strong>Publication:</strong> The final version of the manuscript is published online in the International Journal of Research and Innovation in Social Science. As an open-access journal, the article is freely accessible to the global academic community.</p>
                        </div>
                    </div>

                    <!-- Policy Section 6: Post-Publication -->
                    <div class="policy-section">
                        <div class="policy-header">Post-Publication</div>
                        <div class="policy-content">
                            <p><strong>Indexing and Archiving:</strong> Published articles are indexed in relevant databases and repositories, ensuring wide dissemination and accessibility.</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</main>
<?php include 'include/footer.php'; ?>
