@php
    $isTh = app()->getLocale() === 'th';
    $values = [
        [
            'icon'  => 'lucide:sparkles',
            'title' => $isTh ? 'ความเงียบสงบ' : 'A quiet sanctuary',
            'body'  => $isTh
                ? 'ทุกครั้งเริ่มต้นด้วยการเตรียมพื้นที่ ผ้าปูสะอาด แสงไฟอุ่น และน้ำมันที่คัดเลือกเฉพาะคุณ'
                : 'Every visit begins with care — clean linens, warm light, and oils chosen just for you.',
        ],
        [
            'icon'  => 'lucide:hand-heart',
            'title' => $isTh ? 'สัมผัสมืออาชีพ' : 'A truly trained touch',
            'body'  => $isTh
                ? 'ทีมเทอราปิสต์ของเราผ่านการอบรมและรับรองจากสถาบันชั้นนำในประเทศไทยและต่างประเทศ'
                : 'Our therapists are certified and trained at leading institutes in Thailand and abroad.',
        ],
        [
            'icon'  => 'lucide:shield-check',
            'title' => $isTh ? 'ปลอดภัยและสะอาด' : 'Safe and spotless',
            'body'  => $isTh
                ? 'อุปกรณ์ทำความสะอาดทุกครั้งก่อนและหลังใช้งาน ผ้าทุกผืนผ่านมาตรฐานสปาระดับโรงแรม'
                : 'Equipment is sanitised before and after every visit; every linen meets hotel-spa standards.',
        ],
        [
            'icon'  => 'lucide:calendar-heart',
            'title' => $isTh ? 'ยืดหยุ่นเรื่องเวลา' : 'Truly flexible timing',
            'body'  => $isTh
                ? 'ให้บริการ 7 วันต่อสัปดาห์ ปรับเวลาให้เข้ากับชีวิตประจำวันของคุณ'
                : 'We work 7 days a week so the rhythm fits your life, not the other way around.',
        ],
    ];
@endphp
<section class="relative isolate overflow-hidden bg-gradient-to-b from-white via-lux-cream to-lux-blush/25 py-20 md:py-28" aria-labelledby="values-heading">
    <div class="pointer-events-none absolute -right-16 top-12 h-[220px] w-[220px] lux-dot-overlay opacity-50" aria-hidden="true"></div>

    <div class="relative mx-auto max-w-6xl px-4 md:px-6">
        <div class="mx-auto max-w-2xl text-center">
            <p class="scroll-reveal font-script text-3xl text-tsb-primary md:text-4xl" data-scroll-reveal>
                {{ $isTh ? 'หลักการของเรา' : 'Our values' }}
            </p>
            <h2 id="values-heading" class="scroll-reveal lux-section-title mt-2" data-scroll-reveal>
                {{ $isTh ? 'สิ่งที่เรายึดมั่นในทุกครั้งที่เจอคุณ' : 'What guides every session we give' }}
            </h2>
            <p class="scroll-reveal mt-5 text-sm leading-relaxed text-lux-ink-muted md:text-base" data-scroll-reveal>
                {{ $isTh
                    ? 'สี่หลักการง่ายๆ ที่ทำให้ The Rose Bangkok เป็นพื้นที่พักผ่อนที่ผู้คนกลับมาหา'
                    : 'Four simple principles that keep guests returning to The Rose Bangkok again and again.' }}
            </p>
        </div>

        <ul class="mt-14 grid gap-6 sm:grid-cols-2 lg:grid-cols-4 md:mt-16" role="list">
            @foreach ($values as $value)
                <li class="scroll-reveal flex h-full flex-col rounded-2xl border border-lux-ink/[0.08] bg-white/90 p-6 shadow-[0_18px_50px_-28px_rgba(74,74,78,0.35)] backdrop-blur-sm transition-[border-color,box-shadow] hover:border-tsb-primary/25 hover:shadow-[0_22px_55px_-24px_rgba(183,51,101,0.18)]" data-scroll-reveal>
                    <span class="inline-flex h-12 w-12 items-center justify-center rounded-full border border-tsb-primary/15 bg-gradient-to-br from-tsb-primary/12 to-lux-blush/50 text-tsb-primary shadow-inner shadow-white/80" aria-hidden="true">
                        <iconify-icon icon="{{ $value['icon'] }}" class="h-5 w-5"></iconify-icon>
                    </span>
                    <h3 class="mt-5 font-serif text-lg font-medium leading-snug text-lux-ink md:text-xl">
                        {{ $value['title'] }}
                    </h3>
                    <p class="mt-3 text-sm leading-relaxed text-lux-ink-muted">
                        {{ $value['body'] }}
                    </p>
                </li>
            @endforeach
        </ul>
    </div>
</section>