<div class="max-w-7xl mx-auto" x-data="{ showGettingStarted: <%= @show_getting_started %> }">
  <div class="mb-4 md:mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Dashboard</h1>
    <p class="mt-1 md:mt-2 text-sm md:text-base text-gray-600">
      Overview of your website: <%= @website.subdomain %>
    </p>
  </div>

  <!-- Quick Actions -->
  <div class="mb-6 md:mb-8">
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">Quick Actions</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        <%= link_to new_site_admin_prop_path, class: "flex flex-col items-center justify-center p-4 rounded-lg border-2 border-dashed border-gray-200 hover:border-blue-400 hover:bg-blue-50 transition-colors group" do %>
          <div class="w-10 h-10 rounded-full bg-blue-100 group-hover:bg-blue-200 flex items-center justify-center mb-2">
            <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700 group-hover:text-blue-700 text-center">Add Property</span>
        <% end %>

        <%= link_to site_admin_media_library_index_path, class: "flex flex-col items-center justify-center p-4 rounded-lg border-2 border-dashed border-gray-200 hover:border-green-400 hover:bg-green-50 transition-colors group" do %>
          <div class="w-10 h-10 rounded-full bg-green-100 group-hover:bg-green-200 flex items-center justify-center mb-2">
            <svg class="w-5 h-5 text-green-600" 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>
          <span class="text-sm font-medium text-gray-700 group-hover:text-green-700 text-center">Upload Media</span>
        <% end %>

        <%= link_to site_admin_messages_path, class: "flex flex-col items-center justify-center p-4 rounded-lg border-2 border-dashed border-gray-200 hover:border-purple-400 hover:bg-purple-50 transition-colors group relative" do %>
          <% if @unread_messages_count > 0 %>
            <span class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
              <%= @unread_messages_count > 9 ? '9+' : @unread_messages_count %>
            </span>
          <% end %>
          <div class="w-10 h-10 rounded-full bg-purple-100 group-hover:bg-purple-200 flex items-center justify-center mb-2">
            <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700 group-hover:text-purple-700 text-center">Messages</span>
        <% end %>

        <%= link_to site_admin_website_settings_tab_path('appearance'), class: "flex flex-col items-center justify-center p-4 rounded-lg border-2 border-dashed border-gray-200 hover:border-pink-400 hover:bg-pink-50 transition-colors group" do %>
          <div class="w-10 h-10 rounded-full bg-pink-100 group-hover:bg-pink-200 flex items-center justify-center mb-2">
            <svg class="w-5 h-5 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700 group-hover:text-pink-700 text-center">Edit Theme</span>
        <% end %>

        <%= link_to site_admin_pages_path, class: "flex flex-col items-center justify-center p-4 rounded-lg border-2 border-dashed border-gray-200 hover:border-yellow-400 hover:bg-yellow-50 transition-colors group" do %>
          <div class="w-10 h-10 rounded-full bg-yellow-100 group-hover:bg-yellow-200 flex items-center justify-center mb-2">
            <svg class="w-5 h-5 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700 group-hover:text-yellow-700 text-center">Edit Pages</span>
        <% end %>

        <%= link_to root_path, target: "_blank", class: "flex flex-col items-center justify-center p-4 rounded-lg border-2 border-dashed border-gray-200 hover:border-indigo-400 hover:bg-indigo-50 transition-colors group" do %>
          <div class="w-10 h-10 rounded-full bg-indigo-100 group-hover:bg-indigo-200 flex items-center justify-center mb-2">
            <svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700 group-hover:text-indigo-700 text-center">View Site</span>
        <% end %>
      </div>
    </div>
  </div>

  <!-- Getting Started Guide (dismissible) -->
  <% if @show_getting_started %>
    <div x-show="showGettingStarted" x-transition class="mb-6 md:mb-8">
      <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-lg shadow-lg p-4 md:p-6 text-white relative">
        <button @click="showGettingStarted = false; document.cookie = 'dismiss_getting_started=true; path=/; max-age=2592000'"
                class="absolute top-3 right-3 text-white/70 hover:text-white">
          <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="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </button>
        <h2 class="text-lg font-semibold mb-4">Getting Started</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          <% @website_health[:checks].select { |c| !c[:complete] }.first(4).each_with_index do |check, index| %>
            <%= link_to check[:path], class: "flex items-start p-3 bg-white/10 rounded-lg hover:bg-white/20 transition-colors" do %>
              <span class="flex-shrink-0 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-sm font-bold mr-3">
                <%= index + 1 %>
              </span>
              <div>
                <p class="font-medium"><%= check[:name] %></p>
                <p class="text-sm text-white/70 mt-1">Click to complete</p>
              </div>
            <% end %>
          <% end %>
        </div>
        <% if @website_health[:checks].all? { |c| c[:complete] } %>
          <p class="text-center py-4">All set! Your website is fully configured.</p>
        <% end %>
      </div>
    </div>
  <% end %>

  <!-- Website Health + Subscription Row -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 mb-6 md:mb-8">
    <!-- Website Health Widget -->
    <div class="bg-white rounded-lg shadow overflow-hidden">
      <div class="p-4 md:p-6 border-b border-gray-200">
        <div class="flex items-center justify-between">
          <h3 class="text-base md:text-lg font-semibold text-gray-900">Website Health</h3>
          <span class="text-2xl font-bold <%= @website_health[:percentage] >= 80 ? 'text-green-600' : @website_health[:percentage] >= 50 ? 'text-yellow-600' : 'text-red-600' %>">
            <%= @website_health[:percentage] %>%
          </span>
        </div>
        <!-- Progress bar -->
        <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
          <div class="h-2 rounded-full transition-all duration-500 <%= @website_health[:percentage] >= 80 ? 'bg-green-500' : @website_health[:percentage] >= 50 ? 'bg-yellow-500' : 'bg-red-500' %>"
               style="width: <%= @website_health[:percentage] %>%"></div>
        </div>
      </div>
      <div class="p-4 md:p-6">
        <div class="space-y-3">
          <% @website_health[:checks].each do |check| %>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <% if check[:complete] %>
                  <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                  </svg>
                <% else %>
                  <svg class="w-5 h-5 text-gray-300 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clip-rule="evenodd"></path>
                  </svg>
                <% end %>
                <span class="text-sm <%= check[:complete] ? 'text-gray-600' : 'text-gray-900 font-medium' %>">
                  <%= check[:name] %>
                </span>
              </div>
              <% unless check[:complete] %>
                <%= link_to 'Fix', check[:path], class: 'text-xs text-blue-600 hover:text-blue-800 font-medium' %>
              <% end %>
            </div>
          <% end %>
        </div>
      </div>
    </div>

    <!-- Subscription Status Card -->
    <% if @subscription %>
      <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="p-4 md:p-6 border-b border-gray-200">
          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div class="flex items-center space-x-3">
              <h3 class="text-base md:text-lg font-semibold text-gray-900">Subscription</h3>
              <% case @subscription_info[:status] %>
              <% when 'active' %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Active</span>
              <% when 'trialing' %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Trial</span>
              <% when 'past_due' %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">Past Due</span>
              <% when 'canceled' %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Canceled</span>
              <% when 'expired' %>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Expired</span>
              <% end %>
            </div>
            <div class="mt-2 sm:mt-0">
              <span class="font-semibold text-gray-900"><%= @subscription_info[:plan_name] %></span>
              <span class="text-sm text-gray-500 ml-2">(<%= @subscription_info[:plan_price] %>)</span>
            </div>
          </div>
        </div>

        <% if @subscription_info[:status] == 'trialing' && @subscription_info[:trial_days_remaining] %>
          <div class="px-4 md:px-6 py-3 <%= @subscription_info[:trial_ending_soon] ? 'bg-yellow-50' : 'bg-blue-50' %>">
            <div class="flex items-center">
              <% if @subscription_info[:trial_ending_soon] %>
                <svg class="h-5 w-5 text-yellow-400 mr-2" 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>
                <span class="text-sm font-medium text-yellow-800">Trial ending soon!</span>
              <% else %>
                <svg class="h-5 w-5 text-blue-400 mr-2" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
                </svg>
                <span class="text-sm font-medium text-blue-800">Trial period</span>
              <% end %>
              <span class="ml-2 text-sm <%= @subscription_info[:trial_ending_soon] ? 'text-yellow-700' : 'text-blue-700' %>">
                <% if @subscription_info[:trial_days_remaining] == 0 %>
                  Expires today
                <% elsif @subscription_info[:trial_days_remaining] == 1 %>
                  1 day remaining
                <% else %>
                  <%= @subscription_info[:trial_days_remaining] %> days remaining
                <% end %>
              </span>
            </div>
          </div>
        <% end %>

        <div class="px-4 md:px-6 py-4">
          <div class="grid grid-cols-2 gap-4">
            <div>
              <p class="text-xs text-gray-500 uppercase tracking-wide">Properties</p>
              <p class="mt-1 text-lg font-semibold text-gray-900">
                <%= @stats[:total_properties] %>
                <% if @subscription_info[:property_limit] %>
                  <span class="text-sm font-normal text-gray-500">/ <%= @subscription_info[:property_limit] %></span>
                <% else %>
                  <span class="text-sm font-normal text-gray-500">/ Unlimited</span>
                <% end %>
              </p>
            </div>
            <div>
              <p class="text-xs text-gray-500 uppercase tracking-wide">Access</p>
              <p class="mt-1 text-sm font-medium <%= @subscription_info[:in_good_standing] ? 'text-green-600' : 'text-red-600' %>">
                <%= @subscription_info[:in_good_standing] ? 'Full Access' : 'Limited' %>
              </p>
            </div>
          </div>
        </div>
      </div>
    <% else %>
      <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 md:p-6 flex items-center">
        <svg class="h-6 w-6 text-gray-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        <div>
          <h3 class="text-sm font-medium text-gray-900">No Active Subscription</h3>
          <p class="text-sm text-gray-500 mt-1">This website does not have an active subscription plan.</p>
        </div>
      </div>
    <% end %>
  </div>

  <!-- This Week's Activity + Statistics -->
  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 md:gap-6 mb-6 md:mb-8">
    <!-- Total Properties -->
    <div class="bg-white rounded-lg shadow p-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs font-medium text-gray-500 uppercase">Properties</p>
          <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_properties] %></p>
        </div>
        <div class="bg-blue-100 rounded-full p-2">
          <svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
      <% if @weekly_stats[:new_properties] > 0 %>
        <p class="text-xs text-green-600 mt-2">+<%= @weekly_stats[:new_properties] %> this week</p>
      <% end %>
    </div>

    <!-- Total Pages -->
    <div class="bg-white rounded-lg shadow p-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs font-medium text-gray-500 uppercase">Pages</p>
          <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_pages] %></p>
        </div>
        <div class="bg-green-100 rounded-full p-2">
          <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
    </div>

    <!-- Total Messages -->
    <div class="bg-white rounded-lg shadow p-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs font-medium text-gray-500 uppercase">Messages</p>
          <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_messages] %></p>
        </div>
        <div class="bg-purple-100 rounded-full p-2">
          <svg class="w-5 h-5 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
          </svg>
        </div>
      </div>
      <% if @weekly_stats[:new_messages] > 0 %>
        <p class="text-xs text-green-600 mt-2">+<%= @weekly_stats[:new_messages] %> this week</p>
      <% end %>
    </div>

    <!-- Total Contacts -->
    <div class="bg-white rounded-lg shadow p-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs font-medium text-gray-500 uppercase">Contacts</p>
          <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_contacts] %></p>
        </div>
        <div class="bg-yellow-100 rounded-full p-2">
          <svg class="w-5 h-5 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
          </svg>
        </div>
      </div>
      <% if @weekly_stats[:new_contacts] > 0 %>
        <p class="text-xs text-green-600 mt-2">+<%= @weekly_stats[:new_contacts] %> this week</p>
      <% end %>
    </div>

    <!-- Unread Messages -->
    <div class="bg-white rounded-lg shadow p-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs font-medium text-gray-500 uppercase">Unread</p>
          <p class="text-2xl font-bold <%= @unread_messages_count > 0 ? 'text-red-600' : 'text-gray-900' %> mt-1"><%= @unread_messages_count %></p>
        </div>
        <div class="<%= @unread_messages_count > 0 ? 'bg-red-100' : 'bg-gray-100' %> rounded-full p-2">
          <svg class="w-5 h-5 <%= @unread_messages_count > 0 ? 'text-red-600' : 'text-gray-600' %>" fill="currentColor" viewBox="0 0 20 20">
            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
          </svg>
        </div>
      </div>
      <% if @unread_messages_count > 0 %>
        <%= link_to 'View all', site_admin_messages_path, class: 'text-xs text-blue-600 hover:text-blue-800 mt-2 inline-block' %>
      <% end %>
    </div>

    <!-- Contents -->
    <div class="bg-white rounded-lg shadow p-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-xs font-medium text-gray-500 uppercase">Contents</p>
          <p class="text-2xl font-bold text-gray-900 mt-1"><%= @stats[:total_contents] %></p>
        </div>
        <div class="bg-red-100 rounded-full p-2">
          <svg class="w-5 h-5 text-red-600" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path>
          </svg>
        </div>
      </div>
    </div>
  </div>

  <!-- Recent Activity Timeline -->
  <div class="mb-6 md:mb-8">
    <div class="bg-white rounded-lg shadow">
      <div class="px-4 md:px-6 py-3 md:py-4 border-b border-gray-200">
        <h2 class="text-base md:text-lg font-semibold text-gray-900">Recent Activity</h2>
      </div>
      <div class="p-4 md:p-6">
        <% if @activity_timeline.any? %>
          <div class="flow-root">
            <ul class="-mb-8">
              <% @activity_timeline.each_with_index do |activity, index| %>
                <li>
                  <div class="relative pb-8">
                    <% unless index == @activity_timeline.length - 1 %>
                      <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                    <% end %>
                    <div class="relative flex space-x-3">
                      <div>
                        <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
                          <%= case activity[:type]
                              when :message then 'bg-purple-100'
                              when :property then 'bg-blue-100'
                              when :contact then 'bg-yellow-100'
                              else 'bg-gray-100'
                              end %>">
                          <% case activity[:type] %>
                          <% when :message %>
                            <svg class="w-4 h-4 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
                              <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path>
                              <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path>
                            </svg>
                          <% when :property %>
                            <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                              <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4z" clip-rule="evenodd"></path>
                            </svg>
                          <% when :contact %>
                            <svg class="w-4 h-4 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                              <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"></path>
                            </svg>
                          <% end %>
                        </span>
                      </div>
                      <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                        <div>
                          <%= link_to activity[:path], class: 'text-sm text-gray-900 hover:text-blue-600' do %>
                            <%= activity[:title] %>
                          <% end %>
                        </div>
                        <div class="text-right text-sm whitespace-nowrap text-gray-500">
                          <%= time_ago_in_words(activity[:time]) %> ago
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              <% end %>
            </ul>
          </div>
        <% else %>
          <p class="text-gray-500 text-center py-8">No recent activity</p>
        <% end %>
      </div>
    </div>
  </div>
