<?php
// ============================================================
//  author_guidelines.php  —  Author Guidelines & Resources
// ============================================================
error_reporting(E_ALL & ~E_NOTICE & ~E_WARNING);
ini_set("display_errors", 0);
require_once __DIR__ . '/config/db.php';
startSession();

$user       = getCurrentUser();
$user_id    = $user['user_id'];
$pageTitle  = 'Author Guidelines';
$activePage = 'author_guidelines';

require_once __DIR__ . '/_layout.php';
?>

<style>
/* ── Page wrapper ─────────────────────────────────────────── */
.ag-wrap { padding: 24px 28px 60px; }

/* ── Page header ──────────────────────────────────────────── */
.ag-page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.ag-page-title { font-size: 18px; font-weight: 700; color: var(--text); }
.ag-page-sub   { font-size: 13px; color: var(--muted); margin-top: 3px; }

/* ── Tab nav ──────────────────────────────────────────────── */
.ag-tabs {
  display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap;
}
.ag-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  cursor: pointer; border: 1.5px solid var(--border);
  background: var(--white); color: var(--muted);
  transition: all .2s; text-decoration: none;
}
.ag-tab i { font-size: 15px; }
.ag-tab:hover { border-color: var(--blue); color: var(--blue); background: #EFF6FF; }
.ag-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 4px 12px rgba(27,63,110,.18); }

/* ── Tab panels ───────────────────────────────────────────── */
.ag-panel { display: none; }
.ag-panel.active { display: block; }

/* ── Card shell (shared) ──────────────────────────────────── */
.ag-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   PANEL 1 — Submission Guidelines
   ════════════════════════════════════════════════════════════ */
.ag-intro {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #EFF6FF 0%, #F5F3FF 100%);
}
.ag-intro-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ag-intro-text  { font-size: 13.5px; color: var(--muted); line-height: 1.7; max-width: 780px; }

.ag-guidelines-body { padding: 24px; }

