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

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<style>
/* ═══════════════════════════════════════
   DESIGN SYSTEM – Dark Academic / Gold
═══════════════════════════════════════ */
:root {
    --ink:      #0e1117;
    --ink-soft: #1c2230;
    --paper:    #f9f6f0;
    --gold:     #c9a84c;
    --gold-lt:  #e8c97a;
    --gold-pale:#fdf3d8;
    --mist:     #e8e4dc;
    --body-txt: #3a3a3a;
    --serif:    'Playfair Display', Georgia, serif;
    --display:  'DM Serif Display', Georgia, serif;
    --sans:     'DM Sans', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body { font-family: var(--sans); background: var(--paper); color: var(--body-txt); }

/* ─── HERO ─────────────────────────────── */
.prb-hero {
    position: relative;
    background: var(--ink);
    overflow: hidden;
    padding: 100px 0 80px;
}

.prb-hero__grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(201,168,76,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201,168,76,.08) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.prb-hero__glow {
    position: absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    pointer-events: none;
}

.prb-hero__inner {
    position: relative; z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.prb-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid rgba(201,168,76,.4);
    color: var(--gold);
    font-family: var(--sans);
    font-size: 11px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    padding: 7px 20px; border-radius: 100px;
    margin-bottom: 28px;
    animation: fadeUp .6s ease both;
}
.prb-hero__eyebrow i { font-size: 9px; }

.prb-hero__title {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5vw, 4rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 24px;
    animation: fadeUp .7s .1s ease both;
}
.prb-hero__title em {
    font-style: italic;
    color: var(--gold-lt);
}

.prb-hero__sub {
    font-size: 1.05rem;
    color: rgba(255,255,255,.62);
    max-width: 560px; margin: 0 auto 48px;
    line-height: 1.7;
    animation: fadeUp .7s .2s ease both;
}

.prb-hero__ctas {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    animation: fadeUp .7s .3s ease both;
}

.btn-gold {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--gold);
    color: var(--ink);
    font-family: var(--sans); font-size: .875rem; font-weight: 500;
    padding: 14px 30px; border-radius: 8px;
    text-decoration: none;
    transition: background .2s, transform .2s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(201,168,76,.3);
}
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(201,168,76,.4); }

.btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.85);
    font-family: var(--sans); font-size: .875rem; font-weight: 500;
    padding: 14px 30px; border-radius: 8px;
    text-decoration: none;
    backdrop-filter: blur(8px);
    transition: border-color .2s, color .2s, transform .2s;
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold-lt); transform: translateY(-2px); }

/* ─── STATS STRIP ───────────────────────── */
.prb-stats {
    background: var(--ink-soft);
    border-top: 1px solid rgba(201,168,76,.2);
    border-bottom: 1px solid rgba(201,168,76,.2);
    padding: 32px 24px;
}
.prb-stats__inner {
    max-width: 900px; margin: 0 auto;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0;
}
.prb-stats__item {
    flex: 1 1 180px;
    text-align: center;
    padding: 16px 24px;
    border-right: 1px solid rgba(201,168,76,.15);
}
.prb-stats__item:last-child { border-right: none; }
.prb-stats__num {
    display: block;
    font-family: var(--serif); font-size: 2rem; font-weight: 700;
    color: var(--gold);
    line-height: 1.1;
}
.prb-stats__label {
    display: block;
    font-size: .75rem; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.45);
    margin-top: 4px;
}

/* ─── BENEFITS SECTION ──────────────────── */
.prb-benefits {
    max-width: 1120px;
    margin: 80px auto;
    padding: 0 24px;
}

.prb-benefits__header {
    text-align: center;
    margin-bottom: 64px;
}
.prb-benefits__header h2 {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    color: var(--ink);
    margin-bottom: 12px;
}
.prb-benefits__header p {
    color: #666; font-size: 1rem; max-width: 480px; margin: 0 auto; line-height: 1.65;
}
.prb-benefits__rule {
    width: 56px; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-lt));
    border-radius: 4px;
    margin: 18px auto 0;
}

