@extends('layouts.welcome')

@section('content')
    <section class="policy-hero"
        style="
        position:relative;
        padding:140px 0 110px;
        overflow:hidden;
        background:
        linear-gradient(rgba(0,0,0,.68), rgba(0,0,0,.55)),
        url('{{ asset('assets/images/hero-page.png') }}') center center/cover no-repeat;
        color:#fff;
    ">
        <div class="container">

            <div class="policy-kicker">
                Before Booking
            </div>

            <h1 class="policy-title">
                Read All Booking Policies
            </h1>

            <p class="policy-subtitle">
                Please carefully review all salon policies before booking your appointment.
                By continuing with your reservation, you acknowledge and agree to every policy listed below.
            </p>

        </div>
    </section>

    <section class="policy-section">
        <div class="container">

            <div class="policy-card">

                <h2 class="policy-heading">
                    Appointment Policies
                </h2>

                <p class="policy-text">
                    These policies help us maintain premium service quality, proper scheduling,
                    and a smooth appointment experience for every client visiting our salon.
                </p>

                <div class="policy-list">

                    <div class="policy-item">
                        <div class="policy-count">01</div>

                        <p>
                            HAIR IS INCLUDED for most services except stated otherwise.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">02</div>

                        <p>
                            A non-refundable deposit of 30% is required through the website to secure your appointment.
                            The remaining balance can be paid via cash or transfer on your appointment day.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">03</div>

                        <p>
                            For Squeeze-In appointments, please send us a direct message.
                            A fee of $40 will be added to your original service total.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">04</div>

                        <p>
                            Appointments should be rescheduled within 48 hours.
                            Deposits will be forfeited for late cancellations or no-shows.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">05</div>

                        <p>
                            No plus ones or children are allowed during appointments.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">06</div>

                        <p>
                            Kindly arrive with your hair washed, detangled, and properly blown out.
                            Please avoid applying oil to your hair before your appointment.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">07</div>

                        <p>
                            Please ensure you book the correct hairstyle before your appointment.
                            Style changes on appointment day may not be accommodated.
                        </p>
                    </div>

                    <div class="policy-item">
                        <div class="policy-count">08</div>

                        <p>
                            Clients arriving later than 20 minutes will incur a $20 late fee.
                            Clients later than 40 minutes will have their appointment cancelled.
                        </p>
                    </div>

                </div>

                <div class="note-box">

                    <div class="note-title">
                        Braid Size Guidelines
                    </div>

                    <ul class="mb-0">
                        <li>Small Braids — 14 rows across hairline</li>
                        <li>Smedium Braids — 12 rows across hairline</li>
                        <li>Medium Braids — 10 rows across hairline</li>
                        <li>Large Braids — 6–8 rows across hairline</li>
                    </ul>

                </div>

                <div class="note-box">

                    <div class="note-title">
                        Please Note
                    </div>

                    <p class="mb-3">
                        Final results may vary depending on your hair texture,
                        density, length, and overall hair condition.
                    </p>

                    <p class="mb-0">
                        For inquiries or special requests, kindly DM us or call:
                        <strong>587-291-3426</strong>
                    </p>

                </div>

                <a href="{{ route('booking.categories') }}" class="continue-btn">
                    I Understand, Continue Booking
                </a>

            </div>

        </div>
    </section>
@endsection