@extends('frontend.layouts.main')
@section('title', 'Tentang Kami — ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@push('styles')
<style>
/* ── HERO ── */
.about-hero {
    background: linear-gradient(135deg, #1a3a6b 0%, #2563eb 60%, #1e4db7 100%);
    padding: 56px 0 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.about-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.about-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 14px;
}
.about-hero p {
    font-size: 16px;
    color: rgba(255,255,255,.72);
    margin: 0;
}

/* ── PROFIL SECTION ── */
.profil-section {
    padding: 56px 0;
    background: var(--white);
}
.profil-img-wrap {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-xl);
}
.profil-img-wrap img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    display: block;
}
.profil-content h2 {
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--c-900);
    margin-bottom: 6px;
}
.profil-underline {
    width: 48px;
    height: 3px;
    background: var(--c-blue);
    border-radius: 2px;
    margin-bottom: 20px;
}
.profil-content p {
    font-size: 14.5px;
    color: var(--c-500);
    line-height: 1.85;
    margin-bottom: 14px;
}
.profil-content p:last-child { margin-bottom: 0; }

/* ── MITRA SECTION ── */
.mitra-section {
    padding: 56px 0;
    background: var(--c-50);
}
.mitra-img-wrap {
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--sh-xl);
}
.mitra-img-wrap img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    display: block;
}
.mitra-content h2 {
    font-size: clamp(1.3rem, 3vw, 1.75rem);
    font-weight: 800;
    color: var(--c-900);
    margin-bottom: 4px;
}
.mitra-subtitle {
    font-size: 11.5px;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.mitra-subtitle::after {
    content: '';
    flex: 0 0 40px;
    height: 2px;
    background: #f59e0b;
    border-radius: 1px;
}
.mitra-content p {
    font-size: 14.5px;
    color: var(--c-500);
    line-height: 1.85;
    margin-bottom: 14px;
}
.mitra-content p:last-child { margin-bottom: 0; }

/* ── VISI MISI ── */
.visi-misi-section {
    padding: 56px 0;
    background: var(--white);
}

/* ── STATS ── */
.stats-section {
    padding: 56px 0;
    background: var(--c-50);
}
.stat-card {
    background: var(--white);
    border: 1px solid var(--c-200);
    border-radius: var(--r-lg);
    padding: 28px 22px;
    text-align: center;
    transition: var(--tr);
}
.stat-card:hover {
    box-shadow: var(--sh-lg);
    transform: translateY(-4px);
}
.stat-icon {
    width: 52px; height: 52px;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.stat-num {
    font-family: var(--ff-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--c-900);
    line-height: 1;
}
.stat-label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-800);
    margin: 6px 0 4px;
}
.stat-desc {
    font-size: 12.5px;
    color: var(--c-400);
}

/* ── KEUNGGULAN ── */
.unggulan-section {
    padding: 56px 0;
    background: var(--white);
}
.unggulan-card {
    background: var(--white);
    border: 1px solid var(--c-200);
    border-radius: var(--r-lg);
    padding: 24px;
    height: 100%;
    transition: var(--tr);
}
.unggulan-card:hover {
    box-shadow: var(--sh-lg);
    transform: translateY(-4px);
}
.unggulan-icon {
    width: 44px; height: 44px;
    background: var(--c-blue-xs);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.unggulan-icon i { color: var(--c-blue); font-size: 1rem; }
.unggulan-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--c-900);
    margin-bottom: 7px;
}
.unggulan-desc {
    font-size: 13.5px;
    color: var(--c-500);
    line-height: 1.65;
    margin: 0;
}

/* ── CTA ── */
.cta-section {
    padding: 48px 0;
    background: var(--c-navy);
}
</style>
@endpush

@section('content')

