<section data-section data-component-type="Form" class="bg-gradient-to-b from-white to-[#007C8A50] py-16 lg:py-24" data-component-slug="ss-dental-appointment-form">
  <div class="max-w-[1920px] mx-auto px-8 lg:px-16 xl:px-24">
    <!-- Header -->
    <div class="text-center mb-12 lg:mb-16">
      <!-- Badge -->
      <span data-node="appointment_badge" data-node-type="text" data-node-label="Badge Text" data-node-default="Appointments" class="inline-block px-4 py-1.5 mb-6 text-sm font-medium text-gray-600 bg-gray-100 rounded-full border border-gray-200">{{appointment_badge}}</span>

      <!-- Title -->
      <h1 data-node="appointment_title" data-node-type="textarea" data-node-label="Title" data-node-default="Schedule Your Visit with Trusted Medical Specialists" class="text-3xl md:text-4xl lg:text-5xl font-medium text-gray-900 leading-tight mb-6 max-w-3xl mx-auto">
        {{appointment_title}}
      </h1>

      <!-- Description -->
      <p data-node="appointment_description" data-node-type="textarea" data-node-label="Description" data-node-default="Booking an appointment is simple, quick, and designed around your comfort. Choose the right specialist and let our care team guide you every step of the way." class="text-[#617280] text-base lg:text-lg leading-relaxed max-w-2xl mx-auto">
        {{appointment_description}}
      </p>
    </div>

    <!-- Appointment Form -->
    <div class="max-w-3xl mx-auto">
      <form data-appointment-form class="space-y-6">
        <!-- First Name & Last Name -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input type="text" name="first_name" placeholder="{{form_first_name_placeholder}}" data-node="form_first_name_placeholder" data-node-type="text" data-node-label="First Name Placeholder" data-node-default="First Name" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400" required>
          <input type="text" name="last_name" placeholder="{{form_last_name_placeholder}}" data-node="form_last_name_placeholder" data-node-type="text" data-node-label="Last Name Placeholder" data-node-default="Last Name" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400" required>
        </div>

        <!-- Email & Phone -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input type="email" name="email" placeholder="{{form_email_placeholder}}" data-node="form_email_placeholder" data-node-type="text" data-node-label="Email Placeholder" data-node-default="Email address" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400" required>
          <input type="tel" name="phone" placeholder="{{form_phone_placeholder}}" data-node="form_phone_placeholder" data-node-type="text" data-node-label="Phone Placeholder" data-node-default="Phone Number" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400">
        </div>

        <!-- Date & Time -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <input type="date" name="preferred_date" placeholder="{{form_date_placeholder}}" data-node="form_date_placeholder" data-node-type="text" data-node-label="Date Placeholder" data-node-default="Select Preferable Date" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400" required>
          <input type="time" name="preferred_time" placeholder="{{form_time_placeholder}}" data-node="form_time_placeholder" data-node-type="text" data-node-label="Time Placeholder" data-node-default="Select Preferable Time" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400" required>
        </div>

        <!-- Message -->
        <div>
          <textarea name="message" rows="5" placeholder="{{form_message_placeholder}}" data-node="form_message_placeholder" data-node-type="text" data-node-label="Message Placeholder" data-node-default="Type your message here" class="w-full px-5 py-4 bg-white border border-gray-200 rounded-lg focus:border-[#007C8A] focus:ring-1 focus:ring-[#007C8A] outline-none transition-colors text-gray-900 placeholder:text-gray-400 resize-none"></textarea>
        </div>

        <!-- Terms Checkbox -->
        <div class="flex items-start gap-3">
          <input type="checkbox" name="terms" id="terms-checkbox" class="mt-1 w-4 h-4 border-gray-300 rounded text-[#007C8A] focus:ring-[#007C8A]" required>
          <label for="terms-checkbox" class="text-sm text-gray-600">
            <span data-node="form_terms_text" data-node-type="textarea" data-node-label="Terms Text" data-node-default="I confirm that the information provided is accurate and agree to the Privacy Policy and Terms of Care.">{{form_terms_text}}</span>
          </label>
        </div>

        <!-- Submit Button -->
        <div>
          <button type="submit" class="inline-flex items-center px-8 py-4 bg-[#007C8A] text-white font-semibold rounded-lg hover:bg-[#006670] transition-all text-sm shadow-[0_8px_30px_rgba(0,124,138,0.4)]">
            <span data-node="form_submit_text" data-node-type="text" data-node-label="Submit Button Text" data-node-default="Submit Form">{{form_submit_text}}</span>
          </button>
        </div>

        <!-- Status Message -->
        <div id="appointment-form-status" class="hidden py-3 px-4 rounded-lg text-center font-medium"></div>
      </form>
    </div>
  </div>
</section>