<?php
// ===================================================
// প্রজেক্ট: কর্জে হাসানা ফাউন্ডেশন পোর্টাল
// FILE: index.php (ডাটাবেস টিউনিং এর সাথে সমঞ্জস্যপূর্ণ ফাইনাল হোম পেজ)
// ===================================================

require_once 'header.php';

// ১. ডাটাবেস থেকে ব্যানার ইমেজ এবং সেটিংস লোড করা
$banner_image = '';
try {
    $stmt_banner = $pdo->prepare("SELECT `setting_value` FROM `" . table('site_settings') . "` WHERE `setting_key` = 'banner_image' LIMIT 1");
    $stmt_banner->execute();
    $banner_image = trim($stmt_banner->fetchColumn() ?: '');
} catch (Exception $e) {
    // ইগনোর
}

if (empty($banner_image)) {
    $banner_image = "https://araihazargeneralhospital.com/software/banner.jpeg";
}

// ২. ডাটাবেস থেকে সর্বশেষ ৩টি খবর/ইভেন্ট আনা (সিঙ্গেল বাংলা কলাম)
$news_items = [];
try {
    $stmt_news = $pdo->prepare("SELECT * FROM `" . table('news_events') . "` ORDER BY `id` DESC LIMIT 3");
    $stmt_news->execute();
    $news_items = $stmt_news->fetchAll();
} catch (Exception $e) {
    // ইগনোর
}

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

