<head>
  <title><%= content_for(:title) || product_name %></title>

  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>

  <%= combobox_style_tag %>

  <%= javascript_importmap_tags %>
  <%= render "layouts/dark_mode_check" %>
  <%= render "layouts/privacy_mode_check" %>
  <%= turbo_refreshes_with method: :morph, scroll: :preserve %>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="<%= product_name %>">
  <meta name="color-scheme" content="dark light">

  <%# Use theme colors that match both light and dark modes %>
  <meta name="msapplication-TileColor" content="#0B0B0B">
  <meta name="theme-color" content="#F9F9F9" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0B0B0B" media="(prefers-color-scheme: dark)">

  <link rel="manifest" href="<%= pwa_manifest_path %>">
  <%# Provide multiple iOS icons (standard 180x180 and larger) %>
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="512x512" href="/logo-pwa.png">
  <link rel="icon" sizes="192x192" type="image/png" href="/android-chrome-192x192.png">

  <% if Rails.env.production? && (posthog_config = Rails.configuration.x.posthog).try(:api_key).present? %>
    <%= render "shared/posthog", posthog_api_key: posthog_config.api_key, posthog_host: posthog_config.host %>
  <% end %>

  <%= yield :head %>
</head>
