@extends('layouts.site', ['title' => '關於我們'])

@section('seo_title', '關於我們｜' . config('app.name'))
@section('seo_description', '關於維達｜安心的履約保證、安全無虞的設施')
@section('seo_keywords', '關於維達, 會館介紹, 健身, 安全設施')
@section('canonical', route('pages.about'))

@section('body_class', 'home-page')

@push('head')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Mr+Dafoe&display=swap" rel="stylesheet">
@endpush

@section('content')
    {{-- Hero / Page title --}}
    <section id="hero-section" class="relative bg-[#0e0e0e] px-6 pt-36 md:pt-48 lg:pt-56 pb-8 lg:pb-12 md:px-12">
        <div class="mx-auto max-w-7xl">
            <div class="flex items-end justify-end">
                <div class="text-right">
                    <nav aria-label="Breadcrumb" class="flex justify-end">
                        <ol class="flex items-center gap-x-1 text-xs font-semibold tracking-[0.2em] text-white/60">
                            <li>
                                <a href="{{ route('pages.home') }}" class="uppercase hover:text-white/85 transition-colors">HOME</a>
                            </li>
                            <li aria-hidden="true" class="inline-flex items-center">
                                <svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 text-white/60">
                                    <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                            </li>
                            <li>
                                <span aria-current="page">關於維達</span>
                            </li>
                        </ol>
                    </nav>
                    <h1 class="mt-1 lg:mt-3 text-4xl md:text-5xl font-bold tracking-tight text-white">
                        關於維達
                    </h1>
                </div>
            </div>
        </div>
    </section>

    {{-- Section 1: Image + text --}}
    <section class="bg-[#313131]">
        <div class="overflow-hidden bg-[#313131]">
            <div class="grid grid-cols-1 lg:grid-cols-2">
                <div class="relative aspect-4/3 md:aspect-auto md:min-h-130">
                    <img
                        src="{{ asset('assets/img/about/hero_img.jpg') }}"
                        alt="關於維達"
                        class="absolute inset-0 h-full w-full object-cover opacity-90"
                        loading="lazy"
                        decoding="async"
                    >
                    <div class="absolute inset-0 bg-black/25"></div>
                </div>

                <div class="p-10 md:p-14">
                    <div class="flex flex-col justify-center items-center w-full md:w-4/5 lg:w-3/4 xl:w-2/3 mx-auto text-start">
                        <div class="w-full text-white/45 italic tracking-widest">About La-vida</div>
                        <h2 class="w-full mt-3 text-3xl font-bold tracking-tight text-white md:text-4xl">
                            安心的履約保證
                        </h2>
                        <p class="w-full mt-6 text-base leading-7 text-white/70 text-justify">
                            維達了解您的顧慮，已依行政院體委會公告之方式，
                            於中國信託商業銀行設立履約保證專戶；維達保險的履約保證準備金專戶，
                            不但得主管機關定期查核，並已報請中央主管機關備查在案。
                            這是維達履約保障消費者權益所展現的一份誠意。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Section 2: Text + collage --}}
    <section class="bg-[#131313] px-6 py-24 md:px-12">
        <div class="mx-auto max-w-7xl">
            <div class="grid grid-cols-1 gap-12 lg:grid-cols-12">
                <div class="lg:col-span-5">
                    <div class="lg:flex lg:flex-col lg:w-4/5 mx-auto lg:pt-16">
                        <div class="text-white/45 italic tracking-widest">About La-vida</div>
                        <h2 class="mt-3 text-3xl font-bold tracking-tight text-white md:text-4xl">
                            安全無虞的設施
                        </h2>
                        <p class="w-full mt-6 text-base leading-7 text-white/70 text-justify">
                            提供一個安全無虞的環境，是維達被好評負責的最基本準則。
                            除通過政府嚴格的消防安檢、保險意外責任險及辦理團體之外，
                            並投保高額公共意外責任險，每人最高 500 萬元的意外金額。
                            維達也聘請專業的技師與教練，提供與戶外空氣交流。
                            同時，維達也定期採用最新蒸氣加濕系統，完全排除傳統的五硫醇，
                            不但可省能源，不產生二氧化碳增加溫室效應，無瓦斯氣體的可能性，
                            並且也杜絕了一氧化碳中毒的危險。
                            各區用水，不但加強過濾系統，並定時清潔與臭氧殺菌。
                            不但能強化殺菌力，以確保您的健康，並且也能有效地降低化學藥劑使用比例，
                            降低對皮膚的刺激性。
                        </p>
                    </div>
                </div>
                <div class="lg:col-span-1"></div>
                <div class="lg:col-span-6">
                    <div class="relative mx-auto max-w-3xl">
                        <div
                            class="flex justify-end overflow-hidden text-end pr-12 will-change-transform"
                            data-parallax
                            data-parallax-x="28"
                            data-parallax-y="-20"
                        >
                            <img
                                src="{{ asset('assets/img/about/collage-1.jpg') }}"
                                alt="設施照片 1"
                                class="w-3/5 h-auto rounded-[18px] shadow-2xl"
                                loading="lazy"
                                decoding="async"
                            >
                        </div>
                        <div class="flex -translate-y-48">
                            <div class="will-change-transform" data-parallax data-parallax-x="-20" data-parallax-y="24">
                                <div class="overflow-hidden scale-110">
                                    <img
                                        src="{{ asset('assets/img/about/collage-2.jpg') }}"
                                        alt="設施照片 2"
                                        class="w-full h-auto rounded-[18px] shadow-2xl"
                                        loading="lazy"
                                        decoding="async"
                                    >
                                </div>
                            </div>
                            <div class="will-change-transform" data-parallax data-parallax-x="24" data-parallax-y="36">
                                <div class="overflow-hidden translate-y-52 scale-120">
                                    <img
                                        src="{{ asset('assets/img/about/collage-3.jpg') }}"
                                        alt="設施照片 3"
                                        class="w-full h-auto rounded-[18px] shadow-2xl"
                                        loading="lazy"
                                        decoding="async"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