{{-- HERO --}}
<section class="about-hero">
    <div class="container position-relative" style="z-index:2;">
        <h1>Tentang {{ $seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi' }}</h1>
        <p>Lembaga Pelatihan Kerja Terpercaya Sejak {{ $aboutUs->year_of_establishment ?? '2014' }}</p>
    </div>
</section>

{{-- PROFIL PERUSAHAAN --}}
<section class="profil-section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5" data-aos="fade-right">
                <div class="profil-img-wrap">
                    <img src="{{ about_image('images/about.jpg') }}"
                         alt="Profil Perusahaan"
                         onerror="this.src='https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&h=600&fit=crop'">
                </div>
            </div>
            <div class="col-lg-7" data-aos="fade-left">
                <div class="profil-content">
                    <h2>Profil Perusahaan</h2>
                    <div class="profil-underline"></div>
                    @if($aboutUs && $aboutUs->content)
                        {!! $aboutUs->content !!}
                    @else
                        <p>{{ $seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi' }} adalah Lembaga Penyalur Tenaga Kerja Luar Negeri yang telah berpengalaman lebih dari 10 tahun dalam menghasilkan tenaga kerja profesional dan berkualitas Serta Di Proses Secara Resmi.</p>
                        <p>Kami berkomitmen untuk memberikan pelatihan terbaik dengan kurikulum yang selalu update mengikuti perkembangan industri dan kebutuhan pasar kerja.</p>
                        <p>Dengan instruktur berpengalaman dan fasilitas modern, kami telah meluluskan ribuan alumni yang sukses berkarir di berbagai perusahaan ternama.</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
</section>

{{-- MITRA PELATIHAN --}}
<section class="mitra-section">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5 order-lg-2" data-aos="fade-left">
                <div class="mitra-img-wrap">
                    <img src="{{ about_image('images/partner.jpg') }}"
                         alt="Mitra Pelatihan"
                         onerror="this.src='https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&h=600&fit=crop'">
                </div>
            </div>
            <div class="col-lg-7 order-lg-1" data-aos="fade-right">
                <div class="mitra-content">
                    <h2>Mitra Pelatihan</h2>
                    <div class="mitra-subtitle">LPK VEGA FIRDAUS</div>
                    <p>Kami telah menjalin kerjasama erat dengan berbagai instansi dan perusahaan terkemuka, baik di dalam maupun di luar negeri, untuk memastikan setiap lulusan mendapatkan penempatan kerja yang tepat.</p>
                    <p>Dukungan penuh dari P3MI (Perusahaan Penempatan Pekerja Migran Indonesia) yang resmi dan kredibel menjadi salah satu pilar utama kesuksesan program kami.</p>
                    <p>Bersama mitra-mitra strategis ini, kami terus berupaya membuka peluang karir global yang aman, menjanjikan, dan berkelanjutan bagi seluruh peserta pelatihan.</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- VISI MISI --}}
<section class="visi-misi-section">
    <div class="container">
        <div class="text-center mb-4" data-aos="fade-up">
            <div class="eyebrow mx-auto" style="width:fit-content;"><i class="fas fa-compass" style="font-size:9px;"></i> Arah & Tujuan</div>
            <h2 class="section-title mt-2">Visi &amp; Misi Kami</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-6" data-aos="fade-right">
                <div style="background:var(--c-navy);border-radius:var(--r-xl);padding:36px;height:100%;">
                    <div style="width:48px;height:48px;background:rgba(37,99,235,.28);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px;">
                        <i class="fas fa-eye" style="color:#60a5fa;font-size:1.1rem;"></i>
                    </div>
                    <h3 style="font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:10px;">Visi Kami</h3>
                    <p style="font-size:14.5px;color:rgba(255,255,255,.65);line-height:1.8;margin:0;">{{ $aboutUs->vision ?? 'Menjadi lembaga pelatihan kerja terdepan yang menghasilkan tenaga kerja profesional dan berdaya saing global.' }}</p>
                </div>
            </div>
            <div class="col-md-6" data-aos="fade-left">
                <div style="background:var(--c-teal);border-radius:var(--r-xl);padding:36px;height:100%;">
                    <div style="width:48px;height:48px;background:rgba(255,255,255,.18);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin-bottom:18px;">
                        <i class="fas fa-bullseye" style="color:#fff;font-size:1.1rem;"></i>
                    </div>
                    <h3 style="font-size:1.15rem;font-weight:800;color:#fff;margin-bottom:10px;">Misi Kami</h3>
                    <p style="font-size:14.5px;color:rgba(255,255,255,.8);line-height:1.8;margin:0;">{{ $aboutUs->mission ?? 'Menyelenggarakan pelatihan berkualitas, membangun kemitraan strategis, dan mendukung penempatan kerja bagi seluruh alumni.' }}</p>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- STATS --}}
<section class="stats-section">
    <div class="container">
        <div class="text-center mb-4" data-aos="fade-up">
            <div class="eyebrow mx-auto" style="width:fit-content;"><i class="fas fa-chart-bar" style="font-size:9px;"></i> Pencapaian</div>
            <h2 class="section-title mt-2">Angka yang Berbicara</h2>
        </div>
        <div class="row g-4">
            @php $stats = [
                ['fas fa-users','#2563eb','#eff6ff', $aboutUs->total_students ?? 5000, 'Siswa Lulus', 'Alumni aktif di berbagai industri'],
                ['fas fa-chalkboard-teacher','#0d9488','#f0fdfa', $aboutUs->total_trainers ?? 50, 'Instruktur', 'Praktisi berpengalaman'],
                ['fas fa-book-open','#d97706','#fffbeb', $aboutUs->total_programs ?? 25, 'Program Aktif', 'Berbagai pilihan bidang'],
                ['fas fa-building','#7c3aed','#f5f3ff', 50, 'Perusahaan Mitra', 'Jaringan penempatan kerja'],
            ]; @endphp
            @foreach($stats as $idx => $s)
            <div class="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="{{ $idx*80 }}">
                <div class="stat-card">
                    <div class="stat-icon" style="background:{{ $s[2] }};">
                        <i class="{{ $s[0] }}" style="color:{{ $s[1] }};font-size:1.15rem;"></i>
                    </div>
                    <div class="counter stat-num" data-target="{{ $s[3] }}">{{ number_format($s[3]) }}</div>
                    <div class="stat-label">{{ $s[4] }}</div>
                    <div class="stat-desc">{{ $s[5] }}</div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- KEUNGGULAN --}}
