<div class="p-6">
  <h2 class="text-xl font-semibold text-gray-900 mb-6">Home Page Settings</h2>

  <!-- Home Page Title -->
  <% if @home_page %>
    <%= form_with model: @home_page, url: site_admin_website_settings_path, method: :patch, local: true, class: "mb-8" do |f| %>
      <input type="hidden" name="tab" value="home">

      <div class="mb-6">
        <label for="page_title" class="block text-sm font-medium text-gray-700 mb-1">
          Home Page Title
        </label>
        <%= f.text_field :page_title,
            class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
            placeholder: "Welcome to Our Real Estate Agency" %>
        <p class="mt-1 text-sm text-gray-500">The main title displayed on your home page</p>
      </div>

      <div>
        <%= f.submit "Save Home Page Title",
            class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer" %>
      </div>
    <% end %>
  <% else %>
    <div class="mb-8 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
      <p class="text-yellow-800">No home page found. Please create a page with the slug "home" first.</p>
    </div>
  <% end %>

  <!-- Carousel Images Section -->
  <div class="border-t border-gray-200 pt-6">
    <h3 class="text-lg font-medium text-gray-900 mb-4">Carousel Images</h3>
    <p class="text-sm text-gray-500 mb-4">Manage the images displayed in your home page carousel/slider.</p>

    <% if @carousel_contents.any? %>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <% @carousel_contents.each do |content| %>
          <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
            <% if content.content_photos.any? %>
              <% photo = content.content_photos.first %>
              <div class="aspect-video bg-gray-200 rounded-lg mb-3 overflow-hidden">
                <%= image_tag photo.image_url, class: "w-full h-full object-cover", alt: "Carousel image" %>
              </div>
            <% else %>
              <div class="aspect-video bg-gray-200 rounded-lg mb-3 flex items-center justify-center">
                <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
              </div>
            <% end %>
            <div class="flex justify-between items-center">
              <span class="text-sm text-gray-600"><%= content.key %></span>
              <span class="text-xs text-gray-400">Order: <%= content.sort_order || 0 %></span>
            </div>
          </div>
        <% end %>
      </div>
    <% else %>
      <div class="p-8 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300 text-center">
        <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
        </svg>
        <p class="text-gray-500 mb-2">No carousel images configured</p>
        <p class="text-sm text-gray-400">Carousel images can be managed through the content management system.</p>
      </div>
    <% end %>

    <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
      <p class="text-sm text-blue-800">
        <strong>Note:</strong> To add or remove carousel images, use the
        <%= link_to "Contents", site_admin_contents_path, class: "underline hover:text-blue-900" %>
        section and manage items with the "carousel" tag.
      </p>
    </div>
  </div>

  <!-- Landing Page Display Options -->
  <div class="border-t border-gray-200 pt-6 mt-6">
    <h3 class="text-lg font-medium text-gray-900 mb-4">Landing Page Display Options</h3>

    <%= form_with model: @website, url: site_admin_website_settings_path, method: :patch, local: true do |f| %>
      <input type="hidden" name="tab" value="home">

      <div class="space-y-4">
        <label class="flex items-center">
          <%= f.check_box :landing_hide_for_rent, class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
          <span class="ml-3 text-sm text-gray-700">Hide "For Rent" section on landing page</span>
        </label>

        <label class="flex items-center">
          <%= f.check_box :landing_hide_for_sale, class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
          <span class="ml-3 text-sm text-gray-700">Hide "For Sale" section on landing page</span>
        </label>

        <label class="flex items-center">
          <%= f.check_box :landing_hide_search_bar, class: "h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" %>
          <span class="ml-3 text-sm text-gray-700">Hide search bar on landing page</span>
        </label>
      </div>

      <div class="mt-6">
        <%= f.submit "Save Display Options",
            class: "px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 cursor-pointer" %>
      </div>
    <% end %>
  </div>
</div>
