@extends('frontend::layouts.master')

@section('content')
    {{-- <!-- Vision Section -->
    <section class="relative bg-gradient-to-br from-sky-50 via-white to-sky-50 py-24">
        <div class="container mx-auto px-4">
            <div class="max-w-4xl mx-auto text-center mb-16">
                <span class="inline-block px-6 py-2 bg-gradient-to-r from-sky-500 to-sky-400 text-white rounded-full text-sm mb-4">Our Vision</span>
                <h2 class="text-4xl font-bold bg-gradient-to-r from-sky-600 to-sky-400 bg-clip-text text-transparent mb-6">วิสัยทัศน์ของเรา</h2>
                <p class="text-18 text-gray-600">มุ่งมั่นสู่การเป็นผู้นำด้านบริการบัญชีที่ทันสมัย เพื่อการเติบโตอย่างยั่งยืนของธุรกิจไทย</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
                <!-- Vision Card 1 -->
                <div class="relative group">
                    <div class="absolute inset-0 bg-gradient-to-r from-sky-400 to-sky-600 rounded-2xl opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
                    <div class="bg-white p-8 rounded-2xl flex gap-6 items-start border border-gray-100 group-hover:border-sky-200 transition-all duration-300">
                        <div class="w-16 h-16 bg-sky-100 rounded-2xl flex items-center justify-center flex-shrink-0 group-hover:bg-sky-200 transition-colors duration-300">
                            <span class="icon-[tabler--chart-dots] text-sky-600 size-8"></span>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-4">นวัตกรรมทางบัญชี</h3>
                            <p class="text-gray-600 text-18">นำเทคโนโลยีที่ทันสมัยมาประยุกต์ใช้ในการบริการ เพื่อความแม่นยำและประสิทธิภาพสูงสุด</p>
                        </div>
                    </div>
                </div>

                <!-- Vision Card 2 -->
                <div class="relative group">
                    <div class="absolute inset-0 bg-gradient-to-r from-sky-400 to-sky-600 rounded-2xl opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
                    <div class="bg-white p-8 rounded-2xl flex gap-6 items-start border border-gray-100 group-hover:border-sky-200 transition-all duration-300">
                        <div class="w-16 h-16 bg-sky-100 rounded-2xl flex items-center justify-center flex-shrink-0 group-hover:bg-sky-200 transition-colors duration-300">
                            <span class="icon-[tabler--users] text-sky-600 size-8"></span>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-4">ทีมงานมืออาชีพ</h3>
                            <p class="text-gray-600 text-18">บุคลากรที่มีความเชี่ยวชาญและประสบการณ์ พร้อมให้คำปรึกษาและแก้ไขปัญหา</p>
                        </div>
                    </div>
                </div>

                <!-- Vision Card 3 -->
                <div class="relative group md:col-span-2">
                    <div class="absolute inset-0 bg-gradient-to-r from-sky-400 to-sky-600 rounded-2xl opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
                    <div class="bg-white p-8 rounded-2xl flex gap-6 items-start border border-gray-100 group-hover:border-sky-200 transition-all duration-300">
                        <div class="w-16 h-16 bg-sky-100 rounded-2xl flex items-center justify-center flex-shrink-0 group-hover:bg-sky-200 transition-colors duration-300">
                            <span class="icon-[tabler--target] text-sky-600 size-8"></span>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-gray-900 mb-4">เป้าหมายของลูกค้า</h3>
                            <p class="text-gray-600 text-18">มุ่งเน้นการสร้างความสำเร็จและการเติบโตทางธุรกิจของลูกค้าเป็นสำคัญ ด้วยการให้บริการที่ครอบคลุมและตรงตามความต้องการ</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-16 text-center">
                <div class="inline-flex items-center gap-4 p-6 bg-sky-50 rounded-2xl">
                    <span class="icon-[tabler--quote] text-sky-600 size-8"></span>
                    <p class="text-lg text-gray-700 italic">"เราไม่เพียงแค่จัดทำบัญชี แต่เราคือพันธมิตรที่จะเติบโตไปพร้อมกับธุรกิจของคุณ"</p>
                </div>
            </div>
        </div>
    </section> --}}


    <!-- Business Ethics Section -->
    <section class="py-10 lg:py-16 bg-gradient-to-br from-gray-50 via-white to-gray-50 relative">
        <!-- Decorative background pattern -->
        <div class="absolute inset-0 opacity-5">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"></div>
        </div>

        <div class="container mx-auto px-4 relative">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-sky-100 rounded-full text-sky-600 text-sm font-medium mb-4">Our Ethics</span>
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">จรรยาบรรณในการดำเนินธุรกิจ</h2>
                <p class="text-gray-600 max-w-2xl mx-auto text-18">เรายึดมั่นในหลักจรรยาบรรณและความซื่อสัตย์ในการให้บริการ เพื่อสร้างความเชื่อมั่นและความไว้วางใจจากลูกค้า</p>
            </div>

            <div class="space-y-16">
                <!-- Ethics Item 1 -->
                <div class="flex flex-col md:flex-row items-center gap-12">
                    <div class="flex-1 space-y-6">
                        <h3 class="text-3xl font-bold text-gray-900">ความเป็นธรรมและความโปร่งใส</h3>
                        <p class="text-gray-600 text-lg leading-relaxed">เรามุ่งมั่นในการให้บริการด้วยความเป็นธรรม โปร่งใส และเท่าเทียมกันแก่ลูกค้าทุกราย โดยยึดหลักจรรยาบรรณวิชาชีพและมาตรฐานการให้บริการระดับสูงสุด</p>
                        <ul class="space-y-4">
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-sky-500"></span>
                                <span class="text-gray-600 text-18">บริการด้วยความเป็นธรรมและเท่าเทียม</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-sky-500"></span>
                                <span class="text-gray-600 text-18">โปร่งใสในทุกขั้นตอนการทำงาน</span>
                            </li>
                        </ul>
                    </div>
                    <div class="flex-1 relative">
                        <img src="https://images.unsplash.com/photo-1521791136064-7986c2920216?q=80" alt="ความเป็นธรรม" class="w-full rounded-2xl shadow-lg">
                        <div class="absolute -top-6 -right-6 w-16 h-16 bg-sky-500 rounded-xl flex items-center justify-center">
                            <span class="icon-[tabler--scale] size-8 text-white"></span>
                        </div>
                    </div>
                </div>

                <!-- Ethics Item 2 -->
                <div class="flex flex-col md:flex-row-reverse items-center gap-12">
                    <div class="flex-1 space-y-6">
                        <h3 class="text-3xl font-bold text-gray-900">การรักษาความลับและความปลอดภัย</h3>
                        <p class="text-gray-600 text-lg leading-relaxed">เราให้ความสำคัญสูงสุดกับการรักษาความลับของข้อมูลลูกค้า ด้วยระบบรักษาความปลอดภัยที่ได้มาตรฐาน และการฝึกอบรมพนักงานอย่างเข้มงวด</p>
                        <ul class="space-y-4">
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-sky-500"></span>
                                <span class="text-gray-600 text-18">ระบบรักษาความปลอดภัยมาตรฐานสูง</span>
                            </li>
                            <li class="flex items-center gap-3">
                                <span class="icon-[tabler--circle-check] text-sky-500"></span>
                                <span class="text-gray-600 text-18">การรักษาความลับอย่างเคร่งครัด</span>
                            </li>
                        </ul>
                    </div>
                    <div class="flex-1 relative">
                        <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80" alt="การรักษาความลับ" class="w-full rounded-2xl shadow-lg">
                        <div class="absolute -top-6 -left-6 w-16 h-16 bg-sky-500 rounded-xl flex items-center justify-center">
                            <span class="icon-[tabler--lock] size-8 text-white"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection