Contact Us

<section class="contact-us-section">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
      <!-- Contact Info -->
      <div>
        <span class="badge badge--primary mb-4">Contact Us</span>
        <h2 class="t-h2 mb-6">Get in Touch</h2>
        <p class="t-lead t-muted mb-8">
          Have questions about our experiences or need help with your
          booking? Send us a message and we'll get back to you as soon as
          possible.
        </p>

        <div class="space-y-6">
          <div class="flex items-start gap-4">
            <div class="t-h4 flex-shrink-0">📍</div>
            <div>
              <div class="t-body t-bold">Location</div>
              <div class="t-body t-muted">Kampinos, Mazowieckie, Poland</div>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div class="t-h4 flex-shrink-0">⏱️</div>
            <div>
              <div class="t-body t-bold">Response Time</div>
              <div class="t-body t-muted">We typically respond within 24 hours</div>
            </div>
          </div>
          <div class="flex items-start gap-4">
            <div class="t-h4 flex-shrink-0">🏡</div>
            <div>
              <div class="t-body t-bold">Our Properties</div>
              <div class="t-body t-muted">2 cozy houses in Kampinos Forest</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Contact Form -->
      <div class="form-card form-card--standard">
        <div class="form-card__header">
          <h3 class="t-h4">Send Us a Message</h3>
          <p class="t-small t-muted">Fill out the form and we'll get back to you shortly</p>
        </div>

        <form class="form-card__body">
          <div class="form-layout">
            <div class="form-grid">
              <div class="field">
                <label class="field__label">Your Name</label>
                <div class="field__control">
                  <input type="text" class="input" placeholder="Jan Kowalski">
                </div>
              </div>
              <div class="field">
                <label class="field__label">Your Email</label>
                <div class="field__control">
                  <input type="email" class="input" placeholder="jan@example.com">
                </div>
              </div>
            </div>

            <div class="field">
              <label class="field__label">Subject</label>
              <div class="field__control">
                <select class="select">
                  <option value="">Select a topic...</option>
                  <option value="booking">Booking Inquiry</option>
                  <option value="availability">Availability Question</option>
                  <option value="group">Group Booking (10+ guests)</option>
                  <option value="special">Special Requests</option>
                  <option value="other">Other</option>
                </select>
              </div>
            </div>

            <div class="field">
              <label class="field__label">Message</label>
              <div class="field__control">
                <textarea
                  rows="4"
                  class="textarea textarea--no-resize"
                  placeholder="Tell us about your planned stay, questions, or special requests..."
                ></textarea>
              </div>
            </div>

            <div class="field">
              <label class="form-field__option">
                <input type="checkbox" class="checkbox">
                <span class="t-small t-muted">
                  I agree to the <a href="#">Privacy Policy</a> and consent to having my data processed to
                  respond to my inquiry.
                </span>
              </label>
            </div>
          </div>
        </form>

        <div class="form-card__footer">
          <div class="form-actions">
            <div class="form-actions__primary">
              <button type="submit" class="btn btn--primary btn--full">Send Message</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>