@extends('site.layout')

@section('title', 'আমাদের সম্পর্কে — সমিতি কিপার লাইট')
@section('description', 'সমিতি কিপার লাইট — বাংলাদেশের সমবায় সমিতি ও সঞ্চয় দলের জন্য তৈরি বাংলা হিসাব ব্যবস্থাপনা অ্যাপ। আমাদের লক্ষ্য, গল্প ও কেন আমরা আলাদা।')
@section('canonical', route('site.about'))

@php $nav = 'about'; @endphp

@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.about')],
    ],
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@section('content')
<section style="background:var(--bg-soft);padding:18px 0 8px">
    <div class="wrap">
        <div class="breadcrumb"><a href="{{ url('/') }}">হোম</a> / আমাদের সম্পর্কে</div>
        <div class="center" style="padding:36px 0 8px">
            <span class="eyebrow">আমাদের সম্পর্কে</span>
            <h1 style="font-size:2.6rem;font-weight:700;margin:10px 0">প্রযুক্তি, সহজ বাংলায়</h1>
            <p class="lead" style="margin:0 auto">আমরা বিশ্বাস করি — সমিতির হিসাব রাখা উচিত যতটা সহজ, ততটাই বিশ্বস্ত। তাই সমিতি কিপার লাইট তৈরি হয়েছে কাগজ-কলমের ঝামেলা দূর করে, সমিতির প্রতিদিনের হিসাব হাতের মুঠোয় আনতে।</p>
        </div>
    </div>
</section>

<section class="section">
    <div class="wrap">
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center" class="about-grid">
            <div class="reveal">
                <span class="eyebrow">আমাদের গল্প</span>
                <h2 style="font-size:1.8rem;margin:8px 0 12px">খাতার হিসাব থেকে স্মার্ট অ্যাপে</h2>
                <p style="color:var(--muted)">বাংলাদেশে অসংখ্য সমবায় সমিতি ও সঞ্চয় দল প্রতিদিন সদস্যের সঞ্চয়, লোন ও আয়-ব্যয়ের হিসাব রাখে খাতায় — যেখানে ভুল হয়, তথ্য হারায়, আর হিসাব মেলানো কঠিন।</p>
                <p style="color:var(--muted);margin-top:10px">সমিতি কিপার লাইট সেই হিসাবকে নিয়ে এসেছে এমন একটি অ্যাপে, যা পুরোপুরি বাংলায়, আইকন-নির্ভর এবং কম-অক্ষরজ্ঞান ব্যবহারকারীও ৫ মিনিটে শিখে নিতে পারেন — কোনো প্রশিক্ষণ ছাড়াই।</p>
            </div>
            <div class="hero-shot reveal" aria-hidden="true" style="position:relative;height:520px;width:320px;margin:0 auto">
                <style>
                    .about-shot .shot-plain{position:absolute;--shot-w:220px}
                    .about-shot .b{left:0;top:30px;transform:rotate(-5deg)}
                    .about-shot .f{right:0;top:0;z-index:2}
                </style>
                <div class="about-shot" style="position:relative;width:100%;height:100%">
                    @include('site._screenshot-plain', ['name' => 'analytics', 'alt' => 'অ্যানালিটিক্স স্ক্রিন', 'title' => 'অ্যানালিটিক্স', 'class' => 'b'])
                    @include('site._screenshot-plain', ['name' => 'dashboard', 'alt' => 'ড্যাশবোর্ড স্ক্রিন', 'title' => 'ড্যাশবোর্ড', 'class' => 'f'])
                </div>
            </div>
        </div>
    </div>
</section>

<div class="wrap"><div class="stats">
    <div class="stat"><div class="n" data-count="15" data-suf="+">০</div><div class="l">ফিচার মডিউল</div></div>
    <div class="stat"><div class="n" data-count="55" data-suf="+">০</div><div class="l">অ্যাপ স্ক্রিন</div></div>
    <div class="stat"><div class="n" data-count="4" data-suf="">০</div><div class="l">ধরনের আমানত (সঞ্চয়, DPS, FDR, শেয়ার)</div></div>
    <div class="stat"><div class="n" data-count="100" data-suf="%">০</div><div class="l">বাংলায়</div></div>
</div></div>

<section class="section">
    <div class="wrap center">
        <span class="eyebrow">কেন সমিতি কিপার লাইট</span>
        <h2 class="reveal">যা আমাদের আলাদা করে</h2>
        <div class="grid-feat">
            @php $vals = [
                ['🇧🇩','১০০% বাংলা','প্রতিটি শব্দ, সংখ্যা ও তারিখ বাংলায় — বিদেশি অ্যাপের অনুবাদ নয়।'],
                ['👆','আইকন-নির্ভর','কম-অক্ষরজ্ঞান ব্যবহারকারীর জন্য সহজ, ছবি-নির্ভর ডিজাইন।'],
                ['📒','ডাবল-এন্ট্রি হিসাব','প্রতিটি লেনদেন লেজারে — হিসাব সবসময় মিলে যায়।'],
                ['🔒','নিরাপদ তথ্য','এনক্রিপ্টেড ক্লাউড ব্যাকআপ, তথ্য কখনো হারায় না।'],
                ['💬','SMS নোটিফিকেশন','লেনদেনের খবর সদস্যের মোবাইলে — হিসাব স্বচ্ছ।'],
                ['🤝','বাংলায় সাপোর্ট','ইমেইলে আপনার ভাষায় সহায়তা।'],
            ]; @endphp
            @foreach ($vals as [$ic,$t,$d])
                <div class="feat reveal"><div class="ic">{{ $ic }}</div><h3>{{ $t }}</h3><p>{{ $d }}</p></div>
            @endforeach
        </div>
    </div>
</section>

@if (!empty($site_head_office ?? '') || !empty($site_registered_office ?? ''))
<section class="section" style="padding-top:0">
    <div class="wrap">
        <div class="reveal" style="max-width:720px;margin:0 auto">
            <span class="eyebrow">যোগাযোগ / অফিস</span>
            <h2 style="font-size:1.8rem;margin:8px 0 16px">আমাদের অফিস</h2>
            <div style="display:grid;gap:16px">
                @if (!empty($site_head_office ?? ''))
                    <div style="background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px">
                        <strong style="display:block;font-size:.92rem;color:var(--ink);margin-bottom:6px">Head Office</strong>
                        <p style="margin:0;color:var(--muted);font-size:.95rem;line-height:1.6">{{ $site_head_office }}</p>
                    </div>
                @endif
                @if (!empty($site_registered_office ?? ''))
                    <div style="background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px">
                        <strong style="display:block;font-size:.92rem;color:var(--ink);margin-bottom:6px">Registered Office</strong>
                        <p style="margin:0;color:var(--muted);font-size:.95rem;line-height:1.6">{{ $site_registered_office }}</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

<section class="section" style="padding-top:0"><div class="wrap"><div class="cta">
    <h2>আপনার সমিতির হিসাবও ডিজিটাল হোক</h2>
    <p>আজই শুরু করুন — খাতার ঝামেলা ছাড়াই।</p>
    <div style="display:flex;gap:12px;justify-content:center;flex-wrap:wrap">
        <a href="{{ $downloadUrl }}" class="btn btn-primary">📲 অ্যাপ সম্পর্কে জানুন</a>
        <a href="{{ $startUrl }}" class="btn btn-ghost">ওয়েব থেকে শুরু করুন</a>
        <a href="{{ route('site.contact') }}" class="btn btn-ghost">যোগাযোগ করুন</a>
    </div>
</div></div></section>
@endsection