<?php
// ===================================================
// প্রজেক্ট: কর্জে হাসানা ফাউন্ডেশন পোর্টাল
// ফাইল: header.php (মোবাইল ড্রয়ারে ট্রান্সলেট অপশন যুক্ত করা হলো)
// ===================================================

require_once 'config.php';

// বাংলা ফন্ট ভেঙে যাওয়া রোধ করতে ফোর্স utf8mb4 কানেকশন এনকোডিং
try {
    $pdo->exec("SET NAMES utf8mb4");
    $pdo->exec("SET CHARACTER SET utf8mb4");
} catch (Exception $e) {
    // ইগনোর
}

// ভাষা হ্যান্ডলিং (Session Based BN/EN Toggle)
if (isset($_GET['lang'])) {
    $lang = $_GET['lang'] === 'en' ? 'en' : 'bn';
    $_SESSION['lang'] = $lang;
    $current_url = strtok($_SERVER["REQUEST_URI"], '?');
    header("Location: " . $current_url);
    exit;
}

$current_lang = $_SESSION['lang'] ?? 'bn';

// ভাষা অনুযায়ী ডিকশনারি (সম্পূর্ণ সাইটের জন্য)
$texts = [
    'bn' => [
        'top_notice' => 'ঝুনঝুনিয়া ওয়ার্ড বিএনপি-র সৌজন্যে সুদমুক্ত অর্থ সহায়তা পোর্টাল | হটলাইন:',
        'brand_title' => 'কর্জে হাসানা ফাউন্ডেশন',
        'brand_subtitle' => 'ঝুনঝুনিয়া ওয়ার্ড বিএনপি',
        'home' => 'হোম পেজ',
        'news' => 'সংবাদ ও কার্যক্রম',
        'apply' => 'সুদমুক্ত আবেদন',
        'track' => 'আবেদন ট্র্যাকিং',
        'donate' => 'ডোনেশন',
        'dashboard' => 'ড্যাশবোর্ড',
        'login' => 'লগইন',
        'register' => 'নিবন্ধন',
        'logout' => 'লগআউট',
        'lang_btn' => 'English',
        'lang_code' => 'en',
        'marquee_text' => 'কর্জে হাসানা ফাউন্ডেশনে আপনাকে স্বাগতম। আমরা ঝুনঝুনিয়া ওয়ার্ড বিএনপির সৌজন্যে সম্পূর্ণ সুদমুক্ত অর্থ সহায়তা প্রদান করছি। যেকোনো জিজ্ঞাসা বা সহায়তার জন্য আমাদের হটলাইনে যোগাযোগ করুন: +৮৮০ ১৮৩০-৫১৮৬৯১।'
    ],
    'en' => [
        'top_notice' => 'Sponsored by Jhunjhuniya Ward BNP Interest-Free Aid | Hotline:',
        'brand_title' => 'Qard-e-Hasana Foundation',
        'brand_subtitle' => 'Jhunjhuniya Ward BNP',
        'home' => 'Home',
        'news' => 'News & Activities',
        'apply' => 'Apply for Aid',
        'track' => 'Track Status',
        'donate' => 'Donate Now',
        'dashboard' => 'Dashboard',
        'login' => 'Login',
        'register' => 'Register',
        'logout' => 'Logout',
        'lang_btn' => 'বাংলা',
        'lang_code' => 'bn',
        'marquee_text' => 'Welcome to Qard-e-Hasana Foundation. Sponsored by Jhunjhuniya Ward BNP, we provide 100% interest-free financial aid. Hotline contact: +880 1830-518691.'
    ]
];

