<section id="contact" class="bg-slate-50 py-16 sm:py-20">
  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="grid md:grid-cols-2 gap-12 lg:gap-16 items-center">
      <!-- Contact Information -->
      <div>
        <h2 class="text-3xl font-bold tracking-tight text-slate-900">
          {{ sections.contact.title }}
        </h2>
        <p class="mt-4 text-lg text-slate-600">
          {{ sections.contact.subtitle }}
        </p>

        {% if sections.contact.liveStatus %}
        <div class="mt-6 flex items-center gap-2">
          <span class="relative flex h-3 w-3">
            <span
              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
            ></span>
            <span
              class="relative inline-flex rounded-full h-3 w-3 bg-green-500"
            ></span>
          </span>
          <span class="text-sm font-medium text-slate-700"
            >{{ sections.contact.liveStatus.responseTime }}</span
          >
          <span class="text-sm text-slate-500">•</span>
          <span class="text-sm text-slate-500"
            >{{ sections.contact.liveStatus.onlineMembers }} online</span
          >
        </div>
        {% endif %}

        <div class="mt-8 space-y-6">
          {% for method in sections.contact.contactMethods %}
          <div class="flex items-start gap-4">
            <div
              class="flex-shrink-0 h-12 w-12 rounded-lg bg-blue-50 flex items-center justify-center"
            >
              <i class="{{ method.icon }} text-xl text-blue-600"></i>
            </div>
            <div>
              <h3 class="text-lg font-medium text-slate-900">
                {{ method.title }}
              </h3>
              <p class="mt-1 text-base text-slate-500">{{ method.value }}</p>
              <p class="text-sm text-slate-400">{{ method.description }}</p>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>

      <!-- Contact Form -->
      <div class="bg-white rounded-xl shadow-lg border border-slate-200 p-8">
        <form class="space-y-5">
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <div>
              <label
                for="first-name"
                class="block text-sm font-medium text-slate-700"
                >First name</label
              >
              <input
                type="text"
                id="first-name"
                name="first-name"
                autocomplete="given-name"
                class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
              />
            </div>
            <div>
              <label
                for="last-name"
                class="block text-sm font-medium text-slate-700"
                >Last name</label
              >
              <input
                type="text"
                id="last-name"
                name="last-name"
                autocomplete="family-name"
                class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
              />
            </div>
          </div>

          <div>
            <label for="email" class="block text-sm font-medium text-slate-700"
              >Email</label
            >
            <input
              type="email"
              id="email"
              name="email"
              autocomplete="email"
              class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
            />
          </div>

          <div>
            <label for="phone" class="block text-sm font-medium text-slate-700"
              >Phone</label
            >
            <input
              type="tel"
              id="phone"
              name="phone"
              autocomplete="tel"
              class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
            />
          </div>

          <div>
            <label
              for="message"
              class="block text-sm font-medium text-slate-700"
              >Message</label
            >
            <textarea
              id="message"
              name="message"
              rows="4"
              class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md shadow-sm placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
            ></textarea>
          </div>

          <div>
            <button
              type="submit"
              class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200"
            >
              Send message
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>
