<template>
  <!-- contact start -->
  <section class="section bg-light" id="contact">
    <b-container>
      <b-row class="justify-content-center mb-5">
        <b-col md="8" lg="6" class="text-center">
          <h6 class="subtitle">Our <span class="fw-bold">Contact Us</span></h6>
          <h2 class="title">Get in Touch</h2>
          <p class="text-muted">
            Sed ut perspiciatis unde omnis iste natus error voluptatem
            accusantium doloremque rem aperiam.
          </p>
        </b-col>
      </b-row>

      <b-row class="align-items-center">
        <b-col lg="4">
          <div class="d-flex align-items-center mb-5">
            <div class="flex-shrink-0">
              <img
                src="../assets/images/hello-icon.png"
                alt="..."
                height="80"
                class=""
              />
            </div>
            <div class="flex-grow-1 ms-3">
              <h2 class="mb-0">Say Hello!</h2>
            </div>
          </div>

          <div class="mb-4">
            <div class="d-flex align-items-center mb-3">
              <div class="flex-shrink-0">
                <div class="contact-icon bg-soft-primary text-primary">
                  <i class="mdi mdi-email"></i>
                </div>
              </div>
              <div class="flex-grow-1 ms-3">
                <h5 class="mb-0 fs-18">Email</h5>
              </div>
            </div>
            <p class="mb-1">
              <i class="mdi mdi-arrow-right-thin text-muted me-1"></i
              ><a href="javascript:void(0);" class="text-secondary"
                >JuanaMRush@jourrapide.com</a
              >
            </p>
            <p class="">
              <i class="mdi mdi-arrow-right-thin text-muted me-1"></i
              ><a href="javascript:void(0);" class="text-secondary"
                >BrandonDBrown@jourrapide.com</a
              >
            </p>
          </div>
          <div class="mb-4">
            <div class="d-flex align-items-center mb-3">
              <div class="flex-shrink-0">
                <div class="contact-icon bg-soft-primary text-primary">
                  <i class="mdi mdi-phone"></i>
                </div>
              </div>
              <div class="flex-grow-1 ms-3">
                <h5 class="mb-0 fs-18">Phone</h5>
              </div>
            </div>
            <p class="mb-1">
              <i class="mdi mdi-arrow-right-thin text-muted me-1"></i
              ><a href="javascript:void(0);" class="text-secondary"
                >(+01) 1234 5678 00</a
              >
            </p>
            <p class="">
              <i class="mdi mdi-arrow-right-thin text-muted me-1"></i
              ><a href="javascript:void(0);" class="text-secondary"
                >(+01) 1234 5678 90</a
              >
            </p>
          </div>
          <div class="">
            <div class="d-flex align-items-center mb-3">
              <div class="flex-shrink-0">
                <div class="contact-icon bg-soft-primary text-primary">
                  <i class="mdi mdi-google-maps"></i>
                </div>
              </div>
              <div class="flex-grow-1 ms-3">
                <h5 class="mb-0 fs-18">Address</h5>
              </div>
            </div>
            <h5 class="fs-16 mb-2 text-secondary">
              <i class="mdi mdi-arrow-right-thin text-muted me-1"></i> New York
              Office
            </h5>
            <p class="text-muted lh-base">
              331 Maple Street, Monroe Avenue, CA 90017
            </p>
            <h5 class="fs-16 mb-2 text-secondary">
              <i class="mdi mdi-arrow-right-thin text-muted me-1"></i> Anguilla
              Office
            </h5>
            <p class="text-muted lh-base mb-0">
              2118 Bird Spring, Creek Road, TX 77388
            </p>
          </div>
        </b-col>
        <b-col lg="7" class="offset-lg-1">
          <b-card class="contact-form rounded-lg mt-4 mt-lg-0">
            <b-card-body class="p-5">
              <form>
                <b-row>
                  <b-col md="6">
                    <div class="mb-3">
                      <label for="formFirstName" class="form-label"
                        >First Name</label
                      >
                      <b-form-input
                        type="text"
                        id="formFirstName"
                        placeholder="Your first name..."
                        required
                      />
                    </div>
                  </b-col>
                  <b-col md="6">
                    <div class="mb-3">
                      <label for="formLastName" class="form-label"
                        >Last Name</label
                      >
                      <b-form-input
                        type="text"
                        id="formLastName"
                        placeholder="Last first name..."
                        required
                      />
                    </div>
                  </b-col>
                  <b-col md="6">
                    <div class="mb-3">
                      <label for="formEmail" class="form-label"
                        >Email Address</label
                      >
                      <b-form-input
                        type="email"
                        id="formEmail"
                        placeholder="Your email..."
                        required
                      />
                    </div>
                  </b-col>
                  <b-col md="6">
                    <div class="mb-3">
                      <label for="formPhone" class="form-label"
                        >Phone Number</label
                      >
                      <b-form-input
                        type="text"
                        id="formPhone"
                        placeholder="Type phone number..."
                        required
                      />
                    </div>
                  </b-col>
                  <b-col cols="12">
                    <div class="mb-3">
                      <label for="formSubject" class="form-label"
                        >Subject</label
                      >
                      <b-form-input
                        type="text"
                        id="formSubject"
                        placeholder="Type subject..."
                        required
                      />
                    </div>
                  </b-col>
                  <b-col cols="12">
                    <div class="mb-4">
                      <label for="formMessages" class="form-label"
                        >Messages</label
                      >
                      <b-form-textarea
                        class="form-control"
                        id="formMessages"
                        rows="4"
                        placeholder="Type messages..."
                        required
                      ></b-form-textarea>
                    </div>
                  </b-col>
                </b-row>
                <button type="submit" class="btn btn-gradient-danger">
                  Send Messages <i class="mdi mdi-send ms-1"></i>
                </button>
              </form>
            </b-card-body>
          </b-card>
        </b-col>
      </b-row>
    </b-container>
  </section>
  <!-- contact end -->
</template>

<script lang="ts">
export default {};
</script>

<style scoped></style>
