<div class="space-y-8">
  <!-- 头部标题 -->
  <div class="text-center space-y-4">
    <h1 class="text-4xl font-bold">AI Weather Art</h1>
    <p class="text-xl text-base-content/70">Discover the beauty of weather through AI-generated art</p>
  </div>

  <!-- 轮播图 -->
  <div class="carousel w-full rounded-box">
    <% WeatherArt.last(5).each_with_index do |art, index| %>
      <div id="slide<%= index %>" class="carousel-item relative w-full">
        <% if art.image.attached? %>
          <%= image_tag art.image, class: "w-full aspect-video object-cover" %>
        <% end %>
        <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
          <a href="#slide<%= index == 0 ? 4 : index - 1 %>" class="btn btn-circle">❮</a>
          <a href="#slide<%= index == 4 ? 0 : index + 1 %>" class="btn btn-circle">❯</a>
        </div>
      </div>
    <% end %>
  </div>

  <!-- 最新天气艺术 -->
  <div class="space-y-4">
    <h2 class="text-2xl font-bold">Latest Weather Art</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <% WeatherArt.last(6).each do |art| %>
        <div class="card bg-base-200">
          <figure>
            <% if art.image.attached? %>
              <%= image_tag art.image, class: "w-full h-48 object-cover" %>
            <% end %>
          </figure>
          <div class="card-body">
            <h3 class="card-title"><%= art.city.name %></h3>
            <p><%= art.weather_date.strftime("%Y-%m-%d") %></p>
            <p><%= art.description %></p>
            <div class="card-actions justify-end">
              <%= link_to "View Details", city_weather_art_path(art.city, art), class: "btn btn-primary" %>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>