</div>

<!-- Keyboard Shortcuts Modal -->
<div x-data="{ showShortcuts: false }"
     @keydown.window.prevent.?="showShortcuts = true"
     @keydown.window.escape="showShortcuts = false">

  <!-- Keyboard shortcut listeners -->
  <div x-data="{}"
       @keydown.window="
         if (event.key === 'g' && !event.ctrlKey && !event.metaKey) {
           window._waitingForNav = true;
           setTimeout(() => window._waitingForNav = false, 500);
         }
         if (window._waitingForNav) {
           if (event.key === 'p') { window.location.href = '<%= site_admin_props_path %>'; }
           if (event.key === 'm') { window.location.href = '<%= site_admin_messages_path %>'; }
           if (event.key === 's') { window.location.href = '<%= site_admin_website_settings_path %>'; }
           if (event.key === 'd') { window.location.href = '<%= site_admin_root_path %>'; }
           if (event.key === 'a') { window.location.href = '<%= site_admin_analytics_path %>'; }
         }
         if (event.key === 'n' && !event.ctrlKey && !event.metaKey) {
           window._waitingForNew = true;
           setTimeout(() => window._waitingForNew = false, 500);
         }
         if (window._waitingForNew && event.key === 'p') {
           window.location.href = '<%= new_site_admin_prop_path %>';
         }
       ">
  </div>

  <!-- Shortcuts Modal -->
  <div x-show="showShortcuts" x-transition class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
    <div class="flex items-center justify-center min-h-screen px-4">
      <div class="fixed inset-0 bg-gray-500 bg-opacity-75" @click="showShortcuts = false"></div>
      <div class="relative bg-white rounded-lg shadow-xl max-w-md w-full p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Keyboard Shortcuts</h3>
        <div class="space-y-3">
          <div class="flex justify-between">
            <span class="text-gray-600">Go to Dashboard</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">g d</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Go to Properties</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">g p</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Go to Messages</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">g m</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Go to Settings</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">g s</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Go to Analytics</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">g a</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">New Property</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">n p</span>
          </div>
          <div class="flex justify-between">
            <span class="text-gray-600">Show this help</span>
            <span class="text-gray-900 font-mono bg-gray-100 px-2 py-0.5 rounded">?</span>
          </div>
        </div>
        <button @click="showShortcuts = false" class="mt-6 w-full bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded">
          Close
        </button>
      </div>
    </div>
  </div>
</div>
