@extends('site.layout')

@section('title', 'ফিচার — সমিতি কিপার লাইট অ্যাপের সব সুবিধা')
@section('description', 'সদস্য ব্যবস্থাপনা, সঞ্চয় জমা-উত্তোলন, DPS, FDR, শেয়ার, লোন ও কিস্তি, ডাবল-এন্ট্রি হিসাব, রিপোর্ট, SMS নোটিফিকেশন ও বিকাশ পেমেন্ট — সমিতি কিপার লাইট অ্যাপের সব ফিচার একসাথে।')
@section('canonical', route('site.features'))
@section('body-class', 'landing-page')

@php
    $nav = 'features';
    $startUrl = \Route::has('register') ? route('register') : (\Route::has('login') ? route('login') : '#');

    $highlights = [
        ['📒', 'ডাবল-এন্ট্রি হিসাব', 'প্রতিটি লেনদেন লেজারে — আয়-ব্যয় ও ব্যালেন্স সবসময় মিলে যায়'],
        ['💳', 'বিকাশ পেমেন্ট', 'ফি পরিশোধ বিকাশেই — ঘরে বসে, ব্যাংকে দৌড়াতে হয় না'],
        ['🇧🇩', 'পুরো বাংলায়', 'প্রতিটি স্ক্রিন, বোতাম ও রিপোর্ট বাংলায় — সহজ ব্যবহার'],
        ['💬', 'SMS নোটিফিকেশন', 'জমা, কিস্তি ও রিমাইন্ডার — সদস্যের মোবাইলে SMS'],
    ];

    $categories = [
        [
            'id' => 'members', 'icon' => '👥', 'title' => 'সদস্য ও সঞ্চয়', 'desc' => 'সদস্য প্রোফাইল, সঞ্চয় জমা-উত্তোলন ও রসিদ',
            'items' => [
                ['dashboard', '📊', 'স্মার্ট ড্যাশবোর্ড', 'আজকের জমা, উত্তোলন, আয়-ব্যয় ও সদস্য — এক নজরে।', ['আয়-ব্যয় কার্ড', 'দ্রুত অ্যাকশন', 'চার্ট']],
                ['members', '👤', 'সদস্য ব্যবস্থাপনা', 'সদস্যের প্রোফাইল, ছবি, নমিনি ও যোগাযোগের তথ্য — সব এক জায়গায়।', ['প্রোফাইল', 'নমিনি', 'সার্চ']],
                ['savings', '💵', 'সঞ্চয় জমা-উত্তোলন', 'সদস্য বেছে এক ট্যাপে জমা বা উত্তোলন এন্ট্রি; ব্যালেন্স অটো হিসাব।', ['জমা', 'উত্তোলন', 'ব্যালেন্স']],
                ['receipt', '🧾', 'ডিজিটাল রসিদ', 'লেনদেনের রসিদ তৈরি করে সদস্যকে শেয়ার করুন।', ['PDF/ইমেজ', 'শেয়ার']],
            ],
        ],
        [
            'id' => 'deposits', 'icon' => '🏦', 'title' => 'DPS, FDR ও শেয়ার', 'desc' => 'মেয়াদি সঞ্চয়, স্থায়ী আমানত ও শেয়ার',
            'items' => [
                ['dps', '📆', 'DPS (মেয়াদি সঞ্চয়)', 'কিস্তিভিত্তিক মেয়াদি সঞ্চয়ের হিসাব — কে কত কিস্তি দিয়েছেন, কত বাকি।', ['কিস্তি', 'মেয়াদ']],
                ['fdr', '💼', 'FDR (স্থায়ী আমানত)', 'এককালীন স্থায়ী আমানতের হিসাব ও মেয়াদ ট্র্যাকিং।', ['আমানত', 'মেয়াদ']],
                ['shares', '📈', 'শেয়ার', 'সদস্যদের শেয়ারের হিসাব — সদস্য ধরে ধরে।', ['শেয়ার', 'হিসাব']],
            ],
        ],
        [
            'id' => 'loans', 'icon' => '🤝', 'title' => 'লোন ও কিস্তি', 'desc' => 'লোন বিতরণ, কিস্তি আদায় ও বকেয়া',
            'items' => [
                ['loan_disburse', '🤝', 'লোন বিতরণ', 'সদস্যকে লোন দিন — পরিমাণ, মেয়াদ ও কিস্তির হিসাব অ্যাপেই তৈরি হয়।', ['বিতরণ', 'শিডিউল']],
                ['loan_installment', '💳', 'কিস্তি আদায়', 'প্রতিটি কিস্তির এন্ট্রি দিলে বকেয়া অটো হিসাব — কার কত বাকি, এক নজরে।', ['কিস্তি', 'বকেয়া']],
                ['loan_sms', '🔔', 'কিস্তির রিমাইন্ডার', 'কিস্তি বা বকেয়ার কথা সদস্যকে SMS-এ মনে করিয়ে দিন।', ['SMS', 'রিমাইন্ডার']],
            ],
        ],
        [
            'id' => 'report', 'icon' => '📒', 'title' => 'হিসাব ও রিপোর্ট', 'desc' => 'ডাবল-এন্ট্রি, লেজার, চার্ট ও PDF',
            'items' => [
                ['accounts', '📒', 'ডাবল-এন্ট্রি হিসাব', 'প্রতিটি লেনদেন লেজারে — আয়-ব্যয় ও ব্যালেন্স সবসময় মিলে যায়।', ['লেজার', 'ব্যালেন্স']],
                ['analytics', '📈', 'অ্যানালিটিক্স', 'আয়-ব্যয়ের ধারা ও আদায়ের হার — চার্টে।', ['চার্ট', 'PDF']],
                ['calendar', '📅', 'ক্যালেন্ডার রিপোর্ট', 'দিন ধরে ধরে আয়-ব্যয়ের পঞ্জিকা।', ['দৈনিক', 'মাসিক']],
                ['money_history', '📜', 'লেনদেনের ইতিহাস', 'সব লেনদেনের সময়ক্রম।', ['ফিল্টার', 'সার্চ']],
            ],
        ],
        [
            'id' => 'system', 'icon' => '⚙️', 'title' => 'পেমেন্ট ও সাপোর্ট', 'desc' => 'বিকাশ, SMS ও নোটিফিকেশন',
            'items' => [
                ['billing_overview', '💳', 'বিকাশ পেমেন্ট', 'ফি পরিশোধ বিকাশেই — ইনভয়েস অ্যাপে।', ['ইনভয়েস', 'বিকাশ']],
                ['notifications', '🔔', 'নোটিফিকেশন', 'বকেয়া, কিস্তি ও জরুরি আপডেট।', ['রিমাইন্ডার']],
                ['sms_send_sheet', '💬', 'SMS নোটিফিকেশন', 'জমা-উত্তোলন ও কিস্তির SMS সদস্যের মোবাইলে।', ['অটো', 'লগ']],
                ['support_chat', '🆘', 'সাপোর্ট চ্যাট', 'অ্যাপ থেকেই সহায়তা নিন।', ['লাইভ', 'টিকেট']],
            ],
        ],
    ];

    $more = [
        ['☁️', 'ক্লাউড ব্যাকআপ', 'এনক্রিপ্টেড ও নিরাপদ, অটো ব্যাকআপ'],
        ['👥', 'স্টাফ পারমিশন', 'ম্যানেজার/হিসাবরক্ষক রোল'],
        ['📄', 'PDF রিপোর্ট', 'রিপোর্ট ডাউনলোড ও শেয়ার'],
        ['🏆', 'অ্যাচিভমেন্ট', 'লক্ষ্য ও মাইলফলক'],
        ['🔐', 'PIN লগইন', 'নিরাপদ দ্রুত লগইন'],
        ['📱', 'OTP সাইন আপ', 'মোবাইল নম্বর দিয়ে শুরু'],
    ];

