@extends('layouts.dashboard')

@section('title', 'Tim IT PUSKONERA')
@section('page-title', 'Tim IT PUSKONERA')

@section('content')
<div class="container py-3">
    <div class="row justify-content-center mb-4">
        <div class="col-lg-8 text-center">
            <h5 class="fw-bold text-primary mb-2">Tentang Tim Pengembang</h5>
            <p class="text-muted mb-0">
                Sistem aplikasi <strong>PUSKONERA</strong> ini dibangun secara sukarela oleh tim kecil penggiat teknologi,
                dengan harapan dapat membantu mempercepat digitalisasi dan tata kelola koperasi nelayan di Indonesia.
            </p>
        </div>
    </div>

    <div class="row g-4 justify-content-center">
        {{-- Profil 1 --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <img src="{{ asset('images/tim_it/dev1.jpg') }}"
                         alt="Foto Pengembang 1"
                         class="rounded-circle mb-3"
                         style="width: 96px; height: 96px; object-fit: cover;">

                    <h6 class="fw-bold mb-1">Nama Pengembang 1</h6>
                    <div class="text-primary small mb-2">Software Engineer · Backend</div>
                    <p class="text-muted small mb-3">
                        Fokus merancang arsitektur sistem, API, dan integrasi basis data
                        agar aplikasi PUSKONERA stabil, aman, dan mudah dikembangkan.
                    </p>

                    <div class="small text-muted">
                        <i class="bi bi-envelope me-1"></i> dev1@example.com
                    </div>
                </div>
            </div>
        </div>

        {{-- Profil 2 --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <img src="{{ asset('images/tim_it/dev2.jpg') }}"
                         alt="Foto Pengembang 2"
                         class="rounded-circle mb-3"
                         style="width: 96px; height: 96px; object-fit: cover;">

                    <h6 class="fw-bold mb-1">Nama Pengembang 2</h6>
                    <div class="text-primary small mb-2">UI/UX & Frontend</div>
                    <p class="text-muted small mb-3">
                        Mengatur tampilan dan pengalaman pengguna agar pengurus dan anggota
                        koperasi bisa menggunakan aplikasi dengan mudah di berbagai perangkat.
                    </p>

                    <div class="small text-muted">
                        <i class="bi bi-envelope me-1"></i> dev2@example.com
                    </div>
                </div>
            </div>
        </div>

        {{-- Profil 3 --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body text-center">
                    <img src="{{ asset('images/tim_it/dev3.jpg') }}"
                         alt="Foto Pengembang 3"
                         class="rounded-circle mb-3"
                         style="width: 96px; height: 96px; object-fit: cover;">

                    <h6 class="fw-bold mb-1">Nama Pengembang 3</h6>
                    <div class="text-primary small mb-2">Analisis Sistem & Support</div>
                    <p class="text-muted small mb-3">
                        Membantu menganalisa kebutuhan koperasi, menyusun alur bisnis,
                        serta mendampingi implementasi di lapangan.
                    </p>

                    <div class="small text-muted">
                        <i class="bi bi-envelope me-1"></i> dev3@example.com
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Pesan harapan --}}
    <div class="row justify-content-center mt-4">
        <div class="col-lg-8">
            <div class="alert alert-info border-0 shadow-sm small">
                <div class="d-flex">
                    <div class="me-2">
                        <i class="bi bi-heart-fill text-danger"></i>
                    </div>
                    <div>
                        <strong>Harapan kami:</strong>
                        <span class="text-muted">
                            Semoga aplikasi PUSKONERA bisa menjadi salah satu alat bantu kecil
                            untuk memperkuat kelembagaan, transparansi, dan kemajuan koperasi
                            nelayan di seluruh Indonesia.
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection