<div class="max-w-3xl mx-auto">
  <%= render 'progress', steps: @steps, current_step: @step, total_steps: @steps.keys.max %>

  <div class="bg-white rounded-lg shadow-lg p-8">
    <!-- Header -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-900 mb-2">Add Your First Property</h1>
      <p class="text-gray-600">List a property to see how it appears on your website. You can add more properties later.</p>
    </div>

    <%= form_with model: @property, url: site_admin_onboarding_path(step: @step), method: :post, local: true do |f| %>
      <div class="space-y-6">
        <!-- Property Title -->
        <div>
          <%= f.label :title, "Property Title", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_field :title,
              class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
              placeholder: "Beautiful 3-bedroom apartment in downtown",
              required: true %>
          <% if @property.errors[:title].any? %>
            <p class="mt-1 text-sm text-red-600"><%= @property.errors[:title].first %></p>
          <% end %>
        </div>

        <!-- Listing Type -->
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">Listing Type</label>
          <div class="flex space-x-4">
            <label class="inline-flex items-center">
              <%= f.check_box :for_sale, class: "rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500" %>
              <span class="ml-2 text-sm text-gray-700">For Sale</span>
            </label>
            <label class="inline-flex items-center">
              <%= f.check_box :for_rent, class: "rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-500 focus:ring-blue-500" %>
              <span class="ml-2 text-sm text-gray-700">For Rent</span>
            </label>
          </div>
        </div>

        <!-- Price -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <%= f.label :price_sale_current_cents, "Sale Price", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <span class="text-gray-500 sm:text-sm">$</span>
              </div>
              <%= f.number_field :price_sale_current_cents,
                  class: "block w-full pl-7 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                  placeholder: "250000" %>
            </div>
          </div>

          <div>
            <%= f.label :price_rental_monthly_current_cents, "Monthly Rent", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <div class="mt-1 relative rounded-md shadow-sm">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <span class="text-gray-500 sm:text-sm">$</span>
              </div>
              <%= f.number_field :price_rental_monthly_current_cents,
                  class: "block w-full pl-7 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                  placeholder: "1500" %>
            </div>
          </div>
        </div>

        <!-- Property Details -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <div>
            <%= f.label :bedrooms, "Bedrooms", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.number_field :bedrooms,
                min: 0,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "3" %>
          </div>

          <div>
            <%= f.label :bathrooms, "Bathrooms", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.number_field :bathrooms,
                min: 0,
                step: 0.5,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "2" %>
          </div>

          <div>
            <%= f.label :constructed_size, "Size (sqft)", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.number_field :constructed_size,
                min: 0,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "1500" %>
          </div>

          <div>
            <%= f.label :plot_size, "Lot (sqft)", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.number_field :plot_size,
                min: 0,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "5000" %>
          </div>
        </div>

        <!-- Location -->
        <div>
          <%= f.label :street_address, "Street Address", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_field :street_address,
              class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
              placeholder: "123 Oak Street" %>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <%= f.label :city, "City", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.text_field :city,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "San Francisco" %>
          </div>

          <div>
            <%= f.label :postal_code, "Postal Code", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.text_field :postal_code,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "94102" %>
          </div>

          <div>
            <%= f.label :country, "Country", class: "block text-sm font-medium text-gray-700 mb-1" %>
            <%= f.text_field :country,
                class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
                placeholder: "United States" %>
          </div>
        </div>

        <!-- Description -->
        <div>
          <%= f.label :description, "Description", class: "block text-sm font-medium text-gray-700 mb-1" %>
          <%= f.text_area :description,
              rows: 4,
              class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm px-4 py-2 border",
              placeholder: "Describe the property features, amenities, and what makes it special..." %>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="flex justify-between mt-8 pt-6 border-t border-gray-200">
        <div class="flex space-x-3">
          <%= link_to "Back", site_admin_onboarding_path(step: @step - 1), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
          
          <%= link_to "Skip for Now", site_admin_onboarding_skip_path(step: @step), class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-500 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
        </div>
        
        <%= f.submit "Save & Continue", class: "inline-flex items-center px-6 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" %>
      </div>
    <% end %>
  </div>

  <!-- Tip -->
  <div class="mt-4 bg-yellow-50 rounded-lg p-4">
    <div class="flex">
      <div class="flex-shrink-0">
        <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm text-yellow-700">
          <strong>Note:</strong> You can add photos and more details to your property later from the Properties section.
        </p>
      </div>
    </div>
  </div>
</div>