// ৩. হোম পেজের জন্য পূর্ণাঙ্গ ডিকশনারি (অনুবাদ সিস্টেম)
$home_txt = [
    'bn' => [
        'hero_badge' => '১০০% সুদমুক্ত কর্জে হাসানা অর্থ সহায়তা',
        'hero_title' => 'ঝুনঝুনিয়া কর্জে হাসানা ফাউন্ডেশন',
        'hero_desc' => 'ঝুনঝুনিয়া ওয়ার্ড বিএনপির সৌজন্যে ছোট ব্যবসায়ী, নারী উদ্যোক্তা ও অসহায় পরিবারকে কোনো সুদ বা প্রসেসিং ফি ছাড়াই নগদ অর্থ প্রদান করা হচ্ছে।',
        'apply_btn' => 'আবেদন করুন',
        'track_btn' => 'অবস্থা জানুন',
        'track_heading' => 'আবেদনের বর্তমান অবস্থা সাথে সাথে চেক করুন',
        'track_placeholder' => 'আপনার ট্র্যাকিং আইডি (যেমন: BNP-XXXX) অথবা NID লিখুন...',
        'search_btn' => 'অনুসন্ধান',
        'why_title' => 'আমাদের মূল বৈশিষ্ট্যসমূহ',
        'why_desc' => 'ঝুনঝুনিয়া ওয়ার্ড বিএনপির সরাসরি তত্ত্বাবধানে স্বচ্ছতার সাথে তহবিল বিতরণ করা হয়।',
        'f1_title' => 'সম্পূর্ণ সুদমুক্ত',
        'f1_desc' => 'কোনো অতিরিক্ত চার্জ, সুদ বা প্রসেসিং ফি নেই।',
        'f2_title' => 'সরাসরি পে-আউট',
        'f2_desc' => 'অনুমোদন পেলেই বিকাশ বা নগদে টাকা চলে যাবে।',
        'f3_title' => 'জামিনদার ব্যবস্থা',
        'f3_desc' => 'নিরাপত্তা ও আইনি নিশ্চয়তার জন্য ১ জন গ্যারান্টার প্রযোজ্য।',
        'steps_title' => 'সুদমুক্ত অর্থ প্রাপ্তির সহজ ৪টি ধাপ',
        'step1' => '১. একাউন্ট নিবন্ধন',
        'step1_d' => 'প্রথমে আপনার নাম, মোবাইল ও NID দিয়ে নিবন্ধন সম্পন্ন করুন।',
        'step2' => '২. ফর্ম পূরণ',
        'step2_d' => 'আপনার ও জামিনদারের তথ্যসহ আবেদনের ফর্মটি সম্পূর্ণ করুন।',
        'step3' => '৩. এডমিন ভেরিফাই',
        'step3_d' => 'এডমিন ডাটা যাচাই করে ৩টি স্বাক্ষরসহ প্রিন্ট রেডি করবে।',
        'step4' => '৪. বিকাশ/নগদ পেমেন্ট',
        'step4_d' => 'অনুমোদিত তহবিল সরাসরি আপনার মোবাইলে পৌঁছে যাবে।',
        'news_title' => 'চলমান কার্যক্রম ও সফলতার গল্প',
        'news_desc' => 'আমাদের সাম্প্রতিক সাহায্য বিতরণ কর্মসূচির চিত্র ও উদ্যোক্তাদের সফলতার ডায়েরি।',
        'view_all' => 'সকল তালিকা দেখুন',
        'cta_title' => 'দুস্থ মানুষের সেবায় আপনার হাত বাড়িয়ে দিন',
        'cta_desc' => 'আমাদের কর্জে হাসানা তহবিলে আপনিও সরাসরি নিরাপদ গেটওয়ের মাধ্যমে ডোনেশন পাঠাতে পারেন।',
        'cta_btn' => 'সরাসরি অনুদান দিন'
    ],
    'en' => [
        'hero_badge' => '100% Interest-Free Qard-e-Hasana Fund',
        'hero_title' => 'Jhunjhuniya Qard-e-Hasana Foundation',
        'hero_desc' => 'Sponsored by Jhunjhuniya Ward BNP, providing interest-free cash aid to small businesses, women entrepreneurs, and families.',
        'apply_btn' => 'Apply Now',
        'track_btn' => 'Track Status',
        'track_heading' => 'Check Application Status Instantly',
        'track_placeholder' => 'Enter Tracking ID (e.g., BNP-XXXX) or NID Number...',
        'search_btn' => 'Search',
        'why_title' => 'Our Core Features',
        'why_desc' => 'Funds are distributed transparently under the direct supervision of Jhunjhuniya Ward BNP.',
        'f1_title' => '100% Interest-Free',
        'f1_desc' => 'No processing fees, extra charges, or hidden interest.',
        'f2_title' => 'Direct Payout',
        'f2_desc' => 'Once approved, cash goes straight to your bKash or Nagad wallet.',
        'f3_title' => 'Guarantor Security',
        'f3_desc' => 'Requires 1 guarantor for institutional safety and validation.',
        'steps_title' => '4 Easy Steps to Receive Aid',
        'step1' => '1. Registration',
        'step1_d' => 'Create your account using your name, mobile, and NID.',
        'step2' => '2. Submit Form',
        'step2_d' => 'Complete the aid application along with guarantor details.',
        'step3' => '3. Admin Verification',
        'step3_d' => 'Admin validates data and prepares official print with 3 signatures.',
        'step4' => '4. Wallet Payment',
        'step4_d' => 'Approved amount is directly paid via bKash or Nagad wallet.',
        'news_title' => 'Ongoing Activities & Impact',
        'news_desc' => 'Glimpses of our recent aid programs and stories of self-reliant entrepreneurs.',
        'view_all' => 'View All Activities',
        'cta_title' => 'Extend Your Hand to Support the Needy',
        'cta_desc' => 'You can also contribute directly to our Qard-e-Hasana fund through our secure payment gateway.',
        'cta_btn' => 'Donate Now'
    ]
];

