@extends('layouts.main')
@section('title', 'Tentang NalarKita')
@section('pageContent')
    <!-- Content -->
    <main>

        <section class="relative w-full h-[600px]">
            <!-- Background Image -->
            <img
                src="{{ asset('assets/images/foto-kantor.jpg') }}"
                alt="Gambar Perusahaan"
                class="absolute inset-0 w-full h-full object-cover"
            />

            <!-- Gradient Overlay -->
            <div class="absolute inset-0 bg-gradient-to-t from-neutral-900 to-transparent opacity-80"></div>

            <!-- Text Content -->
            <div class="relative z-10 flex items-center justify-center h-full px-8">
                <div class="text-center max-w-4xl mx-auto space-y-4">
                    <h1 class="text-2xl sm:text-3xl md:text-5xl text-white font-bold">
                        NalarKita
                    </h1>
                    <p class="text-sm sm:text-lg text-white">
                        {{ __('about_caption') }}
                    </p>
                </div>
            </div>
        </section>

        <!-- Mission -->
        <section class="container mx-auto px-8 my-10 space-y-8">
            <article>
                <div class="flex flex-col md:flex-row gap-8 justify-center items-center mt-20">
                    <!-- VISI Card -->
                    <div data-aos="fade-right" id="visi" class="relative max-w-lg bg-primary-30 rounded-3xl shadow-primary p-16 overflow-hidden flex-1">
                        <!-- Top Right Circle -->
                        <svg
                            class="absolute -top-5 -right-5 w-16 h-16"
                            viewBox="0 0 64 64"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <circle cx="32" cy="32" r="32" fill="#E9ECF5" />
                        </svg>
                        <!-- Bottom Left Circle -->
                        <svg
                            class="absolute -bottom-5 -left-5 w-16 h-16"
                            viewBox="0 0 64 64"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <circle cx="32" cy="32" r="32" fill="#E9ECF5" />
                        </svg>

                        <!-- Content -->
                        <h2 class="text-4xl font-semibold text-neutral-10 border-b-2 border-neutral-10 inline-block pb-2">
                            {{ __('vision') }}
                        </h2>
                        <p class="text-lg text-neutral-10 mt-4">
                            {{ __('vision_caption') }}
                        </p>
                    </div>

                    <!-- MISI Card -->
                    <div data-aos="fade-left" id="misi" class="relative bg-neutral-10 rounded-3xl shadow-primary p-16 overflow-hidden flex-1">
                        <!-- Top Right Circle -->
                        <svg
                            class="absolute -top-5 -right-5 w-16 h-16"
                            viewBox="0 0 64 64"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <circle cx="32" cy="32" r="32" fill="#7E8FC2" />
                        </svg>
                        <!-- Bottom Left Circle -->
                        <svg
                            class="absolute -bottom-5 -left-5 w-16 h-16"
                            viewBox="0 0 64 64"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <circle cx="32" cy="32" r="32" fill="#7E8FC2" />
                        </svg>

                        <!-- Content -->
                        <h2 class="text-4xl font-semibold text-primary-30 border-b-2 border-primary-30 inline-block pb-2">
                            {{ __('mission') }}
                        </h2>
                        <ul class="text-lg text-primary-30 list-disc ml-4 mt-4 space-y-2">
                            <li>{{ __('mission_caption_1') }}</li>
                            <li>{{ __('mission_caption_2') }}</li>
                            <li>{{ __('mission_caption_3') }}</li>
                            <li>{{ __('mission_caption_4') }}</li>
                        </ul>
                    </div>
                </div>
            </article>
        </section>
        <!-- End Mission -->
    </main>
    <!-- End Content -->
@endsection

@section('scripts')

@endsection