@extends('layouts.welcome')
@section('content')

<style>
    /* SECTION */
.section-block {
    padding: 90px 0;
}

.section-title {
    font-size: 40px;
    line-height: 1.2;
    margin: 0 0 12px;
    font-weight: 600;
    color: #1f1f1f;
}

.section-desc {
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.8;
}


.info-card,
.form-card {
    background: #fff;
    border: 1px solid var(--border-soft);
}

.info-card {
    padding: 40px 34px;
    position: sticky;
    top: 24px;
}

.info-badge {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 14px;
}

.info-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 14px;
    color: #1f1f1f;
}

.info-text {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 24px;
}

.appointment-points {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
}

.appointment-points li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
    color: #444;
    font-size: 14px;
    line-height: 1.8;
}

.appointment-points li::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    left: 0;
    top: 9px;
}

.hours-box {
    background: var(--bg-soft);
    padding: 22px 20px;
    border: 1px solid rgba(0, 0, 0, .05);
    margin-bottom: 24px;
}

.hours-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 12px;
    color: #3c332b;
}

.hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    font-size: 14px;
    color: #51473e;
}

.hours-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-mini {
    display: grid;
    gap: 14px;
}

.contact-mini-item {
    padding: 16px 18px;
    background: #fcfbf9;
    border: 1px solid rgba(0, 0, 0, .05);
}

.contact-mini-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: var(--accent-dark);
    margin-bottom: 6px;
}

.contact-mini-value {
    font-size: 14px;
    color: #3f3831;
    line-height: 1.7;
}

/* FORM */
.form-card {
    padding: 40px 34px;
}

.form-top {
    margin-bottom: 30px;
}

.form-badge {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .18em;
    margin-bottom: 12px;
}

.form-title {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 12px;
    color: #1f1f1f;
}

.form-subtitle {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

.form-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #453b33;
    margin-bottom: 10px;
}


.form-control,
.form-select {
    height: 58px;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, .10);
    background: var(--input-bg);
    padding: 0 18px;
    font-size: 16px;
    color: #1f1f1f;
    box-shadow: none !important;
    transition: .25s ease;
}

textarea.form-control {
    min-height: 150px;
    padding-top: 16px;
    resize: none;
}


.form-control::placeholder,
textarea.form-control::placeholder {
    color: #8a8a8a;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: #cdbda7;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(205, 189, 167, .12) !important;
}

.form-select {
    cursor: pointer;
}

.form-card {
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .05);
}

@media (max-width: 767px) {
    .form-card {
        padding: 24px;
    }

    .form-control,
    .form-select {
        height: 54px;
        font-size: 14px;
    }

    textarea.form-control {
        min-height: 130px;
    }
}

.service-option {
    display: block;
    position: relative;
    cursor: pointer;
}

.service-option>input {
    position: absolute;
    opacity: 0;
}

.service-box {
    border: 1px solid rgba(0, 0, 0, .10);
    background: #fbfaf8;
    padding: 18px 16px;
    min-height: 140px;
    transition: .25s ease;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
}

.service-top {
    margin-bottom: 12px;
}

.service-radio {
    pointer-events: none;
}

.custom-radio {
    width: 20px;
    height: 20px;
    border: 2px solid #cdbda7;
    border-radius: 50%;
    display: inline-block;
    position: relative;
}

.custom-radio::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #cdbda7;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: .25s ease;
}

.service-input:checked + .service-box {
    border-color: #cdbda7;
    background: #f2eee9;
}

.service-input:checked + .service-box .custom-radio::after {
    transform: translate(-50%, -50%) scale(1);
}

.service-name {
    font-size: 15px;
    font-weight: 600;
    color: #1f1f1f;
    margin-bottom: 6px;
}

.service-note {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}

.submit-btn {
    width: 100%;
    min-height: 56px;
    border: none;
    border-radius: 0;
    background: #9a8b77;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    transition: .25s ease;
}