$i = $home_txt[$lang];
?>

    <!-- Home Page Custom Styles (Inline CSS) -->
    <style>
        .hero-banner-card {
            position: relative;
            width: 100%;
            height: 420px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            margin-top: 30px;
            margin-bottom: 40px;
            background-color: var(--dark);
        }

        .hero-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 30%;
            transition: transform 0.5s ease;
        }

        .hero-banner-card:hover .hero-img {
            transform: scale(1.02);
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.7) 45%, rgba(15, 23, 42, 0) 100%);
            display: flex;
            align-items: center;
            padding: 50px;
            z-index: 2;
        }

        .hero-text-content {
            max-width: 580px;
            color: var(--white);
        }

        .hero-badge {
            background-color: var(--primary);
            color: var(--white);
            padding: 6px 14px;
            font-size: 13px;
            font-weight: 700;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 15px;
        }

        .hero-text-content h2 {
            font-size: 32px;
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 15px;
        }

        .hero-text-content p {
            font-size: 16px;
            color: #cbd5e1;
            margin-bottom: 25px;
        }

        @media (max-width: 768px) {
            .hero-banner-card {
                height: auto;
                aspect-ratio: 4/3;
                border-radius: 16px;
            }
            .hero-overlay {
                background: linear-gradient(180deg, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.95) 100%);
                align-items: flex-end;
                padding: 20px;
            }
            .hero-text-content h2 {
                font-size: 20px;
                margin-bottom: 8px;
            }
            .hero-text-content p {
                font-size: 13px;
                margin-bottom: 15px;
            }
            .hero-badge {
                font-size: 11px;
                padding: 4px 10px;
            }
        }

        /* Glassmorphic Search tracking Box */
        .track-bar-card {
            background: rgba(255, 255, 255, 0.85);
            border: 1px solid rgba(226, 232, 240, 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-radius: var(--radius-md);
            padding: 25px;
            margin-top: -60px;
            position: relative;
            z-index: 10;
            box-shadow: var(--shadow-md);
        }

        .track-form-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 15px;
        }

        .track-input {
            width: 100%;
            background: var(--white);
            border: 1.5px solid #cbd5e1;
            padding: 14px 20px;
            border-radius: var(--radius-sm);
            font-size: 15px;
            outline: none;
        }

        @media (max-width: 768px) {
            .track-bar-card {
                margin-top: 20px;
                padding: 15px;
            }
            .track-form-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Step Timeline Design */
        .steps-section {
            background-color: var(--white);
            padding: 60px 0;
            border-top: 1px solid #e2e8f0;
            border-bottom: 1px solid #e2e8f0;
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }

        .step-card {
            background: var(--light);
            padding: 25px;
            border-radius: var(--radius-md);
            border-left: 5px solid var(--primary);
            box-shadow: var(--shadow-sm);
        }

        /* ১:১ রেশিও ইমেজ সিস্টেম */
        .news-card-img-wrapper {
            width: 100%;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background-color: #f1f5f9;
        }

        .news-card-img-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition);
        }

        .news-card:hover .news-card-img-wrapper img {
            transform: scale(1.05);
        }

        /* ডাইনামিক কার্যক্রম গ্রিড লিমিটেশন */
        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
            gap: 30px;
            justify-content: center;
            margin-top: 30px;
        }

        .news-card {
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            background: var(--white);
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
            width: 100%;
            max-width: 360px;
            margin: 0 auto;
        }

        .news-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-3px);
        }

        /* 🔴 ডোনেশন মডাল সিএসএস */
        .donation-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 10000;
        }

        .donation-modal-card {
            background: #ffffff;
            width: 450px;
            max-width: calc(100% - 30px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 25px 60px -15px rgba(0,0,0,0.3);
            animation: modalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes modalFadeIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .donation-modal-header {
            background: linear-gradient(135deg, #1d4ed8 0%, #0f172a 100%);
            color: #ffffff;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .donation-modal-body {
            padding: 25px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 700;
            color: var(--dark-muted);
            margin-bottom: 6px;
        }

        .form-control {
            width: 100%;
            border: 1.5px solid #cbd5e1;
            padding: 10px 14px;
            border-radius: 8px;
            outline: none;
            font-size: 14.5px;
        }

        .form-control:focus {
            border-color: #3b82f6;
        }

        /* পেমেন্ট সিলেক্টর */
        .gateway-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 10px;
        }

        .gateway-option {
            border: 1.5px solid #cbd5e1;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .gateway-option.active {
            border-color: #3b82f6;
            background-color: #eff6ff;
            color: #1d4ed8;
        }
    </style>

    <div class="container">
        <!-- ===================================================
             ১. প্রিমিয়াম ব্যানার সেকশন
             =================================================== -->
        <div class="hero-banner-card">
            <img src="<?php echo htmlspecialchars($banner_image); ?>" class="hero-img" alt="কর্জে হাসানা ব্যানার">
            <div class="hero-overlay">
                <div class="hero-text-content">
                    <div class="hero-badge">
                        <i class="fa-solid fa-sparkles"></i> <?php echo $i['hero_badge']; ?>
                    </div>
                    <h2><?php echo $i['hero_title']; ?></h2>
                    <p><?php echo $i['hero_desc']; ?></p>
                    
                    <div class="hero-btn-group" style="display: flex; gap: 15px;">
                        <a href="apply.php" class="btn-solid"><i class="fa-solid fa-file-signature"></i> <?php echo $i['apply_btn']; ?></a>
                        <a href="javascript:void(0)" onclick="openDonationModal()" class="btn-solid btn-donate"><i class="fa-solid fa-heart"></i> <?php echo $i['cta_btn']; ?></a>
                    </div>
                </div>
            </div>
        </div>

        <!-- ===================================================
             ২. আবেদন অবস্থা চেক বার (NID / Tracking Search)
             =================================================== -->
        <div class="track-bar-card">
            <h4 style="margin-top:0; margin-bottom:10px; color:var(--dark); font-size:16px; font-weight:700;"><i class="fa-solid fa-magnifying-glass-chart" style="color:var(--primary);"></i> <?php echo $i['track_heading']; ?></h4>
            <form action="track.php" method="GET" class="track-form-grid">
                <input type="text" name="search" class="track-input" placeholder="<?php echo $i['track_placeholder']; ?>" required>
                <button type="submit" class="btn-solid" style="height: 100%; border-radius: var(--radius-sm);"><i class="fa-solid fa-magnifying-glass"></i> <?php echo $i['search_btn']; ?></button>
            </form>
        </div>
    </div>

    <!-- ===================================================
         ৩. আমাদের বৈশিষ্টসমূহ
         =================================================== -->
    <section class="features-section" style="padding: 60px 0;">
        <div class="container">
            <div class="section-header" style="text-align: center; margin-bottom: 50px;">
                <h3 style="font-size:26px; font-weight:800;"><?php echo $i['why_title']; ?></h3>
                <p style="color:var(--dark-muted);"><?php echo $i['why_desc']; ?></p>
            </div>

            <div class="features-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px;">
                <div class="feature-card">
                    <div class="feature-icon-box"><i class="fa-solid fa-ban"></i></div>
                    <h4 style="margin-bottom:10px; font-weight:700;"><?php echo $i['f1_title']; ?></h4>
                    <p style="font-size:14px; color:var(--dark-muted);"><?php echo $i['f1_desc']; ?></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon-box"><i class="fa-solid fa-mobile-screen-button"></i></div>
                    <h4 style="margin-bottom:10px; font-weight:700;"><?php echo $i['f2_title']; ?></h4>
                    <p style="font-size:14px; color:var(--dark-muted);"><?php echo $i['f2_desc']; ?></p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon-box"><i class="fa-solid fa-user-shield"></i></div>
                    <h4 style="margin-bottom:10px; font-weight:700;"><?php echo $i['f3_title']; ?></h4>
                    <p style="font-size:14px; color:var(--dark-muted);"><?php echo $i['f3_desc']; ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================================================
         ৪. আবেদনের ৪টি সহজ ধাপ
         =================================================== -->
    <section class="steps-section">
        <div class="container">
            <div class="section-header" style="text-align: center;">
                <h3 style="font-size:26px; font-weight:800;"><?php echo $i['steps_title']; ?></h3>
            </div>

            <div class="steps-grid">
                <div class="step-card">
                    <h4 style="font-weight:800; margin-bottom:10px; color:var(--primary);"><?php echo $i['step1']; ?></h4>
                    <p style="font-size:13.5px; color:var(--dark-muted);"><?php echo $i['step1_d']; ?></p>
                </div>
                <div class="step-card">
                    <h4 style="font-weight:800; margin-bottom:10px; color:var(--primary);"><?php echo $i['step2']; ?></h4>
                    <p style="font-size:13.5px; color:var(--dark-muted);"><?php echo $i['step2_d']; ?></p>
                </div>
                <div class="step-card">
                    <h4 style="font-weight:800; margin-bottom:10px; color:var(--primary);"><?php echo $i['step3']; ?></h4>
                    <p style="font-size:13.5px; color:var(--dark-muted);"><?php echo $i['step3_d']; ?></p>
                </div>
                <div class="step-card">
                    <h4 style="font-weight:800; margin-bottom:10px; color:var(--primary);"><?php echo $i['step4']; ?></h4>
                    <p style="font-size:13.5px; color:var(--dark-muted);"><?php echo $i['step4_d']; ?></p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================================================
         ৫. চলমান সামাজিক কার্যক্রম (১:১ স্কয়ার ইমেজ রেশিও এবং ডাইনামিক নতুন বাংলা কলাম)
         =================================================== -->
    <section class="news-section" style="padding: 60px 0;">
        <div class="container">
            <div class="section-header" style="text-align: center; margin-bottom: 50px;">
                <h3 style="font-size:26px; font-weight:800;"><?php echo $i['news_title']; ?></h3>
                <p style="color:var(--dark-muted);"><?php echo $i['news_desc']; ?></p>
            </div>

            <div class="news-grid">
                <?php if (!empty($news_items)): ?>
                    <?php foreach ($news_items as $item): ?>
                        <div class="news-card">
                            <div class="news-card-img-wrapper">
                                <img src="<?php echo htmlspecialchars(SITE_URL . 'uploads/' . $item['image']); ?>" onerror="this.src='https://images.unsplash.com/photo-1593113598332-cd288d649433?q=80&w=800&auto=format&fit=crop'" alt="নিউজ">
                            </div>
                            <div class="news-card-body" style="padding:20px;">
                                <span class="news-badge"><?php echo htmlspecialchars($item['category']); ?></span>
                                <!-- 🔴 [সংশোধিত কলাম] title_bn এর পরিবর্তে সরাসরি ডাইনামিক title -->
                                <h4 style="font-size:16px; font-weight:700; margin-bottom:10px;"><?php echo htmlspecialchars($item['title']); ?></h4>
                                <!-- 🔴 [সংশোধিত কলাম] content_bn এর পরিবর্তে সরাসরি ডাইনামিক content -->
                                <p style="font-size:13.5px; color:var(--dark-muted); line-height:1.6;"><?php echo htmlspecialchars(mb_strimwidth($item['content'], 0, 120, '...')); ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div class="news-card">
                        <div class="news-card-img-wrapper">
                            <img src="https://images.unsplash.com/photo-1593113598332-cd288d649433?q=80&w=800&auto=format&fit=crop" alt="ডেমো ইভেন্ট">
                        </div>
                        <div class="news-card-body" style="padding:20px;">
                            <span class="news-badge">কর্জে হাসানা</span>
                            <h4 style="font-size:16px; font-weight:700; margin-bottom:10px;">ব্যবসায়ীদের স্বাবলম্বী করার উদ্যোগ</h4>
                            <p style="font-size:13.5px; color:var(--dark-muted); line-height:1.6;">ঝুনঝুনিয়া এলাকায় ২০ জন ক্ষুদ্র খুচরা দোকানিকে কর্জে হাসানা প্রদান সম্পন্ন করা হয়েছে।</p>
                        </div>
                    </div>
                <?php endif; ?>
            </div>

            <!-- সকল তালিকা দেখুন বাটনটি -->
            <div style="text-align: center; margin-top: 40px;">
                <a href="news.php" class="btn-outline" style="padding: 12px 30px; font-size: 15px; font-weight: 700; border-radius: 30px; text-decoration: none;">
                    <i class="fa-solid fa-list-check"></i> <?php echo $i['view_all']; ?>
                </a>
            </div>

        </div>
    </section>

    <!-- ===================================================
         ৬. অনুদান আহ্বান (Call To Action Box)
         =================================================== -->
    <section class="container" style="margin-top: 40px; margin-bottom: 80px;">
        <div style="background: linear-gradient(135deg, #064e3b 0%, #0f172a 100%); border-radius: 20px; padding: 40px; text-align: center; color: #ffffff; box-shadow: var(--shadow-lg);">
            <h3 style="font-size: 26px; font-weight: 800; margin-bottom: 12px;"><?php echo $i['cta_title']; ?></h3>
            <p style="color: #cbd5e1; max-width: 600px; margin: 0 auto 25px;"><?php echo $i['cta_desc']; ?></p>
            <a href="javascript:void(0)" onclick="openDonationModal()" class="btn-solid btn-donate" style="padding: 12px 28px; font-size: 15px;"><i class="fa-solid fa-hand-holding-heart"></i> <?php echo $i['cta_btn']; ?></a>
        </div>
    </section>

    <!-- ===================================================
         🔴 ৭. গেটওয়ে ডোনেশন মডাল উইন্ডো (Donation Popup Window)
         =================================================== -->
    <div class="donation-modal-backdrop" id="donationModal" onclick="closeDonationModalOnBackdrop(event)">
        <div class="donation-modal-card">
            <div class="donation-modal-header">
                <h4 style="margin:0; font-weight:800; font-size:16px;"><i class="fa-solid fa-circle-dollar-to-slot"></i> কর্জে হাসানা ফান্ডে অনুদান</h4>
                <button onclick="closeDonationModal()" style="background:none; border:none; color:#fff; cursor:pointer; font-size:18px;"><i class="fa-solid fa-xmark"></i></button>
            </div>
            
            <form action="donation_process.php" method="POST" id="donationForm">
                <div class="donation-modal-body">
                    
                    <div class="form-group">
                        <label>আপনার নাম (Name) *</label>
                        <input type="text" name="donor_name" class="form-control" placeholder="আপনার নাম লিখুন" required>
                    </div>

                    <div class="form-group">
                        <label>মোবাইল নম্বর (Mobile No) *</label>
                        <input type="tel" name="donor_phone" class="form-control" placeholder="017XXXXXXXX" required>
                    </div>

                    <div class="form-group">
                        <label>ইমেইল (Email) <span style="font-weight:normal; font-size:12px; color:#94a3b8;">(ঐচ্ছিক)</span></label>
                        <input type="email" name="donor_email" class="form-control" placeholder="example@gmail.com">
                    </div>

                    <div class="form-group">
                        <label>অনুদান পরিমাণ (Amount BDT) *</label>
                        <input type="number" name="amount" class="form-control" placeholder="টাকার পরিমাণ লিখুন" required min="10">
                    </div>

                    <div class="form-group">
                        <label>পেমেন্ট মেথড (Payment Gateway) *</label>
                        <input type="hidden" name="payment_method" id="paymentMethodInput" value="bKash">
                        <div class="gateway-selector">
                            <div class="gateway-option active" id="optionBkash" onclick="selectGateway('bKash')">
                                <i class="fa-solid fa-wallet"></i> bKash
                            </div>
                            <div class="gateway-option" id="optionNagad" onclick="selectGateway('Nagad')">
                                <i class="fa-solid fa-wallet"></i> Nagad
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn-solid btn-donate" style="width:100%; margin-top:15px; justify-content:center; padding:12px 0; border-radius:8px; border:none; cursor:pointer;">
                        <i class="fa-solid fa-shield-heart"></i> ডোনেশন সম্পন্ন করুন
                    </button>

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

    <!-- Donation Modal Control Scripts (Inline JS) -->
    <script>
        function openDonationModal() {
            document.getElementById('donationModal').style.display = 'flex';
        }

        function closeDonationModal() {
            document.getElementById('donationModal').style.display = 'none';
        }

        function closeDonationModalOnBackdrop(e) {
            if (e.target.id === 'donationModal') {
                closeDonationModal();
            }
        }

        function selectGateway(method) {
            document.getElementById('paymentMethodInput').value = method;
            document.getElementById('optionBkash').classList.remove('active');
            document.getElementById('optionNagad').classList.remove('active');

            if (method === 'bKash') {
                document.getElementById('optionBkash').classList.add('active');
            } else if (method === 'Nagad') {
                document.getElementById('optionNagad').classList.add('active');
            }
        }
    </script>

<?php
require_once 'footer.php';
?>