@extends('layouts.app')

@section('title', 'About')

@section('content')
    <section class="section" style="background: linear-gradient(140deg, #f2ecff, #ffffff 58%);">
        <div class="container">
            <div class="hero-chip" style="color:#3c2a64; border-color:#ddd6f2; background:#f7f4ff;">{{ $about['subtitle'] ?? 'Tentang Kami' }}</div>
            <h1 class="section-title" style="max-width:840px;">{{ $about['title'] ?? 'Siapa Kami?' }}</h1>
            <p class="section-subtitle" style="max-width:960px; margin:0;">{{ $about['description'] ?? 'PT Paradigma Niaga Sejahtera adalah perusahaan Marketing & Sales produk FMCG berbasis digital.' }}</p>
        </div>
    </section>

    <section class="section">
        <div class="container grid grid-2">
            <article class="card">
                <h3 style="margin-top:0;">Visi Kami</h3>
                <p class="muted">Menjadi perusahaan FMCG lokal ternama dengan ekosistem bisnis yang solid dan sinergis di seluruh Indonesia.</p>
            </article>
            <article class="card">
                <h3 style="margin-top:0;">Misi Kami</h3>
                <ul class="muted" style="margin:0; padding-left:18px;">
                    <li>Mengembangkan ekosistem bisnis yang memberdayakan manusia.</li>
                    <li>Menghadirkan produk berkualitas yang bermanfaat dan dicintai customer.</li>
                    <li>Membangun kebermanfaatan sosial untuk masyarakat luas.</li>
                    <li>Menciptakan sistem marketing dan sales berbasis data yang sustainable.</li>
                </ul>
            </article>
        </div>
    </section>

    <section class="section section-alt">
        <div class="container">
            <div class="section-head">
                <h2 class="section-title">Nilai Perusahaan - <span class="text-gradient">PARA</span></h2>
            </div>
            @php
                $values = [
                    ['letter' => 'P', 'title' => 'Professional', 'desc' => 'Bekerja dengan standar tinggi, integritas, dan akuntabilitas.'],
                    ['letter' => 'A', 'title' => 'Agile', 'desc' => 'Cepat beradaptasi, responsif terhadap perubahan market.'],
                    ['letter' => 'R', 'title' => 'Religious', 'desc' => 'Menjunjung nilai spiritual, etika, dan keberkahan dalam bisnis.'],
                    ['letter' => 'A', 'title' => 'Accountable', 'desc' => 'Bertanggung jawab atas setiap target, keputusan, dan hasil.'],
                ];
            @endphp
            <div class="grid grid-4">
                @foreach ($values as $value)
                    <article class="card" style="text-align:center;">
                        <div class="brand-icon">{{ $value['letter'] }}</div>
                        <h3 style="margin:0 0 6px;">{{ $value['title'] }}</h3>
                        <p class="muted" style="margin:0;">{{ $value['desc'] }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    @if (! empty($culture))
        <section class="section">
            <div class="container">
                <div class="section-head">
                    <h2 class="section-title">Budaya Kerja</h2>
                </div>
                <div class="grid grid-2">
                    @foreach ($culture as $item)
                        <article class="card">
                            <h3 style="margin-top:0;">{{ data_get($item, 'title') }}</h3>
                            <p class="muted" style="margin:0;">{{ data_get($item, 'content') }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if (! empty($certifications))
        <section class="section section-alt">
            <div class="container">
                <div class="section-head">
                    <h2 class="section-title">Sertifikasi</h2>
                </div>
                <div class="grid grid-3">
                    @foreach ($certifications as $item)
                        <article class="card" style="text-align:center;">
                            <div class="brand-icon" style="margin-bottom:10px;">OK</div>
                            <h3 style="margin:0 0 6px;">{{ data_get($item, 'title') }}</h3>
                            <p class="muted" style="margin:0;">{{ data_get($item, 'content') }}</p>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection