@extends('layouts.front')
@section('title', 'Enterprise SMS Gateway Solutions - ' . $gs->title)

@section('contents')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<style>
    :root {
        --brand-orange: #ff6b00;
        --brand-dark: #0f172a;
        --brand-blue: #3b82f6;
        --text-gray: #64748b;
        --bg-light: #f8fafc;
    }

    body { font-family: 'Manrope', sans-serif; background-color: #fff; overflow-x: hidden; }

    /* --- ১. মডার্ন হিরো সেকশন --- */
    .hero-wrapper {
        background: linear-gradient(135deg, #0b1120 0%, #1e293b 100%);
        padding: 160px 0 100px;
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .hero-blob {
        position: absolute; width: 500px; height: 500px;
        background: var(--brand-orange); filter: blur(200px); opacity: 0.15;
        border-radius: 50%; z-index: 1;
    }
    .blob-1 { top: -100px; right: -100px; }
    .blob-2 { bottom: -100px; left: -100px; background: var(--brand-blue); }

    .hero-content { position: relative; z-index: 5; }
    
    .hero-img-box {
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 20px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
        transition: transform 0.5s ease;
    }
    .hero-img-box:hover { transform: perspective(1000px) rotateY(0deg) rotateX(0deg); }

    /* --- ২. স্ট্যাটস কাউন্টার (Floating) --- */
    .stats-container {
        margin-top: -60px; position: relative; z-index: 10;
        background: white; border-radius: 20px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.06);
        padding: 40px; border-bottom: 4px solid var(--brand-orange);
    }

    /* --- ৩. ফিচার গ্রিড --- */
    .feature-card-pro {
        padding: 40px 30px; border-radius: 20px; background: white;
        border: 1px solid #f1f5f9; transition: all 0.3s;
        height: 100%; position: relative; overflow: hidden;
    }
    .feature-card-pro:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        border-color: var(--brand-orange);
    }
    .icon-circle {
        width: 70px; height: 70px; background: #fff7ed;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 28px; color: var(--brand-orange); margin-bottom: 25px;
        transition: 0.3s;
    }
    .feature-card-pro:hover .icon-circle { background: var(--brand-orange); color: white; }

    /* --- ৪. ডেভেলপার এপিআই সেকশন --- */
    .dev-section { background: #f8fafc; padding: 100px 0; }
    .code-window {
        background: #1e293b; border-radius: 15px; overflow: hidden;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    }
    .code-header {
        background: #0f172a; padding: 15px 20px; display: flex; gap: 8px;
    }
    .dot { width: 12px; height: 12px; border-radius: 50%; }
    .code-body { padding: 25px; font-family: 'Courier New', monospace; color: #e2e8f0; font-size: 14px; }

    /* --- [নতুন] ৫. ডাউনলোড কার্ড সেকশন --- */
    .download-card {
        background: white; border-radius: 16px; padding: 25px;
        border: 1px solid #e2e8f0; transition: 0.3s;
        display: flex; align-items: center; gap: 20px;
    }
    .download-card:hover {
        transform: translateY(-5px);
        border-color: var(--brand-blue);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    }
    .dl-icon {
        width: 60px; height: 60px; border-radius: 12px;
        display: flex; align-items: center; justify-content: center;
        font-size: 30px; flex-shrink: 0;
    }
    .wp-icon { background: #e0f2fe; color: #0284c7; }
    .whmcs-icon { background: #dcfce7; color: #16a34a; }

    /* --- ৬. প্রাইসিং সেকশন --- */
    .pricing-card {
        background: #fff; border-radius: 24px; padding: 50px 30px;
        text-align: center; border: 1px solid #e2e8f0; height: 100%;
        transition: 0.4s; position: relative;
    }
    .pricing-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
    
    .pricing-card.popular {
        border: 2px solid var(--brand-orange);
        box-shadow: 0 15px 30px rgba(255, 107, 0, 0.1);
    }
    .badge-popular {
        position: absolute; top: 0; right: 30px; background: var(--brand-orange);
        color: white; padding: 8px 15px; font-size: 12px; font-weight: 800;
        border-radius: 0 0 10px 10px;
    }
    
    .price-box {
        background: #fff5ed; border-radius: 15px; padding: 25px 10px; margin: 30px 0;
    }
    .price-amount { font-size: 48px; font-weight: 800; color: var(--brand-orange); line-height: 1; }
    .check-list li {
        margin-bottom: 15px; display: flex; align-items: center; color: var(--text-gray); font-weight: 500;
    }
    .check-list li i { color: #16a34a; margin-right: 10px; font-size: 18px; }

    .btn-solid {
        background: var(--brand-orange); color: white; width: 100%;
        padding: 15px; border-radius: 12px; font-weight: 700; border: none;
    }
    .btn-outline {
        background: transparent; border: 2px solid var(--brand-blue); color: var(--brand-blue);
        width: 100%; padding: 15px; border-radius: 12px; font-weight: 700; transition: 0.3s;
    }
    .btn-outline:hover { background: var(--brand-blue); color: white; }

    /* --- ৭. ইউজ কেস --- */
    .use-case-img {
        height: 250px; width: 100%; object-fit: cover; border-radius: 15px;
        transition: 0.5s;
    }
    .use-case-card:hover .use-case-img { transform: scale(1.05); }
    .use-case-card { overflow: hidden; border-radius: 15px; position: relative; }
    .use-case-overlay {
        position: absolute; bottom: 0; left: 0; right: 0;
        background: linear-gradient(to top, black, transparent);
        padding: 30px 20px; color: white;
    }
</style>

<div class="hero-wrapper">
    <div class="hero-blob blob-1"></div>
    <div class="hero-blob blob-2"></div>
    <div class="container hero-content">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <div class="d-inline-block px-3 py-1 rounded-pill bg-white bg-opacity-10 border border-white border-opacity-20 mb-4">
                    <span class="text-warning me-2"><i class="fas fa-star"></i></span> বাংলাদেশের #১ এসএমএস গেটওয়ে
                </div>
                <h1 class="display-3 fw-bold mb-4" style="line-height: 1.2;">আপনার ব্যবসার জন্য <br><span style="color:var(--brand-orange)">স্মার্ট কমিউনিকেশন</span></h1>
                <p class="lead opacity-75 mb-5">নির্ভরযোগ্য বাল্ক এসএমএস, ওটিপি সার্ভিস এবং এপিআই সলিউশন। ১০,০০০+ ব্র্যান্ড আমাদের ওপর আস্থা রেখেছে।</p>
                <div class="d-flex gap-3 flex-wrap">
                    <a href="{{ route('login') }}" class="btn btn-solid px-5" style="width: auto;">ফ্রি একাউন্ট খুলুন</a>
                    <a href="https://www.youtube.com/@official.creativedesign" class="btn btn-outline-light px-4" style="border-radius: 12px; padding: 15px;">
                        <i class="fas fa-play-circle me-2"></i> ভিডিও ডেমো
                    </a>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-img-box">
                    <img src="{{ asset('assets/images/smsgateway.avif') }}" class="img-fluid rounded-3" alt="SMS Dashboard">
                    
                    <div class="position-absolute bg-white text-dark p-3 rounded-3 shadow-lg" style="bottom: 20px; left: -20px; width: 200px;">
                        <div class="d-flex align-items-center gap-3">
                            <div class="bg-success rounded-circle p-2 text-white"><i class="fas fa-check"></i></div>
                            <div>
                                <h6 class="mb-0 fw-bold">মেসেজ সেন্ট</h6>
                                <small class="text-muted">মাত্রই ডেলিভার হয়েছে</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="stats-container">
        <div class="row text-center divide-cols">
            <div class="col-md-3 col-6 mb-4 mb-md-0">
                <h2 class="fw-bold mb-0 text-dark">৯৯.৯%</h2>
                <p class="text-muted small">সাকসেস রেট</p>
            </div>
            <div class="col-md-3 col-6 mb-4 mb-md-0">
                <h2 class="fw-bold mb-0 text-dark">৫০মিলি+</h2>
                <p class="text-muted small">এসএমএস ডেলিভারড</p>
            </div>
            <div class="col-md-3 col-6">
                <h2 class="fw-bold mb-0 text-dark">৫০০০+</h2>
                <p class="text-muted small">হ্যাপি ক্লায়েন্ট</p>
            </div>
            <div class="col-md-3 col-6">
                <h2 class="fw-bold mb-0 text-dark">২৪/৭</h2>
                <p class="text-muted small">লাইভ সাপোর্ট</p>
            </div>
        </div>
    </div>
</div>

<section class="py-5 my-5">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase ls-2">আমাদের সেবাসমূহ</h6>
            <h2 class="display-5 fw-bold text-dark">কেন আমাদেরই বেছে নিবেন?</h2>
        </div>
        <div class="row g-4">
            <div class="col-lg-4 col-md-6">
                <div class="feature-card-pro">
                    <div class="icon-circle"><i class="fas fa-paper-plane"></i></div>
                    <h4 class="fw-bold mb-3">বাল্ক এসএমএস</h4>
                    <p class="text-muted">আপনার পণ্যের প্রচার বা নোটিফিকেশনের জন্য এক ক্লিকে লক্ষ লক্ষ গ্রাহকের কাছে বার্তা পাঠান।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="feature-card-pro">
                    <div class="icon-circle"><i class="fas fa-fingerprint"></i></div>
                    <h4 class="fw-bold mb-3">ব্র্যান্ড মাস্কিং</h4>
                    <p class="text-muted">আপনার কোম্পানির নামে (যেমন: 'GP', 'Uber') এসএমএস পাঠিয়ে গ্রাহকের বিশ্বাস অর্জন করুন।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="feature-card-pro">
                    <div class="icon-circle"><i class="fas fa-bolt"></i></div>
                    <h4 class="fw-bold mb-3">সুপারফাস্ট OTP</h4>
                    <p class="text-muted">২-৫ সেকেন্ডের মধ্যে ওটিপি ডেলিভারি নিশ্চিত করতে আমাদের ডেডিকেটেড রুট ব্যবহার করুন।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="feature-card-pro">
                    <div class="icon-circle"><i class="fas fa-code"></i></div>
                    <h4 class="fw-bold mb-3">স্মার্ট API</h4>
                    <p class="text-muted">যেকোনো সফটওয়্যার বা ওয়েবসাইটের সাথে আমাদের গেটওয়ে ইন্টিগ্রেট করা পানির মতো সহজ।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="feature-card-pro">
                    <div class="icon-circle"><i class="fas fa-file-invoice"></i></div>
                    <h4 class="fw-bold mb-3">ডেলিভারি রিপোর্ট</h4>
                    <p class="text-muted">প্রতিটি মেসেজ ডেলিভারি হয়েছে কি না, তার রিয়েল-টাইম রিপোর্ট দেখুন ড্যাশবোর্ডে।</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="feature-card-pro">
                    <div class="icon-circle"><i class="fas fa-calendar-alt"></i></div>
                    <h4 class="fw-bold mb-3">শিডিউল এসএমএস</h4>
                    <p class="text-muted">ভবিষ্যতের যেকোনো সময়ের জন্য মেসেজ শিডিউল করে রাখুন, সিস্টেম অটোমেটিক সেন্ড করবে।</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="dev-section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="text-primary fw-bold">DEVELOPER FRIENDLY</span>
                <h2 class="display-6 fw-bold mb-4 text-dark">মাত্র ৫ মিনিটে API কানেক্ট করুন</h2>
                <p class="lead text-muted mb-4">আমাদের রয়েছে সুবিন্যস্ত ডকুমেন্টেশন এবং রেডিমেড কোড লাইব্রেরি। PHP, Laravel, Python বা Node.js - সব ভাষাতেই সাপোর্ট পাবেন।</p>
                <ul class="list-unstyled mb-4">
                    <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> ফ্রি API কী</li>
                    <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> স্যান্ডবক্স টেস্টিং মুড</li>
                    <li class="mb-2"><i class="fas fa-check-circle text-success me-2"></i> ওয়েবহুক সাপোর্ট</li>
                </ul>
                <a href="#" class="btn btn-outline-dark rounded-pill px-4">ডকুমেন্টেশন দেখুন <i class="fas fa-arrow-right ms-2"></i></a>
            </div>
            <div class="col-lg-6">
                <div class="code-window">
                    <div class="code-header">
                        <div class="dot bg-danger"></div>
                        <div class="dot bg-warning"></div>
                        <div class="dot bg-success"></div>
                    </div>
                    <div class="code-body">
                        <span style="color:#c678dd">const</span> response = <span style="color:#c678dd">await</span> axios.post(<span style="color:#98c379">'{{ url('/') }}/api/sms/send'</span>, {<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;api_key: <span style="color:#98c379">'YOUR_SECRET_KEY'</span>,<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;message: <span style="color:#98c379">'Hello Customer, Your OTP is 1234'</span><br>
                        });<br><br>
                        console.log(response.data);
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold text-uppercase">INTEGRATIONS</h6>
            <h2 class="display-5 fw-bold text-dark">রেডিমেড প্লাগিন ডাউনলোড করুন</h2>
            <div style="width: 80px; height: 4px; background: var(--brand-orange); margin: 20px auto;"></div>
        </div>

        <div class="row g-4 justify-content-center">
            <div class="col-lg-5 col-md-6">
                <div class="download-card">
                    <div class="dl-icon wp-icon">
                        <i class="fab fa-wordpress"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="fw-bold mb-1">WordPress Plugin</h4>
                        <p class="text-muted small mb-2">WooCommerce SMS Notification & OTP</p>
                        <a href="{{ asset('assets/sms/wordpress.zip') }}" class="btn btn-sm btn-solid rounded-pill px-4">
                            <i class="fas fa-download me-1"></i> ডাউনলোড
                        </a>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 col-md-6">
                <div class="download-card">
                    <div class="dl-icon whmcs-icon">
                        <i class="fas fa-server"></i>
                    </div>
                    <div class="flex-grow-1">
                        <h4 class="fw-bold mb-1">WHMCS Module</h4>
                        <p class="text-muted small mb-2">Client Notification & Verification</p>
                        <a href="{{ asset('assets/sms/creativedesign_sms.zip') }}" class="btn btn-sm btn-outline rounded-pill px-4">
                            <i class="fas fa-download me-1"></i> ডাউনলোড
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="py-5" id="pricing">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h6 class="text-primary fw-bold">PRICING PLANS</h6>
            <h2 class="display-5 fw-bold text-dark">সেরা বাজেটে এসএমএস কিনুন</h2>
            <div style="width: 80px; height: 4px; background: var(--brand-orange); margin: 20px auto;"></div>
        </div>

        <div class="row g-4 align-items-center">
            <div class="col-lg-4">
                <div class="pricing-card">
                    <h3 class="fw-bold">স্টার্টার</h3>
                    <div class="price-box">
                        <div class="price-amount"><span class="fs-4">৳</span>৩০০০</div>
                        <p class="text-muted small mb-0 mt-2">লাইফটাইম</p>
                    </div>
                    <ul class="check-list">
                        <li><i class="fas fa-check-circle"></i> ১০,০০০ বাল্ক এসএমএস</li>
                        <li><i class="fas fa-check-circle"></i> আনলিমিটেড ভ্যালিডিটি</li>
                        <li><i class="fas fa-check-circle"></i> নন-মাস্কিং রুট</li>
                        <li><i class="fas fa-check-circle"></i> এপিআই এক্সেস</li>
                    </ul>
                    <a href="{{ route('user.recharge.index') }}" class="btn btn-outline">অর্ডার করুন</a>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="pricing-card popular" style="transform: scale(1.05);">
                    <div class="badge-popular">MOST POPULAR</div>
                    <h3 class="fw-bold">উদ্যোক্তা</h3>
                    <div class="price-box">
                        <div class="price-amount"><span class="fs-4">৳</span>৮০০০</div>
                        <p class="text-muted small mb-0 mt-2">লাইফটাইম</p>
                    </div>
                    <ul class="check-list">
                        <li><i class="fas fa-check-circle"></i> ৩০,০০০ বাল্ক এসএমএস</li>
                        <li><i class="fas fa-check-circle"></i> ডেডিকেটেড সাপোর্ট</li>
                        <li><i class="fas fa-check-circle"></i> ফাস্ট ডেলিভারি রুট</li>
                        <li><i class="fas fa-check-circle"></i> অটোমেটেড ওটিপি</li>
                        <li><i class="fas fa-check-circle"></i> হোয়াইট লেভেল প্যানেল</li>
                    </ul>
                    <a href="{{ route('user.recharge.index') }}" class="btn btn-solid">এখনই কিনুন</a>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="pricing-card">
                    <h3 class="fw-bold">বিজনেস প্রো</h3>
                    <div class="price-box">
                        <div class="price-amount"><span class="fs-4">৳</span>১৮৫০০</div>
                        <p class="text-muted small mb-0 mt-2">লাইফটাইম</p>
                    </div>
                    <ul class="check-list">
                        <li><i class="fas fa-check-circle"></i> ১,০০,০০০ এসএমএস</li>
                        <li><i class="fas fa-check-circle"></i> মাস্কিং সুবিধা (Brand Name)</li>
                        <li><i class="fas fa-check-circle"></i> হাই প্রায়োরিটি রুট</li>
                        <li><i class="fas fa-check-circle"></i> ৬ মাস ফ্রি সাপোর্ট</li>
                    </ul>
                    <a href="{{ route('user.recharge.index') }}" class="btn btn-outline">অর্ডার করুন</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 bg-light">
    <div class="container py-4">
        <h2 class="text-center fw-bold mb-5">কারা আমাদের সার্ভিস ব্যবহার করছেন?</h2>
        <div class="row g-4">
            <div class="col-md-4">
                             <div class="use-case-card">
                    <img src="{{ asset('assets/images/ecommerce.webp') }}" class="use-case-img" alt="Education">
                    <div class="use-case-overlay">
                        <h4>ইকমার্স প্রতিষ্ঠান</h4>
                        <p class="small mb-0">বাল্ক এসএমএস মারকেটিং এর জন্য।</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="use-case-card">
                    <img src="{{ asset('assets/images/school.avif') }}" class="use-case-img" alt="Education">
                    <div class="use-case-overlay">
                        <h4>শিক্ষা প্রতিষ্ঠান</h4>
                        <p class="small mb-0">ছাত্রছাত্রীদের রেজাল্ট ও নোটিশ পাঠানোর জন্য।</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="use-case-card">
                    <img src="{{ asset('assets/images/host.avif') }}" class="use-case-img" alt="Health">
                    <div class="use-case-overlay">
                        <h4>স্বাস্থ্য সেবা</h4>
                        <p class="small mb-0">অ্যাপয়েন্টমেন্ট রিমাইন্ডার ও রিপোর্ট ডেলিভারির জন্য।</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5" style="background: url('{{ asset('assets/images/back.avif') }}') center/cover fixed; position: relative;">
    <div style="position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(15, 23, 42, 0.9);"></div>
    <div class="container position-relative text-center py-5 text-white">
        <h2 class="display-5 fw-bold mb-4">আপনার ব্যবসার প্রসারে আজই যুক্ত হোন</h2>
        <p class="lead opacity-75 mb-5">কোনো সেটআপ চার্জ নেই। মাত্র ১ মিনিটে ফ্রি একাউন্ট খুলে ১০০০টি ডেমো এসএমএস পাঠানোর সুযোগ নিন।</p>
        <a href="{{ URL::to('/contact') }}" class="btn btn-lg btn-solid px-5 py-3 rounded-pill">যোগাযোগ করুন</a>
    </div>
</section>

<section class="py-5 bg-white">
    <div class="container">
        <h2 class="text-center fw-bold mb-5">সচরাচর জিজ্ঞাসিত প্রশ্ন</h2>
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="accordion" id="faqAccordion">
                    <div class="accordion-item border-0 mb-3 shadow-sm rounded">
                        <h2 class="accordion-header">
                            <button class="accordion-button fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                মাস্কিং এবং নন-মাস্কিং এসএমএস এর পার্থক্য কি?
                            </button>
                        </h2>
                        <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                            <div class="accordion-body text-muted">
                                মাস্কিং এসএমএস এ প্রাপকের মোবাইলে আপনার কোম্পানির নাম (যেমন: Bkash) ভেসে উঠবে। আর নন-মাস্কিং এ একটি সাধারণ মোবাইল নম্বর বা শর্টকোড দেখাবে।
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item border-0 mb-3 shadow-sm rounded">
                        <h2 class="accordion-header">
                            <button class="accordion-button collapsed fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                এপিআই ইন্টিগ্রেশন কি ফ্রি?
                            </button>
                        </h2>
                        <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                            <div class="accordion-body text-muted">
                                জি, আমাদের সকল প্যাকেজের সাথে এপিআই ইন্টিগ্রেশন এবং ডকুমেন্টেশন সম্পূর্ণ ফ্রি।
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection