@extends('layouts.customer')

@section('title', ($about->meta_title ?? 'Tentang kami') . ' - Intisolve')
@section('meta_description', $about->meta_description ?? 'Intisolve menghadirkan berbagai solusi berkualitas untuk
    pengendalian tumpahan cairan, mitigasi banjir, serta kebutuhan pertanian.')

@section('content')
    <div class="about-page-wrapper py-5 bg-white">
        <div class="container-fluid container-wide">

            {{-- SECTION 1: HERO ABOUT --}}
            <div class="row align-items-start mb-5 pb-lg-3">
                <div class="col-lg-7 pe-lg-5 mb-4 mb-lg-0">
                    <h1 class="display-5 fw-bold text-navy mt-0 mb-4"
                        style="color: #1e3a5f; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2;">
                        {{ $about->judul_hero ?? 'Tentang Intisolve' }}
                    </h1>
                    <div class="text-secondary fs-6 lh-lg mb-4" style="color: #475569; max-width: 720px; line-height: 1.85;">
                        {!! nl2br(
                            e(
                                $about->deskripsi_hero ??
                                    'Intisolve menghadirkan berbagai solusi berkualitas untuk pengendalian tumpahan cairan (Spill Control), mitigasi banjir (Flood Mitigation), serta kebutuhan pertanian (Agriculture Solutions) yang dirancang untuk memberikan perlindungan, efisiensi, dan kemudahan dalam berbagai aplikasi.',
                            ),
                        ) !!}
                    </div>
                    <div class="d-flex flex-wrap gap-3 pt-2">
                        <a href="{{ url('/kontak') }}"
                            class="btn btn-navy-custom px-4 py-2-5 rounded-3 fw-bold shadow-sm d-inline-flex align-items-center">
                            <i class="fas fa-headset me-2"></i>
                            {{ app()->getLocale() === 'en' ? 'Contact Us' : 'Hubungi Kami' }}
                        </a>
                        <a href="{{ url('/kategori') }}"
                            class="btn btn-outline-navy px-4 py-2-5 rounded-3 fw-bold d-inline-flex align-items-center">
                            <i class="fas fa-boxes me-2"></i>
                            {{ app()->getLocale() === 'en' ? 'Explore Products' : 'Lihat Produk Solusi' }}
                        </a>
                    </div>
                </div>

                <div class="col-lg-5 text-center text-lg-end d-flex align-items-center justify-content-center justify-content-lg-end">
                    @if ($about && $about->gambar_hero && \Illuminate\Support\Facades\Storage::disk('public')->exists($about->gambar_hero))
                        <img src="{{ asset('storage/' . $about->gambar_hero) }}" alt="Tentang Intisolve"
                            class="img-fluid object-fit-contain"
                            style="max-height: 420px; width: auto; max-width: 100%;">
                    @else
                        <img src="{{ asset('img/about_hero_products.png') }}" alt="Tentang Intisolve"
                            class="img-fluid object-fit-contain"
                            style="max-height: 420px; width: auto; max-width: 100%;">
                    @endif
                </div>
            </div>

            {{-- SECTION 2: KENAPA MEMILIH INTISOLVE --}}
            <div class="my-5 py-lg-3">
                <div class="mb-4">
                    <h2 class="display-6 fw-bold text-navy mb-2" style="color: #1e3a5f; font-weight: 800;">
                        {{ $about->judul_kenapa ?? 'Kenapa Memilih Intisolve' }}
                    </h2>
                    <p class="text-secondary text-sm max-w-700 mb-0">
                        {{ app()->getLocale() === 'en' ? 'We provide reliable quality, fast service, and comprehensive solutions for your industrial needs.' : 'Komitmen kami dalam memberikan kualitas terbaik, layanan cepat, dan solusi terpercaya untuk industri Anda.' }}
                    </p>
                </div>

                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                    @php
                        $defaultIcons = [
                            'fa-shield-alt',
                            'fa-award',
                            'fa-tools',
                            'fa-truck-fast',
                            'fa-cubes',
                            'fa-user-check',
                        ];
                    @endphp
                    @forelse($kenapaPoints as $index => $point)
                        @php $icon = $defaultIcons[$index % count($defaultIcons)]; @endphp
                        <div class="col">
                            <div class="card h-100 border-0 shadow-sm rounded-4 p-4 feature-card"
                                style="background-color: #f8fafc;">
                                <div class="card-body p-0 d-flex align-items-center gap-3">
                                    <div class="icon-shape bg-navy text-white rounded-3 flex-shrink-0 d-flex align-items-center justify-content-center shadow-sm"
                                        style="width: 48px; height: 48px; background-color: #1e3a5f;">
                                        <i class="fas {{ $icon }} fs-5"></i>
                                    </div>
                                    <div>
                                        <h6 class="fw-bold text-navy mb-0" style="color: #1e3a5f; font-size: 1.05rem;">
                                            {{ $point->text }}</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        @php
                            $fallbackKenapa = [
                                'Produk Langsung dari Produsen',
                                'Berkualitas Tinggi & Standar Industri',
                                'Dukungan Teknis Profesional',
                                'Pengiriman Cepat Seluruh Indonesia',
                                'Solusi Pengendalian Lengkap',
                                'Dipercaya oleh Berbagai Sektor Industri',
                            ];
                        @endphp
                        @foreach ($fallbackKenapa as $index => $text)
                            @php $icon = $defaultIcons[$index % count($defaultIcons)]; @endphp
                            <div class="col">
                                <div class="card h-100 border-0 shadow-sm rounded-4 p-4 feature-card"
                                    style="background-color: #f8fafc;">
                                    <div class="card-body p-0 d-flex align-items-center gap-3">
                                        <div class="icon-shape bg-navy text-white rounded-3 flex-shrink-0 d-flex align-items-center justify-content-center shadow-sm"
                                            style="width: 48px; height: 48px; background-color: #1e3a5f;">
                                            <i class="fas {{ $icon }} fs-5"></i>
                                        </div>
                                        <div>
                                            <h6 class="fw-bold text-navy mb-0" style="color: #1e3a5f; font-size: 1.05rem;">
                                                {{ $text }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endforelse
                </div>
            </div>

            {{-- SECTION 3: SOLUSI KAMI --}}
            <div class="row align-items-start my-5 py-lg-3">
                <div class="col-lg-12 mb-4 mb-lg-0">
                    <h2 class="display-6 fw-bold text-navy mt-0 mb-3"
                        style="color: #1e3a5f; font-weight: 800; line-height: 1.2;">
                        {{ $about->judul_solusi ?? 'Solusi Kami' }}
                    </h2>
                    <p class="text-secondary text-sm mb-4">
                        {{ app()->getLocale() === 'en' ? 'Integrated environmental and industrial spill response solutions designed for maximum efficiency.' : 'Rangkaian solusi terintegrasi untuk penanganan lingkungan dan tumpahan industri yang dirancang dengan efisiensi tinggi.' }}
                    </p>

                    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                        @php
                            $solusiIcons = [
                                'fa-shield-alt',
                                'fa-tint-slash',
                                'fa-biohazard',
                                'fa-water',
                                'fa-seedling',
                                'fa-headset',
                            ];
                        @endphp
                        @forelse($solusiPoints as $index => $point)
                            @php $icon = $solusiIcons[$index % count($solusiIcons)]; @endphp
                            <div class="col">
                                <div class="card h-100 border-0 shadow-sm rounded-4 p-4 feature-card"
                                    style="background-color: #f8fafc;">
                                    <div class="card-body p-0 d-flex align-items-center gap-3">
                                        <div class="icon-shape bg-navy text-white rounded-3 flex-shrink-0 d-flex align-items-center justify-content-center shadow-sm"
                                            style="width: 48px; height: 48px; background-color: #1e3a5f;">
                                            <i class="fas {{ $icon }} fs-5"></i>
                                        </div>
                                        <div>
                                            <h6 class="fw-bold text-navy mb-0" style="color: #1e3a5f; font-size: 1.05rem;">
                                                {{ $point->text }}</h6>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            @php
                                $fallbackSolusi = [
                                    'Mitigasi & Penanggulangan Banjir',
                                    'Pengendalian & Absorben Tumpahan Oli / Minyak',
                                    'Pengendalian Tumpahan Bahan Kimia Berbahaya',
                                    'Marine Spill Response & Peralatan Kelautan',
                                    'Agriculture & Environmental Protection Solutions',
                                    'Layanan Respon Darurat & Konsultasi Teknis',
                                ];
                            @endphp
                            @foreach ($fallbackSolusi as $index => $text)
                                @php $icon = $solusiIcons[$index % count($solusiIcons)]; @endphp
                                <div class="col">
                                    <div class="card h-100 border-0 shadow-sm rounded-4 p-4 feature-card"
                                        style="background-color: #f8fafc;">
                                        <div class="card-body p-0 d-flex align-items-center gap-3">
                                            <div class="icon-shape bg-navy text-white rounded-3 flex-shrink-0 d-flex align-items-center justify-content-center shadow-sm"
                                                style="width: 48px; height: 48px; background-color: #1e3a5f;">
                                                <i class="fas {{ $icon }} fs-5"></i>
                                            </div>
                                            <div>
                                                <h6 class="fw-bold text-navy mb-0"
                                                    style="color: #1e3a5f; font-size: 1.05rem;">{{ $text }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endforelse
                    </div>
                </div>

                {{-- Hide gambar di solusi untuk sementara --}}
                {{--
            <div class="col-lg-6">
                <div class="map-card-wrapper bg-light rounded-4 p-4 border shadow-sm text-center">
                    @if ($about && $about->gambar_peta && \Illuminate\Support\Facades\Storage::disk('public')->exists($about->gambar_peta))
                        <img src="{{ asset('storage/' . $about->gambar_peta) }}" alt="Solusi Intisolve" class="img-fluid rounded-3" style="max-height: 360px; width: 100%; object-fit: contain;">
                    @else
                        <img src="{{ asset('img/about_map_indonesia.png') }}" alt="Solusi Intisolve Indonesia" class="img-fluid rounded-3" style="max-height: 360px; width: 100%; object-fit: contain;">
                    @endif
                </div>
            </div>
            --}}
            </div>

            {{-- SECTION 4: CALL TO ACTION BANNER --}}
            <div class="cta-about-banner rounded-4 p-4 p-md-5 text-white my-4 shadow-sm" style="background-color: #1e3a5f;">
                <div class="row align-items-center">
                    <div class="col-lg-8 mb-4 mb-lg-0">
                        <h3 class="fw-bold text-white mb-2 fs-3">
                            {{ app()->getLocale() === 'en' ? 'Need Spill Control or Flood Mitigation Solutions?' : 'Butuh Solusi Tumpahan Cairan atau Mitigasi Banjir?' }}
                        </h3>
                        <p class="text-white-50 mb-0 fs-6">
                            {{ app()->getLocale() === 'en' ? 'Our technical team is ready to assist with product specifications and fast response recommendations.' : 'Tim teknis kami siap membantu memberikan spesifikasi produk dan rekomendasi penanganan dengan cepat.' }}
                        </p>
                    </div>
                    <div class="col-lg-4 text-lg-end">
                        <a href="{{ url('/kontak') }}"
                            class="btn btn-light text-navy fw-bold px-4 py-3 rounded-3 shadow-sm">
                            <i class="fas fa-paper-plane me-2 text-navy" style="color: #1e3a5f;"></i>
                            {{ app()->getLocale() === 'en' ? 'Contact Us Now' : 'Hubungi Tim Intisolve' }}
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <style>
        .text-navy {
            color: #1e3a5f !important;
        }

        .max-w-700 {
            max-width: 700px;
        }

        .btn-navy-custom {
            background-color: #1e3a5f !important;
            border-color: #1e3a5f !important;
            color: #ffffff !important;
            transition: all 0.2s ease;
        }

        .btn-navy-custom:hover {
            background-color: #152b48 !important;
            border-color: #152b48 !important;
            color: #ffffff !important;
        }

        .btn-outline-navy {
            border: 2px solid #1e3a5f !important;
            color: #1e3a5f !important;
            background-color: transparent !important;
            transition: all 0.2s ease;
        }

        .btn-outline-navy:hover {
            background-color: #1e3a5f !important;
            color: #ffffff !important;
        }

        .feature-card {
            transition: all 0.2s ease;
            border: 1px solid #e2e8f0 !important;
        }

        .feature-card:hover {
            box-shadow: 0 8px 20px rgba(30, 58, 95, 0.08) !important;
            border-color: #cbd5e1 !important;
        }

        .hero-image-card,
        .hero-image-card img {
            box-shadow: none !important;
            filter: none !important;
        }
    </style>
@endsection