<%= page_title "Add Content" %>

<div class="min-h-screen bg-gray-50">
  <div class="max-w-4xl mx-auto">
    <!-- Page Header -->
    <div class="mb-8">
      <nav class="flex items-center space-x-2 text-sm text-gray-500 mb-4">
        <%= link_to "Content", contents_path, class: "hover:text-gray-700" %>
        <%= heroicon("chevron", class: "w-4 h-4") %>
        <span class="text-gray-900 font-medium">Add Content</span>
      </nav>
      
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-h2 text-neutral-900">Choose Content Type</h1>
          <p class="text-body text-neutral-700 mt-1">Select the type of content you want to create</p>
        </div>
      </div>
    </div>

    <!-- Content Type Selection -->
    <div class="px-6">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- Graphic Content -->
        <%= link_to new_graphic_path, class: "group block p-6 bg-white border-2 border-neutral-200 rounded-lg hover:border-brand hover:shadow-lg transition-all duration-200" do %>
          <div class="flex flex-col items-center text-center">
            <div class="w-12 h-12 bg-brand-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-brand-500 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-brand group-hover:text-white" aria-hidden="true" focusable="false">
                <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
              </svg>
            </div>
            <h3 class="text-h4 text-neutral-900 mb-2 group-hover:text-brand transition-colors duration-200">Add Graphic</h3>
            <p class="text-body text-neutral-700">Upload images, photos, and graphics for display.</p>
          </div>
        <% end %>

        <!-- Text/HTML Content -->
        <%= link_to new_rich_text_path, class: "group block p-6 bg-white border-2 border-neutral-200 rounded-lg hover:border-brand hover:shadow-lg transition-all duration-200" do %>
          <div class="flex flex-col items-center text-center">
            <div class="w-12 h-12 bg-brand-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-brand-500 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-brand group-hover:text-white" aria-hidden="true" focusable="false">
                <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
              </svg>
            </div>
            <h3 class="text-h4 text-neutral-900 mb-2 group-hover:text-brand transition-colors duration-200">Add Text / HTML</h3>
            <p class="text-body text-neutral-700">Create short messages and quick announcements using text.</p>
          </div>
        <% end %>

        <!-- Video Content -->
        <%= link_to new_video_path, class: "group block p-6 bg-white border-2 border-neutral-200 rounded-lg hover:border-brand hover:shadow-lg transition-all duration-200" do %>
          <div class="flex flex-col items-center text-center">
            <div class="w-12 h-12 bg-brand-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-brand-500 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-brand group-hover:text-white" aria-hidden="true" focusable="false">
                <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
              </svg>
            </div>
            <h3 class="text-h4 text-neutral-900 mb-2 group-hover:text-brand transition-colors duration-200">Add Video</h3>
            <p class="text-body text-neutral-700">Play videos from supported platforms.</p>
          </div>
        <% end %>
      </div>

      <!-- Advanced Content Types -->
      <% if policy(Clock.new).new? %>
        <div class="mt-12">
          <h2 class="text-h3 text-neutral-900 mb-1">Advanced</h2>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Clock Content -->
            <%= link_to new_clock_path, class: "group block p-6 bg-white border-2 border-neutral-200 rounded-lg hover:border-brand hover:shadow-lg transition-all duration-200" do %>
              <div class="flex flex-col items-center text-center">
                <div class="w-12 h-12 bg-brand-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-brand-500 transition-colors duration-200">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-brand group-hover:text-white" aria-hidden="true" focusable="false">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                  </svg>
                </div>
                <h3 class="text-h4 text-neutral-900 mb-2 group-hover:text-brand transition-colors duration-200">Add Clock</h3>
                <p class="text-body text-neutral-700">Display current date and time on screens.</p>
              </div>
            <% end %>
          </div>
        </div>
      <% end %>
    </div>

    <!-- Navigation -->
    <div class="flex items-center justify-between pt-6">
      <div class="flex space-x-3">
        <%= link_to "Back to content", contents_path, 
            class: "btn btn-secondary" %>
      </div>
    </div>
  </div>
</div>
