@include('ai_includes.header')
<style>
  .contact-banner {
  background: linear-gradient(135deg, #fdfcfb, #e2d1c3);
  padding: 40px 20px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.contact-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #222;
  text-align: center;
  margin-bottom: 10px;
}

.contact-subtext {
  font-size: 1.2rem;
  text-align: center;
  color: #666;
  margin-bottom: 40px;
}

.form-box {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.form-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.inputDiv {
  position: relative;
  margin-top: 25px;
}
.inputDiv input {
  width: 100%;
  border: 1px solid #ccc;
  padding: 14px;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.inputDiv input:focus {
  border-color: #222;
  outline: none;
}
.inputDiv span {
  position: absolute;
  left: 15px;
  top: 12px;
  font-size: 14px;
  color: #777;
  transition: all 0.2s ease;
  pointer-events: none;
}
.inputDiv input:focus + span,
.inputDiv input:not(:placeholder-shown) + span {
  top: -8px;
  left: 12px;
  font-size: 12px;
  background: #fff;
  padding: 0 6px;
  color: #222;
}

.btn-dark {
  border-radius: 30px;
  padding: 12px 0;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.btn-dark:hover {
  background: #333;
  transform: scale(1.05);
}

.rules-list {
  margin-top: 60px;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.rules-list h5 {
  font-weight: 600;
  margin-bottom: 15px;
  color: #444;
}
.rules-list ul li {
  margin-bottom: 8px;
  color: #555;
  font-size: 0.95rem;
}
@media (max-width: 767px) {
  .contact-banner {
    padding: 50px 10px;
    padding-top:80px;
  }
  .form-box{
    padding: 20px;
    padding-top:1px;
  }
  .rules-list{
    padding: 20px 0px  !important;
    padding-right: 10px !important;
  }
}
</style>
<section class="contact-banner">
   <div class="container">
    <h2 class="contact-title">Pre-book Mattress</h2>
    <p class="contact-subtext">Reserve your comfort today – limited slots available!</p>

    <div class="row align-items-center justify-content-center mt-5">
        <div class="col-md-6 text-center mb-4">
            <img src="{{url('custom/ai-asset/book.png')}}" 
                 alt="Contact illustration" 
                 class="img-fluid contact-image">
        </div>

        <div class="col-md-6">
            <div class="form-box">
                <form method="POST" action="{{url('bookMattress')}}">
                    @csrf
                    <div class="inputDiv">
                        <input type="text" minlength="5" required name="name" placeholder=" " class="form-control">
                        <span>Full Name</span>
                    </div>
                    <div class="inputDiv">
                        <input type="email" required name="email" placeholder=" " class="form-control">
                        <span>Email</span>
                    </div>
                    <div class="inputDiv">
                        <input type="number" required name="number" placeholder=" " class="form-control">
                        <span>Phone Number</span>
                    </div>
                    <div class="inputDiv">
                        <input type="tel" required pattern="\d{6}" name="pincode" placeholder=" " class="form-control">
                        <span>Pincode</span>
                    </div>
                    <button type="submit" class="btn btn-dark w-100 mt-4">Book Now</button>
                </form>
            </div>
        </div>
    </div>

    <div class="rules-list mt-5">
        <h5 class="text-center">Important Information</h5>
        <ul>
            <li>Pre-booking confirms your interest but does not guarantee immediate delivery.</li>
            <li>Delivery timelines may vary depending on production schedules and logistics.</li>
            <li>Full payment may be required before final dispatch of the product.</li>
            <li>Orders may be canceled/refunded if stock is unavailable.</li>
            <li>Mattress specifications shown are indicative and may slightly vary.</li>
            <li>Color and fabric may differ slightly due to display variations.</li>
            <li>All dimensions are approximate with ±1 inch tolerance.</li>
            <li>Custom size pre-orders may require extra processing time.</li>
            <li>Please read our return & refund policy before booking.</li>
        </ul>
    </div>
</div>

  </section>

  @include('ai_includes.footer')
  
<script>
$('input[name="number"]').on('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '').slice(0, 10);

    if (this.value.length !== 10) {
        this.setCustomValidity("Please enter a valid 10-digit phone number");
    } else {
        this.setCustomValidity(""); 
    }
    this.reportValidity(); // refresh live
});
$('input[name="pincode"]').on('input', function() {
    this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6);
    if(this.value.length !== 6){
        this.setCustomValidity("Please enter a valid 6-digit pincode");
    }
    this.reportValidity(); 
});
</script>