/* ─── CARD GRID ─────────────────────────── */
.prb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.prb-card {
    background: #fff;
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 36px 32px 32px;
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    opacity: 0;
    transform: translateY(28px);
}
.prb-card.visible {
    opacity: 1; transform: translateY(0);
    transition: opacity .55s ease, transform .55s ease, box-shadow .3s ease, border-color .3s ease;
}
.prb-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(14,17,23,.1);
    border-color: var(--gold);
}

/* top accent bar */
.prb-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-lt));
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}
.prb-card:hover::before { transform: scaleX(1); }

/* number stamp */
.prb-card__num {
    position: absolute; top: 20px; right: 24px;
    font-family: var(--serif); font-size: 4rem; font-weight: 700;
    color: rgba(201,168,76,.09); line-height: 1;
    user-select: none; pointer-events: none;
}

.prb-card__icon-wrap {
    width: 56px; height: 56px;
    background: var(--gold-pale);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
    transition: background .3s;
}
.prb-card:hover .prb-card__icon-wrap {
    background: var(--gold);
}
.prb-card__icon-wrap i {
    font-size: 22px; color: var(--gold);
    transition: color .3s;
}
.prb-card:hover .prb-card__icon-wrap i { color: var(--ink); }

.prb-card__title {
    font-family: var(--serif);
    font-size: 1.18rem; font-weight: 600;
    color: var(--ink);
    margin-bottom: 12px; line-height: 1.35;
}

.prb-card__text {
    font-size: .9rem; line-height: 1.72;
    color: #5a5a5a;
}

.prb-card__tag {
    display: inline-block;
    margin-top: 18px;
    font-size: .72rem; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201,168,76,.35);
    padding: 4px 12px; border-radius: 100px;
}

/* ─── FEATURED CARD (SPANS 2 COLS) ─────── */
.prb-card--featured {
    grid-column: span 2;
    background: var(--ink);
    border-color: transparent;
    padding: 48px 44px;
}
@media (max-width: 720px) {
    .prb-card--featured { grid-column: span 1; }
}
.prb-card--featured .prb-card__num { color: rgba(201,168,76,.12); }
.prb-card--featured .prb-card__icon-wrap { background: rgba(201,168,76,.15); }
.prb-card--featured .prb-card__icon-wrap i { color: var(--gold-lt); }
.prb-card--featured:hover .prb-card__icon-wrap { background: var(--gold); }
.prb-card--featured:hover .prb-card__icon-wrap i { color: var(--ink); }
.prb-card--featured .prb-card__title { color: #fff; font-size: 1.4rem; }
.prb-card--featured .prb-card__text { color: rgba(255,255,255,.65); font-size: .95rem; }
.prb-card--featured .prb-card__tag { color: var(--gold-lt); border-color: rgba(201,168,76,.3); }
.prb-card--featured::before { background: linear-gradient(90deg, var(--gold-lt), var(--gold)); }
.prb-card--featured:hover { border-color: rgba(201,168,76,.4); }

/* ─── CTA SECTION ───────────────────────── */
.prb-cta {
    background: var(--ink);
    position: relative;
    overflow: hidden;
    padding: 100px 24px;
    text-align: center;
}
.prb-cta__bg {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        rgba(201,168,76,.03) 0px,
        rgba(201,168,76,.03) 1px,
        transparent 1px,
        transparent 40px
    );
}
.prb-cta__inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.prb-cta__badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(201,168,76,.12); color: var(--gold-lt);
    font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    padding: 7px 18px; border-radius: 100px;
    border: 1px solid rgba(201,168,76,.25);
    margin-bottom: 28px;
}
.prb-cta__title {
    font-family: var(--serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700;
    color: #fff; line-height: 1.25; margin-bottom: 18px;
}
.prb-cta__title em { font-style: italic; color: var(--gold-lt); }
.prb-cta__sub { color: rgba(255,255,255,.55); font-size: 1rem; line-height: 1.7; margin-bottom: 44px; }
.prb-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ─── ANIMATIONS ────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── RESPONSIVE ────────────────────────── */
@media (max-width: 540px) {
    .prb-stats__item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid rgba(201,168,76,.15); }
    .prb-stats__item:nth-child(even) { border-bottom: none; }
    .prb-grid { grid-template-columns: 1fr; }
    .prb-hero__ctas { flex-direction: column; align-items: center; }
}
</style>

<!-- ═══════════════════════════════════════
     HERO
═══════════════════════════════════════ -->
<section class="prb-hero">
    <div class="prb-hero__grid"></div>
    <div class="prb-hero__glow"></div>
    <div class="prb-hero__inner">
        <span class="prb-hero__eyebrow">
            <i class="fas fa-microscope"></i>
            Academic Publishing · Communeglobal
        </span>
        <h1 class="prb-hero__title">
            The Benefits of Becoming<br>a <em>Peer Reviewer</em>
        </h1>
        <p class="prb-hero__sub">
            Join an elite community of scholars who shape the future of academic publishing — and earn recognition, discounts, and career opportunities along the way.
        </p>
        <div class="prb-hero__ctas">
            <a href="https://communeglobal.com/apply-as-reviewer.php" class="btn-gold">
                <i class="fas fa-user-check"></i> Become a Reviewer
            </a>
            <a href="https://communeglobal.com/apply-as-reviewer.php" class="btn-outline">
                <i class="fas fa-id-card"></i> Submit Reviewer Profile
            </a>
        </div>
    </div>
</section>

<!-- ═══════════════════════════════════════
     STATS STRIP
═══════════════════════════════════════ -->
<div class="prb-stats">
    <div class="prb-stats__inner">
        <div class="prb-stats__item">
            <span class="prb-stats__num">8</span>
            <span class="prb-stats__label">Key Benefits</span>
        </div>
        <div class="prb-stats__item">
            <span class="prb-stats__num">APC</span>
            <span class="prb-stats__label">Discounts Available</span>
        </div>
        <div class="prb-stats__item">
            <span class="prb-stats__num">Cert.</span>
            <span class="prb-stats__label">of Appreciation</span>
        </div>
        <div class="prb-stats__item">
            <span class="prb-stats__num">∞</span>
            <span class="prb-stats__label">Career Growth</span>
        </div>
    </div>
</div>

<!-- ═══════════════════════════════════════
     BENEFITS GRID