<section class="unggulan-section">
    <div class="container">
        <div class="text-center mb-4" data-aos="fade-up">
            <div class="eyebrow mx-auto" style="width:fit-content;"><i class="fas fa-star" style="font-size:9px;"></i> Keunggulan</div>
            <h2 class="section-title mt-2">Mengapa Pilih Kami?</h2>
        </div>
        <div class="row g-4">
            @php $items = [
                ['fas fa-certificate','Sertifikasi BNSP','Sertifikat kompetensi resmi diakui di seluruh Indonesia'],
                ['fas fa-user-tie','Instruktur Berpengalaman','Diajarkan oleh praktisi industri dengan rekam jejak nyata'],
                ['fas fa-laptop-code','Fasilitas Modern','Lab komputer lengkap dan peralatan praktik terkini'],
                ['fas fa-briefcase','Job Placement','Bantuan aktif penempatan kerja ke perusahaan mitra'],
                ['fas fa-users','Kelas Kecil','Maks. 30 peserta untuk pembelajaran optimal dan personal'],
                ['fas fa-project-diagram','Project Based','80% praktek langsung dengan proyek nyata'],
            ]; @endphp
            @foreach($items as $idx => $it)
            <div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ $idx*60 }}">
                <div class="unggulan-card">
                    <div class="unggulan-icon">
                        <i class="{{ $it[0] }}"></i>
                    </div>
                    <div class="unggulan-title">{{ $it[1] }}</div>
                    <p class="unggulan-desc">{{ $it[2] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- KONTAK INFO --}}
<section style="padding:56px 0;background:var(--c-50);">
    <div class="container">
        <div class="text-center mb-4" data-aos="fade-up">
            <div class="eyebrow mx-auto" style="width:fit-content;"><i class="fas fa-phone" style="font-size:9px;"></i> Kontak</div>
            <h2 class="section-title mt-2">Hubungi Kami</h2>
        </div>
        <div class="row g-4">
            @php $cinfo = [
                ['fas fa-map-marker-alt','#2563eb','#eff6ff','Alamat', $contactInfo->address ?? '-'],
                ['fas fa-phone-alt','#0d9488','#f0fdfa','Telepon', $contactInfo->phone ?? '-'],
                ['fas fa-envelope','#d97706','#fffbeb','Email', $contactInfo->email ?? '-'],
            ]; @endphp
            @foreach($cinfo as $idx => $c)
            <div class="col-md-4" data-aos="fade-up" data-aos-delay="{{ $idx*80 }}">
                <div style="text-align:center;background:var(--white);border:1px solid var(--c-200);border-radius:var(--r-lg);padding:28px 20px;">
                    <div style="width:56px;height:56px;background:{{ $c[2] }};border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;">
                        <i class="{{ $c[0] }}" style="color:{{ $c[1] }};font-size:1.2rem;"></i>
                    </div>
                    <h5 style="font-size:14px;font-weight:700;color:var(--c-900);margin-bottom:7px;">{{ $c[3] }}</h5>
                    <p style="font-size:13.5px;color:var(--c-500);margin:0;">{{ $c[4] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- CTA --}}
<section class="cta-section" data-aos="fade-up">
    <div class="container">
        <div class="row align-items-center g-4">
            <div class="col-lg-8">
                <h2 style="font-size:clamp(1.4rem,3vw,1.9rem);font-weight:800;color:#fff;margin-bottom:10px;">Siap Bergabung Bersama Kami?</h2>
                <p style="color:rgba(255,255,255,.6);font-size:15px;margin:0;">Mulai perjalanan karir Anda bersama ribuan alumni sukses kami.</p>
            </div>
            <div class="col-lg-4 d-flex gap-3 justify-content-lg-end flex-wrap">
                <a href="{{ route('frontend.programs') }}" class="btn-corp btn-corp-lg btn-white">
                    <i class="fas fa-book-open"></i> Lihat Program
                </a>
            </div>
        </div>
    </div>
</section>

@endsection

@push('scripts')
<script>
const counters = document.querySelectorAll('.counter');
const obs = new IntersectionObserver(entries => {
    entries.forEach(e => {
        if (!e.isIntersecting) return;
        const el = e.target;
        const target = parseInt(el.dataset.target) || 0;
        let cur = 0;
        const step = Math.ceil(target / 60);
        const t = setInterval(() => {
            cur = Math.min(cur + step, target);
            el.textContent = cur.toLocaleString('id-ID');
            if (cur >= target) clearInterval(t);
        }, 20);
        obs.unobserve(el);
    });
}, { threshold: 0.4 });
counters.forEach(c => {
    c.dataset.target = c.textContent.replace(/[^\d]/g, '');
    c.textContent = '0';
    obs.observe(c);
});
</script>
@endpush