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

@section('content')
    <section class="relative py-20 mt-12 bg-white">
        <div class="container max-w-7xl mx-auto px-4">
            <div class="max-w-4xl mx-auto 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">
                    เกี่ยวกับเรา
                </span>
                <h2 class="text-3xl font-bold text-gray-900 mb-6">
                    ผู้เชี่ยวชาญด้านบัญชีและภาษี<br>
                    <span class="relative">
                        ที่คุณไว้วางใจได้
                        <svg class="absolute -bottom-2 left-0 w-full" height="8" viewBox="0 0 300 8" fill="none">
                            <path d="M1 5.5C71 1.5 143.5 1.5 299 5.5" stroke="#0EA5E9" stroke-width="4"
                                stroke-linecap="round" />
                        </svg>
                    </span>
                </h2>
                <p class="text-xl text-gray-600 leading-relaxed mb-12">
                    ด้วยประสบการณ์กว่า 20 ปี เรามุ่งมั่นให้บริการด้านบัญชีและภาษีอย่างมืออาชีพ
                    พร้อมให้คำปรึกษาและวางแผนทางการเงินเพื่อความสำเร็จของธุรกิจคุณ
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
                <div class="text-center" data-aos="fade-up">
                    <div class="space-y-4">
                        <span class="icon-[tabler--history] text-sky-500 size-12"></span>
                        <h3 class="text-3xl font-bold text-gray-900">20+ ปี</h3>
                        <p class="text-gray-600">ประสบการณ์และความเชี่ยวชาญในการให้บริการ</p>
                    </div>
                </div>

                <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                    <div class="space-y-4">
                        <span class="icon-[tabler--users] text-sky-500 size-12"></span>
                        <h3 class="text-3xl font-bold text-gray-900">1,000+ ราย</h3>
                        <p class="text-gray-600">ลูกค้าที่ไว้วางใจในบริการของเรา</p>
                    </div>
                </div>

                <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                    <div class="space-y-4">
                        <span class="icon-[tabler--certificate] text-sky-500 size-12"></span>
                        <h3 class="text-3xl font-bold text-gray-900">มาตรฐานสากล</h3>
                        <p class="text-gray-600">การบริการตามหลักมาตรฐานวิชาชีพ</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vision Section -->
    <section class="pb-16 bg-white">
        <div class="container max-w-7xl mx-auto px-4">
            <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
                    Vision</span>
                <h2 class="text-4xl font-bold text-gray-900 mb-6">วิสัยทัศน์และพันธกิจ</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">เรามุ่งมั่นที่จะเป็นผู้นำด้านการให้บริการทางบัญชีและภาษี
                    พร้อมสร้างคุณค่าและความสำเร็จให้กับธุรกิจของลูกค้า</p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Vision Card 1 -->
                <div class="bg-sky-50 p-8 rounded-2xl" data-aos="fade-up" data-aos-delay="0">
                    <span class="icon-[tabler--target] text-sky-500 size-12 mb-6"></span>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">มุ่งมั่นสู่ความเป็นเลิศ</h3>
                    <p class="text-gray-600">พัฒนาการบริการอย่างต่อเนื่องเพื่อตอบสนองความต้องการของลูกค้าด้วยมาตรฐานสูงสุด
                    </p>
                </div>

                <!-- Vision Card 2 -->
                <div class="bg-sky-50 p-8 rounded-2xl" data-aos="fade-up" data-aos-delay="100">
                    <span class="icon-[tabler--users] text-sky-500 size-12 mb-6"></span>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">การพัฒนาบุคลากร</h3>
                    <p class="text-gray-600">ส่งเสริมการพัฒนาความรู้และทักษะของทีมงานอย่างต่อเนื่อง</p>
                </div>

                <!-- Vision Card 3 -->
                <div class="bg-sky-50 p-8 rounded-2xl" data-aos="fade-up" data-aos-delay="200">
                    <span class="icon-[tabler--shield-check] text-sky-500 size-12 mb-6"></span>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">ความน่าเชื่อถือ</h3>
                    <p class="text-gray-600">ยึดมั่นในจรรยาบรรณวิชาชีพและการให้บริการด้วยความซื่อสัตย์</p>
                </div>
            </div>
        </div>
    </section>
@endsection