═══════════════════════════════════════ -->
<section class="prb-benefits">
    <div class="prb-benefits__header">
        <h2>Why Join as a Peer Reviewer?</h2>
        <p>Every review you complete advances science — and your own career. Here's what you gain.</p>
        <div class="prb-benefits__rule"></div>
    </div>

    <div class="prb-grid" id="benefitsGrid">

        <!-- Card 1 – Featured -->
        <div class="prb-card prb-card--featured">
            <span class="prb-card__num">01</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-brain"></i></div>
            <h3 class="prb-card__title">Enhance Your Expertise</h3>
            <p class="prb-card__text">As a peer reviewer, you gain exposure to cutting-edge research in your field, expanding your knowledge and critical thinking skills. Reviewing manuscripts allows you to stay informed about emerging trends, innovative methodologies, and complex topics, contributing to your professional growth.</p>
            <span class="prb-card__tag">Knowledge Growth</span>
        </div>

        <!-- Card 2 -->
        <div class="prb-card">
            <span class="prb-card__num">02</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-tags"></i></div>
            <h3 class="prb-card__title">Enjoy Discounts on Article Processing Charges</h3>
            <p class="prb-card__text">At Communeglobal, we appreciate our reviewers' dedication. Peer reviewers are eligible for discounts on APCs when they publish their own work with us, making it more affordable to share their research and furthering their academic presence.</p>
            <span class="prb-card__tag">Financial Benefit</span>
        </div>

        <!-- Card 3 -->
        <div class="prb-card">
            <span class="prb-card__num">03</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-certificate"></i></div>
            <h3 class="prb-card__title">Receive a Certificate of Appreciation</h3>
            <p class="prb-card__text">Each completed review is recognized with a Certificate of Appreciation, acknowledging your valuable contributions to maintaining the integrity of academic publishing. This certificate can be a noteworthy addition to your professional portfolio.</p>
            <span class="prb-card__tag">Recognition</span>
        </div>

        <!-- Card 4 -->
        <div class="prb-card">
            <span class="prb-card__num">04</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-id-badge"></i></div>
            <h3 class="prb-card__title">Build a Professional Reviewer Profile</h3>
            <p class="prb-card__text">Your profile as a peer reviewer will be featured in our system, showcasing your expertise and contributions to the research community. This visibility enhances your professional reputation and connects you with fellow researchers in your field.</p>
            <span class="prb-card__tag">Visibility</span>
        </div>

        <!-- Card 5 -->
        <div class="prb-card">
            <span class="prb-card__num">05</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-pen-nib"></i></div>
            <h3 class="prb-card__title">Strengthen Research &amp; Writing Skills</h3>
            <p class="prb-card__text">Assessing manuscripts from other researchers helps you refine your own research and writing abilities. Exposure to diverse writing styles, research designs, and argumentation can enhance your scholarly work and boost your confidence in producing high-quality publications.</p>
            <span class="prb-card__tag">Skill Building</span>
        </div>

        <!-- Card 6 – Featured -->
        <div class="prb-card prb-card--featured">
            <span class="prb-card__num">06</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-sitemap"></i></div>
            <h3 class="prb-card__title">Gain Pathways to Editorial Positions</h3>
            <p class="prb-card__text">Outstanding reviewers may be invited to join our editorial team. This opportunity is ideal for those who wish to take on a leadership role in academic publishing, influence journal direction, and make a lasting impact on their field.</p>
            <span class="prb-card__tag">Career Advancement</span>
        </div>

        <!-- Card 7 -->
        <div class="prb-card">
            <span class="prb-card__num">07</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-users"></i></div>
            <h3 class="prb-card__title">Network with Fellow Experts</h3>
            <p class="prb-card__text">Peer reviewing offers you the chance to connect with experts and researchers in your field, expanding your professional network. This role often leads to meaningful connections, collaborations, and recognition among peers in the academic community.</p>
            <span class="prb-card__tag">Networking</span>
        </div>

        <!-- Card 8 -->
        <div class="prb-card">
            <span class="prb-card__num">08</span>
            <div class="prb-card__icon-wrap"><i class="fas fa-globe-americas"></i></div>
            <h3 class="prb-card__title">Make a Meaningful Contribution to Your Field</h3>
            <p class="prb-card__text">As a peer reviewer, you play a vital role in upholding the quality and accuracy of published research. Your feedback and expertise guide authors toward improving their work, contributing to advancements in knowledge and standards within your discipline.</p>
            <span class="prb-card__tag">Impact</span>
        </div>

    </div>
</section>

<!-- ═══════════════════════════════════════
     CTA BANNER
═══════════════════════════════════════ -->
<section class="prb-cta">
    <div class="prb-cta__bg"></div>
    <div class="prb-cta__inner">
        <div class="prb-cta__badge">
            <i class="fas fa-star"></i> Join Our Reviewer Community
        </div>
        <h2 class="prb-cta__title">
            Ready to Shape the Future<br>of <em>Academic Publishing?</em>
        </h2>
        <p class="prb-cta__sub">
            Apply today and become part of a global network of scholars committed to advancing knowledge, quality, and integrity in research.
        </p>
        <div class="prb-cta__btns">
            <a href="https://schoolinmycity.com/apply-as-reviewer/" class="btn-gold">
                <i class="fas fa-user-check"></i> Apply as Reviewer
            </a>
            <a href="https://schoolinmycity.com/register/" class="btn-outline">
                <i class="fas fa-paper-plane"></i> Submit Your Profile
            </a>
        </div>
    </div>
</section>

<script>
/* Scroll-reveal for cards */
(function () {
    const cards = document.querySelectorAll('.prb-card');
    const io = new IntersectionObserver((entries) => {
        entries.forEach((entry, i) => {
            if (entry.isIntersecting) {
                setTimeout(() => entry.target.classList.add('visible'), i * 90);
                io.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    cards.forEach(c => io.observe(c));
})();
</script>

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