<section
  id="cafe-contact-form"
  class="w-full py-20"
  data-component-type="Content"
>
  <div class="max-w-[1920px] mx-auto px-[96px] cafe-form-container">
    <form id="cafeForm" class="space-y-10">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <input
          type="text"
          id="firstName"
          data-node="cafe_first_name_placeholder"
          data-node-type="text"
          data-node-label="First Name Placeholder"
          data-node-default="First Name"
          placeholder="{{cafe_first_name_placeholder}}"
          class="cafe-input"
        />

        <input
          type="text"
          id="lastName"
          data-node="cafe_last_name_placeholder"
          data-node-type="text"
          data-node-label="Last Name Placeholder"
          data-node-default="Last Name"
          placeholder="{{cafe_last_name_placeholder}}"
          class="cafe-input"
        />
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <input
          type="email"
          id="email"
          data-node="cafe_email_placeholder"
          data-node-type="text"
          data-node-label="Email Placeholder"
          data-node-default="Email"
          placeholder="{{cafe_email_placeholder}}"
          class="cafe-input"
        />

        <input
          type="text"
          id="phone"
          data-node="cafe_phone_placeholder"
          data-node-type="text"
          data-node-label="Phone Placeholder"
          data-node-default="Phone"
          placeholder="{{cafe_phone_placeholder}}"
          class="cafe-input"
        />
      </div>

      <textarea
        id="message"
        rows="7"
        data-node="cafe_message_placeholder"
        data-node-type="text"
        data-node-label="Message Placeholder"
        data-node-default="Message"
        placeholder="{{cafe_message_placeholder}}"
        class="cafe-input"
      ></textarea>

      <button type="submit" class="cafe-submit-btn">
        <span
          id="btnText"
          data-node="cafe_submit_button_text"
          data-node-type="text"
          data-node-label="Submit Button Text"
          data-node-default="SEND"
        >
          {{cafe_submit_button_text}}
        </span>

        <span id="btnLoader" class="hidden loader"></span>
      </button>

      <p
        id="cafeSuccessMessage"
        data-node="cafe_success_message"
        data-node-type="text"
        data-node-label="Form Success Message"
        data-node-default="Thank you! Your message has been sent."
        class="hidden text-center text-[#534931] font-montserrat text-[22px] mt-4"
      >
        {{cafe_success_message}}
      </p>
    </form>
  </div>
</section>

<style>
  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

  @media (max-width: 768px) {
    .cafe-form-container {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }
  }

  .cafe-input {
    width: 100%;
    border: 1.48px solid #c3b2a5;
    padding: 22px 26px;
    border-radius: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 23.65px;
    color: #5c5c5c;
  }

  .cafe-input::placeholder {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 23.65px;
    color: #5c5c5c;
  }

  .cafe-submit-btn {
    width: 100%;
    height: 88px;
    background: #b38e6a;
    border-radius: 397px;
    color: white;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 1px;
    transition: 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cafe-submit-btn:hover {
    background: #a27c58;
  }

  .loader {
    width: 24px;
    height: 24px;
    border: 3px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>
