@extends('layouts.user')

@section('title', 'Visi & Misi - CV. Amelia Langgeng Jaya')

@section('content')
{{-- 1. Hero Banner Section --}}
<section class="relative h-[300px] flex items-center justify-center bg-gray-900">
    {{-- Gambar Background Milik Sendiri --}}
    <img src="{{ asset('images/cor-crown.jpeg') }}" 
         class="absolute inset-0 w-full h-full object-cover opacity-50" 
         alt="Visi Misi CV Amelia Langgeng Jaya">
    
    <div class="absolute inset-0 bg-black/40"></div>

    <div class="relative z-10 text-center">
        <h1 class="text-4xl md:text-5xl font-bold text-white tracking-tight">Visi dan Misi</h1>
    </div>
</section>

{{-- 2. Visi & Misi Content Section --}}
<section class="py-16 bg-[#e9effd]">
    <div class="container mx-auto px-4 max-w-5xl">
        <div class="flex flex-col gap-8">
            
            {{-- KOTAK VISI --}}
            <div class="bg-white rounded-sm shadow-md overflow-hidden flex flex-col md:flex-row items-stretch p-8 md:p-12" data-aos="fade-up">
                <div class="md:w-1/4 flex items-center justify-center mb-6 md:mb-0 md:border-r-2 border-blue-100/50">
                    {{-- Icon Mata --}}
                    <svg class="w-24 h-24 text-[#3056a7]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                </div>
                <div class="md:w-3/4 md:pl-10 flex flex-col justify-center">
                    <h2 class="text-3xl font-bold text-[#f05a28] mb-3">Visi</h2>
                    <p class="text-slate-800 text-lg leading-snug font-medium">
                        {{ $settings['visi'] ?? 'Menjadi perusahan yang utama dalam pembangunan nasional .' }}
                    </p>
                </div>
            </div>

            {{-- KOTAK MISI --}}
            <div class="bg-white rounded-sm shadow-md overflow-hidden flex flex-col md:flex-row items-stretch p-8 md:p-12" data-aos="fade-up" data-aos-delay="200">
                <div class="md:w-1/4 flex items-center justify-center mb-6 md:mb-0 md:border-r-2 border-blue-100/50">
                    {{-- Icon Target --}}
                    <svg class="w-24 h-24 text-[#3056a7]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
                    </svg>
                </div>
                <div class="md:w-3/4 md:pl-10 flex flex-col justify-center">
                    <h2 class="text-3xl font-bold text-[#f05a28] mb-3">Misi</h2>
                    <p class="text-slate-800 font-medium mb-2">Misi kami adalah untuk</p>
                    
                    @php
                        $misiList = isset($settings['misi']) ? explode("\n", str_replace("\r", "", $settings['misi'])) : [
                            'Prioritaskan pembangunan secara berkelanjutan yang berkualitas dan kemajuan',
                            'Memberikan kontribusi yang handal dengan inovasi teknologi',
                            'Menjadikan sumber daya manusia unggul untuk berkarya, berkreasi, dan tumbuh bersama berlandaskan nilai-nilai dan budaya.'
                        ];
                    @endphp

                    <ul class="list-disc list-outside ml-5 space-y-1">
                        @foreach($misiList as $misi)
                            @if(trim($misi) !== "")
                            <li class="text-slate-800 font-medium text-base leading-tight pl-1">
                                {{ trim($misi) }}
                            </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>

        </div>
    </div>
</section>
@endsection