<?php require "includes/header.php"; ?>

    <!-- Hero -->
    <section class="hero-wrap hero-wrap-2" style="background-image: url('images/hotel-bg.jpg');" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-9 ftco-animate text-center">
            <p class="breadcrumbs mb-2">
              <span class="mr-2"><a href="home.php">Home <i class="fa fa-chevron-right" style="font-size:11px;"></i></a></span>
              <span>Contact Us</span>
            </p>
            <h1 class="mb-0 bread">Contact ShiaStay Hotels</h1>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="ftco-section" style="background:#FBF7F4; padding:80px 0;">
      <div class="container">
        <div class="row justify-content-center mb-5">
          <div class="col-md-8 text-center heading-section ftco-animate">
            <span class="section-eyebrow">We'd Love to Hear From You</span>
            <h2 style="font-size:46px;">Get In Touch</h2>
            <div class="gold-divider"></div>
            <p style="color:#232323;">Whether you need help with a reservation, want to plan a special event, or simply have a question — our team is here to assist you 24/7.</p>
          </div>
        </div>

        <div class="row">

          <!-- Contact Info -->
          <div class="col-md-4 mb-4 ftco-animate">
            <div style="background:#232323; border-radius:2px; padding:36px; height:100%;">
              <h3 style="font-family:'Cormorant Garamond',serif; color:#A39382; font-size:28px; margin-bottom:30px;">Contact Information</h3>

              <div class="d-flex mb-4">
                <div style="width:42px; height:42px; background:rgba(163,147,130,0.12); border:1px solid rgba(163,147,130,0.3); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:16px;">
                  <i class="fa fa-map-marker" style="color:#A39382;"></i>
                </div>
                <div>
                  <p style="color:rgba(255,255,255,0.5); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Head Office</p>
                  <p style="color:rgba(255,255,255,0.8); margin:0;">14 Independence Avenue<br>Accra, Ghana</p>
                </div>
              </div>

              <div class="d-flex mb-4">
                <div style="width:42px; height:42px; background:rgba(163,147,130,0.12); border:1px solid rgba(163,147,130,0.3); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:16px;">
                  <i class="fa fa-phone" style="color:#A39382;"></i>
                </div>
                <div>
                  <p style="color:rgba(255,255,255,0.5); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Front Desk</p>
                  <a href="tel:+233201234567" style="color:rgba(255,255,255,0.8);">+233 20 123 4567</a>
                </div>
              </div>

              <div class="d-flex mb-4">
                <div style="width:42px; height:42px; background:rgba(163,147,130,0.12); border:1px solid rgba(163,147,130,0.3); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:16px;">
                  <i class="fa fa-envelope" style="color:#A39382;"></i>
                </div>
                <div>
                  <p style="color:rgba(255,255,255,0.5); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Reservations</p>
                  <a href="mailto:reservations@shiastayhotels.com" style="color:rgba(255,255,255,0.8);">reservations@shiastayhotels.com</a>
                </div>
              </div>

              <div class="d-flex mb-4">
                <div style="width:42px; height:42px; background:rgba(163,147,130,0.12); border:1px solid rgba(163,147,130,0.3); border-radius:2px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-right:16px;">
                  <i class="fa fa-clock-o" style="color:#A39382;"></i>
                </div>
                <div>
                  <p style="color:rgba(255,255,255,0.5); font-size:11px; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;">Hours</p>
                  <p style="color:rgba(255,255,255,0.8); margin:0;">Front Desk: 24/7<br>Check-in from 2:00 PM<br>Check-out by 12:00 PM</p>
                </div>
              </div>

              <hr style="border-color:rgba(163,147,130,0.2); margin:28px 0;">
              <p style="color:rgba(255,255,255,0.4); font-size:12px; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px;">Follow Us</p>
              <div class="d-flex gap-2" style="gap:10px;">
                <a href="#" style="width:38px; height:38px; background:rgba(163,147,130,0.1); border:1px solid rgba(163,147,130,0.25); border-radius:2px; display:inline-flex; align-items:center; justify-content:center; color:#A39382; margin-right:8px;"><i class="fa fa-facebook"></i></a>
                <a href="#" style="width:38px; height:38px; background:rgba(163,147,130,0.1); border:1px solid rgba(163,147,130,0.25); border-radius:2px; display:inline-flex; align-items:center; justify-content:center; color:#A39382; margin-right:8px;"><i class="fa fa-twitter"></i></a>
                <a href="#" style="width:38px; height:38px; background:rgba(163,147,130,0.1); border:1px solid rgba(163,147,130,0.25); border-radius:2px; display:inline-flex; align-items:center; justify-content:center; color:#A39382;"><i class="fa fa-instagram"></i></a>
              </div>
            </div>
          </div>

          <!-- Contact Form -->
          <div class="col-md-8 mb-4 ftco-animate">
            <div style="background:#E8E2D8; border-radius:2px; padding:40px; box-shadow:0 4px 24px rgba(35,35,35,0.08);">
              <h3 style="font-family:'Cormorant Garamond',serif; color:#685D54; font-size:28px; margin-bottom:8px;">Send Us a Message</h3>
              <p style="color:#232323; margin-bottom:30px; font-size:14px;">Fill in the form and our hospitality team will respond within 24 hours.</p>

              <form action="#" method="POST">
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:8px; display:block;">Full Name</label>
                    <input type="text" name="name" class="form-control" placeholder="e.g. Kwame Asante"
                           style="border:2px solid #E5DED2; border-radius:2px; padding:13px 16px; font-size:14px;">
                  </div>
                  <div class="col-md-6 mb-3">
                    <label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:8px; display:block;">Email Address</label>
                    <input type="email" name="email" class="form-control" placeholder="you@email.com"
                           style="border:2px solid #E5DED2; border-radius:2px; padding:13px 16px; font-size:14px;">
                  </div>
                  <div class="col-md-6 mb-3">
                    <label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:8px; display:block;">Phone Number</label>
                    <input type="tel" name="phone" class="form-control" placeholder="+233 XX XXX XXXX"
                           style="border:2px solid #E5DED2; border-radius:2px; padding:13px 16px; font-size:14px;">
                  </div>
                  <div class="col-md-6 mb-3">
                    <label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:8px; display:block;">Enquiry Type</label>
                    <select class="form-control" style="border:2px solid #E5DED2; border-radius:2px; padding:13px 16px; font-size:14px; height:auto;">
                      <option value="">Select enquiry type</option>
                      <option>Room Reservation</option>
                      <option>Corporate / Group Booking</option>
                      <option>Event & Conference</option>
                      <option>Spa & Wellness</option>
                      <option>General Enquiry</option>
                    </select>
                  </div>
                  <div class="col-md-12 mb-4">
                    <label style="font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#685D54; margin-bottom:8px; display:block;">Message</label>
                    <textarea name="message" rows="5" class="form-control" placeholder="Tell us how we can help you..."
                              style="border:2px solid #E5DED2; border-radius:2px; padding:13px 16px; font-size:14px; resize:vertical;"></textarea>
                  </div>
                  <div class="col-md-12">
                    <button type="submit" class="btn btn-primary" style="padding:16px 48px; font-size:11px; letter-spacing:2px;">
                      <i class="fa fa-paper-plane mr-2"></i>Send Message
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>

        </div>
      </div>
    </section>

<?php require "includes/footer.php"; ?>
