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

    <!-- Add flag-icons CSS for country flags -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css" />

    <div style="padding-top: 80px;"></div>

    <!-- MAP SECTION (Previous Countries) -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="section-header text-center fade-in">
                <h2>
                    <%= lang==='bn' ? 'ভ্রমণ করা দেশসমূহ' : 'Countries Visited' %>
                </h2>
                <div class="divider center"></div>
                <p class="text-muted mt-3">
                    <%= lang==='bn' ? 'আমি এ পর্যন্ত ' + countries.length
                        + 'টি দেশ ভ্রমণ করেছি। নিচে আমার ভ্রমণের তালিকা।' : 'I have traveled to ' + countries.length
                        + ' countries so far. Below is my travel list.' %>
                </p>
            </div>

            <div style="margin-top: 40px; text-align: center;">
                <h3 style="margin-bottom: 20px;">
                    <%= lang==='bn' ? 'বিশ্ব মানচিত্রে আমার ভ্রমণ' : 'My Travels on World Map' %>
                </h3>

                <!-- Map Container -->
                <div
                    style="background: var(--bg-dark); border: 1px solid #334155; border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); margin-bottom: 40px; overflow: hidden;">
                    <div id="vmap" style="width: 100%; height: 500px;"></div>
                </div>

                <!-- Visited Countries List with Flags (Dynamically rendered below map) -->
                <div id="visited-countries-list"
                    style="display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 20px;">
                    <% countries.forEach(country=> { %>
                        <div
                            style="background: var(--bg-dark); border: 1px solid #334155; border-radius: 12px; padding: 20px 35px; display: inline-flex; align-items: center; box-shadow: 0 6px 12px rgba(0,0,0,0.4); transition: transform 0.2s;">
                            <span class="fi fi-<%= country.code.toLowerCase() %>"
                                style="font-size: 2.5em; margin-right: 15px; border-radius: 4px;"></span>
                            <span style="font-weight: 700; font-size: 1.4rem; color: var(--text-dark);">
                                <%= country.name %>
                            </span>
                        </div>
                        <% }) %>
                </div>
            </div>
        </div>
    </section>

    <!-- TRAVEL MEMORIES GALLERY -->
    <section class="section-padding bg-dark">
        <div class="container">
            <div class="section-header text-center fade-in">
                <h2 style="color: white;">
                    <%= lang==='bn' ? 'ভ্রমণের স্মৃতি' : 'Travel Memories' %>
                </h2>
                <div class="divider center"></div>
                <p style="color: #cbd5e1; margin-top: 15px;">
                    <%= lang==='bn' ? 'বিশ্বজুড়ে আমার কিছু প্রিয় মুহূর্ত।'
                        : 'Some of my favorite moments from around the world.' %>
                </p>
            </div>

            <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px;">
                <div style="border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s;"
                    onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                    <img src="/images/travel_1.jpg"
                        style="width: 100%; height: 400px; object-fit: cover; display: block;" alt="Travel Memory 1">
                </div>
                <div style="border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s;"
                    onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                    <img src="/images/travel_2.jpg"
                        style="width: 100%; height: 400px; object-fit: cover; display: block;" alt="Travel Memory 2">
                </div>
                <div style="border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s;"
                    onmouseover="this.style.transform='scale(1.03)'" onmouseout="this.style.transform='scale(1)'">
                    <img src="/images/travel_3.jpg"
                        style="width: 100%; height: 400px; object-fit: cover; display: block;" alt="Travel Memory 3">
                </div>
            </div>
        </div>
    </section>

    <script>
        // jsvectormap typically expects ISO 3166-1 alpha-2 codes in uppercase
        window.visitedCountries = <% - JSON.stringify(countries.map(c => c.code.toUpperCase())) %>;
    </script>

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