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

@section('content')
    <section class="relative py-10 md:py-8 bg-white overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0">
            <div class="absolute w-full h-full">
                <div class="absolute top-0 left-0 w-1/2 h-full bg-green-50 transform -skew-x-12"></div>
                <div class="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-green-100/50"></div>
            </div>
            <div class="absolute right-0 bottom-0 hidden lg:block">
                <svg width="400" height="400" viewBox="0 0 200 200" class="text-green-100 opacity-50">
                    <path fill="currentColor" d="M45,-78.1C58.3,-71.3,69.1,-58.9,75.9,-44.6C82.7,-30.3,85.5,-14.1,83.5,0.8C81.4,15.8,74.4,29.6,65.4,41.3C56.4,53,45.4,62.7,32.4,69.7C19.3,76.7,4.3,81,-10.9,79.5C-26.1,78,-41.5,70.7,-54.1,60.1C-66.7,49.5,-76.5,35.7,-81.7,19.7C-86.9,3.7,-87.5,-14.4,-81.3,-29.9C-75.1,-45.4,-62.1,-58.3,-47.1,-64.5C-32.1,-70.7,-15.1,-70.2,1.2,-72.2C17.6,-74.2,31.7,-78.8,45,-78.1Z" transform="translate(100 100)" />
                </svg>
            </div>
        </div>

        <div class="container relative mx-auto px-4">
            <div class="flex flex-col items-center">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 md:mb-6 text-center">เกี่ยวกับ<span class="text-green-600">เรา</span></h1>
                <div class="w-16 md:w-24 h-1 bg-green-600 rounded-full mb-6 md:mb-8"></div>
                <p class="text-base md:text-lg lg:text-xl xl:text-20 text-gray-600 max-w-2xl text-center leading-relaxed">
                    ร้านขายยาที่มีประสบการณ์และความเชี่ยวชาญ พร้อมให้คำปรึกษาด้านสุขภาพโดยทีมเภสัชกรมืออาชีพ
                </p>
            </div>
        </div>
    </section>

    <section class="relative py-10 lg:py-16 overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute top-1/4 -left-8 w-32 h-32 bg-green-200 rounded-full blur-3xl opacity-30 animate-pulse"></div>
            <div class="absolute bottom-1/4 right-0 w-24 h-24 bg-green-300 rounded-full blur-3xl opacity-20 animate-pulse delay-500"></div>
            <div class="absolute top-1/2 left-1/3 w-28 h-28 bg-green-100 rounded-full blur-3xl opacity-25 animate-pulse delay-1000"></div>
        </div>

        <div class="container mx-auto px-4">
            <div class="grid lg:grid-cols-2 gap-8 md:gap-16 items-center">
                <!-- Text Content -->
                <div class="relative">
                    <div class="inline-flex items-center gap-2 px-3 md:px-4 py-2 rounded-full bg-green-50 mb-4 md:mb-6">
                        <span class="icon-[tabler--info-circle] size-4 md:size-5 text-green-600"></span>
                        <span class="text-sm md:text-base text-green-600 font-medium">เกี่ยวกับเรา</span>
                    </div>
                    <h2 class="text-2xl md:text-3xl lg:text-4xl xl:text-40 font-bold text-gray-900 mb-4 md:mb-6">ร้านขายยาที่<span class="text-green-600">คุณไว้วางใจ</span>ได้</h2>
                    <p class="text-base md:text-lg xl:text-18 text-gray-600 mb-6 md:mb-10 leading-relaxed">
                        เราเป็นร้านขายยาที่มีประสบการณ์มากกว่า 20 ปี ให้บริการด้วยทีมเภสัชกรมืออาชีพที่พร้อมให้คำปรึกษาและดูแลสุขภาพของคุณ เรามุ่งมั่นที่จะให้บริการด้วยความใส่ใจ และจำหน่ายผลิตภัณฑ์ที่มีคุณภาพ ได้มาตรฐาน ในราคาที่เหมาะสม
                    </p>
                    <div class="grid sm:grid-cols-2 gap-4 md:gap-8">
                        <div class="p-4 md:p-6 rounded-2xl bg-green-50/50 backdrop-blur">
                            <span class="text-2xl md:text-3xl lg:text-40 font-bold text-green-600 mb-2 block">20+</span>
                            <p class="text-base md:text-lg xl:text-18 text-gray-600">ปีแห่งประสบการณ์</p>
                        </div>
                        <div class="p-4 md:p-6 rounded-2xl bg-green-50/50 backdrop-blur">
                            <span class="text-2xl md:text-3xl lg:text-40 font-bold text-green-600 mb-2 block">1,000+</span>
                            <p class="text-base md:text-lg xl:text-18 text-gray-600">ลูกค้าที่ไว้วางใจ</p>
                        </div>
                    </div>
                </div>

                <!-- Image -->
                <div class="relative">
                    <div class="absolute inset-0 -left-8 -top-8 bg-green-200/20 rounded-[40px] blur-2xl"></div>
                    <div class="relative rounded-[40px] overflow-hidden shadow-xl">
                        <img src="https://images.unsplash.com/photo-1576602976047-174e57a47881?q=80&w=2069&auto=format&fit=crop" 
                             alt="ร้านขายยา" 
                             class="w-full h-[300px] md:h-[400px] lg:h-[500px] xl:h-[600px] object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="relative py-16 md:py-20 overflow-hidden bg-green-50">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-3xl mx-auto">
                <div class="flex items-start gap-4">
                    <span class="icon-[tabler--quote] size-8 md:size-12 text-green-600 flex-shrink-0"></span>
                    <p class="text-base md:text-lg xl:text-20 text-gray-600 leading-relaxed">
                        ร้านขายยาของเราเป็นร้านที่มีประสบการณ์มายาวนานกว่า 20 ปี เรามุ่งมั่นที่จะให้บริการด้วยความเป็นมืออาชีพ ใส่ใจในทุกรายละเอียด เพื่อสุขภาพที่ดีของลูกค้าทุกท่าน เรามีทีมเภสัชกรที่มีความเชี่ยวชาญคอยให้คำปรึกษาและแนะนำการใช้ยาอย่างถูกต้องและปลอดภัย นอกจากนี้เรายังคัดสรรผลิตภัณฑ์ที่มีคุณภาพ ได้มาตรฐาน ในราคาที่เหมาะสม เพื่อให้ลูกค้าทุกท่านได้รับสิ่งที่ดีที่สุด เราพร้อมดูแลสุขภาพของคุณและครอบครัวด้วยความใส่ใจ เสมือนคนในครอบครัวเดียวกัน ด้วยมาตรฐานการให้บริการระดับสูงสุด และพร้อมให้คำปรึกษาตลอดเวลาทำการ เพื่อสุขภาพที่ดีของคุณ
                    </p>
                    <span class="icon-[tabler--quote] size-8 md:size-12 text-green-600 flex-shrink-0 rotate-180"></span>
                </div>
            </div>
        </div>
    </section>
@endsection