<?php $__env->startSection('seo_title', '免費預約體驗｜' . config('app.name')); ?>
<?php $__env->startSection('seo_description', '免費預約體驗，30–45 分鐘快速了解你的學習方向。'); ?>

<?php $__env->startSection('body_class', 'page-free-trial'); ?>

<?php $__env->startSection('content'); ?>
    
    <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 text-white">
                    <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="<?php echo e(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-8 text-4xl md:text-5xl font-bold tracking-tight">
                        免費預約體驗
                    </h1>
                </div>
            </div>
        </div>
    </section>

    
    <section class="bg-[#141414] px-6 py-16 md:px-12 md:py-20">
        <div class="mx-auto max-w-7xl">
            <div class="grid gap-10 lg:grid-cols-[1.1fr_0.9fr] lg:items-start">
                <div class="text-white">
                    <div class="text-xs font-semibold tracking-[0.3em] text-white/60">FREE TRIAL</div>
                    <h2 class="mt-4 text-4xl md:text-5xl font-bold tracking-tight">
                        免費預約體驗，30–45 分鐘
                    </h2>
                    <p class="mt-4 text-base text-white/70 leading-relaxed">
                        透過短測與交流，快速了解你的程度與目標，給出最適合的課程建議。
                    </p>

                    <div class="mt-6 grid gap-4 sm:grid-cols-2">
                        <div class="rounded-[14px] border border-white/10 bg-white/5 p-4">
                            <div class="text-sm font-semibold">體驗內容</div>
                            <div class="mt-2 text-sm text-white/70">程度診斷、教學風格體驗、學習建議</div>
                        </div>
                        <div class="rounded-[14px] border border-white/10 bg-white/5 p-4">
                            <div class="text-sm font-semibold">預約規範</div>
                            <div class="mt-2 text-sm text-white/70">每人一次、需提前 24 小時預約</div>
                        </div>
                        <div class="rounded-[14px] border border-white/10 bg-white/5 p-4">
                            <div class="text-sm font-semibold">確認流程</div>
                            <div class="mt-2 text-sm text-white/70">24 小時內回覆確認時段</div>
                        </div>
                        <div class="rounded-[14px] border border-white/10 bg-white/5 p-4">
                            <div class="text-sm font-semibold">體驗方式</div>
                            <div class="mt-2 text-sm text-white/70">線上 / 實體（依場館安排）</div>
                        </div>
                    </div>
                </div>

                <div class="rounded-[18px] bg-white p-6 text-neutral-900 shadow-2xl md:p-8">
                    <h3 class="text-xl font-semibold">填寫預約資料</h3>
                    <p class="mt-2 text-sm text-neutral-500">留下資料，我們將在 24 小時內與你確認。</p>

                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(session('booking_success')): ?>
                        <div class="mt-4 rounded-[12px] bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
                            已收到你的預約！我們會儘快與你確認體驗時段。
                        </div>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($errors->any()): ?>
                        <div class="mt-4 rounded-[12px] bg-rose-50 px-4 py-3 text-sm text-rose-700">
                            <ul class="list-disc space-y-1 pl-5">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <li><?php echo e($error); ?></li>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </ul>
                        </div>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                    <?php
                        $availabilityOld = old('availability', []);
                    ?>

                    <form class="mt-6 space-y-4" action="<?php echo e(route('trial-bookings.store')); ?>" method="POST">
                        <?php echo csrf_field(); ?>

                        <div>
                            <label class="text-sm font-semibold">姓名 *</label>
                            <input
                                type="text"
                                name="name"
                                value="<?php echo e(old('name')); ?>"
                                class="mt-2 w-full rounded-[10px] border border-neutral-200 px-4 py-3 text-sm focus:border-neutral-400 focus:outline-none"
                                placeholder="請輸入姓名"
                                required
                            >
                        </div>

                        <div>
                            <label class="text-sm font-semibold">聯絡手機 *</label>
                            <input
                                type="tel"
                                name="phone"
                                value="<?php echo e(old('phone')); ?>"
                                class="mt-2 w-full rounded-[10px] border border-neutral-200 px-4 py-3 text-sm focus:border-neutral-400 focus:outline-none"
                                placeholder="請輸入手機號碼"
                                required
                            >
                        </div>

                        <div>
                            <label class="text-sm font-semibold">想學的內容 / 目標 *</label>
                            <input
                                type="text"
                                name="goal"
                                value="<?php echo e(old('goal')); ?>"
                                class="mt-2 w-full rounded-[10px] border border-neutral-200 px-4 py-3 text-sm focus:border-neutral-400 focus:outline-none"
                                placeholder="例如：增肌、體態改善、基礎體能"
                                required
                            >
                        </div>

                        <div>
                            <label class="text-sm font-semibold">可上課時段 *</label>
                            <div class="mt-2 grid gap-2 text-sm text-neutral-700">
                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = ['平日白天', '平日晚間', '週末上午', '週末下午']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $option): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <label class="inline-flex items-center gap-2">
                                        <input
                                            type="checkbox"
                                            name="availability[]"
                                            value="<?php echo e($option); ?>"
                                            class="h-4 w-4 rounded border-neutral-300 text-neutral-900 focus:ring-neutral-900"
                                            <?php if(in_array($option, $availabilityOld, true)): echo 'checked'; endif; ?>
                                        >
                                        <span><?php echo e($option); ?></span>
                                    </label>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                            </div>
                        </div>

                        <div class="grid gap-4 md:grid-cols-2">
                            <div>
                                <label class="text-sm font-semibold">目前程度</label>
                                <select
                                    name="level"
                                    class="mt-2 w-full rounded-[10px] border border-neutral-200 px-4 py-3 text-sm focus:border-neutral-400 focus:outline-none"
                                >
                                    <option value="">請選擇</option>
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = ['初學', '基礎', '進階']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $level): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <option value="<?php echo e($level); ?>" <?php if(old('level') === $level): echo 'selected'; endif; ?>><?php echo e($level); ?></option>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </select>
                            </div>
                            <div>
                                <label class="text-sm font-semibold">是否有上過相關課程</label>
                                <div class="mt-2 flex items-center gap-4 text-sm text-neutral-700">
                                    <label class="inline-flex items-center gap-2">
                                        <input
                                            type="radio"
                                            name="has_experience"
                                            value="yes"
                                            class="h-4 w-4 border-neutral-300 text-neutral-900 focus:ring-neutral-900"
                                            <?php if(old('has_experience') === 'yes'): echo 'checked'; endif; ?>
                                        >
                                        <span>有</span>
                                    </label>
                                    <label class="inline-flex items-center gap-2">
                                        <input
                                            type="radio"
                                            name="has_experience"
                                            value="no"
                                            class="h-4 w-4 border-neutral-300 text-neutral-900 focus:ring-neutral-900"
                                            <?php if(old('has_experience') === 'no'): echo 'checked'; endif; ?>
                                        >
                                        <span>沒有</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div>
                            <label class="text-sm font-semibold">其他需求或備註</label>
                            <textarea
                                name="notes"
                                rows="3"
                                class="mt-2 w-full rounded-[10px] border border-neutral-200 px-4 py-3 text-sm focus:border-neutral-400 focus:outline-none"
                                placeholder="任何想讓我們先知道的事"
                            ><?php echo e(old('notes')); ?></textarea>
                        </div>

                        <button
                            type="submit"
                            class="mt-2 inline-flex w-full items-center justify-center rounded-full bg-neutral-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-neutral-800"
                        >
                            立即預約免費體驗
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.site', ['title' => '免費預約體驗'], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH F:\xampp\htdocs\Laravel\v1246\lavida\resources\views/pages/free-trial.blade.php ENDPATH**/ ?>