<section class="welcome-section">
  <!-- Background Image -->
  <div class="welcome-section__bg">
    <img
      src="https://images.unsplash.com/photo-1510798831971-661eb04b3739?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80"
      alt="Forest cabin"
      class="welcome-section__bg-image"
    />
    <div class="welcome-section__bg-overlay"></div>
  </div>

  <!-- Hero Content -->
  <div class="welcome-section__content">
    <div
      class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center"
    >
      <!-- Left: Text Content -->
      <div>
        <!-- Badge Element (no custom styling) -->
        <span class="badge badge--primary mb-6">
          ✨ Premium Nature Retreats
        </span>

        <!-- Typography Elements (no Tailwind text utilities) -->
        <h1 class="t-display-glass mb-6">
          Escape to Nature's Tranquility
        </h1>

        <p class="t-body-glass mb-8">
          Experience the serenity of Kampinos National Park with our
          curated nature retreats surrounded by pristine wilderness.
        </p>

        <!-- Button Elements (no custom button classes) -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="btn btn--primary btn--lg">
            <svg
              class="w-5 h-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
              />
            </svg>
            Browse Experiences
          </button>
          <button class="btn btn--outline-glass btn--lg">
            Contact Us
          </button>
        </div>
      </div>

      <!-- Right: Availability Widget -->

      <div class="form-card form-card--glassy">
        <div class="form-card__header">
          <p class="t-lead-glass">Check Availability</p>
          <p class="t-small-glass">
            Find the perfect experience for your dates
          </p>
        </div>

        <!-- Form Elements (using DS form classes) -->
        <form class="form-card__body">
          <div class="form-grid">
            <div class="field field--glass">
              <label class="field__label">From</label>
              <div class="field__control">
                <input type="date" class="input input--glass" />
              </div>
            </div>
            <div class="field field--glass">
              <label class="field__label">To</label>
              <div class="field__control">
                <input type="date" class="input input--glass" />
              </div>
            </div>
            <div class="field field--glass form-grid__full">
              <label class="field__label">Number of Guests</label>
              <div class="field__control">
                <select class="select select--glass">
                  <option value="1">1 Guest</option>
                  <option value="2" selected>2 Guests</option>
                  <option value="3">3 Guests</option>
                  <option value="4">4 Guests</option>
                  <option value="5">5 Guests</option>
                  <option value="6">6 Guests</option>
                  <option value="7">7 Guests</option>
                  <option value="8">8 Guests</option>
                  <option value="9">9 Guests</option>
                  <option value="10">10+ Guests</option>
                </select>
              </div>
            </div>
          </div>

          <div class="form-card__footer">
            <div class="form-actions">
              <button
                type="submit"
                class="btn btn--primary btn--full"
              >
                Search Experiences
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Scroll Indicator -->
  <div class="welcome-section__scroll-indicator">
    <svg
      class="welcome-section__scroll-icon"
      fill="none"
      stroke="currentColor"
      viewBox="0 0 24 24"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M19 14l-7 7m0 0l-7-7m7 7V3"
      />
    </svg>
  </div>
</section>