$t = $texts[$current_lang];
$is_logged_in = isset($_SESSION['user_id']);
?>
<!DOCTYPE html>
<html lang="<?php echo $current_lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['brand_title']; ?> - <?php echo $t['brand_subtitle']; ?></title>
    
    <!-- FontAwesome Icons & Premium Tiro Bangla Font -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tiro+Bangla:ital@0;1&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

    <!-- Premium Custom Styles (Inline CSS) -->
    <style>
        :root {
            --primary: #059669;
            --primary-dark: #047857;
            --primary-light: #d1fae5;
            --accent: #f59e0b;
            --dark: #0f172a;
            --dark-muted: #475569;
            --light: #f8fafc;
            --white: #ffffff;
            --glass-bg: rgba(255, 255, 255, 0.9);
            --glass-border: rgba(226, 232, 240, 0.8);
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.02);
            --shadow-md: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 20px 35px -10px rgba(5, 150, 105, 0.15);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Default Font Setup */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Tiro Bangla', 'Plus Jakarta Sans', serif;
        }

        body {
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

        /* Top Notification Bar */
        .top-bar {
            background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%);
            color: var(--white);
            padding: 8px 0;
            font-size: 13.5px;
            font-weight: 500;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 24px;
        }

        .top-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .desktop-top-info {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .desktop-top-info span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .desktop-top-info i {
            color: var(--accent);
        }

        .desktop-top-actions {
            display: flex;
            align-items: center;
        }

        .lang-switch-btn {
            background: rgba(255, 255, 255, 0.15);
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.25);
            padding: 3px 12px;
            border-radius: 20px;
            cursor: pointer;
            text-decoration: none;
            font-size: 12px;
            font-weight: 600;
            transition: var(--transition);
        }

        .lang-switch-btn:hover {
            background: var(--accent);
            color: var(--dark);
        }

        /* Mobile Topbar View */
        .mobile-top-content {
            display: none;
            width: 100%;
            justify-content: space-between;
            align-items: center;
        }

        .mobile-phone {
            font-size: 13.5px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .mobile-phone i {
            color: var(--accent);
        }

        .mobile-socials {
            display: flex;
            gap: 16px;
            font-size: 15.5px;
        }

        .mobile-socials a {
            color: var(--white);
            text-decoration: none;
            transition: var(--transition);
        }

        .mobile-socials a:hover {
            color: var(--accent);
        }

        @media (max-width: 768px) {
            .desktop-top-info, .desktop-top-actions {
                display: none !important;
            }
            .mobile-top-content {
                display: flex !important;
            }
        }

        /* Sticky Navigation Bar */
        .navbar-sticky-wrapper {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--glass-border);
            box-shadow: var(--shadow-md);
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 85px;
        }

        /* Logo Brand styling */
        .brand-logo {
            display: flex;
            align-items: center;
            gap: 15px;
            text-decoration: none;
        }

        /* রাউন্ড লোগো ইমেজ ফ্রেম */
        .logo-img-round {
            width: 58px;
            height: 58px;
            border-radius: 50%;
            border: 3px solid var(--primary-light);
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(5, 150, 105, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .logo-img-round img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ব্র্যান্ড নাম */
        .logo-text-box h1 {
            font-size: 25px;
            font-weight: 800;
            color: var(--dark);
            line-height: 1.1;
        }

        /* সাবটাইটেল */
        .logo-text-box span {
            font-size: 13px;
            color: #b91c1c;
            font-weight: 700;
            display: block;
            margin-top: 3px;
            letter-spacing: 0.5px;
        }

        /* Desktop Navigation Links */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 6px;
            list-style: none;
        }

        .nav-link {
            text-decoration: none;
            color: var(--dark-muted);
            font-weight: 600;
            font-size: 15px;
            padding: 10px 14px;
            border-radius: var(--radius-sm);
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--primary);
            background: var(--primary-light);
        }

        /* Action Buttons */
        .nav-btn-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: 10px;
        }

        .btn-donate {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: var(--white) !important;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }

        .btn-outline, .btn-solid {
            padding: 10px 18px;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: var(--transition);
        }

        .btn-outline {
            border: 2px solid var(--primary);
            color: var(--primary);
        }

        .btn-outline:hover {
            background-color: var(--primary);
            color: var(--white);
        }

        .btn-solid {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
        }

        .btn-solid:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(5, 150, 105, 0.35);
        }

        /* Mobile Hamburger Icon */
        .mobile-toggle {
            display: none;
            font-size: 24px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            color: var(--dark);
        }

        /* 📱 মোবাইল ড্রয়ারের জন্য সুন্দর ব্রান্ডিং হেডার বক্স */
        .mobile-drawer-header {
            display: none;
            align-items: center;
            gap: 12px;
            width: 100%;
            border-bottom: 1px solid var(--glass-border);
            padding-bottom: 20px;
            margin-bottom: 15px;
        }

        .logo-img-round-mobile {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2px solid var(--primary-light);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-img-round-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .logo-text-box-mobile h2 {
            font-size: 16.5px;
            font-weight: 800;
            color: var(--dark);
            line-height: 1.2;
        }

        .logo-text-box-mobile span {
            font-size: 11.5px;
            color: #b91c1c;
            font-weight: 700;
            display: block;
        }

        /* 🌐 মোবাইলে ড্রয়ারের ভেতরে ট্রান্সলেট বাটন (ডিজাইন ও কোড) */
        .mobile-drawer-lang-btn {
            display: none;
            width: 100%;
            background: rgba(5, 150, 105, 0.1);
            color: var(--primary);
            border: 1px solid var(--primary-light);
            padding: 10px 18px;
            border-radius: var(--radius-md);
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
            margin-bottom: 8px;
        }

        .mobile-drawer-lang-btn:hover {
            background-color: var(--primary);
            color: var(--white);
        }

        /* 🌀 3D Smooth Sliding Drawer with blur background */
        @media (max-width: 991px) {
            .mobile-toggle {
                display: inline-flex;
            }
            .mobile-drawer-header {
                display: flex !important; /* ড্রয়ারের প্রথমে লোগো ও নাম দেখাবে */
            }
            .mobile-drawer-lang-btn {
                display: inline-flex !important; /* মোবাইলে শুধু স্লাইডিং মেনুর ড্রয়ারের ভেতরে দেখাবে */
            }
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 300px;
                height: 100vh;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: blur(25px);
                -webkit-backdrop-filter: blur(25px);
                flex-direction: column;
                padding: 30px;
                align-items: flex-start;
                gap: 15px;
                transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), right 0.5s cubic-bezier(0.16, 1, 0.3, 1);
                box-shadow: -10px 0 30px rgba(0,0,0,0.1);
                z-index: 1001;
            }
            .nav-menu.active {
                right: 0;
            }
            .nav-btn-group {
                width: 100%;
                flex-direction: column;
                margin-left: 0;
                margin-top: 20px;
                gap: 12px;
            }
            .btn-outline, .btn-solid {
                width: 100%;
                justify-content: center;
            }
        }

        /* 📱 মোবাইলের মেইন হেডারে লোগো ইমেজ প্রদর্শন ও ফন্ট সাইজ টিউনিং */
        @media (max-width: 768px) {
            .logo-img-round {
                width: 46px;
                height: 46px;
                border-width: 2px;
            }
            .logo-text-box h1 {
                font-size: 19.5px !important;
            }
            .logo-text-box span {
                font-size: 11.5px !important;
            }
        }
        
        @media (max-width: 360px) {
            .logo-text-box h1 {
                font-size: 17.5px !important;
            }
        }

        /* 🚀 Ticker Notice Board Wrapper inside standard container */
        .ticker-wrapper {
            background-color: #f1f5f9;
            border: 1px solid #e2e8f0;
            border-radius: var(--radius-sm);
            overflow: hidden;
            padding: 8px 0;
            position: relative;
            display: flex;
            align-items: center;
            margin-top: 15px;
        }

        /* ডেসকটপের লাল বক্স লেবেল (আইকন ব্যতিত) */
        .ticker-label {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: #b91c1c;
            color: var(--white);
            padding: 0 16px;
            display: flex;
            align-items: center;
            font-size: 13.5px;
            font-weight: 700;
            z-index: 10;
            box-shadow: 5px 0 15px rgba(0,0,0,0.1);
        }

        .ticker-content {
            display: inline-flex;
            white-space: nowrap;
            animation: marquee 25s linear infinite;
            padding-left: 140px;
        }

        .ticker-content p {
            font-size: 14px;
            font-weight: 600;
            color: #334155;
            margin: 0;
            display: inline-block;
        }

        @keyframes marquee {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-100%, 0, 0); }
        }

        /* মোবাইলে শুধুমাত্র টেক্সট স্ক্রল করবে, লাল বক্স সম্পূর্ণ উধাও থাকবে */
        @media (max-width: 768px) {
            .ticker-label {
                display: none !important;
            }
            .ticker-content {
                padding-left: 15px !important;
            }
        }
    </style>