/* Section accordion-style blocks */
.ag-section {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 12px; overflow: hidden;
}
.ag-section-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer;
  background: var(--white); transition: background .15s;
  user-select: none;
}
.ag-section-header:hover { background: #F9FAFB; }
.ag-section-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ag-section-label { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.ag-section-num {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; background: #F3F4F6; color: var(--muted);
}
.ag-section-chevron { font-size: 12px; color: var(--muted); transition: transform .2s; }
.ag-section.open .ag-section-chevron { transform: rotate(180deg); }

.ag-section-body {
  display: none; padding: 0 18px 16px 64px;
  font-size: 13.5px; color: var(--muted); line-height: 1.8;
}
.ag-section.open .ag-section-body { display: block; }

.ag-section-body ul { padding-left: 18px; margin: 8px 0 0; }
.ag-section-body ul li { margin-bottom: 5px; }
.ag-section-body strong { color: var(--text); }
.ag-section-body .ag-spec-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.ag-spec-item {
  background: #F9FAFB; border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 12px; font-size: 12.5px;
}
.ag-spec-item .label { font-weight: 700; color: var(--text); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }

/* Quick-ref summary bar */
.ag-quickref {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 16px 24px; border-top: 1px solid var(--border);
  background: #FAFAFA;
}
.ag-qr-item {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
}
.ag-qr-item strong { color: var(--text); }
.ag-qr-sep { color: var(--border); }

/* ════════════════════════════════════════════════════════════
   PANEL 2 — Download Sample
   ════════════════════════════════════════════════════════════ */
.ag-download-wrap {
  padding: 48px 24px; text-align: center;
}
.ag-dl-icon {
  width: 80px; height: 80px; border-radius: 20px;
  background: #FEF2F2; display: flex; align-items: center;
  justify-content: center; margin: 0 auto 20px; font-size: 36px;
}
.ag-dl-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ag-dl-sub   { font-size: 14px; color: var(--muted); max-width: 480px; margin: 0 auto 28px; line-height: 1.7; }

.ag-dl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 32px; background: #DC2626; color: #fff;
  border-radius: 10px; font-family: var(--font); font-size: 15px;
  font-weight: 700; text-decoration: none; transition: background .15s;
  box-shadow: 0 4px 14px rgba(220,38,38,.25);
}
.ag-dl-btn:hover { background: #B91C1C; }

.ag-format-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 36px; text-align: left;
}
.ag-fmt-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}
.ag-fmt-card .ag-fmt-icon { font-size: 22px; margin-bottom: 8px; }
.ag-fmt-card .ag-fmt-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ag-fmt-card .ag-fmt-val   { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ════════════════════════════════════════════════════════════
   PANEL 3 — Video Guide
   ════════════════════════════════════════════════════════════ */
.ag-video-wrap { padding: 28px 24px 32px; }
.ag-video-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ag-video-sub   { font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.ag-video-frame {
  position: relative; padding-bottom: 56.25%; border-radius: 12px;
  overflow: hidden; background: #000; box-shadow: 0 8px 30px rgba(0,0,0,.15);
}
.ag-video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.ag-video-tips {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-top: 22px;
}
.ag-vtip {
  background: #F9FAFB; border: 1px solid var(--border);
  border-radius: 9px; padding: 14px 16px;
  font-size: 13px; color: var(--muted); line-height: 1.6;
}
.ag-vtip strong { display: block; color: var(--text); font-size: 13px; margin-bottom: 3px; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
  .ag-wrap { padding: 16px 14px 48px; }
  .ag-section-body { padding-left: 18px; }
  .ag-spec-grid { grid-template-columns: 1fr; }
  .ag-quickref { flex-direction: column; gap: 6px; }
}
</style>

<!-- ── Page header ─────────────────────────────────────────── -->
<div class="ag-wrap">
<div class="ag-page-header">
  <div>
    <div class="ag-page-title">Author Guidelines</div>
    <div class="ag-page-sub">Everything you need to prepare and submit your manuscript</div>
  </div>
  <a href="tickets.php" class="btn-raise" style="display:inline-flex;align-items:center;gap:7px;padding:9px 18px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer;transition:background .15s;text-decoration:none;">
    ❓ Need Help?
  </a>
</div>

<!-- ── Tabs ────────────────────────────────────────────────── -->
<div class="ag-tabs">
  <button class="ag-tab active" onclick="agTab(event,'guidelines')">
    <i class="fas fa-book-open"></i> Submission Guidelines
  </button>
  <button class="ag-tab" onclick="agTab(event,'sample')">
    <i class="fas fa-file-pdf"></i> Download Sample Format
  </button>
  <button class="ag-tab" onclick="agTab(event,'video')">
    <i class="fas fa-video"></i> Video Guide
  </button>
</div>

<!-- ══════════════════════════════════════════════════════════
     PANEL 1 — Submission Guidelines
     ══════════════════════════════════════════════════════════ -->
<div class="ag-panel active" id="panel-guidelines">
  <div class="ag-card">

    <div class="ag-intro">
      <div class="ag-intro-title">📋 Author &amp; Style Guidelines — CIJSS</div>
      <div class="ag-intro-text">
        Welcome to the CIJSS.
        Please review and follow all guidelines below to ensure your submission is processed efficiently.
        Papers not conforming to these guidelines may be returned without review.
      </div>
    </div>

    <!-- Quick-ref bar -->
    <div class="ag-quickref">
      <div class="ag-qr-item"><strong>Font:</strong> Times New Roman 12pt</div>
      <div class="ag-qr-sep">|</div>
      <div class="ag-qr-item"><strong>Paper:</strong> A4</div>
      <div class="ag-qr-sep">|</div>
      <div class="ag-qr-item"><strong>Abstract:</strong> 250–300 words</div>
      <div class="ag-qr-sep">|</div>
      <div class="ag-qr-item"><strong>Keywords:</strong> 3–5</div>
      <div class="ag-qr-sep">|</div>
      <div class="ag-qr-item"><strong>References:</strong> APA (Numeric)</div>
      <div class="ag-qr-sep">|</div>
      <div class="ag-qr-item"><strong>License:</strong> CC BY 4.0</div>
    </div>

    <div class="ag-guidelines-body">

      <!-- 1. Submission Process -->
      <div class="ag-section open">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#EFF6FF;color:#3B82F6;">📤</div>
          <span class="ag-section-label">Submission Process</span>
          <span class="ag-section-num">01</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          Submit your manuscript via our online submission system. Ensure all files adhere to the
          formatting guidelines before uploading. Submissions not meeting the basic requirements
          will be returned to authors without entering the review process.
          <ul>
            <li>Use the <strong>New Submission</strong> section of this portal to upload your manuscript.</li>
            <li>Only <strong>DOCX or DOC</strong> files are accepted for initial submission.</li>
            <li>All authors must be listed at the time of submission — additions are not permitted post-review.</li>
          </ul>
        </div>
      </div>

      <!-- 2. Page Setup -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#F0FDF4;color:#22C55E;">📄</div>
          <span class="ag-section-label">Page Setup &amp; Margins</span>
          <span class="ag-section-num">02</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          All manuscripts must be prepared on <strong>A4 size</strong> paper with the following margins:
          <div class="ag-spec-grid">
            <div class="ag-spec-item"><span class="label">Top Margin</span>0.76 inches</div>
            <div class="ag-spec-item"><span class="label">Bottom Margin</span>0.42 inches</div>
            <div class="ag-spec-item"><span class="label">Left Margin</span>0.42 inches</div>
            <div class="ag-spec-item"><span class="label">Right Margin</span>0.42 inches</div>
            <div class="ag-spec-item"><span class="label">Header (from top)</span>0.24 inches</div>
            <div class="ag-spec-item"><span class="label">Footer (from bottom)</span>0.28 inches</div>
          </div>
        </div>
      </div>

      <!-- 3. Font & Spacing -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#FFF7ED;color:#F97316;">🔤</div>
          <span class="ag-section-label">Font &amp; Spacing</span>
          <span class="ag-section-num">03</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <div class="ag-spec-grid">
            <div class="ag-spec-item"><span class="label">Font Face</span>Times New Roman</div>
            <div class="ag-spec-item"><span class="label">Body Font Size</span>12pt</div>
            <div class="ag-spec-item"><span class="label">Line Spacing</span>Single</div>
            <div class="ag-spec-item"><span class="label">Paragraph Spacing</span>12pt after</div>
          </div>
        </div>
      </div>

      <!-- 4. Title Page -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#F5F3FF;color:#8B5CF6;">🏷️</div>
          <span class="ag-section-label">Title Page &amp; Authors</span>
          <span class="ag-section-num">04</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <ul>
            <li><strong>Title:</strong> Bold, centered, 18pt.</li>
            <li><strong>Author names:</strong> Bold, centered, 12pt.</li>
            <li>Mark the corresponding author with an asterisk <strong>(*)</strong>.</li>
            <li>Include institutional affiliation and email address of the corresponding author.</li>
          </ul>
        </div>
      </div>

      <!-- 5. Abstract & Keywords -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#ECFDF5;color:#10B981;">📝</div>
          <span class="ag-section-label">Abstract &amp; Keywords</span>
          <span class="ag-section-num">05</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <div class="ag-spec-grid">
            <div class="ag-spec-item"><span class="label">Abstract Length</span>250 – 300 words</div>
            <div class="ag-spec-item"><span class="label">Keywords</span>3 – 5 terms</div>
          </div>
          <ul style="margin-top:12px">
            <li>The abstract must be <strong>self-contained</strong> and clearly summarise objective, methods, results, and conclusions.</li>
            <li>Keywords must be placed immediately after the abstract, separated by semicolons.</li>
          </ul>
        </div>
      </div>

      <!-- 6. Headings -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#EFF6FF;color:#3B82F6;">🗂️</div>
          <span class="ag-section-label">Main Text &amp; Headings</span>
          <span class="ag-section-num">06</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <div class="ag-spec-grid">
            <div class="ag-spec-item"><span class="label">Main Headings</span>Bold, UPPERCASE, 14pt</div>
            <div class="ag-spec-item"><span class="label">Sub-headings</span>Bold, 12pt</div>
            <div class="ag-spec-item"><span class="label">Body Text</span>Regular, 12pt</div>
            <div class="ag-spec-item"><span class="label">Section Numbering</span>Optional (1, 1.1, 1.1.1)</div>
          </div>
        </div>
      </div>

      <!-- 7. Figures & Tables -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#FFF7ED;color:#F97316;">📊</div>
          <span class="ag-section-label">Figures &amp; Tables</span>
          <span class="ag-section-num">07</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <ul>
            <li>All figures must be <strong>high resolution</strong> (minimum 300 DPI).</li>
            <li>Place figures and tables <strong>near their first mention</strong> in the text.</li>
            <li>Each figure/table must have a <strong>descriptive caption</strong>.</li>
            <li>Figure captions appear <em>below</em> the figure; table captions appear <em>above</em> the table.</li>
          </ul>
        </div>
      </div>

      <!-- 8. References -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#FDF4FF;color:#A855F7;">📚</div>
          <span class="ag-section-label">References</span>
          <span class="ag-section-num">08</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <ul>
            <li>Use <strong>APA format</strong> with numeric citation style.</li>
            <li>References must be numbered consecutively in the order they appear in the text.</li>
            <li>In-text citations appear as superscript numbers e.g. <strong>[1]</strong>, <strong>[2,3]</strong>.</li>
            <li>All URLs in references must include the date of access.</li>
          </ul>
        </div>
      </div>

      <!-- 9. Ethics & Compliance -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#F0FDF4;color:#16A34A;">⚖️</div>
          <span class="ag-section-label">Ethical Considerations &amp; Compliance</span>
          <span class="ag-section-num">09</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <ul>
            <li>Include an <strong>ethical approval statement</strong> where applicable.</li>
            <li>A <strong>conflict of interest</strong> statement must be included.</li>
            <li>Clearly state <strong>data availability</strong> — whether data can be shared or is restricted.</li>
            <li>Papers involving human subjects must confirm informed consent was obtained.</li>
          </ul>
        </div>
      </div>

      <!-- 10. Revisions & Copyright -->
      <div class="ag-section">
        <div class="ag-section-header" onclick="toggleSection(this)">
          <div class="ag-section-icon" style="background:#FEF2F2;color:#EF4444;">🔁</div>
          <span class="ag-section-label">Revisions &amp; Copyright</span>
          <span class="ag-section-num">10</span>
          <i class="fas fa-chevron-down ag-section-chevron"></i>
        </div>
        <div class="ag-section-body">
          <ul>
            <li>Revisions must <strong>fully address</strong> all reviewer and editor comments.</li>
            <li>Submit a <strong>response letter</strong> detailing changes made alongside the revised manuscript.</li>
            <li>All accepted papers are published under <strong>CC BY 4.0</strong> — authors retain copyright.</li>
          </ul>
        </div>
      </div>

    </div><!-- /.ag-guidelines-body -->
  </div><!-- /.ag-card -->
</div><!-- /#panel-guidelines -->

<!-- ══════════════════════════════════════════════════════════
     PANEL 2 — Download Sample
     ══════════════════════════════════════════════════════════ -->
<div class="ag-panel" id="panel-sample">
  <div class="ag-card">
    <div class="ag-download-wrap">
      <div class="ag-dl-icon">📄</div>
      <div class="ag-dl-title">Download Sample Format</div>
      <div class="ag-dl-sub">
        Use this official CIJSS template to format your manuscript correctly before submission.
        Papers not using this format may be returned for reformatting.
      </div>
      <a href="https://communeglobal.com/author/Preparation-of-Papers-in-One-Column-Format.pdf"
         target="_blank" class="ag-dl-btn">
        <i class="fas fa-download"></i> Download PDF Template
      </a>

      <div class="ag-format-cards">
        <div class="ag-fmt-card">
          <div class="ag-fmt-icon">📐</div>
          <div class="ag-fmt-title">Page Size</div>
          <div class="ag-fmt-val">A4 — 210 × 297 mm<br>Portrait orientation</div>
        </div>
        <div class="ag-fmt-card">
          <div class="ag-fmt-icon">🔤</div>
          <div class="ag-fmt-title">Typography</div>
          <div class="ag-fmt-val">Times New Roman<br>12pt body · 18pt title</div>
        </div>
        <div class="ag-fmt-card">
          <div class="ag-fmt-icon">📏</div>
          <div class="ag-fmt-title">Spacing</div>
          <div class="ag-fmt-val">Single line spacing<br>12pt paragraph spacing</div>
        </div>
        <div class="ag-fmt-card">
          <div class="ag-fmt-icon">🔖</div>
          <div class="ag-fmt-title">Abstract</div>
          <div class="ag-fmt-val">250 – 300 words<br>3 – 5 keywords</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ══════════════════════════════════════════════════════════
     PANEL 3 — Video Guide
     ══════════════════════════════════════════════════════════ -->
<div class="ag-panel" id="panel-video">
  <div class="ag-card">
    <div class="ag-video-wrap">
      <div class="ag-video-title">Step-by-Step Video Guide</div>
      <div class="ag-video-sub">Watch this walkthrough to learn how to prepare and format your manuscript correctly.</div>

      <div class="ag-video-frame">
        <iframe src="https://www.youtube.com/embed/Vb2_1MnNJ8I"
                title="Manuscript Preparation Guide"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen></iframe>
      </div>

      <div class="ag-video-tips">
        <div class="ag-vtip">
          <strong>⏱ Chapter 1 — Page Setup</strong>
          Learn how to configure A4 size, margins, and header/footer settings correctly.
        </div>
        <div class="ag-vtip">
          <strong>📝 Chapter 2 — Title &amp; Abstract</strong>
          Formatting your title page, author details, abstract, and keywords.
        </div>
        <div class="ag-vtip">
          <strong>📊 Chapter 3 — Figures &amp; Tables</strong>
          Inserting high-resolution figures and properly captioned tables.
        </div>
        <div class="ag-vtip">
          <strong>📚 Chapter 4 — References</strong>
          Applying APA numeric citation style throughout your manuscript.
        </div>
      </div>
    </div>
  </div>
</div>

</div><!-- /.ag-wrap -->

<script>
function agTab(e, panel) {
  document.querySelectorAll('.ag-tab').forEach(t => t.classList.remove('active'));
  document.querySelectorAll('.ag-panel').forEach(p => p.classList.remove('active'));
  e.currentTarget.classList.add('active');
  document.getElementById('panel-' + panel).classList.add('active');
}

function toggleSection(header) {
  const section = header.closest('.ag-section');
  const isOpen  = section.classList.contains('open');
  // Close all
  document.querySelectorAll('.ag-section').forEach(s => s.classList.remove('open'));
  // Toggle clicked
  if (!isOpen) section.classList.add('open');
}
</script>

<?php layoutEnd(); ?>