<div class="analytics-conversions">
  <div class="flex justify-between items-center mb-6">
    <div>
      <h1 class="text-2xl font-bold">Conversions & Funnel</h1>
      <p class="text-gray-500">Track visitor engagement and inquiry generation</p>
    </div>
    
    <%= link_to "Back to Overview", site_admin_analytics_path, class: "text-blue-600 hover:underline" %>
  </div>

  <!-- Conversion Funnel -->
  <div class="bg-white rounded-lg shadow p-6 mb-6">
    <h3 class="text-lg font-semibold mb-6">Inquiry Funnel</h3>
    
    <div class="funnel-visualization flex flex-col items-center space-y-2">
      <!-- Visits -->
      <div class="funnel-step w-full max-w-2xl bg-blue-100 rounded p-4 text-center">
        <p class="text-2xl font-bold text-blue-800"><%= number_with_delimiter(@funnel[:visits]) %></p>
        <p class="text-blue-600">Total Visits</p>
      </div>
      
      <div class="text-gray-400">&#x25BC; <%= @conversion_rates[:view_rate] %>%</div>
      
      <!-- Property Views -->
      <div class="funnel-step w-full max-w-xl bg-green-100 rounded p-4 text-center">
        <p class="text-2xl font-bold text-green-800"><%= number_with_delimiter(@funnel[:property_views]) %></p>
        <p class="text-green-600">Viewed Properties</p>
      </div>
      
      <div class="text-gray-400">&#x25BC; <%= @conversion_rates[:contact_rate] %>%</div>
      
      <!-- Contact Form Opens -->
      <div class="funnel-step w-full max-w-md bg-yellow-100 rounded p-4 text-center">
        <p class="text-2xl font-bold text-yellow-800"><%= number_with_delimiter(@funnel[:contact_opens]) %></p>
        <p class="text-yellow-600">Opened Contact Form</p>
      </div>
      
      <div class="text-gray-400">&#x25BC; <%= @conversion_rates[:inquiry_rate] %>%</div>
      
      <!-- Inquiries -->
      <div class="funnel-step w-full max-w-sm bg-purple-100 rounded p-4 text-center">
        <p class="text-2xl font-bold text-purple-800"><%= number_with_delimiter(@funnel[:inquiries]) %></p>
        <p class="text-purple-600">Submitted Inquiries</p>
      </div>
    </div>
    
    <div class="mt-6 text-center">
      <p class="text-lg">
        Overall Conversion Rate: 
        <span class="font-bold text-green-600"><%= @conversion_rates[:overall_rate] %>%</span>
      </p>
      <p class="text-sm text-gray-500">Percentage of visits that result in an inquiry</p>
    </div>
  </div>

  <!-- Inquiries Over Time -->
  <div class="bg-white rounded-lg shadow p-4">
    <h3 class="text-lg font-semibold mb-4">Inquiries Over Time</h3>
    <%= line_chart @inquiries_by_day, 
        xtitle: "Date", 
        ytitle: "Inquiries",
        colors: ["#8B5CF6"] %>
  </div>
</div>