.submit-btn:hover {
    background: #887864;
}

    </style>
    <section class="page-hero"
        style="
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .35)),
            linear-gradient(to bottom, rgba(0, 0, 0, .10), rgba(0, 0, 0, .42)),
            url('{{ asset('assets/images/hero-page.png') }}') center center / cover no-repeat;
    ">
        <div class="page-hero-content">
            <div class="page-hero-inner">
                <div class="page-kicker">Book Appointment</div>
                <h1 class="page-title">Reserve Your Beauty Session</h1>
                <p class="page-subtitle">
                    Book your hair appointment in a few easy steps. Choose your service, pick your preferred date and time,
                    and let us prepare a luxury salon experience made just for you.
                </p>
            </div>
        </div>
    </section>

    <section class="section-block">
        <div class="container">
            <div class="row g-3 align-items-start">
                <div class="col-12 col-lg-5">
                    <div class="info-card h-100">
                        <div class="info-badge">Appointment Details</div>

                        <h2 class="info-title">Your Look Deserves Proper Planning</h2>

                        <p class="info-text">
                            We keep our booking process simple, organized, and premium.
                            Share your preferred service, date, and any extra details
                            about your hair so we can prepare properly before your appointment.
                        </p>

                        <ul class="appointment-points">
                            <li>Please arrive at least 10 minutes before your appointment time.</li>
                            <li>Come with your hair properly washed unless wash service is included.</li>
                            <li>For wig installation, kindly bring your wig unit or select one from our collection.</li>
                            <li>Appointments may require confirmation before the date is fully reserved.</li>
                        </ul>

                        <div class="hours-box">
                            <div class="hours-title">Opening Hours</div>

                            <div class="hours-row">
                                <span>Monday - Friday</span>
                                <strong>9:00 AM - 6:00 PM</strong>
                            </div>

                            <div class="hours-row">
                                <span>Saturday</span>
                                <strong>10:00 AM - 7:00 PM</strong>
                            </div>

                            <div class="hours-row">
                                <span>Sunday</span>
                                <strong>By Appointment</strong>
                            </div>
                        </div>

                        <div class="contact-mini">
                            <div class="contact-mini-item">
                                <div class="contact-mini-label">Phone</div>
                                <div class="contact-mini-value">+234 800 000 0000</div>
                            </div>

                            <div class="contact-mini-item">
                                <div class="contact-mini-label">Email</div>
                                <div class="contact-mini-value">hello@radiancehairstudio.com</div>
                            </div>

                            <div class="contact-mini-item">
                                <div class="contact-mini-label">Location</div>
                                <div class="contact-mini-value">Ibadan, Oyo State, Nigeria</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-7">
                    <div class="form-card">
                        <div class="form-top">
                            <div class="form-badge">Appointment Form</div>

                            <h2 class="form-title">Tell Us What You Want</h2>

                            <p class="form-subtitle">
                                Fill in your details below and choose the service you want to book.
                                This page is clean HTML for now and can be connected to Laravel later.
                            </p>
                        </div>

                        <form action="#" method="POST">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Full Name</label>
                                    <input type="text" class="form-control" placeholder="Enter your full name">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Phone Number</label>
                                    <input type="tel" class="form-control" placeholder="Enter your phone number">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Email Address</label>
                                    <input type="email" class="form-control" placeholder="Enter your email address">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Preferred Contact Method</label>

                                    <select class="form-select">
                                        <option selected disabled>Select contact method</option>
                                        <option>Phone Call</option>
                                        <option>WhatsApp</option>
                                        <option>Email</option>
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">Select Service</label>

                                    <div class="row g-3">

                                        <div class="col-12 col-md-6">
                                            <label class="service-option">

                                                <input type="radio" name="service" checked class="service-input">

                                                <div class="service-box">
                                                    <div class="service-top">
                                                        <span class="custom-radio"></span>
                                                    </div>

                                                    <span class="service-name">Braids & Styling</span>

                                                    <span class="service-note">
                                                        Neat protective styles and beauty-focused finishing.
                                                    </span>
                                                </div>

                                            </label>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="service-option">

                                                <input type="radio" name="service" class="service-input">

                                                <div class="service-box">
                                                    <div class="service-top">
                                                        <span class="custom-radio"></span>
                                                    </div>

                                                    <span class="service-name">Wig Installation</span>

                                                    <span class="service-note">
                                                        Clean install with polished, natural-looking finishing.
                                                    </span>
                                                </div>

                                            </label>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="service-option">

                                                <input type="radio" name="service" class="service-input">

                                                <div class="service-box">
                                                    <div class="service-top">
                                                        <span class="custom-radio"></span>
                                                    </div>

                                                    <span class="service-name">Hair Revamp</span>

                                                    <span class="service-note">
                                                        Refresh old units and bring your hair back to life.
                                                    </span>
                                                </div>

                                            </label>
                                        </div>

                                        <div class="col-12 col-md-6">
                                            <label class="service-option">

                                                <input type="radio" name="service" class="service-input">

                                                <div class="service-box">
                                                    <div class="service-top">
                                                        <span class="custom-radio"></span>
                                                    </div>

                                                    <span class="service-name">Custom Styling Session</span>

                                                    <span class="service-note">
                                                        For special events, birthdays, weddings, or shoots.
                                                    </span>
                                                </div>

                                            </label>
                                        </div>

                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Preferred Date</label>
                                    <input type="date" class="form-control">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Preferred Time</label>

                                    <select class="form-select">
                                        <option selected disabled>Select preferred time</option>
                                        <option>09:00 AM</option>
                                        <option>10:00 AM</option>
                                        <option>11:00 AM</option>
                                        <option>12:00 PM</option>
                                        <option>01:00 PM</option>
                                        <option>02:00 PM</option>
                                        <option>03:00 PM</option>
                                        <option>04:00 PM</option>
                                        <option>05:00 PM</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Hair Length / Type</label>

                                    <select class="form-select">
                                        <option selected disabled>Select hair length or type</option>
                                        <option>Short Hair</option>
                                        <option>Medium Hair</option>
                                        <option>Long Hair</option>
                                        <option>I Will Bring a Wig</option>
                                        <option>I Want to Buy a Wig Too</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Have You Booked Before?</label>

                                    <select class="form-select">
                                        <option selected disabled>Select option</option>
                                        <option>Yes</option>
                                        <option>No</option>
                                    </select>
                                </div>

                                <div class="col-12">
                                    <label class="form-label">Extra Notes</label>

                                    <textarea class="form-control"
                                        placeholder="Tell us about the style you want, your preferred look, or anything we should know before your appointment."></textarea>
                                </div>

                                <div class="col-12">
                                    <button type="submit" class="submit-btn">
                                        Submit Appointment Request
                                    </button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection