@extends('layouts.app')
@section('title', 'About - PT. Surya Bersatu Utama')

@section('content')

{{-- Page Header --}}
<section class="hero-bg py-20 md:py-28">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="max-w-2xl">
            <p class="section-subtitle text-white">Who We Are</p>
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">About Us</h1>
            <p class="text-blue-200 text-lg">
                Engineering excellence serving the Oil & Gas industry since 2007.
            </p>
        </div>
    </div>
</section>

{{-- Vision & Mission --}}
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            {{-- Vision --}}
            <div class="bg-gray-50 rounded-2xl p-8 md:p-10 border border-gray-100">
                <div class="w-14 h-14 bg-accent/10 rounded-full flex items-center justify-center mb-6">
                    <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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"/>
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-primary mb-4">Vision</h2>
                <p class="text-gray-600 leading-relaxed text-lg">
                    Become an advanced and superior company in providing services on network of the supply chain of goods and services.
                </p>
            </div>

            {{-- Mission --}}
            <div class="bg-gray-50 rounded-2xl p-8 md:p-10 border border-gray-100">
                <div class="w-14 h-14 bg-accent/10 rounded-full flex items-center justify-center mb-6">
                    <svg class="w-7 h-7 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-primary mb-4">Mission</h2>
                <ul class="text-gray-600 space-y-3">
                    <li class="flex items-start gap-3">
                        <span class="text-accent font-bold mt-0.5">01</span>
                        <span>Establish long-term relationship with all principals/clients.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="text-accent font-bold mt-0.5">02</span>
                        <span>Create opportunity for all employees to develop their knowledge and skills.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="text-accent font-bold mt-0.5">03</span>
                        <span>Deliver customer satisfaction through professional management and reliable service.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <span class="text-accent font-bold mt-0.5">04</span>
                        <span>Commit to QHSE (Quality, Health, Safety & Environment) procedures and policies.</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- About Us --}}
<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <p class="section-subtitle">Our Company</p>
                <h2 class="section-title mb-8">About PT. Surya Bersatu Utama</h2>
                <div class="space-y-4 text-gray-600 leading-relaxed">
                    <p>Established in 2007 in South Sumatra, Indonesia, PT. Surya Bersatu Utama has grown to become a trusted partner in the Oil & Gas industry.</p>
                    <ul class="space-y-3">
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span><strong class="text-primary">ISO 9001:2015</strong> – Quality Management System</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span><strong class="text-primary">ISO 14001:2015</strong> – Environmental Management System</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span><strong class="text-primary">ISO 45001:2018</strong> – Occupational Health & Safety</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span><strong class="text-primary">SKK Migas</strong> – Registered Oil & Gas Contractor</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span><strong class="text-primary">CSMS Certified</strong> – Contractor Safety Management System</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span>Comprehensive engineering, repair & maintenance capabilities</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span>International alliances providing global standards & expertise</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span>Specialized training services and technical education support</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-accent mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span>Ethics-driven operations with integrity and professionalism</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="relative">
                <img src="/storage/images/build.jpg"
                     alt="PT. Surya Bersatu Utama Operations"
                     class="rounded-2xl shadow-2xl w-full object-cover"
                     style="max-height: 500px;">
                <div class="absolute -bottom-4 -left-4 bg-accent text-white p-6 rounded-xl shadow-lg hidden md:block">
                    <div class="text-3xl font-bold">2007</div>
                    <div class="text-sm">Established</div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection