<%- include('partials/header') %>
<div style="padding-top: 80px;"></div>

<!-- WHY WORK WITH ME & COLLAB SERVICES -->
<section class="collaborations section-padding">
    <div class="container">
        <div class="grid-2">
            <!-- Why Work With Me -->
            <div class="why-me slide-in-left">
                <h2><%= sections.why_me ? (lang==='bn' ? sections.why_me.title_bn : sections.why_me.title_en) : 'Why Work With Ruhan Vlog' %></h2>
                <div class="divider"></div>
                <p><%= sections.why_me ? (lang==='bn' ? sections.why_me.content_bn : sections.why_me.content_en) : '' %></p>
                <% if(sections.media_kit && sections.media_kit.file_url) { %>
                    <a href="<%= sections.media_kit.file_url %>" download class="btn-primary mt-4"><i class="fas fa-download"></i> <%= lang==='bn' ? 'মিডিয়া কিট ডাউনলোড করুন' : 'Download Media Kit' %></a>
                <% } %>
            </div>
            <!-- Call To Action -->
            <div class="collab-cta slide-in-right" style="background: var(--bg-dark); padding: 50px 40px; border-radius: 12px; text-align: center; border: 1px solid #334155; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3);">
                <i class="fas fa-handshake" style="font-size: 4.5rem; color: var(--primary-color); margin-bottom: 25px;"></i>
                <h2 style="font-size: 2.2rem; margin-bottom: 15px; color: var(--text-dark);"><%= lang==='bn' ? 'চলুন একসাথে কাজ করি!' : 'Let\'s Work Together!' %></h2>
                <p style="color: var(--text-light); font-size: 1.1rem; margin-bottom: 30px; line-height: 1.6;">
                    <%= lang==='bn' ? 'আপনার ব্র্যান্ড বা সার্ভিস প্রমোট করতে এবং একটি সফল ক্যাম্পেইনের জন্য সরাসরি যোগাযোগ করুন।' : 'Ready to elevate your brand? Get in touch today for promotions, sponsorships, and creative campaigns.' %>
                </p>
                <a href="/contact<%= typeof lQuery !== 'undefined' ? lQuery : '' %>" class="btn-primary" style="padding: 15px 35px; font-size: 1.15rem; font-weight: 600; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);"><i class="fas fa-paper-plane" style="margin-right: 8px;"></i> <%= lang==='bn' ? 'যোগাযোগ করুন' : 'Contact Me Now' %></a>
            </div>
        </div>
    </div>
</section>

<!-- AUDIENCE STATS -->
<section class="section-padding bg-dark">
    <div class="container">
        <div class="section-header text-center fade-in">
            <h2 style="color: white;"><%= lang==='bn' ? 'অডিয়েন্স ও রিচ' : 'Audience & Reach' %></h2>
            <div class="divider center"></div>
        </div>
        <%- include('partials/stats_strip') %>
    </div>
</section>

<!-- COLLABORATION TYPES GRID -->
<section class="section-padding bg-light">
    <div class="container">
        <div class="section-header text-center fade-in">
            <h2><%= lang==='bn' ? 'কোলাবরেশনের ধরন' : 'Types of Collaboration' %></h2>
            <div class="divider center"></div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; margin-top: 40px;">
            
            <% 
            const collabTypes = [
                { name: "Tourism Board Campaign", icon: "fas fa-map-marked-alt" },
                { name: "Hotel & Resort Review", icon: "fas fa-hotel" },
                { name: "Airline Promotion", icon: "fas fa-plane" },
                { name: "Travel Gadget Review", icon: "fas fa-mobile-alt" },
                { name: "Restaurant / Food Review", icon: "fas fa-utensils" },
                { name: "Destination Marketing", icon: "fas fa-globe-asia" },
                { name: "Camera & Drone Brand", icon: "fas fa-camera" },
                { name: "Travel Agency Promotion", icon: "fas fa-route" },
                { name: "Sponsored Video", icon: "fas fa-video" },
                { name: "Facebook Reels Promotion", icon: "fab fa-facebook" },
                { name: "YouTube Video Integration", icon: "fab fa-youtube" },
                { name: "TikTok Campaign", icon: "fab fa-tiktok" }
            ];
            %>

            <% collabTypes.forEach(type => { %>
                <div class="collab-box" style="background: var(--bg-dark); padding: 30px 20px; border-radius: 12px; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; border: 1px solid #334155;" 
                     onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 10px 25px rgba(0,0,0,0.5)';" 
                     onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 5px 15px rgba(0,0,0,0.3)';">
                    <i class="<%= type.icon %>" style="font-size: 2.8rem; color: var(--primary-color); margin-bottom: 20px;"></i>
                    <h4 style="font-size: 1.25rem; font-weight: 700; color: var(--text-dark); line-height: 1.4;"><%= type.name %></h4>
                </div>
            <% }) %>

        </div>
    </div>
</section>

<!-- BRAND TESTIMONIALS -->
<% if (testimonials && testimonials.length > 0) { %>
<section class="section-padding">
    <div class="container">
        <div class="section-header text-center fade-in">
            <h2><%= lang==='bn' ? 'ব্র্যান্ডগুলো কি বলছে' : 'What Brands Say' %></h2>
            <div class="divider center"></div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px;">
            <% testimonials.forEach(test => { %>
                <div style="background: white; padding: 40px 30px; border-radius: 12px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.1); position: relative;">
                    <i class="fas fa-quote-left" style="font-size: 2.5rem; color: #f1f5f9; position: absolute; top: 20px; left: 20px; z-index: 0;"></i>
                    <div style="position: relative; z-index: 1;">
                        <p style="font-size: 1.1rem; color: #475569; font-style: italic; margin-bottom: 25px; line-height: 1.7;">
                            "<%= lang==='bn' ? test.quote_bn : test.quote_en %>"
                        </p>
                        <% if (test.image_url) { %>
                            <img src="<%= test.image_url %>" alt="<%= test.brand_name %>" style="max-height: 40px; margin-bottom: 10px; object-fit: contain;">
                        <% } %>
                        <h4 style="font-size: 1.1rem; font-weight: 700; color: #1e293b; margin: 0;"><%= test.brand_name %></h4>
                    </div>
                </div>
            <% }) %>
        </div>
    </div>
</section>
<% } %>

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