<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;
}

.hero-description {
    color: var(--gray-600);
    font-size: 1.125rem;
    max-width: 48rem;
}

/* =====================
   Badges
===================== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-purple {
    background: #f3e8ff;
    color: var(--primary);
}

.badge-blue {
    background: #dbeafe;
    color: var(--secondary);
}

/* =====================
   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-purple {
    background: var(--primary);
    color: white;
    border: none;
}

.card-header-blue {
    background: var(--secondary);
    color: white;
    border: none;
}

.card-header-orange {
    background: var(--warning);
    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 (Sidebar)
===================== */
.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: 2rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--primary);
    display: inline-block;
}

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

.content-text h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 1.5rem 0 1rem;
}

.content-text p {
    margin-bottom: 1rem;
}

.content-text ul {
    list-style: none;
    margin: 1rem 0;
    padding-left: 0;
}

.content-text ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
}

.content-text ul li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
}

/* =====================
   Contribute Section
===================== */
.contribute-section {
    background: white;
    padding: 1rem 0;
    margin-top: 3rem;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f3e8ff;
    color: var(--primary);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

.section-description {
    font-size: 1.25rem;
    color: var(--gray-600);
    max-width: 48rem;
    margin: 0 auto 3rem;
}

/* =====================
   Action Cards
===================== */
.action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 80rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .action-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .action-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.action-card {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.action-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(91, 33, 182, 0.1);
    transform: translateY(-4px);
}

.action-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.action-card:hover::after {
    transform: scaleX(1);
}

.action-card.blue:hover  { border-color: var(--secondary); }
.action-card.blue::after { background: var(--secondary); }

.action-card.green:hover  { border-color: var(--success); }
.action-card.green::after { background: var(--success); }

.action-card.orange:hover  { border-color: var(--warning); }
.action-card.orange::after { background: var(--warning); }

.action-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    margin: 0 auto 1.5rem;
    transition: transform 0.3s ease;
}

.action-card:hover .action-icon {
    transform: scale(1.1);
}

.action-icon.blue   { background: var(--secondary); }
.action-icon.purple { background: var(--primary); }
.action-icon.green  { background: var(--success); }
.action-icon.orange { background: var(--warning); }

.action-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    text-align: center;
}

.action-description {
    color: var(--gray-600);
    font-size: 0.875rem;
    text-align: center;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.action-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.2s ease;
    margin: 0 auto;
}

.action-card.blue .action-link   { color: var(--secondary); }
.action-card.green .action-link  { color: var(--success); }
.action-card.orange .action-link { color: var(--warning); }

.action-link:hover {
    gap: 0.75rem;
}

/* =====================
   Stats Banner
===================== */
.stats-banner {
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 20px;
    padding: 2.5rem;
    margin-top: 3rem;
}

.stats-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .stats-banner-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-item {
    text-align: center;
    transition: transform 0.2s ease;
}

.stat-item:hover {
    transform: scale(1.05);
}

.stat-icon-wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.stat-icon-wrapper.blue   { background: var(--secondary); }
.stat-icon-wrapper.purple { background: var(--primary); }
.stat-icon-wrapper.green  { background: var(--success); }
.stat-icon-wrapper.orange { background: var(--warning); }

.stat-icon-wrapper i {
    font-size: 1.5rem;
    color: white;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.stat-value.blue   { color: var(--secondary); }
.stat-value.purple { color: var(--primary); }
.stat-value.green  { color: var(--success); }
.stat-value.orange { color: var(--warning); }

.stat-label {
    color: var(--gray-600);
    font-weight: 500;
}

/* =====================
   Newsletter
===================== */
.newsletter-section {
    background: var(--primary);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
}

.newsletter-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.newsletter-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.newsletter-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media (min-width: 768px) {
    .newsletter-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.newsletter-text {
    flex: 1;
    text-align: center;
}

@media (min-width: 768px) {
    .newsletter-text {
        text-align: left;
    }
}

.newsletter-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.newsletter-title {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.75rem;
}

.newsletter-description {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
}

.newsletter-form {
    flex-shrink: 0;
    width: 100%;
}

@media (min-width: 768px) {
    .newsletter-form {
        width: auto;
    }
}

.newsletter-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.5rem;
    border-radius: 12px;
}

@media (min-width: 640px) {
    .newsletter-input-wrapper {
        flex-direction: row;
    }
}

.newsletter-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    min-width: 300px;
}

.newsletter-input:focus {
    outline: 2px solid white;
}

.newsletter-button {
    padding: 1rem 2rem;
    background: white;
    color: var(--primary);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.newsletter-button:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.newsletter-privacy {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    text-align: center;
}

@media (min-width: 768px) {
    .newsletter-privacy {
        text-align: left;
    }
}

/* =====================
   Utility Classes
===================== */
.text-center   { text-align: center; }
.mb-1          { margin-bottom: 0.25rem; }
.mb-2          { margin-bottom: 0.5rem; }
.mb-3          { margin-bottom: 0.75rem; }
.mb-4          { margin-bottom: 1rem; }
.mb-6          { margin-bottom: 1.5rem; }
.mt-4          { margin-top: 1rem; }
.mt-6          { margin-top: 1.5rem; }
.flex          { display: flex; }
.items-center  { align-items: center; }
.gap-2         { gap: 0.5rem; }
.gap-3         { gap: 0.75rem; }
.gap-4         { gap: 1rem; }
</style>
<?php
/**
 * include/bfooter.php
 * Fetches all content from bfooter_details table.
 * Falls back to static defaults if DB unavailable.
 */
 
if (!isset($pdo)) include_once __DIR__ . '/../config/db.php';
 
$d = null;
if (!empty($pdo)) {
    try {
        $d = $pdo->query("SELECT * FROM bfooter_details LIMIT 1")->fetch(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {}
}
 
// Static fallback
if (!$d) {
    $d = [
        'badge_icon'=>'fas fa-hands-helping','badge_text'=>'JOIN OUR COMMUNITY',
        'section_title'=>'Contribute to Scientific Excellence',
        'section_description'=>'This journal is committed to swiftly sharing innovative and impactful research across various social science disciplines.',
        'stats_banner_title'=>'Advancing Social Science for a Better Tomorrow',
        'card1_color'=>'blue',  'card1_icon'=>'fas fa-file-upload',   'card1_title'=>'Submit an Article',             'card1_description'=>'Share your groundbreaking research with the global academic community','card1_link_text'=>'Get Started','card1_link_url'=>'#',
        'card2_color'=>'purple','card2_icon'=>'fas fa-graduation-cap','card2_title'=>'Special Issue on Education',    'card2_description'=>'Contribute to our focused collection on educational innovation and research','card2_link_text'=>'Learn More','card2_link_url'=>'#',
        'card3_color'=>'green', 'card3_icon'=>'fas fa-heartbeat',     'card3_title'=>'Special Issue on Public Health','card3_description'=>'Submit research addressing critical public health challenges','card3_link_text'=>'Submit Now','card3_link_url'=>'#',
        'card4_color'=>'orange','card4_icon'=>'fas fa-hospital-alt',  'card4_title'=>'Healthcare Research',           'card4_description'=>'Explore opportunities in healthcare and medical social sciences','card4_link_text'=>'Explore','card4_link_url'=>'#',
        'stat1_color'=>'blue',  'stat1_icon'=>'fas fa-users',    'stat1_value'=>'10K+',  'stat1_label'=>'Active Researchers',
        'stat2_color'=>'purple','stat2_icon'=>'fas fa-file-alt', 'stat2_value'=>'5000+', 'stat2_label'=>'Published Papers',
        'stat3_color'=>'green', 'stat3_icon'=>'fas fa-globe',    'stat3_value'=>'150+',  'stat3_label'=>'Countries',
        'stat4_color'=>'orange','stat4_icon'=>'fas fa-award',    'stat4_value'=>'98%',   'stat4_label'=>'Satisfaction Rate',
    ];
}
 
$cards = [
    ['color'=>$d['card1_color'],'icon'=>$d['card1_icon'],'title'=>$d['card1_title'],'description'=>$d['card1_description'],'link_text'=>$d['card1_link_text'],'link_url'=>$d['card1_link_url']],
    ['color'=>$d['card2_color'],'icon'=>$d['card2_icon'],'title'=>$d['card2_title'],'description'=>$d['card2_description'],'link_text'=>$d['card2_link_text'],'link_url'=>$d['card2_link_url']],
    ['color'=>$d['card3_color'],'icon'=>$d['card3_icon'],'title'=>$d['card3_title'],'description'=>$d['card3_description'],'link_text'=>$d['card3_link_text'],'link_url'=>$d['card3_link_url']],
    ['color'=>$d['card4_color'],'icon'=>$d['card4_icon'],'title'=>$d['card4_title'],'description'=>$d['card4_description'],'link_text'=>$d['card4_link_text'],'link_url'=>$d['card4_link_url']],
];
 
$stats = [
    ['color'=>$d['stat1_color'],'icon'=>$d['stat1_icon'],'value'=>$d['stat1_value'],'label'=>$d['stat1_label']],
    ['color'=>$d['stat2_color'],'icon'=>$d['stat2_icon'],'value'=>$d['stat2_value'],'label'=>$d['stat2_label']],
    ['color'=>$d['stat3_color'],'icon'=>$d['stat3_icon'],'value'=>$d['stat3_value'],'label'=>$d['stat3_label']],
    ['color'=>$d['stat4_color'],'icon'=>$d['stat4_icon'],'value'=>$d['stat4_value'],'label'=>$d['stat4_label']],
];
?>
  <!-- Contribute Section -->
    <section class="contribute-section">
        <div class="container">
            
            
            <!-- Section Header -->
            <div class="text-center">
                <div class="section-badge">
                    <i class="<?= htmlspecialchars($d['badge_icon']) ?>"></i>
                    <span><?= htmlspecialchars($d['badge_text']) ?></span>
                </div>
                <h2 class="section-title font-poppins">
                    <?= htmlspecialchars($d['section_title']) ?>
                </h2>
                <p class="section-description">
                    <?= htmlspecialchars($d['section_description']) ?>
                </p>
            </div>
             
            <!-- Action Cards Grid -->
            <div class="action-grid">
                <?php foreach ($cards as $card): ?>
                <div class="action-card <?= htmlspecialchars($card['color']) ?>">
                    <div class="action-icon <?= htmlspecialchars($card['color']) ?>">
                        <i class="<?= htmlspecialchars($card['icon']) ?>"></i>
                    </div>
                    <h3 class="action-title"><?= htmlspecialchars($card['title']) ?></h3>
                    <p class="action-description"><?= htmlspecialchars($card['description']) ?></p>
                    <a href="<?= htmlspecialchars($card['link_url']) ?>" class="action-link">
                        <span><?= htmlspecialchars($card['link_text']) ?></span>
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
                <?php endforeach; ?>
            </div>
             
            <!-- Stats Banner -->
            <div class="stats-banner">
                <h3 class="action-title"><?= htmlspecialchars($d['stats_banner_title']) ?></h3>
                <div class="stats-banner-grid">
                    <?php foreach ($stats as $s): ?>
                    <div class="stat-item">
                        <div class="stat-icon-wrapper <?= htmlspecialchars($s['color']) ?>">
                            <i class="<?= htmlspecialchars($s['icon']) ?>"></i>
                        </div>
                        <p class="stat-value <?= htmlspecialchars($s['color']) ?>"><?= htmlspecialchars($s['value']) ?></p>
                        <p class="stat-label"><?= htmlspecialchars($s['label']) ?></p>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
             

            <!-- Newsletter Section -->
            <div class="newsletter-section">
                <div class="newsletter-content">
                    <div class="newsletter-text">
                        <div class="newsletter-badge">
                            <i class="fas fa-envelope"></i>
                            <span>STAY UPDATED</span>
                        </div>
                        <h3 class="newsletter-title font-poppins">
                            Never Miss an Update
                        </h3>
                        <p class="newsletter-description">
                            Subscribe to our newsletter for the latest research trends and publication opportunities
                        </p>
                    </div>

                    <!-- Newsletter Form — drop this in place of your existing .newsletter-form div -->
                    <div class="newsletter-form">
                        <div class="newsletter-input-wrapper">
                            <input
                                type="email"
                                id="newsletterEmail"
                                placeholder="Enter your email address"
                                class="newsletter-input"
                            />
                            <button class="newsletter-button" id="subscribeBtn" onclick="submitNewsletter()">
                                <i class="fas fa-paper-plane" id="subscribeBtnIcon"></i>
                                <span id="subscribeBtnText">Subscribe Now</span>
                            </button>
                        </div>
                        <p class="newsletter-privacy">
                            <i class="fas fa-lock"></i>
                            We respect your privacy. Unsubscribe anytime.
                        </p>
                        <!-- Feedback message -->
                        <p id="newsletterMsg" style="display:none; margin-top:.6rem; font-size:.8rem; font-weight:600; padding:.4rem .875rem; border-radius:8px;"></p>
                    </div>
 
                    
                </div>
            </div>
        </div>
    </section>
    
    
    
<script>
function submitNewsletter() {
    var emailInput = document.getElementById('newsletterEmail');
    var btn        = document.getElementById('subscribeBtn');
    var btnIcon    = document.getElementById('subscribeBtnIcon');
    var btnText    = document.getElementById('subscribeBtnText');
    var msg        = document.getElementById('newsletterMsg');
    var email      = emailInput.value.trim();
 
    // Basic client-side validation
    if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        showMsg('Please enter a valid email address.', false);
        emailInput.focus();
        return;
    }
 
    // Loading state
    btn.disabled    = true;
    btnIcon.className = 'fas fa-spinner fa-spin';
    btnText.textContent = 'Subscribing…';
    msg.style.display = 'none';
 
    fetch('subscribe.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'email=' + encodeURIComponent(email)
    })
    .then(function(r){ return r.json(); })
    .then(function(data) {
        showMsg(data.message, data.success);
        if (data.success) {
            emailInput.value = '';
            btnIcon.className = 'fas fa-check';
            btnText.textContent = 'Subscribed!';
            setTimeout(function(){
                btnIcon.className = 'fas fa-paper-plane';
                btnText.textContent = 'Subscribe Now';
                btn.disabled = false;
            }, 3000);
        } else {
            btnIcon.className = 'fas fa-paper-plane';
            btnText.textContent = 'Subscribe Now';
            btn.disabled = false;
        }
    })
    .catch(function(){
        showMsg('Something went wrong. Please try again.', false);
        btnIcon.className = 'fas fa-paper-plane';
        btnText.textContent = 'Subscribe Now';
        btn.disabled = false;
    });
}
 
function showMsg(text, success) {
    var msg = document.getElementById('newsletterMsg');
    msg.textContent = text;
    msg.style.display  = 'block';
    msg.style.background   = success ? 'rgba(16,185,129,.2)' : 'rgba(239,68,68,.2)';
    msg.style.color        = success ? '#fff' : '#fff';
}
 
// Allow Enter key
document.getElementById('newsletterEmail').addEventListener('keypress', function(e){
    if (e.key === 'Enter') submitNewsletter();
});
</script>