</head>
<body>

    <!-- 1. Top Informational Header Bar (Responsive social icons) -->
    <div class="top-bar">
        <div class="container">
            <div class="top-bar-content">
                
                <!-- 🖥️ ডেক্সটপ ভিউ -->
                <div class="desktop-top-info">
                    <span><i class="fa-solid fa-bullhorn"></i> <?php echo $t['top_notice']; ?></span>
                    <span><i class="fa-solid fa-phone"></i> +880 1830-518691</span>
                </div>
                <div class="desktop-top-actions">
                    <a href="?lang=<?php echo $t['lang_code']; ?>" class="lang-switch-btn">
                        <i class="fa-solid fa-globe"></i> <?php echo $t['lang_btn']; ?>
                    </a>
                </div>

                <!-- 📱 মোবাইল ভিউ (নাম্বার ও ৪টি সোশাল আইকন) -->
                <div class="mobile-top-content">
                    <span class="mobile-phone"><i class="fa-solid fa-phone"></i> +880 1830-518691</span>
                    <div class="mobile-socials">
                        <a href="https://facebook.com" target="_blank"><i class="fa-brands fa-facebook"></i></a>
                        <a href="https://youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i></a>
                        <a href="https://wa.me/8801830518691" target="_blank"><i class="fa-brands fa-whatsapp"></i></a>
                        <a href="https://x.com" target="_blank"><i class="fa-brands fa-x-twitter"></i></a>
                    </div>
                </div>

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

    <!-- 2. Sticky Glassmorphism Header Area -->
    <div class="navbar-sticky-wrapper">
        <div class="container">
            <nav class="navbar">
                <!-- Logo & Title -->
                <a href="<?php echo SITE_URL; ?>" class="brand-logo">
                    <div class="logo-img-round">
                        <img src="https://araihazargeneralhospital.com/software/logo.png" alt="Logo">
                    </div>
                    <div class="logo-text-box">
                        <h1><?php echo $t['brand_title']; ?></h1>
                        <span><?php echo $t['brand_subtitle']; ?></span>
                    </div>
                </a>

                <!-- Mobile Hamburger toggle -->
                <button class="mobile-toggle" id="mobileToggle">
                    <i class="fa-solid fa-bars"></i>
                </button>

                <!-- Navigation Drawer -->
                <ul class="nav-menu" id="navMenu">
                    <!-- 📱 মোবাইল ড্রয়ারের প্রথমে লোগো ও নাম একত্রে দেখানোর বক্স -->
                    <div class="mobile-drawer-header">
                        <div class="logo-img-round-mobile">
                            <img src="https://araihazargeneralhospital.com/software/logo.png" alt="Logo">
                        </div>
                        <div class="logo-text-box-mobile">
                            <h2><?php echo $t['brand_title']; ?></h2>
                            <span><?php echo $t['brand_subtitle']; ?></span>
                        </div>
                    </div>

                    <li><a href="<?php echo SITE_URL; ?>index.php" class="nav-link"><i class="fa-solid fa-house"></i> <?php echo $t['home']; ?></a></li>
                    <li><a href="<?php echo SITE_URL; ?>news.php" class="nav-link"><i class="fa-solid fa-newspaper"></i> <?php echo $t['news']; ?></a></li>
                    <li><a href="<?php echo SITE_URL; ?>track.php" class="nav-link"><i class="fa-solid fa-magnifying-glass"></i> <?php echo $t['track']; ?></a></li>
                    <li><a href="<?php echo SITE_URL; ?>apply.php" class="nav-link"><i class="fa-solid fa-file-signature"></i> <?php echo $t['apply']; ?></a></li>
                    
                    <?php if ($is_logged_in): ?>
                        <li><a href="<?php echo SITE_URL; ?>dashboard.php" class="nav-link"><i class="fa-solid fa-chart-line"></i> <?php echo $t['dashboard']; ?></a></li>
                    <?php endif; ?>

                    <div class="nav-btn-group">
                        <!-- 🌐 মোবাইলে ড্রয়ারের ভেতরে প্রিমিয়াম ট্রান্সলেট বাটন -->
                        <a href="?lang=<?php echo $t['lang_code']; ?>" class="mobile-drawer-lang-btn">
                            <i class="fa-solid fa-globe"></i> <?php echo $t['lang_btn']; ?>
                        </a>

                        <a href="javascript:void(0)" onclick="openDonationModal()" class="btn-solid btn-donate"><i class="fa-solid fa-hand-holding-dollar"></i> <?php echo $t['donate']; ?></a>
                        
                        <?php if ($is_logged_in): ?>
                            <a href="<?php echo SITE_URL; ?>logout.php" class="btn-outline"><i class="fa-solid fa-right-from-bracket"></i> <?php echo $t['logout']; ?></a>
                        <?php else: ?>
                            <a href="<?php echo SITE_URL; ?>login.php" class="btn-outline"><i class="fa-solid fa-right-to-bracket"></i> <?php echo $t['login']; ?></a>
                        <?php endif; ?>
                    </div>
                </ul>
            </nav>
        </div>
    </div>

    <!-- 3. Sub-header Scrolling Marquee (কন্টেইনারের ভেতরের সুন্দর অবস্থানে) -->
    <div class="container">
        <div class="ticker-wrapper">
            <div class="ticker-label">
                <?php echo $current_lang === 'bn' ? 'নোটিশ বোর্ড' : 'Notice Board'; ?>
            </div>
            <div class="ticker-content">
                <p><?php echo $t['marquee_text']; ?></p>
            </div>
        </div>
    </div>

    <!-- Mobile Drawer Overlay Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const mobileToggle = document.getElementById('mobileToggle');
            const navMenu = document.getElementById('navMenu');

            if(mobileToggle && navMenu) {
                mobileToggle.addEventListener('click', function(e) {
                    e.stopPropagation();
                    navMenu.classList.toggle('active');
                    const icon = mobileToggle.querySelector('i');
                    if(navMenu.classList.contains('active')) {
                        icon.className = 'fa-solid fa-xmark';
                    } else {
                        icon.className = 'fa-solid fa-bars';
                    }
                });

                document.addEventListener('click', function(e) {
                    if (!navMenu.contains(e.target) && !mobileToggle.contains(e.target)) {
                        navMenu.classList.remove('active');
                        mobileToggle.querySelector('i').className = 'fa-solid fa-bars';
                    }
                });
            }
        });
    </script>