{{-- TODO(somity): App\Models\CaseStudy::DEFAULTS (and the seeded `case_studies` DB rows)
     still contain the old auto/garage stories. Until the model defaults and seed data
     are rewritten, this section uses inline generic somity scenarios instead of
     CaseStudy::forDisplay(). Restore the model call once that data is rebranded. --}}
@php($caseStudies = collect([
    ['icon' => '🧮', 'title' => 'খাতার হিসাবে গরমিল', 'owner' => 'সাধারণ চিত্র: ছোট সঞ্চয় সমিতি',
        'problem' => 'খাতায় হাতে যোগ-বিয়োগ — মাস শেষে সদস্যের জমা আর ক্যাশ মিলত না, গরমিল থেকে যেত।',
        'solution' => 'প্রতিটি জমা-উত্তোলন অ্যাপে এন্ট্রি হয়, ব্যালেন্স স্বয়ংক্রিয় হিসাব — কোনো ম্যানুয়াল যোগ-বিয়োগ নেই।',
        'result' => 'হিসাবের গরমিল প্রায় শূন্য।'],
    ['icon' => '💸', 'title' => 'কিস্তির বকেয়া হারিয়ে যাওয়া', 'owner' => 'সাধারণ চিত্র: লোন কার্যক্রম চালানো সমিতি',
        'problem' => 'কোন সদস্যের কত কিস্তি বাকি — মনে রাখা যেত না, আদায় পিছিয়ে যেত।',
        'solution' => 'বকেয়া সদস্য অ্যাপে লাল দেখায়, SMS রিমাইন্ডার সময়মতো চলে যায়।',
        'result' => 'কিস্তি আদায়ের হার বেড়ে যায়।'],
    ['icon' => '💬', 'title' => 'সদস্যের সন্দেহ ও অনাস্থা', 'owner' => 'সাধারণ চিত্র: পাড়াভিত্তিক সমবায়',
        'problem' => 'সদস্য জানতে চান তাঁর জমা কত — খাতা দেখিয়ে প্রমাণ দেওয়া কঠিন, অনাস্থা তৈরি হতো।',
        'solution' => 'প্রতিটি লেনদেনে সদস্যের ফোনে SMS নিশ্চিতকরণ, সাথে ডিজিটাল রসিদ।',
        'result' => 'হিসাব স্বচ্ছ, সদস্যের আস্থা ফিরে আসে।'],
    ['icon' => '📚', 'title' => 'সঞ্চয়, DPS, FDR — আলাদা খাতার জট', 'owner' => 'সাধারণ চিত্র: একাধিক স্কিম চালানো সমিতি',
        'problem' => 'সাধারণ সঞ্চয়, DPS, FDR ও শেয়ারের আলাদা আলাদা খাতা — মাস শেষে মেলাতে গিয়ে সব গুলিয়ে যেত।',
        'solution' => 'সব স্কিম এক অ্যাপে, সদস্য ধরে ধরে — প্রতিটির ব্যালেন্স আলাদা দেখা যায়।',
        'result' => 'পুরো সমিতির হিসাব এক জায়গায়।'],
    ['icon' => '🗺️', 'title' => 'এলাকা ধরে আদায়ে বিশৃঙ্খলা', 'owner' => 'সাধারণ চিত্র: কয়েকটি গ্রাম জুড়ে সমিতি',
        'problem' => 'কোন এলাকায় কার কাছে কত আদায় বাকি — আদায়কারীর কাছে পরিষ্কার তালিকা থাকত না।',
        'solution' => 'এরিয়া-ভিত্তিক কালেকশন লিস্ট — আদায়কারী এলাকা ধরে ধরে আদায় করেন, এন্ট্রি তখনই অ্যাপে।',
        'result' => 'আদায় গোছানো, সময় বাঁচে।'],
    ['icon' => '🌙', 'title' => 'মাস শেষে রাত জেগে ব্যালেন্স মেলানো', 'owner' => 'সাধারণ চিত্র: কমিটির মাসিক মিটিং',
        'problem' => 'মাস শেষে আয়-ব্যয় আর ব্যালেন্স মেলাতে ঘণ্টার পর ঘণ্টা — তবু ভুল থেকে যেত।',
        'solution' => 'ডাবল-এন্ট্রি লেজার ও ব্যালেন্স শীট স্বয়ংক্রিয় তৈরি হয়, PDF রিপোর্ট এক ক্লিকে।',
        'result' => 'ঘণ্টার কাজ এখন এক মিনিটে।'],
    ['icon' => '📴', 'title' => 'গ্রামে নেট নেই — এন্ট্রি আটকে যায়', 'owner' => 'সাধারণ চিত্র: প্রত্যন্ত এলাকার সমিতি',
        'problem' => 'আদায়ের সময় ইন্টারনেট থাকে না — এন্ট্রি পরে দিতে গিয়ে ভুল ও বাদ পড়ে যেত।',
        'solution' => 'অফলাইন মোবাইল অ্যাপ — নেট ছাড়াই এন্ট্রি, সংযোগ ফিরলেই স্বয়ংক্রিয় সিঙ্ক।',
        'result' => 'কোনো এন্ট্রি আর বাদ পড়ে না।'],
    ['icon' => '📱', 'title' => 'খাতা হারালে সব হিসাব শেষ', 'owner' => 'সাধারণ চিত্র: বছরের পুরনো হিসাব',
        'problem' => 'খাতা ভিজে গেলে, ছিঁড়ে গেলে বা হারালে — বছরের হিসাব উদ্ধারের কোনো উপায় থাকত না।',
        'solution' => 'এনক্রিপ্টেড ক্লাউড ব্যাকআপ — নতুন ফোনে লগইন করলেই সব হিসাব ফিরে আসে।',
        'result' => 'তথ্য হারানোর ভয় শেষ।'],
])->map(fn ($c) => (object) $c))
<section class="section cs-sec" id="case-studies">
    <style>
        .cs-sec{background:#fff}
        .cs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:34px}
        @media(max-width:760px){.cs-grid{grid-template-columns:1fr}}
        .cs-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:12px;transition:transform .2s,box-shadow .2s;text-align:left}
        .cs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
        .cs-top{display:flex;align-items:flex-start;gap:12px}
        .cs-ic{flex-shrink:0;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;
            background:linear-gradient(135deg,rgba(127,29,29,.10),rgba(24,24,27,.06));border:1px solid var(--line)}
        .cs-top h3{font-size:1.06rem;font-weight:700;margin:0;color:var(--ink);line-height:1.4}
        .cs-owner{font-size:.82rem;color:var(--muted);margin-top:3px}
        .cs-line{display:flex;gap:9px;font-size:.92rem;line-height:1.55}
        .cs-line .lbl{flex-shrink:0;font-weight:700;font-size:.74rem;padding:2px 9px;border-radius:999px;height:fit-content;margin-top:2px}
        .cs-line.prob .lbl{background:#fee2e2;color:#b91c1c}
        .cs-line.sol .lbl{background:#dcfce7;color:#15803d}
        .cs-line p{margin:0;color:#374151}
        .cs-res{margin-top:2px;display:inline-flex;align-items:center;gap:7px;font-size:.86rem;font-weight:600;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:7px 12px;align-self:flex-start}
    </style>
    <div class="wrap">
        <div class="center">
            <span class="eyebrow">সাধারণ সমস্যা → সমাধান</span>
            <h2 class="reveal">সমস্যা ছিল — সমাধানও আছে</h2>
            <p class="lead reveal">ভুল হিসাব, কিস্তির বকেয়া, সদস্যের অনাস্থা — সমিতি পরিচালনায় যেসব সমস্যা প্রায়ই দেখা যায়, সমিতি কিপার লাইট কীভাবে সমাধান দেয়।</p>
        </div>
        <div class="cs-grid">
            @foreach ($caseStudies as $c)
                <div class="cs-card reveal">
                    <div class="cs-top">
                        <div class="cs-ic">{{ $c->icon }}</div>
                        <div>
                            <h3>{{ $c->title }}</h3>
                            <div class="cs-owner">— {{ $c->owner }}</div>
                        </div>
                    </div>
                    <div class="cs-line prob"><span class="lbl">সমস্যা</span><p>{{ $c->problem }}</p></div>
                    <div class="cs-line sol"><span class="lbl">সমাধান</span><p>{{ $c->solution }}</p></div>
                    @if (!empty($c->result))
                        <div class="cs-res">✅ {{ $c->result }}</div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</section>