@endphp

@push('head')
    @include('site._features-styles')
@endpush

@push('jsonld')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org', '@type' => 'BreadcrumbList',
    'itemListElement' => [
        ['@type'=>'ListItem','position'=>1,'name'=>'হোম','item'=>url('/')],
        ['@type'=>'ListItem','position'=>2,'name'=>'ফিচার','item'=>route('site.features')],
    ],
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@section('content')
<section class="feat-hero">
    <div class="wrap">
        <div class="breadcrumb"><a href="{{ url('/') }}">হোম</a> / ফিচার</div>
        <span class="pill">১৫+ মডিউল • বাংলায় • ডাবল-এন্ট্রি হিসাব</span>
        <h1>আপনার সমিতির<br>সব টুল এক অ্যাপে</h1>
        <p class="lead">সদস্য থেকে সঞ্চয়, লোন থেকে রিপোর্ট — সমবায় সমিতি ও সঞ্চয় দলের প্রতিদিনের কাজ সহজ করতে তৈরি।</p>
        <div class="feat-hero-pills">
            <span>👥 সদস্য ও সঞ্চয়</span>
            <span>🏦 DPS + FDR + শেয়ার</span>
            <span>🤝 লোন ও কিস্তি</span>
            <span>🇧🇩 সম্পূর্ণ বাংলায়</span>
        </div>
        <div class="feat-hero-cta">
            <a href="{{ $downloadUrl }}" class="btn btn-white">📲 অ্যাপ সম্পর্কে জানুন</a>
            <a href="#feat-members" class="btn btn-outline-white">ফিচার ব্রাউজ করুন ↓</a>
        </div>
    </div>
</section>

<section class="feat-highlights-band" aria-label="মূল সুবিধা">
    <div class="wrap">
        <div class="feat-highlights reveal">
            @foreach ($highlights as [$ic, $t, $d])
                <div class="feat-hl">
                    <div class="hl-ic">{{ $ic }}</div>
                    <h3>{{ $t }}</h3>
                    <p>{{ $d }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<div class="feat-cats-wrap">
    <div class="feat-cats" id="feat-cats">
        <button type="button" class="feat-cat on" data-cat="all">সব</button>
        @foreach ($categories as $cat)
            <button type="button" class="feat-cat" data-cat="{{ $cat['id'] }}">{{ $cat['icon'] }} {{ $cat['title'] }}</button>
        @endforeach
    </div>
</div>

@include('site._features-body')
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function(){
        var cats = document.getElementById('feat-cats');
        if (!cats) return;

        cats.addEventListener('click', function(e){
            var btn = e.target.closest('.feat-cat');
            if (!btn) return;
            var cat = btn.getAttribute('data-cat');
            cats.querySelectorAll('.feat-cat').forEach(function(b){ b.classList.toggle('on', b === btn); });
            document.querySelectorAll('.feat-group[data-group]').forEach(function(g){
                g.style.display = (cat === 'all' || g.getAttribute('data-group') === cat) ? '' : 'none';
            });
            if (cat !== 'all') {
                var el = document.getElementById('feat-' + cat);
                if (el) {
                    var top = el.getBoundingClientRect().top + window.scrollY - 112;
                    window.scrollTo({ top: top, behavior: 'smooth' });
                }
            } else {
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
        });
    });
</script>
@endpush