<%- include('partials/header') %>

<style>
/* ---- SECTION HEADERS ---- */
.dark-section-alt { background: #0d1117; padding: 120px 0 90px 0; min-height: 100vh; }
.section-tag {
    display: inline-block;
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
    color: #f59e0b;
    padding: 4px 14px; border-radius: 50px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 14px;
}
.dark-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #f1f5f9;
    margin-bottom: 12px;
    line-height: 1.2;
}
.dark-subtitle { color: #64748b; font-size: 1.05rem; max-width: 550px; margin: 0 auto; line-height: 1.7; }
.gold-divider { width: 50px; height: 3px; background: linear-gradient(90deg,#f59e0b,#d97706); margin: 16px auto; border-radius: 2px; }

/* ---- BLOG CARDS ---- */
.dark-blog-card {
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.dark-blog-card:hover {
    transform: translateY(-8px);
    border-color: rgba(245,158,11,0.3);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.dark-blog-card .card-img { height: 210px; overflow: hidden; }
.dark-blog-card .card-img img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease; }
.dark-blog-card:hover .card-img img { transform: scale(1.06); }
.dark-blog-card .card-body { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
.dark-blog-card .card-tag {
    display: inline-block;
    background: rgba(245,158,11,0.1); color: #f59e0b;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 50px; margin-bottom: 12px;
}
.dark-blog-card h3 { font-family: 'Playfair Display',serif; font-size: 1.2rem; color: #f1f5f9; margin-bottom: 10px; line-height: 1.45; }
.dark-blog-card p { color: #64748b; font-size: 0.9rem; line-height: 1.7; flex-grow: 1; margin-bottom: 20px; }
.dark-blog-card .card-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: #f59e0b; font-size: 0.9rem; font-weight: 600;
    transition: gap 0.2s ease;
}
.dark-blog-card .card-link:hover { gap: 14px; }
</style>

<!-- ==================== BLOGS PAGE ==================== -->
<section class="dark-section-alt">
    <div class="container">
        <div style="text-align:center; margin-bottom:60px;" class="fade-in-up">
            <span class="section-tag"><i class="fas fa-book-open"></i> <%= lang==='bn' ? 'আমার ডায়েরি' : 'My Journal' %></span>
            <h2 class="dark-title"><%= lang==='bn' ? 'সকল ভ্রমণের গল্প' : 'All Travel Stories' %></h2>
            <div class="gold-divider"></div>
            <p class="dark-subtitle"><%= lang==='bn' ? 'আমার সম্পূর্ণ ব্লগ সংগ্রহ ব্রাউজ করুন এবং আমার ভ্রমণের গভীরে ডুব দিন।' : 'Browse my complete collection of blogs and dive deeper into my journeys.' %></p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px;">
            <% if(typeof blogs !== 'undefined' && blogs.length > 0) { %>
                <% blogs.forEach(blog => { %>
                    <div class="dark-blog-card fade-in-up">
                        <% if(blog.image_url) { %>
                            <div class="card-img">
                                <img src="<%= blog.image_url %>" alt="<%= lang==='bn' ? blog.title_bn : blog.title_en %>">
                            </div>
                        <% } %>
                        <div class="card-body">
                            <span class="card-tag"><i class="fas fa-globe"></i> Travel</span>
                            <h3><%= lang==='bn' ? blog.title_bn : blog.title_en %></h3>
                            <p><%= lang==='bn' ? blog.content_bn.substring(0, 110) + '...' : blog.content_en.substring(0, 110) + '...' %></p>
                            <a href="/blog/<%= blog.id %><%= lQuery %>" class="card-link">
                                <%= lang==='bn' ? 'আরও পড়ুন' : 'Read Story' %> <i class="fas fa-arrow-right"></i>
                            </a>
                        </div>
                    </div>
                <% }) %>
            <% } else { %>
                <p style="text-align:center; grid-column:1/-1; color:#475569; padding: 60px 0; font-size: 1.2rem;">
                    <%= lang==='bn' ? 'এখনও কোন ব্লগ পোস্ট করা হয়নি।' : 'No blog posts yet. Check back soon!' %>
                </p>
            <% } %>
        </div>
    </div>
</section>

<%- include('partials/footer') %>
