<!-- ১. প্রথমেই আইকন এবং প্রয়োজনীয় লাইব্রেরি যুক্ত করা হলো (এটি আপনার হেডারে থাকবে) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<!-- AOS Animation CSS (অ্যানিমেশনের জন্য) -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Swiper CSS (স্লাইডারের জন্য) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<style>
    :root { 
        --bd-green: #006a4e; 
        --bd-red: #d91d30; 
        --text-dark: #0f172a; 
    }
    
    .hero-wrapper {
        position: relative;
        padding: 160px 0 120px;
        background: #fff;
        overflow: hidden;
        min-height: 90vh;
        display: flex;
        align-items: center;
    }
    .hero-bg {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
        background: radial-gradient(circle at 10% 10%, rgba(0, 106, 78, 0.25) 0%, transparent 55%), 
                    radial-gradient(circle at 90% 90%, rgba(217, 29, 48, 0.18) 0%, transparent 55%);
        transform: skewY(-6deg);
        transform-origin: 0;
    }
    .silk-mesh-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; }
    .silk-wave-bundle {
        position: absolute; top: 0; left: -100%; width: 200%; height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='1200' height='1000' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.7'%3E%3Cpath d='M0 400 C 300 320 900 480 1200 400' stroke='%23006a4e' fill='none' stroke-width='3.5'/%3E%3Cpath d='M0 405 C 300 325 900 485 1200 405' stroke='%23006a4e' fill='none' stroke-width='1.5' opacity='0.4'/%3E%3Cpath d='M0 395 C 300 315 900 475 1200 395' stroke='%23006a4e' fill='none' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M0 600 C 300 520 900 680 1200 600' stroke='%23d91d30' fill='none' stroke-width='3.5'/%3E%3Cpath d='M0 605 C 300 525 900 685 1200 605' stroke='%23d91d30' fill='none' stroke-width='1.5' opacity='0.4'/%3E%3Cpath d='M0 595 C 300 515 900 675 1200 595' stroke='%23d91d30' fill='none' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M0 250 C 400 150 800 350 1200 250' stroke='%23006a4e' fill='none' stroke-width='2' opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
        background-repeat: repeat-x;
        background-size: 50% 100%;
        animation: silkFlow 35s linear infinite;
    }
    @keyframes silkFlow { from { transform: translateX(0); } to { transform: translateX(50%); } }

    .hero-title { font-size: clamp(2.5rem, 8vw, 5.2rem); font-weight: 900; line-height: 1.1; margin-bottom: 25px; color: var(--text-dark); letter-spacing: -2px; }
    .hero-title span.green { color: var(--bd-green); }
    .hero-title span.red { color: var(--bd-red); }

    .btn-luxury {
        background: var(--text-dark); color: #fff; padding: 20px 50px; border-radius: 100px; font-weight: 700;
        text-decoration: none; display: inline-flex; align-items: center; gap: 12px;
        transition: 0.3s cubic-bezier(0.19, 1, 0.22, 1);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    .btn-luxury:hover { background: var(--bd-green); transform: translateY(-4px); box-shadow: 0 25px 50px rgba(0, 106, 78, 0.2); color: #fff; }

    .feature-card { background: #fff; padding: 50px 40px; border-radius: 40px; border: 1px solid #eef2f6; height: 100%; transition: 0.4s; text-align: center; }
    .feature-card img { height: 75px; margin-bottom: 35px; }
    
    .pricing .box {
        padding: 40px;
        background: #fff;
        box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        text-align: center;
        transition: 0.3s;
        border: 1px solid #eee;
    }
    .pricing .box:hover { transform: scale(1.02); }
    .service-box i.icon { font-size: 40px; margin-bottom: 20px; display: inline-block; }
</style>

<!-- ======= Hero Section ======= -->
<section class="hero-wrapper" id="hero">
    <div class="hero-bg"></div>
    <div class="silk-mesh-container">
        <div class="silk-wave-bundle"></div>
    </div>
    <div class="container position-relative" style="z-index: 10;">
        <div class="row justify-content-center">
            <div class="col-lg-11 text-center">
                <div data-aos="fade-down" class="fw-bold mb-3" style="color: var(--bd-green); text-transform: uppercase; letter-spacing: 2px; font-size: 15px;">
                    <i class="bi bi-patch-check-fill"></i> বাংলাদেশের ১ নম্বর পেমেন্ট অটোমーション
                </div>
                <h1 class="hero-title" data-aos="zoom-out-up">
                    ব্যবসায়িক <span class="green">লেনদেন</span> <br> করুন <span class="red">স্বয়ংক্রিয়</span>
                </h1>
                <p class="fs-5 text-muted mb-5 mx-auto" style="max-width: 800px; line-height: 1.8;" data-aos="fade-up">
                    কোনো এক্সট্রা চার্জ ছাড়াই আপনার পার্সোনাল বিকাশ, নগদ ও রকেট অ্যাকাউন্টকে পেমেন্ট গেটওয়ে হিসেবে ব্যবহার করুন। আমাদের ড্যাশবোর্ড থেকে সবকিছু নিয়ন্ত্রণ করুন একদম ফ্রিতে।
                </p>
                <div class="d-flex flex-wrap gap-4 justify-content-center" data-aos="fade-up">
                    <a href="/sign-up" class="btn-luxury">ফ্রি রেজিস্ট্রেশন করুন <i class="bi bi-arrow-right-short fs-4"></i></a>
                    <a href="#" class="btn btn-outline-dark rounded-pill px-5 py-3 fw-bold border-2">কিভাবে কাজ করে?</a>
                </div>
            </div>
        </div>
    </div>
</section>

<main id="main">

<!-- ======= Stats Section ======= -->
<section class="py-5 bg-white border-top border-bottom">
    <div class="container" data-aos="fade-up">
        <div class="row g-4 text-center">
            <div class="col-lg-3 col-6">
                <h2 class="fw-bold mb-0 purecounter" style="color: var(--bd-green);" data-purecounter-start="0" data-purecounter-end="1963" data-purecounter-duration="1">0</h2>
                <p class="text-muted small fw-bold">সন্তুষ্ট মার্চেন্ট</p>
            </div>
            <div class="col-lg-3 col-6">
                <h2 class="fw-bold mb-0 purecounter" style="color: var(--bd-red);" data-purecounter-start="0" data-purecounter-end="3287490" data-purecounter-duration="1">0</h2>
                <p class="text-muted small fw-bold">ট্রানজেকশন সম্পন্ন</p>
            </div>
            <div class="col-lg-3 col-6">
                <h2 class="fw-bold mb-0 purecounter" style="color: var(--bd-green);" data-purecounter-start="0" data-purecounter-end="12" data-purecounter-duration="1">0</h2>
                <p class="text-muted small fw-bold">গেটওয়ে সাপোর্ট</p>
            </div>
            <div class="col-lg-3 col-6">
                <h2 class="fw-bold mb-0 purecounter" style="color: var(--bd-red);" data-purecounter-start="0" data-purecounter-end="100" data-purecounter-duration="1">0</h2>
                <p class="text-muted small fw-bold">% ফ্রি সলিউশন</p>
            </div>
        </div>
    </div>
</section>

<!-- ======= Features Section ======= -->
<section id="about" class="py-5 bg-light">
    <div class="container" data-aos="fade-up">
        <header class="section-header text-center mb-5">
            <h2>We Offer</h2>
            <p>আমাদের প্রধান বৈশিষ্ট্যসমূহ</p>
        </header>

        <div class="row g-4">
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card shadow-sm">
                    <img src="<?= base_url('public/assets/plat') ?>/tt.png" alt="">
                    <h4 class="fw-bold">সময় বাঁচান</h4>
                    <p class="text-muted">সিস্টেমে অটোমেটিক লেনদেন নিশ্চিত করে আপনার মূল্যবান সময় বাঁচান।</p>
                </div>
            </div>

            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="400">
                <div class="feature-card shadow-sm">
                    <img src="<?= base_url('public/assets/plat') ?>/nh.png" alt="">
                    <h4 class="fw-bold">সহজ ইন্টিগ্রেশন</h4>
                    <p class="text-muted">যেকোনো প্ল্যাটফর্মে আমাদের API যুক্ত করুন মাত্র কয়েক মিনিটে।</p>
                </div>
            </div>

            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="600">
                <div class="feature-card shadow-sm">
                    <img src="<?= base_url('public/assets/plat') ?>/mm.png" alt="">
                    <h4 class="fw-bold">অটোমেটেড পেমেন্ট</h4>
                    <p class="text-muted">পার্সোনাল অ্যাকাউন্ট ব্যবহার করে পেমেন্ট গ্রহণ করুন কোনো ঝামেলা ছাড়াই।</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ======= Services Section ======= -->
<section id="services" class="services py-5">
    <div class="container" data-aos="fade-up">
        <header class="section-header text-center mb-5">
            <h2>Services</h2>
            <p>আমাদের সেবাসমূহ</p>
        </header>
        <div class="row mt-5 gy-4">
            <div class="col-lg-4 col-md-6" data-aos="fade-up">
                <div class="service-box p-4 border rounded text-center">
                    <i class="bi bi-lightning-charge-fill icon text-primary"></i>
                    <h3>ইন্সট্যান্ট পেমেন্ট</h3>
                    <p>পেমেন্ট করার সাথে সাথেই সেটি আপনার অ্যাকাউন্টে অটো ভেরিফিকেশন সহ যুক্ত হয়ে যাবে।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up">
                <div class="service-box p-4 border rounded text-center">
                    <i class="bi bi-arrow-repeat icon text-warning"></i>
                    <h3>লাইফটাইম আপডেট</h3>
                    <p>আমাদের সার্ভিসের সাথে পান আজীবন ফ্রি আপডেট সুবিধা।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6" data-aos="fade-up">
                <div class="service-box p-4 border rounded text-center">
                    <i class="bi bi-wallet icon text-success"></i>
                    <h3>আনলিমিটেড ট্রানজেকশন</h3>
                    <p>বিনা খরচে গ্রহণ করুন আনলিমিটেড পেমেন্ট।</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ======= Pricing Section ======= -->
<section id="pricing" class="pricing py-5">
    <div class="container" data-aos="fade-up">
        <header class="section-header text-center mb-5">
            <h2>Pricing</h2>
            <p>আমাদের প্ল্যানসমূহ</p>
        </header>

        <div class="row gy-4 justify-content-center">
            <?php if (!empty($plans)) : foreach ($plans as $plan) :  ?>
                <div class="col-lg-3 col-md-6" data-aos="zoom-in" data-aos-delay="100">
                    <div class="box p-5 position-relative">
                        <?php if($plan['final_price'] == 0): ?>
                            <span class="badge bg-success position-absolute top-0 end-0 m-4">ফ্রি গেটওয়ে</span>
                        <?php endif; ?>
                        
                        <h3 style="color: var(--bd-green);"><?= $plan['name'] ?></h3>
                        <div class="price mb-4">
                            <span class="display-6 fw-bold"><?= currency_format($plan['final_price']) ?></span>
                            <span class="text-muted"> / <?= duration_type($plan['name'], $plan['duration_type'], $plan['duration'], false) ?></span>
                        </div>
                        <p class="text-center small text-muted"><?= $plan['description'] ?></p>

                        <ul class="list-unstyled text-start mb-4">
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i> <?= plan_message('brand', $plan['brand']) ?></li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i> <?= plan_message('device', $plan['device']) ?></li>
                            <li class="mb-2"><i class="bi bi-check-circle-fill text-success me-2"></i> <?= plan_message('transaction', $plan['transaction']) ?></li>
                        </ul>
                        <a href="<?= user_url('plans') ?>" class="btn btn-dark w-100 rounded-pill py-3 fw-bold">Buy Now</a>
                    </div>
                </div>
            <?php endforeach; endif; ?>
        </div>
    </div>
</section>

<!-- ======= Platforms Section ======= -->
<section id="platforms" class="py-5 bg-light">
    <div class="container" data-aos="fade-up">
        <header class="section-header text-center mb-5"><p>Supported Platforms</p></header>
        <div class="swiper clients-slider">
            <div class="swiper-wrapper align-items-center">
                <div class="swiper-slide text-center"><img src="public/assets/plat/php.png" class="img-fluid" style="max-height: 50px;" alt=""></div>
                <div class="swiper-slide text-center"><img src="public/assets/plat/nodejs.png" class="img-fluid" style="max-height: 50px;" alt=""></div>
                <div class="swiper-slide text-center"><img src="public/assets/plat/whmcs-logo.png" class="img-fluid" style="max-height: 50px;" alt=""></div>
                <div class="swiper-slide text-center"><img src="public/assets/plat/woocommerce-logo-transparent.png" class="img-fluid" style="max-height: 50px;" alt=""></div>
            </div>
        </div>
    </div>
</section>

<!-- ======= FAQ Section ======= -->
<section id="faq" class="faq py-5">
    <div class="container" data-aos="fade-up">
        <header class="section-header text-center mb-5">
            <h2>F.A.Q</h2>
            <p>সচরাচর জিজ্ঞাসিত প্রশ্নাবলী</p>
        </header>
        <?php if (!empty($items)) : ?>
            <div class="row">
                <div class="col-lg-6">
                    <div class="accordion accordion-flush" id="faqlist1">
                        <?php
                        $firstColumnItems = array_slice($items, 0, ceil(count($items) / 2));
                        foreach ($firstColumnItems as $key => $item) : ?>
                            <div class="accordion-item shadow-sm mb-3">
                                <h2 class="accordion-header">
                                    <button class="accordion-button <?= $key == 0 ? '' : 'collapsed' ?>" type="button" data-bs-toggle="collapse" data-bs-target="#kkk<?= $item['id'] ?>">
                                        <?= $item['question'] ?>
                                    </button>
                                </h2>
                                <div id="kkk<?= $item['id'] ?>" class="accordion-collapse collapse <?= $key == 0 ? 'show' : '' ?>" data-bs-parent="#faqlist1">
                                    <div class="accordion-body"><?= $item['answer'] ?></div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="accordion accordion-flush" id="faqlist2">
                        <?php
                        $secondColumnItems = array_slice($items, ceil(count($items) / 2));
                        foreach ($secondColumnItems as $key => $item) : ?>
                            <div class="accordion-item shadow-sm mb-3">
                                <h2 class="accordion-header">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#kkk<?= $item['id'] ?>">
                                        <?= $item['question'] ?>
                                    </button>
                                </h2>
                                <div id="kkk<?= $item['id'] ?>" class="accordion-collapse collapse" data-bs-parent="#faqlist2">
                                    <div class="accordion-body"><?= $item['answer'] ?></div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>

<!-- ======= Contact Section ======= -->
<section id="contact" class="contact py-5 bg-light">
    <div class="container" data-aos="fade-up">
        <header class="section-header text-center mb-5"><p>Contact US</p></header>
        <div class="row gy-4">
            <div class="col-lg-3 col-md-6">
                <div class="info-box text-center p-4 bg-white shadow-sm rounded">
                    <i class="bi bi-geo-alt fs-2 text-primary"></i>
                    <h3 class="fs-5 mt-3">Address</h3>
                    <p><?= site_config('address') ?></p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="info-box text-center p-4 bg-white shadow-sm rounded">
                    <i class="bi bi-telephone fs-2 text-success"></i>
                    <h3 class="fs-5 mt-3">Call Us</h3>
                    <p><?= site_config('contact_tel') ?></p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="info-box text-center p-4 bg-white shadow-sm rounded">
                    <i class="bi bi-envelope fs-2 text-danger"></i>
                    <h3 class="fs-5 mt-3">Email Us</h3>
                    <p><?= site_config('contact_email') ?></p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="info-box text-center p-4 bg-white shadow-sm rounded">
                    <i class="bi bi-clock fs-2 text-warning"></i>
                    <h3 class="fs-5 mt-3">Open Hours</h3>
                    <p><?= site_config('contact_work_hour') ?></p>
                </div>
            </div>
        </div>
    </div>
</section>

</main>

<!-- WhatsApp Button -->
<a href="https://wa.me/<?= site_config('contact_tel') ?>" class="whatsapp-button" target="_blank" style="width: 60px; height: 60px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 2px 2px 3px #999; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 26px; right: 15px; z-index: 999;">
    <i class="bi bi-whatsapp"></i>
</a>

<!-- প্রয়োজনীয় স্ক্রিপ্টসমূহ -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@pureadmin/purecounter@1.1.4/dist/purecounter_vanilla.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    // AOS Initialize
    AOS.init({ duration: 1000, once: true });
    
    // PureCounter Initialize
    new PureCounter();

    // Swiper Initialize (স্লাইডারের জন্য)
    new Swiper('.clients-slider', {
        speed: 400,
        loop: true,
        autoplay: { delay: 5000, disableOnInteraction: false },
        slidesPerView: 'auto',
        breakpoints: {
            320: { slidesPerView: 2, spaceBetween: 40 },
            480: { slidesPerView: 3, spaceBetween: 60 },
            640: { slidesPerView: 4, spaceBetween: 80 },
            992: { slidesPerView: 5, spaceBetween: 120 }
        }
    });
</script>