defmodule AshuiWeb.DocsLive do
  use AshuiWeb, :live_view

  @impl true
  def mount(params, _session, socket) do
    section = Map.get(params, "section", "getting-started")
    component = Map.get(params, "component", nil)

    socket =
      socket
      |> assign(section: section, component: component)
      |> assign(rich_text_content: nil)
      |> assign(form: to_form(%{"content" => nil}))
      |> assign(sidebar_open: true)
      |> assign(sidebar_section_states: build_sidebar_section_states())
      |> assign(:github_star_count, "2.4k")

    {:ok, socket}
  end

  @impl true
  def handle_params(params, _url, socket) do
    if Map.has_key?(params, "section") do
      section = Map.get(params, "section", "getting-started")
      component = Map.get(params, "component", nil)
      {:noreply, assign(socket, section: section, component: component)}
    else
      {:noreply,
       socket
       |> assign(section: "getting-started", component: nil)
       |> push_navigate(to: ~p"/docs/getting-started")}
    end
  end

  @impl true
  def handle_event("validate", %{"content" => content}, socket) do
    {:noreply, assign(socket, rich_text_content: content)}
  end

  @impl true
  def handle_event("validate", _params, socket) do
    {:noreply, socket}
  end

  @impl true
  def handle_event("toggle-sidebar", _params, socket) do
    current = Map.get(socket.assigns, :sidebar_open, true)
    {:noreply, assign(socket, sidebar_open: not current)}
  end

  @impl true
  def handle_event("toggle-nav-section", %{"section" => section}, socket) do
    states = socket.assigns[:sidebar_section_states] || %{}
    updated_states = Map.update(states, section, true, &(!&1))

    {:noreply, assign(socket, sidebar_section_states: updated_states)}
  end

  @impl true
  def handle_event("expand-all-sections", _params, socket) do
    {:noreply, assign(socket, sidebar_section_states: build_sidebar_section_states(true))}
  end

  @impl true
  def handle_event("collapse-all-sections", _params, socket) do
    {:noreply, assign(socket, sidebar_section_states: build_sidebar_section_states(false))}
  end

  @impl true
  def handle_event("update-rich-text", %{"content" => content}, socket) do
    {:noreply, assign(socket, rich_text_content: content)}
  end

  @impl true
  def handle_event("carousel-prev", %{"id" => id}, socket) do
    current = Map.get(socket.assigns, :"#{id}_current_slide", 0)
    new_current = max(0, current - 1)
    {:noreply, assign(socket, :"#{id}_current_slide", new_current)}
  end

  @impl true
  def handle_event("carousel-next", %{"id" => id}, socket) do
    current = Map.get(socket.assigns, :"#{id}_current_slide", 0)
    {:noreply, assign(socket, :"#{id}_current_slide", current + 1)}
  end

  @impl true
  def handle_event("carousel-go-to", %{"id" => id, "index" => index}, socket) do
    {:noreply, assign(socket, :"#{id}_current_slide", String.to_integer(index))}
  end

  @impl true
  def handle_event("wizard-prev", %{"id" => id}, socket) do
    # Wizard navigation would need to be handled by updating step active states
    {:noreply, socket}
  end

  @impl true
  def handle_event("wizard-next", %{"id" => id}, socket) do
    # Wizard navigation would need to be handled by updating step active states
    {:noreply, socket}
  end

  @impl true
  def handle_event("toggle-filter-panel", %{"id" => id}, socket) do
    current = Map.get(socket.assigns, :"#{id}_collapsed", false)
    {:noreply, assign(socket, :"#{id}_collapsed", !current)}
  end

  @impl true
  def handle_event("filter-changed", _params, socket) do
    {:noreply, socket}
  end

  @impl true
  def handle_event("clear-filters", %{"id" => _id}, socket) do
    {:noreply, socket}
  end

  @impl true
  def handle_event("autocomplete-search", %{"id" => id, "value" => value}, socket) do
    # Filter options based on search value
    # In a real app, this would filter from server-side data
    {:noreply, assign(socket, :"#{id}_search_value", value)}
  end

  @impl true
  def handle_event("sortable-reorder", %{"id" => id, "order" => order}, socket) do
    # Handle reordering - in a real app, update the items list
    {:noreply, assign(socket, :"#{id}_order", order)}
  end

  @impl true
  def handle_event("chat-send", %{"id" => _id, "message" => _message}, socket) do
    # Handle chat message - in a real app, broadcast to channel
    {:noreply, socket}
  end

  @impl true
  def handle_event("chat-typing", %{"id" => _id}, socket) do
    # Handle typing indicator - in a real app, broadcast typing status
    {:noreply, socket}
  end

  @impl true
  def handle_event(
        "feed-action",
        %{"id" => _id, "item-id" => _item_id, "action" => _action},
        socket
      ) do
    # Handle feed item action
    {:noreply, socket}
  end

  @impl true
  def handle_event("toggle-connection", %{"id" => _id}, socket) do
    # Handle connection toggle
    {:noreply, socket}
  end

  @impl true
  def handle_event("view-all-connections", %{"type" => _type}, socket) do
    # Handle view all connections
    {:noreply, socket}
  end

  @impl true
  def handle_event("toggle-drawer", %{"id" => id}, socket) do
    current_state = Map.get(socket.assigns, :"#{id}_open", false)
    {:noreply, assign(socket, :"#{id}_open", !current_state)}
  end

  @impl true
  def handle_event("close-drawer", %{"id" => id}, socket) do
    {:noreply, assign(socket, :"#{id}_open", false)}
  end

  @impl true
  def handle_event("open-lightbox", %{"id" => id, "index" => index}, socket) do
    images = Map.get(socket.assigns, :"#{id}_images", [])

    {:noreply,
     socket
     |> assign(:"#{id}_show", true)
     |> assign(:"#{id}_current_index", String.to_integer(index))
     |> assign(:"#{id}_images", images)}
  end

  @impl true
  def handle_event("close-lightbox", %{"id" => id}, socket) do
    {:noreply, assign(socket, :"#{id}_show", false)}
  end

  @impl true
  def handle_event("lightbox-prev", %{"id" => id}, socket) do
    current_index = Map.get(socket.assigns, :"#{id}_current_index", 0)
    new_index = max(0, current_index - 1)
    {:noreply, assign(socket, :"#{id}_current_index", new_index)}
  end

  @impl true
  def handle_event("lightbox-next", %{"id" => id}, socket) do
    current_index = Map.get(socket.assigns, :"#{id}_current_index", 0)
    images = Map.get(socket.assigns, :"#{id}_images", [])
    new_index = min(length(images) - 1, current_index + 1)
    {:noreply, assign(socket, :"#{id}_current_index", new_index)}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <Layouts.app flash={@flash}>
      <div class="relative min-h-screen overflow-hidden bg-slate-950 text-white">
        <div class="absolute inset-0 -z-10">
          <div class="absolute -top-40 -right-32 h-80 w-80 rounded-full bg-blue-500/10 blur-3xl">
          </div>
          <div class="absolute top-1/3 -left-20 h-60 w-60 rounded-full bg-purple-500/10 blur-3xl">
          </div>
          <div class="absolute bottom-0 right-1/4 h-96 w-96 rounded-full bg-cyan-500/10 blur-3xl">
          </div>
          <div class="absolute -bottom-20 left-1/3 h-64 w-64 rounded-full bg-emerald-500/10 blur-3xl">
          </div>
          <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:64px_64px] [mask-image:radial-gradient(ellipse_80%_55%_at_50%_-10%,black,transparent)]">
          </div>
        </div>

        <div class="relative z-10 flex min-h-screen flex-col">
          <header class="sticky top-0 z-30 h-20 border-b border-white/10 bg-slate-950/80 backdrop-blur">
            <div class="mx-auto flex h-full w-full max-w-7xl items-center justify-between px-6 sm:px-8 lg:px-12">
              <div class="flex items-center gap-5">
                <button
                  type="button"
                  phx-click="toggle-sidebar"
                  class="flex h-12 w-12 items-center justify-center rounded-full border border-white/15 bg-white/10 text-white shadow-lg shadow-blue-500/20 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/20 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-slate-950"
                >
                  <.icon
                    name={if(@sidebar_open, do: "hero-x-mark", else: "hero-bars-3")}
                    class={
                      "h-5 w-5 transition-transform duration-200 " <>
                        if(@sidebar_open, do: "rotate-90", else: "")
                    }
                  />
                  <span class="sr-only">Toggle navigation</span>
                </button>

                <.link
                  navigate={~p"/"}
                  class="flex items-center gap-4 text-sm font-semibold uppercase tracking-[0.35em] text-white/90 transition hover:text-white"
                >
                  <div class="flex h-14 w-14 items-center justify-center rounded-full bg-white shadow-xl shadow-blue-500/30">
                    <img
                      src={~p"/images/ashui-logo.png"}
                      alt="AshUI logo"
                      class="h-11 w-11 object-contain"
                    />
                  </div>
                  AshUI
                </.link>

                <span class="hidden text-xs font-semibold uppercase tracking-[0.35em] text-white/50 md:inline-flex">
                  Docs
                </span>
              </div>

              <nav class="hidden items-center gap-8 text-sm font-semibold text-white/70 lg:flex">
                <.link navigate={~p"/"} class="transition-colors duration-200 hover:text-white">
                  Home
                </.link>
                <.link
                  navigate={~p"/docs/getting-started"}
                  class="relative text-white transition-colors duration-200 hover:text-white"
                >
                  Docs
                  <span class="absolute -bottom-2 left-0 h-0.5 w-full scale-x-100 bg-gradient-to-r from-blue-400 via-white to-purple-400"></span>
                </.link>
                <.link navigate={~p"/docs/components"} class="transition-colors duration-200 hover:text-white">
                  Components
                </.link>
                <.link navigate={~p"/docs/roadmap"} class="transition-colors duration-200 hover:text-white">
                  Roadmap
                </.link>
                <.link href="https://demo.ashui.dev" target="_blank" class="transition-colors duration-200 hover:text-white">
                  Playground
                </.link>
                <.link
                  href="https://github.com/AbrhamWube/ashui"
                  target="_blank"
                  class="transition-colors duration-200 hover:text-white"
                >
                  GitHub
                </.link>
              </nav>

              <div class="hidden items-center gap-3 lg:flex">
                <span class="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-white/70">
                  {@github_star_count} GitHub stars
                </span>
                <Ashui.Components.Button.button
                  variant={:primary}
                  size={:sm}
                  class="px-5 py-2 text-sm font-semibold shadow-lg shadow-blue-500/30 transition hover:-translate-y-0.5 hover:shadow-blue-400/40"
                  href="https://demo.ashui.dev"
                  target="_blank"
                  id="docs-header-cta"
                >
                  Launch Playground
                </Ashui.Components.Button.button>
              </div>

              <div class="flex items-center gap-3 lg:hidden">
                <span class="rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-white/70">
                  {@github_star_count} ⭐
                </span>
                <Ashui.Components.Button.button
                  variant={:ghost}
                  size={:sm}
                  class="border border-white/20 px-4 py-2 text-xs font-semibold text-white/90 hover:bg-white/10"
                  href="https://demo.ashui.dev"
                  target="_blank"
                  id="docs-header-mobile-cta"
                >
                  Playground
                </Ashui.Components.Button.button>
              </div>
            </div>
          </header>

          <div class="relative flex flex-1 overflow-hidden">
            <%= if @sidebar_open do %>
              <button
                type="button"
                phx-click="toggle-sidebar"
                class="absolute inset-x-0 top-20 bottom-0 z-20 bg-slate-900/50 backdrop-blur-sm transition-opacity duration-300 md:hidden"
                aria-label="Close navigation overlay"
              >
              </button>
            <% end %>

            <aside class={[
              "docs-sidebar relative z-30 h-full overflow-hidden border-r border-white/10 bg-slate-950/90 backdrop-blur-xl transition-all duration-300 ease-out shadow-[0_0_160px_-40px_rgba(59,130,246,0.55)] md:translate-x-0 md:w-80",
              if(@sidebar_open,
                do: "w-72 translate-x-0 opacity-100 pointer-events-auto",
                else: "-translate-x-full opacity-0 pointer-events-none md:opacity-100"
              )
            ]}>
              <div class="flex h-full flex-col">
                <div class="absolute inset-0 -z-10 bg-gradient-to-b from-blue-600/20 via-slate-950/40 to-slate-950">
                </div>
                <div class="absolute -left-20 top-24 -z-10 h-60 w-60 rounded-full bg-cyan-500/10 blur-3xl">
                </div>
                <div class="absolute -right-16 top-40 -z-10 h-48 w-48 rounded-full bg-purple-500/15 blur-2xl">
                </div>

                <div class="px-6 pb-5 pt-6">
                  <div class="flex items-center gap-2 text-xs text-slate-200">
                    <button
                      type="button"
                      phx-click="expand-all-sections"
                      class="rounded-full border border-white/10 px-3 py-1 font-medium text-white/80 hover:border-white/20 hover:bg-white/10"
                    >
                      Expand all
                    </button>
                    <button
                      type="button"
                      phx-click="collapse-all-sections"
                      class="rounded-full border border-white/10 px-3 py-1 font-medium text-white/80 hover:border-white/20 hover:bg-white/10"
                    >
                      Collapse all
                    </button>
                  </div>
                </div>

                <nav class="flex-1 overflow-y-auto px-3 pb-10">
                  <%= for {title, items} <- navigation_sections() do %>
                    <% section_open? = Map.get(@sidebar_section_states, title, true) %>
                    <div class="mb-6">
                      <button
                        type="button"
                        phx-click="toggle-nav-section"
                        phx-value-section={title}
                        class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-left text-xs font-semibold uppercase tracking-[0.25em] text-slate-300 hover:text-white"
                      >
                        <span>{title}</span>
                        <.icon
                          name={if(section_open?, do: "hero-chevron-up", else: "hero-chevron-down")}
                          class={
                            "h-4 w-4 text-slate-500 transition-transform duration-200 " <>
                              if(section_open?, do: "rotate-0", else: "rotate-180")
                          }
                        />
                      </button>
                      <div class={[
                        "mt-2 space-y-1 border-l border-white/5 pl-3 transition-all duration-200",
                        if(section_open?,
                          do: "opacity-100",
                          else: "pointer-events-none opacity-0 -translate-y-1"
                        )
                      ]}>
                        <%= for item <- items do %>
                          <.link
                            navigate={~p"/docs/#{item.path}"}
                            class={[
                              "group flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition",
                              if(@section == item.path,
                                do:
                                  "bg-gradient-to-r from-blue-600/90 via-indigo-500/90 to-purple-500/90 text-white shadow-sm shadow-blue-500/30",
                                else: "text-slate-300 hover:text-white hover:bg-white/10"
                              )
                            ]}
                          >
                            <span>{item.label}</span>
                            <.icon
                              name="hero-arrow-up-right"
                              class={
                                "h-4 w-4 " <>
                                  if(@section == item.path,
                                    do: "text-white",
                                    else: "text-slate-500 group-hover:text-slate-300"
                                  )
                              }
                            />
                          </.link>
                        <% end %>
                      </div>
                    </div>
                  <% end %>
                </nav>
              </div>
            </aside>

            <main class={main_wrapper_classes(@section)}>
              <div class={content_wrapper_classes(@section)}>{render_section(assigns)}</div>
            </main>
          </div>
        </div>
      </div>
    </Layouts.app>
    """
  end

  defp navigation_sections_raw do
    [
      {"Getting Started",
       [
         %{label: "Introduction", path: "getting-started"},
         %{label: "Installation", path: "installation"},
         %{label: "Usage", path: "usage"}
       ]},
      {"Layout & Navigation",
       [
         %{label: "Navbar", path: "navbar"},
         %{label: "Tabs", path: "tabs"},
         %{label: "Breadcrumbs", path: "breadcrumbs"},
         %{label: "Accordion", path: "accordion"},
         %{label: "Grid", path: "grid"}
       ]},
      {"Data Display",
       [
         %{label: "Table", path: "table"},
         %{label: "List", path: "list"},
         %{label: "Badge", path: "badge"},
         %{label: "Stats", path: "stats"},
         %{label: "Avatar", path: "avatar"}
       ]},
      {"Forms",
       [
         %{label: "Input", path: "input"},
         %{label: "Select", path: "select"},
         %{label: "DatePicker", path: "datepicker"},
         %{label: "Slider", path: "slider"},
         %{label: "File Upload", path: "file-upload"},
         %{label: "Rich Text Editor", path: "rich-text-editor"},
         %{label: "Multi-Select", path: "multi-select"},
         %{label: "Rating", path: "rating"},
         %{label: "Password Strength Meter", path: "password-strength-meter"},
         %{label: "Tag Input", path: "tag-input"},
         %{label: "Signature Pad", path: "signature-pad"},
         %{label: "Color Picker", path: "color-picker"},
         %{label: "Conditional Form", path: "conditional-form"}
       ]},
      {"Feedback",
       [
         %{label: "Alert", path: "alert"},
         %{label: "Modal", path: "modal"},
         %{label: "Toast", path: "toast"},
         %{label: "Progress", path: "progress"}
       ]},
      {"Utilities",
       [
         %{label: "Button", path: "button"},
         %{label: "Card", path: "card"},
         %{label: "Stepper", path: "stepper"}
       ]},
      {"Layout & Utilities",
       [
         %{label: "Carousel", path: "carousel"},
         %{label: "Wizard", path: "wizard"},
         %{label: "Resizable Panels", path: "resizable-panels"},
         %{label: "Filter Panel", path: "filter-panel"},
         %{label: "Skeleton", path: "skeleton"}
       ]},
      {"Interactive",
       [
         %{label: "Autocomplete", path: "autocomplete"},
         %{label: "Sortable List", path: "sortable-list"},
         %{label: "Live Chat", path: "live-chat"},
         %{label: "Live Feed", path: "live-feed"},
         %{label: "Countdown", path: "countdown"},
         %{label: "Kanban Board", path: "kanban"},
         %{label: "Gantt Chart", path: "gantt"},
         %{label: "Live Data Table", path: "live-data-table"}
       ]},
      {"User & Social",
       [
         %{label: "User Profile Card", path: "user-profile-card"},
         %{label: "Avatar Group", path: "avatar-group"},
         %{label: "Connections Widget", path: "connections-widget"},
         %{label: "Badge Card", path: "badge-card"}
       ]},
      {"Accessibility & Theming",
       [
         %{label: "Theme Switch", path: "theme-switch"},
         %{label: "Alert", path: "alert"},
         %{label: "Theme Config", path: "theme-config"}
       ]},
      {"Miscellaneous",
       [
         %{label: "Diff", path: "diff"},
         %{label: "Kbd", path: "kbd"},
         %{label: "Link", path: "link"},
         %{label: "Hero", path: "hero"},
         %{label: "Swap", path: "swap"},
         %{label: "Dock", path: "dock"},
         %{label: "Drawer", path: "drawer"},
         %{label: "Mockup", path: "mockup"},
         %{label: "Timeline", path: "timeline"}
       ]},
      {"Visual & Presentation",
       [
         %{label: "Lightbox", path: "lightbox"},
         %{label: "Video Player", path: "video-player"},
         %{label: "Animated Chart", path: "animated-chart"},
         %{label: "Skeleton Layout", path: "skeleton-layout"},
         %{label: "Masonry Grid", path: "masonry-grid"}
       ]},
      {"Data & Analytics",
       [
         %{label: "Chart", path: "chart"},
         %{label: "Gauge", path: "gauge"},
         %{label: "Heatmap", path: "heatmap"},
         %{label: "Map", path: "map"}
       ]}
    ]
  end

  defp navigation_sections do
    navigation_sections_raw()
    |> Enum.map(fn {title, items} ->
      {
        title,
        items
        |> Enum.sort_by(&String.downcase(&1.label))
      }
    end)
    |> Enum.sort_by(fn {title, _items} -> String.downcase(title) end)
  end

  defp build_sidebar_section_states(default \\ true) do
    navigation_sections()
    |> Enum.map(fn {title, _items} -> {title, default} end)
    |> Map.new()
  end

  defp render_section(assigns) do
    case assigns.section do
      "getting-started" -> render_getting_started(assigns)
      "installation" -> render_installation(assigns)
      "usage" -> render_usage(assigns)
      "button" -> render_button_docs(assigns)
      "input" -> render_input_docs(assigns)
      "card" -> render_card_docs(assigns)
      "alert" -> render_alert_docs(assigns)
      "select" -> render_select_docs(assigns)
      "textarea" -> render_textarea_docs(assigns)
      "checkbox" -> render_checkbox_docs(assigns)
      "progress" -> render_progress_docs(assigns)
      "navbar" -> render_navbar_docs(assigns)
      "tabs" -> render_tabs_docs(assigns)
      "badge" -> render_badge_docs(assigns)
      "modal" -> render_modal_docs(assigns)
      "table" -> render_table_docs(assigns)
      "accordion" -> render_accordion_docs(assigns)
      "breadcrumbs" -> render_breadcrumbs_docs(assigns)
      "grid" -> render_grid_docs(assigns)
      "list" -> render_list_docs(assigns)
      "stats" -> render_stats_docs(assigns)
      "avatar" -> render_avatar_docs(assigns)
      "datepicker" -> render_datepicker_docs(assigns)
      "slider" -> render_slider_docs(assigns)
      "toast" -> render_toast_docs(assigns)
      "stepper" -> render_stepper_docs(assigns)
      "chart" -> render_chart_docs(assigns)
      "gauge" -> render_gauge_docs(assigns)
      "heatmap" -> render_heatmap_docs(assigns)
      "map" -> render_map_docs(assigns)
      "file-upload" -> render_file_upload_docs(assigns)
      "rich-text-editor" -> render_rich_text_editor_docs(assigns)
      "multi-select" -> render_multi_select_docs(assigns)
      "rating" -> render_rating_docs(assigns)
      "password-strength-meter" -> render_password_strength_meter_docs(assigns)
      "tag-input" -> render_tag_input_docs(assigns)
      "signature-pad" -> render_signature_pad_docs(assigns)
      "color-picker" -> render_color_picker_docs(assigns)
      "conditional-form" -> render_conditional_form_docs(assigns)
      "carousel" -> render_carousel_docs(assigns)
      "wizard" -> render_wizard_docs(assigns)
      "resizable-panels" -> render_resizable_panels_docs(assigns)
      "filter-panel" -> render_filter_panel_docs(assigns)
      "skeleton" -> render_skeleton_docs(assigns)
      "autocomplete" -> render_autocomplete_docs(assigns)
      "sortable-list" -> render_sortable_list_docs(assigns)
      "live-chat" -> render_live_chat_docs(assigns)
      "live-feed" -> render_live_feed_docs(assigns)
      "countdown" -> render_countdown_docs(assigns)
      "kanban" -> render_kanban_docs(assigns)
      "gantt" -> render_gantt_docs(assigns)
      "live-data-table" -> render_live_data_table_docs(assigns)
      "user-profile-card" -> render_user_profile_card_docs(assigns)
      "avatar-group" -> render_avatar_group_docs(assigns)
      "connections-widget" -> render_connections_widget_docs(assigns)
      "badge-card" -> render_badge_card_docs(assigns)
      "theme-switch" -> render_theme_switch_docs(assigns)
      "alert" -> render_alert_docs(assigns)
      "theme-config" -> render_theme_config_docs(assigns)
      "diff" -> render_diff_docs(assigns)
      "kbd" -> render_kbd_docs(assigns)
      "link" -> render_link_docs(assigns)
      "hero" -> render_hero_docs(assigns)
      "swap" -> render_swap_docs(assigns)
      "dock" -> render_dock_docs(assigns)
      "drawer" -> render_drawer_docs(assigns)
      "mockup" -> render_mockup_docs(assigns)
      "timeline" -> render_timeline_docs(assigns)
      "lightbox" -> render_lightbox_docs(assigns)
      "video-player" -> render_video_player_docs(assigns)
      "animated-chart" -> render_animated_chart_docs(assigns)
      "skeleton-layout" -> render_skeleton_layout_docs(assigns)
      "masonry-grid" -> render_masonry_grid_docs(assigns)
      _ -> render_coming_soon(assigns)
    end
  end

  defp content_wrapper_classes(section)
       when section in ["alert", "theme-config", "theme-switch", "accordion"] do
    "w-full px-4 sm:px-8 md:px-12 lg:px-16 xl:px-20 2xl:px-24 py-12"
  end

  defp content_wrapper_classes(_section) do
    "max-w-4xl mx-auto px-8 py-12 text-gray-900"
  end

  defp main_wrapper_classes(section)
       when section in ["alert", "theme-config", "theme-switch", "accordion"] do
    "flex-1 overflow-y-auto bg-slate-950"
  end

  defp main_wrapper_classes(_section) do
    "flex-1 overflow-y-auto bg-white"
  end

  defp render_getting_started(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Getting Started</h1>

      <p class="text-xl text-gray-700 mb-8">
        AshUI is a modular, reusable UI library for Phoenix LiveView applications.
      </p>

      <div class="space-y-6">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Features</h2>

          <ul class="space-y-2 text-gray-700 list-disc list-inside">
            <li>✅ LiveView-first: Components work natively in .heex templates</li>

            <li>✅ Composable & Modular: Each component is independent and reusable</li>

            <li>✅ Minimal JavaScript: Reactive behavior handled by Phoenix assigns</li>

            <li>✅ Theme-ready: Light/dark mode support</li>

            <li>✅ Developer-friendly: Semantic naming, minimal boilerplate</li>
          </ul>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Quick Example</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
            &lt;.button variant={:primary}&gt;Click me&lt;/.button&gt;
            &lt;.input type="text" label="Name" /&gt;
            &lt;.alert variant={:success}&gt;Success!&lt;/.alert&gt;
          </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_installation(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Installation</h1>

      <div class="space-y-6">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Add to mix.exs</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
            def deps do
              [
                {:ashui, path: "../ashui"}
              ]
            end
          </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Import Components</h2>

          <p class="text-gray-700 mb-4">
            In your <code class="bg-gray-200 px-1 rounded text-gray-900">lib/your_app_web.ex</code>
            file, add imports:
          </p>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
            import Ashui.Components.Button
            import Ashui.Components.Input
            import Ashui.Components.Alert
            # ... more components
          </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_usage(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Usage</h1>

      <div class="space-y-6">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <p class="text-gray-700 mb-4">Once imported, use components in your LiveView templates:</p>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
            defmodule MyAppWeb.UserLive do
              use MyAppWeb, :live_view

              def render(assigns) do
                ~H&quot;&quot;&quot;
                &lt;.button variant={:primary} phx-click=&quot;save&quot;&gt;Save&lt;/.button&gt;
                &lt;.input type=&quot;text&quot; label=&quot;Name&quot; field={@form[:name]} /&gt;
                &quot;&quot;&quot;
              end
            end
          </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_button_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Button</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">Button component with multiple variants and states.</p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex gap-4 flex-wrap">
              <Ashui.Components.Button.button variant={:primary}>
                Primary
              </Ashui.Components.Button.button>
              <Ashui.Components.Button.button variant={:secondary}>
                Secondary
              </Ashui.Components.Button.button>
              <Ashui.Components.Button.button variant={:ghost}>Ghost</Ashui.Components.Button.button>
              <Ashui.Components.Button.button variant={:danger}>
                Danger
              </Ashui.Components.Button.button>
              <Ashui.Components.Button.button variant={:success}>
                Success
              </Ashui.Components.Button.button>
            </div>
          </div>
          <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200"><code phx-no-curly-interpolation class="text-gray-800">
    &lt;.button variant={:primary}&gt;Primary&lt;/.button&gt;
    &lt;.button variant={:secondary}&gt;Secondary&lt;/.button&gt;
    &lt;.button variant={:ghost}&gt;Ghost&lt;/.button&gt;
    </code></pre>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :primary | :secondary | :ghost | :danger | :success
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:primary</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Button style variant</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :sm | :md | :lg | :xl
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Button size</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    disabled
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Disable the button</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    loading
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Show loading spinner</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_input_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Input</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Input field component with validation states and helper text.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-4">
              <Ashui.Components.Input.input type="text" label="Name" placeholder="Enter your name" />
              <Ashui.Components.Input.input
                type="email"
                label="Email"
                helper="We'll never share your email"
              />
              <Ashui.Components.Input.input
                type="password"
                label="Password"
                error="Password is required"
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.input type="text" label="Name" placeholder="Enter your name" /&gt;
    &lt;.input type="email" label="Email" helper="We'll never share your email" /&gt;
    &lt;.input type="password" label="Password" error="Password is required" /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_card_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Card</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Card component for content containers with customizable padding and shadows.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <Ashui.Components.Card.card>
                <h3 class="text-lg font-semibold mb-2">Default Card</h3>

                <p class="text-gray-600">This card has default padding and shadow.</p>
              </Ashui.Components.Card.card>

              <Ashui.Components.Card.card shadow={:lg} padded={false}>
                <div class="p-6">
                  <h3 class="text-lg font-semibold mb-2">No Padding</h3>

                  <p class="text-gray-600">Custom padding with larger shadow.</p>
                </div>
              </Ashui.Components.Card.card>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.card&gt;
      &lt;h3&gt;Card Title&lt;/h3&gt;
      &lt;p&gt;Card content&lt;/p&gt;
    &lt;/.card&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    padded
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Add padding to card</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    shadow
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :none | :sm | :md | :lg | :xl
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Shadow size</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_select_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Select</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Select dropdown component with options and validation states.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-4">
              <Ashui.Components.Select.select label="Country">
                <option value="">Select a country</option>

                <option value="us">United States</option>

                <option value="uk">United Kingdom</option>

                <option value="ca">Canada</option>
              </Ashui.Components.Select.select>

              <Ashui.Components.Select.select label="Status" helper="Choose your status">
                <option value="active">Active</option>

                <option value="inactive">Inactive</option>
              </Ashui.Components.Select.select>

              <Ashui.Components.Select.select label="Error State" error="This field is required">
                <option value="">Select an option</option>
              </Ashui.Components.Select.select>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.select label="Country"&gt;
      &lt;option value=""&gt;Select a country&lt;/option&gt;
      &lt;option value="us"&gt;United States&lt;/option&gt;
      &lt;option value="uk"&gt;United Kingdom&lt;/option&gt;
    &lt;/.select&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_textarea_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Textarea</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Textarea component for multi-line text input with validation.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-4">
              <Ashui.Components.Textarea.textarea
                label="Message"
                placeholder="Enter your message"
                rows={4}
              />
              <Ashui.Components.Textarea.textarea
                label="Description"
                helper="Maximum 500 characters"
                rows={6}
              />
              <Ashui.Components.Textarea.textarea
                label="Comments"
                error="This field is required"
                rows={3}
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.textarea label="Message" placeholder="Enter your message" rows={4} /&gt;
    &lt;.textarea label="Description" helper="Maximum 500 characters" rows={6} /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_checkbox_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Checkbox</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">Checkbox component with label and validation support.</p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-4">
              <Ashui.Components.Checkbox.checkbox label="Accept terms and conditions" />
              <Ashui.Components.Checkbox.checkbox label="Subscribe to newsletter" checked={true} />
              <Ashui.Components.Checkbox.checkbox label="Required field" required={true} />
              <Ashui.Components.Checkbox.checkbox label="Disabled checkbox" disabled={true} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.checkbox label="Accept terms" /&gt;
    &lt;.checkbox label="Subscribe" checked={true} /&gt;
    &lt;.checkbox label="Required" required={true} /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_progress_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Progress</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">Progress bar component for showing completion status.</p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-6">
              <Ashui.Components.Progress.progress value={25} />
              <Ashui.Components.Progress.progress value={50} variant={:success} />
              <Ashui.Components.Progress.progress value={75} variant={:warning} />
              <Ashui.Components.Progress.progress value={90} variant={:error} show_label={true} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.progress value={75} max={100} /&gt;
    &lt;.progress value={50} variant={:success} /&gt;
    &lt;.progress value={90} variant={:error} show_label={true} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Current progress value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">max</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">100</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Maximum value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :primary | :success | :warning | :error
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:primary</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Progress bar color variant</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    show_label
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Show percentage label</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_navbar_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Navbar</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Responsive navbar component with mobile menu support and customizable navigation items.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Example</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Navbar.navbar brand="MyApp">
              <:item href="/">Home</:item>

              <:item href="/about">About</:item>

              <:item href="/contact">Contact</:item>
            </Ashui.Components.Navbar.navbar>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.navbar brand="MyApp"&gt;
      &lt;:item href="/"&gt;Home&lt;/:item&gt;
      &lt;:item href="/about"&gt;About&lt;/:item&gt;
      &lt;:item href="/contact"&gt;Contact&lt;/:item&gt;
    &lt;/.navbar&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Active State</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Navbar.navbar brand="MyApp">
              <:item href="/" active={true}>Home</:item>

              <:item href="/about" active={false}>About</:item>

              <:item href="/contact" active={false}>Contact</:item>
            </Ashui.Components.Navbar.navbar>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.navbar brand="MyApp"&gt;
      &lt;:item href="/" active={true}&gt;Home&lt;/:item&gt;
      &lt;:item href="/about" active={false}&gt;About&lt;/:item&gt;
      &lt;:item href="/contact" active={false}&gt;Contact&lt;/:item&gt;
    &lt;/.navbar&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Actions Slot</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Navbar.navbar brand="MyApp">
              <:item href="/">Home</:item>

              <:item href="/about">About</:item>

              <:actions>
                <Ashui.Components.Button.button variant={:primary} size={:sm}>
                  Sign In
                </Ashui.Components.Button.button>
              </:actions>
            </Ashui.Components.Navbar.navbar>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.navbar brand="MyApp"&gt;
      &lt;:item href="/"&gt;Home&lt;/:item&gt;
      &lt;:item href="/about"&gt;About&lt;/:item&gt;
      &lt;:actions&gt;
        &lt;.button variant={:primary} size={:sm}&gt;Sign In&lt;/.button&gt;
      &lt;/:actions&gt;
    &lt;/.navbar&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">brand</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"Brand"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Brand name displayed in navbar</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">class</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">""</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Additional CSS classes</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    item (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Navigation items. Each item accepts:
                    <ul class="list-disc list-inside mt-1 space-y-1">
                      <li>
                        <code class="bg-gray-100 px-1 rounded">href</code>
                        - Navigation path (required)
                      </li>

                      <li>
                        <code class="bg-gray-100 px-1 rounded">active</code>
                        - Boolean to mark active item (optional)
                      </li>
                    </ul>
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    actions (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Content displayed on the right side of the navbar (e.g., buttons, user menu)
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Mobile Menu</h2>

          <p class="text-gray-700 mb-4">
            The navbar automatically includes a mobile menu toggle button. To handle the mobile menu toggle, add a LiveView event handler:
          </p>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    def handle_event("toggle-mobile-menu", _params, socket) do
      {:noreply, assign(socket, :mobile_menu_open, !socket.assigns[:mobile_menu_open])}
    end
            </code></pre>
          </div>

          <p class="text-gray-700 mt-4 text-sm">
            Note: You'll need to add JavaScript or LiveView logic to show/hide the mobile menu based on the state.
          </p>
        </section>
      </div>
    </div>
    """
  end

  defp render_tabs_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Tabs</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Tabs component for navigation between different content sections.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Tabs.tabs>
              <:tab id="tab-1" label="Tab 1" active={true}>Content for tab 1</:tab>

              <:tab id="tab-2" label="Tab 2" active={false}>Content for tab 2</:tab>

              <:tab id="tab-3" label="Tab 3" active={false}>Content for tab 3</:tab>
            </Ashui.Components.Tabs.tabs>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.tabs&gt;
      &lt;:tab id="tab-1" label="Tab 1" active={true}&gt;Content 1&lt;/:tab&gt;
      &lt;:tab id="tab-2" label="Tab 2"&gt;Content 2&lt;/:tab&gt;
    &lt;/.tabs&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"tabs"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Unique identifier for tabs container
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    tab (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Tab items with id, label, and active attributes
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_badge_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Badge</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">Badge component for status indicators and labels.</p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex gap-4 flex-wrap items-center">
              <Ashui.Components.Badge.badge variant={:default}>Default</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge variant={:primary}>Primary</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge variant={:success}>Success</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge variant={:warning}>Warning</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge variant={:error}>Error</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge variant={:info}>Info</Ashui.Components.Badge.badge>
            </div>

            <div class="mt-4 flex gap-4 items-center">
              <Ashui.Components.Badge.badge size={:sm}>Small</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge size={:md}>Medium</Ashui.Components.Badge.badge>

              <Ashui.Components.Badge.badge size={:lg}>Large</Ashui.Components.Badge.badge>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.badge variant={:success}&gt;Active&lt;/.badge&gt;
    &lt;.badge variant={:warning} size={:lg}&gt;Pending&lt;/.badge&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :default | :primary | :success | :warning | :error | :info
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:default</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Badge color variant</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:sm | :md | :lg</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Badge size</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_modal_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Modal</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">Modal dialog component for overlays and confirmations.</p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <p class="text-gray-600 mb-4">
              Modal requires LiveView state management. See code example below.
            </p>

            <Ashui.Components.Button.button variant={:primary}>
              Open Modal
            </Ashui.Components.Button.button>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.modal id="confirm-modal" show={@show_modal}&gt;
      &lt;:title&gt;Confirm Action&lt;/:title&gt;
      &lt;p&gt;Are you sure you want to proceed?&lt;/p&gt;
      &lt;:footer&gt;
        &lt;.button variant={:secondary} phx-click="close-modal"&gt;Cancel&lt;/.button&gt;
        &lt;.button variant={:primary} phx-click="confirm"&gt;Confirm&lt;/.button&gt;
      &lt;/:footer&gt;
    &lt;/.modal&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique identifier for modal</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">show</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Control modal visibility</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :sm | :md | :lg | :xl
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Modal size</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    title (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Modal title</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    footer (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Modal footer actions</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_table_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Table</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">Data table component with sorting and pagination support.</p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Table.table rows={[
              %{name: "John Doe", email: "john@example.com", status: "Active"},
              %{name: "Jane Smith", email: "jane@example.com", status: "Inactive"}
            ]}>
              <:col label="Name" field={:name} /> <:col label="Email" field={:email} />
              <:col label="Status" field={:status} />
            </Ashui.Components.Table.table>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.table rows={@users}&gt;
      &lt;:col label="Name" field={:name} /&gt;
      &lt;:col label="Email" field={:email} /&gt;
      &lt;:col label="Actions"&gt;
        &lt;.button size="sm"&gt;Edit&lt;/.button&gt;
      &lt;/:col&gt;
    &lt;/.table&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">rows</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">[]</td>

                  <td class="px-6 py-4 text-sm text-gray-700">List of row data (maps)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    col (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Column definitions with label and optional field
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_accordion_docs(assigns) do
    ~H"""
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/95 px-6 py-10 text-slate-100 shadow-[0_60px_140px_-70px_rgba(99,102,241,0.55)]">
      <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(129,140,248,0.14),_transparent_55%)]">
      </div>
      <div class="pointer-events-none absolute -top-40 -left-24 h-96 w-96 rounded-full bg-indigo-500/25 blur-3xl">
      </div>
      <div class="pointer-events-none absolute -bottom-52 right-[-15%] h-[28rem] w-[28rem] rounded-full bg-cyan-500/20 blur-3xl">
      </div>

      <div class="relative z-10 space-y-12">
        <header class="space-y-4">
          <span class="inline-flex items-center gap-2 rounded-full border border-indigo-400/50 bg-indigo-400/15 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-indigo-100">
            Accordion <span class="h-1 w-1 rounded-full bg-indigo-200/80"></span> Layered Content
          </span>
          <h1 class="text-4xl font-semibold tracking-tight text-slate-50">Accordion</h1>
          <p class="max-w-3xl text-lg leading-relaxed text-slate-300">
            Collapsible sections with buttery-smooth transitions that keep dense information organised. Perfect for FAQs, advanced settings, or progressive disclosure flows.
          </p>
        </header>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-indigo-300/60 hover:shadow-[0_40px_110px_-80px_rgba(99,102,241,0.55)]">
          <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
            <div class="space-y-2">
              <h2 class="text-2xl font-semibold text-slate-50">Interactive Example</h2>
              <p class="max-w-xl text-sm text-slate-300">
                Compose rich content within each item and decide which panels open by default for a guided story.
              </p>
            </div>
            <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-4 py-1 text-[10px] uppercase tracking-[0.35em] text-slate-200/80">
              Auto Collapse
            </div>
          </div>

          <div class="mt-8 rounded-2xl border border-white/10 bg-slate-950/70 px-6 py-5 shadow-inner shadow-slate-950/40">
            <Ashui.Components.Accordion.accordion class="space-y-3">
              <:item id="accordion-design" title="Design strategy" open={true}>
                <p class="text-sm leading-6 text-slate-200">
                  Focus on progressive disclosure to keep your surfaces calm. Use accordions to tuck away secondary controls while keeping essential actions visible.
                </p>
              </:item>
              <:item id="accordion-content" title="Content patterns" open={false}>
                <ul class="space-y-2 text-sm text-slate-200">
                  <li class="flex items-start gap-2">
                    <span class="mt-1 h-1.5 w-1.5 rounded-full bg-indigo-300"></span>
                    Pair concise titles with short supporting copy.
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="mt-1 h-1.5 w-1.5 rounded-full bg-indigo-300"></span>
                    Ensure interactive elements sit inside the panel, not in the summary.
                  </li>
                  <li class="flex items-start gap-2">
                    <span class="mt-1 h-1.5 w-1.5 rounded-full bg-indigo-300"></span>
                    Use icons or badges sparingly for additional hierarchy.
                  </li>
                </ul>
              </:item>
              <:item id="accordion-motion" title="Micro-interactions" open={false}>
                <p class="text-sm text-slate-200">
                  The component ships with subtle easing to avoid jarring jumps. Extend with Tailwind transitions for deeper motion stories.
                </p>
              </:item>
            </Ashui.Components.Accordion.accordion>
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-indigo-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    &lt;.accordion class="space-y-3"&gt;
    &lt;:item id="accordion-design" title="Design strategy" open={true}&gt;
    ...
    &lt;/:item&gt;
    &lt;:item id="accordion-content" title="Content patterns" open={false}&gt;
    ...
    &lt;/:item&gt;
    &lt;/.accordion&gt;
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-cyan-300/60 hover:shadow-[0_40px_110px_-80px_rgba(14,165,233,0.45)]">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <h2 class="text-2xl font-semibold text-slate-50">Usage Notes</h2>
              <p class="mt-2 max-w-2xl text-sm text-slate-300">
                Small heuristics to keep accordion experiences intuitive and accessible.
              </p>
            </div>
            <div class="inline-flex items-center gap-2 text-xs uppercase tracking-[0.35em] text-slate-300">
              <span class="h-2 w-2 rounded-full bg-cyan-300"></span> Guidelines
            </div>
          </div>

          <ul class="mt-6 space-y-3 text-sm text-slate-200">
            <li class="flex items-start gap-3 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3">
              <span class="mt-1 inline-flex h-2.5 w-2.5 flex-shrink-0 rounded-full bg-cyan-300">
              </span>
              <span>
                Keep summary rows concise. Long titles wrap to two lines max for ideal readability.
              </span>
            </li>
            <li class="flex items-start gap-3 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3">
              <span class="mt-1 inline-flex h-2.5 w-2.5 flex-shrink-0 rounded-full bg-cyan-300">
              </span>
              <span>
                Default one key panel to open when the section loads so users see a preview of the content style.
              </span>
            </li>
            <li class="flex items-start gap-3 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3">
              <span class="mt-1 inline-flex h-2.5 w-2.5 flex-shrink-0 rounded-full bg-cyan-300">
              </span>
              <span>
                Wrap complex layouts inside the panel body using flex/grid utilities to maintain rhythm.
              </span>
            </li>
          </ul>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm">
          <h2 class="text-2xl font-semibold text-slate-50">Props</h2>
          <p class="mt-2 max-w-xl text-sm text-slate-300">
            Drive the accordion with expressive slot attributes while inheriting accessible semantics out of the box.
          </p>

          <div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
            <table class="min-w-full divide-y divide-white/10 text-sm">
              <thead class="bg-slate-950/60 text-xs uppercase tracking-[0.2em] text-slate-300">
                <tr>
                  <th class="px-6 py-4 text-left">Prop</th>
                  <th class="px-6 py-4 text-left">Type</th>
                  <th class="px-6 py-4 text-left">Default</th>
                  <th class="px-6 py-4 text-left">Description</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/5 bg-slate-950/30 text-slate-200">
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">item (slot)</td>
                  <td class="px-6 py-4">slot</td>
                  <td class="px-6 py-4 text-indigo-200">required</td>
                  <td class="px-6 py-4">
                    Accordion rows with <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-indigo-200">id</code>, <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-indigo-200">title</code>, and optional <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-indigo-200">open</code>.
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_breadcrumbs_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Breadcrumbs</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Breadcrumb navigation component for showing page hierarchy.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Breadcrumbs.breadcrumbs>
              <:item href="/">Home</:item>

              <:item href="/products">Products</:item>

              <:item active={true}>Current Page</:item>
            </Ashui.Components.Breadcrumbs.breadcrumbs>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.breadcrumbs&gt;
      &lt;:item href="/"&gt;Home&lt;/:item&gt;
      &lt;:item href="/products"&gt;Products&lt;/:item&gt;
      &lt;:item active={true}&gt;Current Page&lt;/:item&gt;
    &lt;/.breadcrumbs&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    item (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Breadcrumb items with href and optional active attribute
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_grid_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Grid</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Grid layout component for responsive layouts using CSS Grid.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Example</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Grid.grid cols={3} gap={4}>
              <div class="bg-blue-100 p-4 rounded text-center">Item 1</div>

              <div class="bg-blue-100 p-4 rounded text-center">Item 2</div>

              <div class="bg-blue-100 p-4 rounded text-center">Item 3</div>

              <div class="bg-blue-100 p-4 rounded text-center">Item 4</div>

              <div class="bg-blue-100 p-4 rounded text-center">Item 5</div>

              <div class="bg-blue-100 p-4 rounded text-center">Item 6</div>
            </Ashui.Components.Grid.grid>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.grid cols={3} gap={4}&gt;
      &lt;div&gt;Item 1&lt;/div&gt;
      &lt;div&gt;Item 2&lt;/div&gt;
      &lt;div&gt;Item 3&lt;/div&gt;
    &lt;/.grid&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Responsive Grid</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Grid.grid cols={1} cols_md={2} cols_lg={4} gap={4}>
              <div class="bg-green-100 p-4 rounded text-center">Item 1</div>

              <div class="bg-green-100 p-4 rounded text-center">Item 2</div>

              <div class="bg-green-100 p-4 rounded text-center">Item 3</div>

              <div class="bg-green-100 p-4 rounded text-center">Item 4</div>
            </Ashui.Components.Grid.grid>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.grid cols={1} cols_md={2} cols_lg={4} gap={4}&gt;
      &lt;div&gt;Item 1&lt;/div&gt;
      &lt;div&gt;Item 2&lt;/div&gt;
      &lt;div&gt;Item 3&lt;/div&gt;
      &lt;div&gt;Item 4&lt;/div&gt;
    &lt;/.grid&gt;
            </code></pre>
          </div>

          <p class="text-gray-700 mt-4 text-sm">
            This grid will show 1 column on mobile, 2 columns on medium screens, and 4 columns on large screens.
          </p>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Cards</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Grid.grid cols={1} cols_md={2} gap={6}>
              <Ashui.Components.Card.card>
                <h3 class="text-lg font-semibold mb-2">Card 1</h3>

                <p class="text-gray-600">Content for card 1</p>
              </Ashui.Components.Card.card>

              <Ashui.Components.Card.card>
                <h3 class="text-lg font-semibold mb-2">Card 2</h3>

                <p class="text-gray-600">Content for card 2</p>
              </Ashui.Components.Card.card>
            </Ashui.Components.Grid.grid>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.grid cols={1} cols_md={2} gap={6}&gt;
      &lt;.card&gt;
        &lt;h3&gt;Card 1&lt;/h3&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/.card&gt;
      &lt;.card&gt;
        &lt;h3&gt;Card 2&lt;/h3&gt;
        &lt;p&gt;Content&lt;/p&gt;
      &lt;/.card&gt;
    &lt;/.grid&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">cols</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">1</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Number of columns (base/default)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    cols_sm
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Number of columns on small screens (≥640px)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    cols_md
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Number of columns on medium screens (≥768px)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    cols_lg
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Number of columns on large screens (≥1024px)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    cols_xl
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Number of columns on extra large screens (≥1280px)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">gap</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">4</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Gap between grid items (Tailwind gap value: 0-12)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">class</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">""</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Additional CSS classes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_list_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">List</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Data list component for displaying structured information with titles and content.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Example</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <AshuiWeb.CoreComponents.list>
              <:item title="Name">John Doe</:item>

              <:item title="Email">john@example.com</:item>

              <:item title="Role">Administrator</:item>

              <:item title="Status">Active</:item>
            </AshuiWeb.CoreComponents.list>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.list&gt;
      &lt;:item title="Name"&gt;John Doe&lt;/:item&gt;
      &lt;:item title="Email"&gt;john@example.com&lt;/:item&gt;
      &lt;:item title="Role"&gt;Administrator&lt;/:item&gt;
    &lt;/.list&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Dynamic Content</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <AshuiWeb.CoreComponents.list>
              <:item title="Post Title">Getting Started with Phoenix LiveView</:item>

              <:item title="Views">1,234</:item>

              <:item title="Published">January 15, 2024</:item>

              <:item title="Author">Jane Smith</:item>
            </AshuiWeb.CoreComponents.list>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.list&gt;
      &lt;:item title="Post Title"&gt;{@post.title}&lt;/:item&gt;
      &lt;:item title="Views"&gt;{@post.views}&lt;/:item&gt;
      &lt;:item title="Published"&gt;{@post.published_at}&lt;/:item&gt;
    &lt;/.list&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Badges</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <AshuiWeb.CoreComponents.list>
              <:item title="Status">
                <Ashui.Components.Badge.badge variant={:success}>Active</Ashui.Components.Badge.badge>
              </:item>

              <:item title="Priority">
                <Ashui.Components.Badge.badge variant={:warning}>High</Ashui.Components.Badge.badge>
              </:item>

              <:item title="Category">
                <Ashui.Components.Badge.badge variant={:info}>Feature</Ashui.Components.Badge.badge>
              </:item>
            </AshuiWeb.CoreComponents.list>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.list&gt;
      &lt;:item title="Status"&gt;
        &lt;.badge variant={:success}&gt;Active&lt;/.badge&gt;
      &lt;/:item&gt;
      &lt;:item title="Priority"&gt;
        &lt;.badge variant={:warning}&gt;High&lt;/.badge&gt;
      &lt;/:item&gt;
    &lt;/.list&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    item (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List items. Each item accepts:
                    <ul class="list-disc list-inside mt-1 space-y-1">
                      <li>
                        <code class="bg-gray-100 px-1 rounded">title</code>
                        - Title/label for the item (required)
                      </li>
                    </ul>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_stats_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Stats</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Stats component for displaying statistics and metrics in a clean, organized layout.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Example</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Stats.stats>
              <:stat title="Total Users" value="1,234" desc="21% more than last month" />
              <:stat title="Revenue" value="$45,678" desc="12% increase" />
              <:stat title="Orders" value="567" desc="8% decrease" />
            </Ashui.Components.Stats.stats>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.stats&gt;
      &lt;:stat title="Total Users" value="1,234" desc="21% more than last month" /&gt;
      &lt;:stat title="Revenue" value="$45,678" desc="12% increase" /&gt;
      &lt;:stat title="Orders" value="567" desc="8% decrease" /&gt;
    &lt;/.stats&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Vertical Layout</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Stats.stats horizontal={false}>
              <:stat title="Page Views" value="89,400" desc="21% more than last month" />
              <:stat title="Unique Visitors" value="12,345" desc="5% increase" />
            </Ashui.Components.Stats.stats>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.stats horizontal={false}&gt;
      &lt;:stat title="Page Views" value="89,400" desc="21% more than last month" /&gt;
      &lt;:stat title="Unique Visitors" value="12,345" desc="5% increase" /&gt;
    &lt;/.stats&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Dynamic Content</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Stats.stats>
              <:stat title="Active Users" value="2,456" desc="Last 30 days" />
              <:stat title="Total Sales" value="$123,456" desc="This month" />
            </Ashui.Components.Stats.stats>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.stats&gt;
      &lt;:stat title="Active Users" value={@active_users} desc="Last 30 days" /&gt;
      &lt;:stat title="Total Sales" value={@total_sales} desc="This month" /&gt;
    &lt;/.stats&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    horizontal
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Layout stats horizontally or vertically
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">class</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">""</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Additional CSS classes</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    stat (slot)
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">slot</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">required</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Stat items. Each stat accepts:
                    <ul class="list-disc list-inside mt-1 space-y-1">
                      <li><code class="bg-gray-100 px-1 rounded">title</code> - Stat title/label</li>

                      <li><code class="bg-gray-100 px-1 rounded">value</code> - Main stat value</li>

                      <li>
                        <code class="bg-gray-100 px-1 rounded">desc</code>
                        - Description or change indicator
                      </li>
                    </ul>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_avatar_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Avatar</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Avatar component for displaying user profile pictures, initials, or custom content.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Examples</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center gap-4">
              <Ashui.Components.Avatar.avatar name="John Doe" />
              <Ashui.Components.Avatar.avatar name="Jane Smith" />
              <Ashui.Components.Avatar.avatar name="AB" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.avatar name="John Doe" /&gt;
    &lt;.avatar name="Jane Smith" /&gt;
    &lt;.avatar name="AB" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Sizes</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center gap-4">
              <Ashui.Components.Avatar.avatar name="XS" size={:xs} />
              <Ashui.Components.Avatar.avatar name="SM" size={:sm} />
              <Ashui.Components.Avatar.avatar name="MD" size={:md} />
              <Ashui.Components.Avatar.avatar name="LG" size={:lg} />
              <Ashui.Components.Avatar.avatar name="XL" size={:xl} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.avatar name="XS" size={:xs} /&gt;
    &lt;.avatar name="SM" size={:sm} /&gt;
    &lt;.avatar name="MD" size={:md} /&gt;
    &lt;.avatar name="LG" size={:lg} /&gt;
    &lt;.avatar name="XL" size={:xl} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Image</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center gap-4">
              <Ashui.Components.Avatar.avatar src="/images/logo.svg" name="Logo" />
              <Ashui.Components.Avatar.avatar src="/images/logo.svg" name="Logo" size={:lg} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.avatar src="/images/user.jpg" name="User Name" /&gt;
    &lt;.avatar src="/images/user.jpg" name="User Name" size={:lg} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Online Status</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center gap-4">
              <Ashui.Components.Avatar.avatar name="Online" online={true} />
              <Ashui.Components.Avatar.avatar name="Offline" online={false} />
              <Ashui.Components.Avatar.avatar name="No Status" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.avatar name="User" online={true} /&gt;
    &lt;.avatar name="User" online={false} /&gt;
    &lt;.avatar name="User" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Content</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center gap-4">
              <Ashui.Components.Avatar.avatar>
                <AshuiWeb.CoreComponents.icon name="hero-user" class="w-6 h-6" />
              </Ashui.Components.Avatar.avatar>

              <Ashui.Components.Avatar.avatar>
                <span class="text-xl">👤</span>
              </Ashui.Components.Avatar.avatar>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.avatar&gt;
      &lt;.icon name="hero-user" class="w-6 h-6" /&gt;
    &lt;/.avatar&gt;
    &lt;.avatar&gt;
      &lt;span&gt;👤&lt;/span&gt;
    &lt;/.avatar&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">src</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Image source URL. If provided, displays image instead of initials
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">name</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Name for generating initials (first letter of each word, max 2 characters)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :xs | :sm | :md | :lg | :xl
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Avatar size</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    online
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Show online (true) or offline (false) status indicator. nil hides indicator
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">class</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">""</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Additional CSS classes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_datepicker_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">DatePicker</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          DatePicker component for selecting dates, times, and date-time values with validation support.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Date Picker</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.DatePicker.datepicker label="Birth Date" />
              <Ashui.Components.DatePicker.datepicker label="Start Date" value="2024-01-15" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.datepicker label="Birth Date" field={@form[:birth_date]} /&gt;
    &lt;.datepicker label="Start Date" value="2024-01-15" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Date-Time Picker</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.DatePicker.datepicker label="Appointment" type={:datetime_local} />
              <Ashui.Components.DatePicker.datepicker label="Event Time" type={:time} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.datepicker label="Appointment" type={:datetime_local} field={@form[:appointment]} /&gt;
    &lt;.datepicker label="Event Time" type={:time} field={@form[:time]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Date Range</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-4">
              <Ashui.Components.DatePicker.datepicker
                label="Start Date"
                min="2024-01-01"
                max="2024-12-31"
              />
              <Ashui.Components.DatePicker.datepicker
                label="End Date"
                min="2024-01-01"
                max="2024-12-31"
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.datepicker label="Start Date" min="2024-01-01" max="2024-12-31" /&gt;
    &lt;.datepicker label="End Date" min="2024-01-01" max="2024-12-31" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Validation</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.DatePicker.datepicker label="Required Date" required={true} />
              <Ashui.Components.DatePicker.datepicker
                label="Date with Error"
                error="This field is required"
              />
              <Ashui.Components.DatePicker.datepicker
                label="Date with Helper"
                helper="Select a date in the future"
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.datepicker label="Required Date" required={true} field={@form[:date]} /&gt;
    &lt;.datepicker label="Date with Error" error="This field is required" /&gt;
    &lt;.datepicker label="Date with Helper" helper="Select a date in the future" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">type</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :date | :datetime_local | :time | :month | :week
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:date</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Input type for date/time selection</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">field</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    Phoenix.HTML.FormField
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Form field struct from to_form/2</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">label</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Label text displayed above the input
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Default date/time value (ISO format)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">min</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Minimum selectable date/time (ISO format)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">max</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Maximum selectable date/time (ISO format)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">error</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Error message to display</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    helper
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Helper text displayed below the input
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    required
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Mark field as required</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    disabled
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Disable the datepicker</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_slider_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Slider</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Slider component for selecting a numeric value within a range with visual feedback.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Slider</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-6">
              <Ashui.Components.Slider.slider label="Volume" value={50} />
              <Ashui.Components.Slider.slider label="Brightness" value={75} />
              <Ashui.Components.Slider.slider label="Opacity" value={25} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.slider label="Volume" value={50} /&gt;
              &lt;.slider label="Brightness" value={75} /&gt;
              &lt;.slider label="Opacity" value={25} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Range</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-6">
              <Ashui.Components.Slider.slider label="Temperature (°C)" value={20} min={-10} max={40} />
              <Ashui.Components.Slider.slider
                label="Price Range ($)"
                value={500}
                min={0}
                max={1000}
                step={50}
              /> <Ashui.Components.Slider.slider label="Rating" value={3} min={1} max={5} step={1} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.slider label="Temperature (°C)" value={20} min={-10} max={40} /&gt;
              &lt;.slider label="Price Range ($)" value={500} min={0} max={1000} step={50} /&gt;
              &lt;.slider label="Rating" value={3} min={1} max={5} step={1} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Without Value Display</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-6">
              <Ashui.Components.Slider.slider label="Volume" value={50} show_value={false} />
              <Ashui.Components.Slider.slider label="Speed" value={60} show_value={false} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.slider label="Volume" value={50} show_value={false} /&gt;
              &lt;.slider label="Speed" value={60} show_value={false} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Validation</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md space-y-6">
              <Ashui.Components.Slider.slider
                label="Required Value"
                value={50}
                error="This field is required"
              />
              <Ashui.Components.Slider.slider
                label="Value with Helper"
                value={30}
                helper="Adjust the slider to set your preferred value"
              /> <Ashui.Components.Slider.slider label="Disabled Slider" value={50} disabled={true} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.slider label="Required Value" value={50} error="This field is required" /&gt;
              &lt;.slider label="Value with Helper" value={30} helper="Adjust the slider to set your preferred value" /&gt;
              &lt;.slider label="Disabled Slider" value={50} disabled={true} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Form Field</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <p class="text-sm text-gray-600 mb-4">
                When used with a form field, the slider integrates with Phoenix forms:
              </p>
              <Ashui.Components.Slider.slider label="Volume" value={50} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.form for={@form} phx-change="validate" phx-submit="save"&gt;
                &lt;.slider label="Volume" field={@form[:volume]} /&gt;
                &lt;.button type="submit"&gt;Save&lt;/.button&gt;
              &lt;/.form&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">field</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    Phoenix.HTML.FormField
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Form field struct from to_form/2</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">label</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Label text displayed above the slider
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">50</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Current slider value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">min</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">0</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Minimum selectable value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">max</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">100</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Maximum selectable value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">step</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">1</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Step increment for slider value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">error</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Error message to display</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    helper
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Helper text displayed below the slider
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    disabled
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Disable the slider</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    show_value
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Show current value next to the slider
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_toast_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Toast</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Toast component for displaying temporary notifications that appear at fixed positions on the screen.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Toast</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-4">
              <p class="text-sm text-gray-600 mb-4">
                Toasts are fixed position notifications. Here are examples of different variants:
              </p>

              <div class="relative h-64 border border-gray-200 rounded-lg p-4">
                <Ashui.Components.Toast.toast
                  variant={:success}
                  position={:top_end}
                  id="toast-success-demo"
                >
                  Operation successful!
                </Ashui.Components.Toast.toast>

                <Ashui.Components.Toast.toast
                  variant={:error}
                  position={:top_end}
                  id="toast-error-demo"
                >
                  Something went wrong
                </Ashui.Components.Toast.toast>

                <Ashui.Components.Toast.toast variant={:info} position={:top_end} id="toast-info-demo">
                  Information message
                </Ashui.Components.Toast.toast>

                <Ashui.Components.Toast.toast
                  variant={:warning}
                  position={:top_end}
                  id="toast-warning-demo"
                >
                  Warning message
                </Ashui.Components.Toast.toast>
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.toast variant={:success}&gt;Operation successful!&lt;/.toast&gt;
              &lt;.toast variant={:error}&gt;Something went wrong&lt;/.toast&gt;
              &lt;.toast variant={:info}&gt;Information message&lt;/.toast&gt;
              &lt;.toast variant={:warning}&gt;Warning message&lt;/.toast&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Positions</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-4">
              <p class="text-sm text-gray-600 mb-4">
                Toasts can be positioned at different locations on the screen:
              </p>

              <div class="relative h-64 border border-gray-200 rounded-lg p-4">
                <Ashui.Components.Toast.toast
                  variant={:info}
                  position={:top_start}
                  id="toast-top-start-demo"
                >
                  Top Start
                </Ashui.Components.Toast.toast>

                <Ashui.Components.Toast.toast
                  variant={:info}
                  position={:top_center}
                  id="toast-top-center-demo"
                >
                  Top Center
                </Ashui.Components.Toast.toast>

                <Ashui.Components.Toast.toast
                  variant={:info}
                  position={:bottom_end}
                  id="toast-bottom-end-demo"
                >
                  Bottom End
                </Ashui.Components.Toast.toast>
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.toast variant={:info} position={:top_start}&gt;Top Start&lt;/.toast&gt;
              &lt;.toast variant={:info} position={:top_center}&gt;Top Center&lt;/.toast&gt;
              &lt;.toast variant={:info} position={:top_end}&gt;Top End&lt;/.toast&gt;
              &lt;.toast variant={:info} position={:bottom_start}&gt;Bottom Start&lt;/.toast&gt;
              &lt;.toast variant={:info} position={:bottom_center}&gt;Bottom Center&lt;/.toast&gt;
              &lt;.toast variant={:info} position={:bottom_end}&gt;Bottom End&lt;/.toast&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Auto-Dismiss</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-4">
              <p class="text-sm text-gray-600 mb-4">
                Toasts can automatically dismiss after a specified duration:
              </p>

              <div class="relative h-64 border border-gray-200 rounded-lg p-4">
                <Ashui.Components.Toast.toast
                  variant={:success}
                  position={:top_end}
                  duration={3000}
                  id="toast-auto-dismiss-demo"
                >
                  This toast will auto-dismiss in 3 seconds
                </Ashui.Components.Toast.toast>

                <Ashui.Components.Toast.toast
                  variant={:info}
                  position={:top_end}
                  duration={0}
                  id="toast-no-auto-dismiss-demo"
                >
                  This toast won't auto-dismiss (duration={0})
                </Ashui.Components.Toast.toast>
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.toast variant={:success} duration={3000}&gt;Auto-dismiss in 3 seconds&lt;/.toast&gt;
              &lt;.toast variant={:info} duration={0}&gt;No auto-dismiss&lt;/.toast&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Non-Dismissible</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-4">
              <p class="text-sm text-gray-600 mb-4">
                Toasts can be made non-dismissible by setting dismissible={false}:
              </p>

              <div class="relative h-64 border border-gray-200 rounded-lg p-4">
                <Ashui.Components.Toast.toast
                  variant={:warning}
                  position={:top_end}
                  dismissible={false}
                  id="toast-non-dismissible-demo"
                >
                  This toast cannot be dismissed manually
                </Ashui.Components.Toast.toast>
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.toast variant={:warning} dismissible={false}&gt;Non-dismissible toast&lt;/.toast&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With LiveView</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-4">
              <p class="text-sm text-gray-600 mb-4">
                Toasts work seamlessly with LiveView. You can show/hide them using JS commands:
              </p>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              # In your LiveView
              def handle_event("show-success", _params, socket) do
                {:noreply, socket}
              end

              # In your template
              &lt;button phx-click="show-success" phx-click-js={JS.show(to: "#toast-success", transition: "fade-in-scale")}&gt;
                Show Success Toast
              &lt;/button&gt;

              &lt;.toast id="toast-success" variant={:success}&gt;
                Operation completed successfully!
              &lt;/.toast&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">auto-generated</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Unique ID for the toast (required for JS.show/hide)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :info | :success | :warning | :error
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:info</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Visual variant of the toast</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    position
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :top_start | :top_center | :top_end | :middle_start | :middle_center | :middle_end | :bottom_start | :bottom_center | :bottom_end
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:top_end</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Position of the toast on the screen</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    dismissible
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Show close button to manually dismiss
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    duration
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5000</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Auto-dismiss duration in milliseconds (0 to disable)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">class</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">""</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Additional CSS classes</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_stepper_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Stepper</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Stepper component for displaying multi-step processes and progress indicators.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Stepper</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-6">
              <Ashui.Components.Stepper.stepper>
                <:step label="Step 1" status={:completed} /> <:step label="Step 2" status={:active} />
                <:step label="Step 3" status={:pending} /> <:step label="Step 4" status={:pending} />
              </Ashui.Components.Stepper.stepper>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.stepper&gt;
                &lt;:step label="Step 1" status={:completed} /&gt;
                &lt;:step label="Step 2" status={:active} /&gt;
                &lt;:step label="Step 3" status={:pending} /&gt;
                &lt;:step label="Step 4" status={:pending} /&gt;
              &lt;/.stepper&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Vertical Stepper</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-6">
              <Ashui.Components.Stepper.stepper orientation={:vertical}>
                <:step label="Account Setup" status={:completed} />
                <:step label="Profile Information" status={:completed} />
                <:step label="Preferences" status={:active} />
                <:step label="Review" status={:pending} />
              </Ashui.Components.Stepper.stepper>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.stepper orientation={:vertical}&gt;
                &lt;:step label="Account Setup" status={:completed} /&gt;
                &lt;:step label="Profile Information" status={:completed} /&gt;
                &lt;:step label="Preferences" status={:active} /&gt;
                &lt;:step label="Review" status={:pending} /&gt;
              &lt;/.stepper&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Icons</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-6">
              <Ashui.Components.Stepper.stepper>
                <:step label="Cart" status={:completed} icon="hero-shopping-cart" />
                <:step label="Shipping" status={:completed} icon="hero-truck" />
                <:step label="Payment" status={:active} icon="hero-credit-card" />
                <:step label="Review" status={:pending} icon="hero-check-circle" />
              </Ashui.Components.Stepper.stepper>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.stepper&gt;
                &lt;:step label="Cart" status={:completed} icon="hero-shopping-cart" /&gt;
                &lt;:step label="Shipping" status={:completed} icon="hero-truck" /&gt;
                &lt;:step label="Payment" status={:active} icon="hero-credit-card" /&gt;
                &lt;:step label="Review" status={:pending} icon="hero-check-circle" /&gt;
              &lt;/.stepper&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Variants</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-6">
              <Ashui.Components.Stepper.stepper>
                <:step label="Success" status={:completed} variant={:success} />
                <:step label="Warning" status={:active} variant={:warning} />
                <:step label="Error" status={:pending} variant={:error} />
              </Ashui.Components.Stepper.stepper>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.stepper&gt;
                &lt;:step label="Success" status={:completed} variant={:success} /&gt;
                &lt;:step label="Warning" status={:active} variant={:warning} /&gt;
                &lt;:step label="Error" status={:pending} variant={:error} /&gt;
              &lt;/.stepper&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Step Status</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-6">
              <div>
                <p class="text-sm text-gray-600 mb-2">Pending (default):</p>

                <Ashui.Components.Stepper.stepper>
                  <:step label="Pending Step" status={:pending} />
                </Ashui.Components.Stepper.stepper>
              </div>

              <div>
                <p class="text-sm text-gray-600 mb-2">Active:</p>

                <Ashui.Components.Stepper.stepper>
                  <:step label="Active Step" status={:active} />
                </Ashui.Components.Stepper.stepper>
              </div>

              <div>
                <p class="text-sm text-gray-600 mb-2">Completed:</p>

                <Ashui.Components.Stepper.stepper>
                  <:step label="Completed Step" status={:completed} />
                </Ashui.Components.Stepper.stepper>
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;:step label="Pending Step" status={:pending} /&gt;
              &lt;:step label="Active Step" status={:active} /&gt;
              &lt;:step label="Completed Step" status={:completed} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    orientation
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :horizontal | :vertical
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:horizontal</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Layout orientation of the stepper</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">class</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">""</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Additional CSS classes</td>
                </tr>

                <tr>
                  <td colspan="4" class="px-6 py-4 text-sm font-medium text-gray-900 bg-gray-50">
                    Step Slot Props
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">label</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Label text for the step</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    status
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :pending | :active | :completed
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:pending</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Status of the step</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :primary | :secondary | :accent | :info | :success | :warning | :error
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:primary</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Color variant for active/completed steps
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">icon</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Heroicon name (e.g., "hero-check-circle")
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_chart_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Chart</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Chart component for displaying various types of data visualizations including Line, Bar, Pie, Donut, Area, Stacked, and Sparkline charts.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Line Chart</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Chart.chart
              type={:line}
              data={[10, 20, 30, 40, 50, 45, 35]}
              labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.chart type={:line} data={[10, 20, 30, 40, 50, 45, 35]} labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Bar Chart</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Chart.chart
              type={:bar}
              data={[20, 35, 25, 45, 30]}
              labels={["Q1", "Q2", "Q3", "Q4", "Q5"]}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.chart type={:bar} data={[20, 35, 25, 45, 30]} labels={["Q1", "Q2", "Q3", "Q4", "Q5"]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Pie Chart</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Chart.chart
              type={:pie}
              data={[30, 25, 20, 15, 10]}
              labels={["A", "B", "C", "D", "E"]}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.chart type={:pie} data={[30, 25, 20, 15, 10]} labels={["A", "B", "C", "D", "E"]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Donut Chart</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Chart.chart
              type={:donut}
              data={[40, 30, 20, 10]}
              labels={["Desktop", "Mobile", "Tablet", "Other"]}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.chart type={:donut} data={[40, 30, 20, 10]} labels={["Desktop", "Mobile", "Tablet", "Other"]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Area Chart</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Chart.chart type={:area} data={[15, 25, 35, 30, 40, 35, 45]} />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.chart type={:area} data={[15, 25, 35, 30, 40, 35, 45]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Sparkline Chart</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Chart.chart
              type={:sparkline}
              data={[10, 15, 12, 18, 14, 20, 16]}
              width={200}
              height={50}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.chart type={:sparkline} data={[10, 15, 12, 18, 14, 20, 16]} width={200} height={50} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">type</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :line | :bar | :pie | :donut | :area | :stacked | :sparkline
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Chart type</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">data</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Array of numeric data points</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    labels
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">[]</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Labels for data points</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">width</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">400</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Chart width in pixels</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    height
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">300</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Chart height in pixels</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    colors
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Custom color array (hex codes)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">title</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Chart title</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_gauge_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Gauge</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Gauge component for displaying KPI metrics and progress indicators with circular progress visualization.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Gauge</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex gap-8 items-center">
              <Ashui.Components.Gauge.gauge value={75.0} max={100.0} label="CPU Usage" />
              <Ashui.Components.Gauge.gauge value={60.0} max={100.0} label="Memory" />
              <Ashui.Components.Gauge.gauge value={45.0} max={100.0} label="Disk" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.gauge value={75.0} max={100.0} label="CPU Usage" /&gt;
              &lt;.gauge value={60.0} max={100.0} label="Memory" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Variants</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex gap-8 items-center">
              <Ashui.Components.Gauge.gauge value={80.0} variant={:success} label="Success" />
              <Ashui.Components.Gauge.gauge value={65.0} variant={:warning} label="Warning" />
              <Ashui.Components.Gauge.gauge value={50.0} variant={:error} label="Error" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.gauge value={80.0} variant={:success} label="Success" /&gt;
              &lt;.gauge value={65.0} variant={:warning} label="Warning" /&gt;
              &lt;.gauge value={50.0} variant={:error} label="Error" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Sizes</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex gap-8 items-center">
              <Ashui.Components.Gauge.gauge value={70.0} size={:sm} label="Small" />
              <Ashui.Components.Gauge.gauge value={70.0} size={:md} label="Medium" />
              <Ashui.Components.Gauge.gauge value={70.0} size={:lg} label="Large" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.gauge value={70.0} size={:sm} label="Small" /&gt;
              &lt;.gauge value={70.0} size={:md} label="Medium" /&gt;
              &lt;.gauge value={70.0} size={:lg} label="Large" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">float</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Current value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">max</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">float</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">100.0</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Maximum value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">label</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Label text below gauge</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :primary | :success | :warning | :error
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:primary</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Color variant</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:sm | :md | :lg</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Gauge size</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_heatmap_docs(assigns) do
    sample_data = %{
      "2024-01-01" => 5,
      "2024-01-02" => 10,
      "2024-01-03" => 15,
      "2024-01-04" => 20,
      "2024-01-05" => 25,
      "2024-01-06" => 30,
      "2024-01-07" => 35
    }

    assigns = assign(assigns, :sample_data, sample_data)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Heatmap</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Heatmap component for displaying data density and user interactions using color intensity visualization.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Heatmap</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Heatmap.heatmap data={@sample_data} />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.heatmap data={%{"2024-01-01" => 5, "2024-01-02" => 10, "2024-01-03" => 15}} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Color Schemes</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm space-y-6">
            <div>
              <p class="text-sm text-gray-600 mb-2">Blue (default):</p>
              <Ashui.Components.Heatmap.heatmap data={@sample_data} color_scheme={:blue} />
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Green:</p>
              <Ashui.Components.Heatmap.heatmap data={@sample_data} color_scheme={:green} />
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Red:</p>
              <Ashui.Components.Heatmap.heatmap data={@sample_data} color_scheme={:red} />
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Purple:</p>
              <Ashui.Components.Heatmap.heatmap data={@sample_data} color_scheme={:purple} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.heatmap data={heatmap_data} color_scheme={:blue} /&gt;
              &lt;.heatmap data={heatmap_data} color_scheme={:green} /&gt;
              &lt;.heatmap data={heatmap_data} color_scheme={:red} /&gt;
              &lt;.heatmap data={heatmap_data} color_scheme={:purple} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">data</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">map</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Map of keys (dates/labels) to numeric values
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    color_scheme
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :blue | :green | :red | :purple
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:blue</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Color scheme for intensity visualization
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_map_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Map</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Interactive map component for displaying locations and events. Uses OpenStreetMap tiles for rendering.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Map</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Map.map latitude={37.7749} longitude={-122.4194} zoom={13} />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.map latitude={37.7749} longitude={-122.4194} zoom={13} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Markers</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Map.map
              latitude={40.7128}
              longitude={-74.0060}
              zoom={12}
              markers={[
                %{lat: 40.7128, lng: -74.0060, label: "New York"},
                %{lat: 40.7589, lng: -73.9851, label: "Times Square"}
              ]}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.map
                latitude={40.7128}
                longitude={-74.0060}
                zoom={12}
                markers={[
                  %{lat: 40.7128, lng: -74.0060, label: "New York"},
                  %{lat: 40.7589, lng: -73.9851, label: "Times Square"}
                ]}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Size</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Map.map
              latitude={51.5074}
              longitude={-0.1278}
              zoom={10}
              width="600px"
              height="300px"
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.map latitude={51.5074} longitude={-0.1278} zoom={10} width="600px" height="300px" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    latitude
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">float</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Center latitude coordinate</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    longitude
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">float</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Center longitude coordinate</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">zoom</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">13</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Zoom level (1-18)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    markers
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">[]</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List of marker maps with :lat, :lng, and optional :label
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">width</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"100%"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Map width (CSS value)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    height
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"400px"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Map height (CSS value)</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Note</h2>

          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <p class="text-sm text-blue-800">
              The map component requires a JavaScript hook (<code class="bg-blue-100 px-1 rounded">MapHook</code>) for full interactivity.
              For production use, consider integrating with Mapbox, Google Maps, or Leaflet.js for enhanced features.
            </p>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_file_upload_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">File Upload</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          File upload component with drag & drop support and live progress tracking. Uses Phoenix LiveView's built-in file upload functionality.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic File Upload</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="text-sm text-gray-600 mb-4">
              <p>
                Note: This component requires LiveView upload configuration in your LiveView module.
              </p>
            </div>

            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center bg-gray-50">
              <p class="text-gray-500">File upload component preview</p>

              <p class="text-xs text-gray-400 mt-2">
                Configure uploads in your LiveView to see the full component
              </p>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.file_upload uploads={@uploads.avatar} label="Upload Avatar" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Multiple Files</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.file_upload uploads={@uploads.documents} accept=".pdf,.doc" max_entries={5} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">LiveView Setup</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              def mount(_params, _session, socket) do
                {:ok,
                 socket
                 |> allow_upload(:avatar, accept: ~w(.jpg .jpeg .png), max_entries: 1, max_file_size: 10_000_000)}
              end

              def handle_event("validate", _params, socket) do
                {:noreply, socket}
              end

              def handle_event("cancel-upload", %{"ref" => ref}, socket) do
                {:noreply, cancel_upload(socket, :avatar, ref)}
              end
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    uploads
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">map</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Uploads map from socket (e.g., @uploads.avatar)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    accept
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"*/*"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Accepted file types (e.g., "image/*", ".pdf,.doc")
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    max_entries
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">1</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Maximum number of files</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    max_file_size
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">10485760</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Maximum file size in bytes (default: 10MB)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    drag_label
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    "Drag and drop files here..."
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700">Custom drag & drop label text</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_rich_text_editor_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Rich Text Editor</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Rich text editor / WYSIWYG component for blogs, comments, and content editing with formatting controls.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Interactive Example</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <p class="text-sm text-gray-600 mb-4">
              Try the editor below - use the toolbar buttons or keyboard shortcuts to format your text!
            </p>

            <Ashui.Components.RichTextEditor.rich_text_editor
              field={@form[:content]}
              label="Rich Text Content"
              placeholder="Start typing your content here..."
            />
            <%= if @rich_text_content do %>
              <div class="mt-4 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <p class="text-sm font-medium text-gray-700 mb-2">Current HTML Output:</p>
                <pre class="text-xs text-gray-600 overflow-x-auto"><code phx-no-curly-interpolation>{@rich_text_content}</code></pre>
              </div>
            <% end %>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.rich_text_editor field={@form[:content]} label="Content" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Features</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-semibold text-gray-900 mb-2">Text Formatting</h3>

                <ul class="text-sm text-gray-700 space-y-1 list-disc list-inside">
                  <li>Bold (Ctrl+B)</li>

                  <li>Italic (Ctrl+I)</li>

                  <li>Underline (Ctrl+U)</li>

                  <li>Strikethrough</li>
                </ul>
              </div>

              <div>
                <h3 class="font-semibold text-gray-900 mb-2">Headings</h3>

                <ul class="text-sm text-gray-700 space-y-1 list-disc list-inside">
                  <li>Heading 1 (H1)</li>

                  <li>Heading 2 (H2)</li>

                  <li>Heading 3 (H3)</li>

                  <li>Paragraph (P)</li>
                </ul>
              </div>

              <div>
                <h3 class="font-semibold text-gray-900 mb-2">Lists & Alignment</h3>

                <ul class="text-sm text-gray-700 space-y-1 list-disc list-inside">
                  <li>Bullet Lists</li>

                  <li>Numbered Lists</li>

                  <li>Text Alignment (Left, Center, Right, Justify)</li>

                  <li>Indentation (Tab / Shift+Tab)</li>
                </ul>
              </div>

              <div>
                <h3 class="font-semibold text-gray-900 mb-2">Special Features</h3>

                <ul class="text-sm text-gray-700 space-y-1 list-disc list-inside">
                  <li>Links (Ctrl+K)</li>

                  <li>Blockquotes</li>

                  <li>Code Blocks</li>

                  <li>Undo/Redo (Ctrl+Z / Ctrl+Y)</li>

                  <li>Clear Formatting</li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Initial Content</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.RichTextEditor.rich_text_editor
              field={@form[:content]}
              value="<h2>Welcome</h2><p>This is <strong>pre-filled</strong> content with <em>formatting</em>!</p><ul><li>Item 1</li><li>Item 2</li></ul>"
              label="Pre-filled Editor"
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.rich_text_editor
                field={@form[:content]}
                value={"&lt;h2&gt;Welcome&lt;/h2&gt;&lt;p&gt;This is &lt;strong&gt;pre-filled&lt;/strong&gt; content!&lt;/p&gt;"}
                label="Pre-filled Editor"
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Keyboard Shortcuts</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <h3 class="font-semibold text-gray-900 mb-2">Formatting</h3>

                <ul class="text-sm text-gray-700 space-y-1">
                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Ctrl+B</kbd>
                    - Bold
                  </li>

                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Ctrl+I</kbd>
                    - Italic
                  </li>

                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Ctrl+U</kbd>
                    - Underline
                  </li>

                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Ctrl+K</kbd>
                    - Insert Link
                  </li>
                </ul>
              </div>

              <div>
                <h3 class="font-semibold text-gray-900 mb-2">Editing</h3>

                <ul class="text-sm text-gray-700 space-y-1">
                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Ctrl+Z</kbd>
                    - Undo
                  </li>

                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Ctrl+Y</kbd>
                    - Redo
                  </li>

                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Tab</kbd>
                    - Indent
                  </li>

                  <li>
                    <kbd class="px-2 py-1 bg-gray-100 rounded border border-gray-300">Shift+Tab</kbd>
                    - Outdent
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Note</h2>

          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <p class="text-sm text-blue-800 mb-2">
              The rich text editor uses a JavaScript hook (<code class="bg-blue-100 px-1 rounded">RichTextEditorHook</code>) to sync content with the hidden input field for form submission.
            </p>

            <p class="text-sm text-blue-800">
              All formatting is handled client-side using the browser's
              <code class="bg-blue-100 px-1 rounded">document.execCommand</code>
              API. The HTML content is automatically synced to a hidden input field for form submission.
            </p>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">field</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    Phoenix.HTML.FormField
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Form field struct</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">label</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Label text</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    placeholder
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"Start typing..."</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Placeholder text</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Initial HTML content</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_multi_select_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Multi-Select</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Multi-select component with chips/tags display for selecting multiple items from a list.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Multi-Select</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="min-h-[42px] p-2 border border-gray-300 rounded-lg bg-white flex flex-wrap gap-2 items-center">
              <span class="text-gray-400 text-sm">Select options...</span>
              <div class="ml-auto">
                <.icon name="hero-chevron-down" class="w-5 h-5 text-gray-400" />
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.multi_select field={@form[:tags]} options={["Option 1", "Option 2", "Option 3"]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Selected Values</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="min-h-[42px] p-2 border border-gray-300 rounded-lg bg-white flex flex-wrap gap-2 items-center">
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                Option 1
                <button
                  type="button"
                  class="ml-2 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-blue-200"
                >
                  <.icon name="hero-x-mark" class="w-3 h-3" />
                </button>
              </span>
              <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                Option 2
                <button
                  type="button"
                  class="ml-2 inline-flex items-center justify-center w-4 h-4 rounded-full hover:bg-blue-200"
                >
                  <.icon name="hero-x-mark" class="w-3 h-3" />
                </button>
              </span>
              <div class="ml-auto">
                <.icon name="hero-chevron-down" class="w-5 h-5 text-gray-400" />
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.multi_select field={@form[:categories]} options={categories} label="Categories" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Label-Value Pairs</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.multi_select
                field={@form[:tags]}
                options={[
                  {"Frontend", "frontend"},
                  {"Backend", "backend"},
                  {"DevOps", "devops"}
                ]}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Note</h2>

          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <p class="text-sm text-blue-800">
              The multi-select component requires a JavaScript hook (<code class="bg-blue-100 px-1 rounded">MultiSelectHook</code>) for dropdown toggle functionality.
              Selected values are submitted as an array in the form params.
            </p>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">field</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    Phoenix.HTML.FormField
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Form field struct</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    options
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List of options (strings or label-value tuples)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    placeholder
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    "Select options..."
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Placeholder text when no items selected
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_rating_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Rating</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Rating / Star input component for reviews and feedback with interactive star selection.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Rating</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center space-x-1">
              <%= for i <- 1..5 do %>
                <button type="button" class="transition-colors cursor-pointer hover:scale-110">
                  <%= if i <= 3 do %>
                    <.icon name="hero-star" class="w-6 h-6 text-yellow-400 fill-yellow-400" />
                  <% else %>
                    <.icon name="hero-star" class="w-6 h-6 text-gray-300" />
                  <% end %>
                </button>
              <% end %>
              <span class="ml-2 text-sm text-gray-600">3/5</span>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.rating field={@form[:rating]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Sizes</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm space-y-4">
            <div>
              <p class="text-sm text-gray-600 mb-2">Small:</p>

              <div class="flex items-center space-x-1">
                <%= for i <- 1..5 do %>
                  <.icon name="hero-star" class="w-4 h-4 text-gray-300" />
                <% end %>
              </div>
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Medium (default):</p>

              <div class="flex items-center space-x-1">
                <%= for i <- 1..5 do %>
                  <.icon name="hero-star" class="w-6 h-6 text-gray-300" />
                <% end %>
              </div>
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Large:</p>

              <div class="flex items-center space-x-1">
                <%= for i <- 1..5 do %>
                  <.icon name="hero-star" class="w-8 h-8 text-gray-300" />
                <% end %>
              </div>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.rating field={@form[:score]} size={:sm} /&gt;
              &lt;.rating field={@form[:score]} size={:md} /&gt;
              &lt;.rating field={@form[:score]} size={:lg} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Readonly Rating</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center space-x-1">
              <%= for i <- 1..5 do %>
                <div class="cursor-default">
                  <%= if i <= 4 do %>
                    <.icon name="hero-star" class="w-6 h-6 text-yellow-400 fill-yellow-400" />
                  <% else %>
                    <.icon name="hero-star" class="w-6 h-6 text-gray-300" />
                  <% end %>
                </div>
              <% end %>
              <span class="ml-2 text-sm text-gray-600">4/5</span>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.rating value={4} readonly={true} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Max Rating</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.rating field={@form[:score]} max={10} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Note</h2>

          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <p class="text-sm text-blue-800">
              The rating component requires a JavaScript hook (<code class="bg-blue-100 px-1 rounded">RatingHook</code>) for interactive star selection.
            </p>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">field</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    Phoenix.HTML.FormField
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Form field struct (optional)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">0</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Current rating value</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">max</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Maximum rating (number of stars)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:sm | :md | :lg</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Star size</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    readonly
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Display-only mode (no interaction)</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_password_strength_meter_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Password Strength Meter</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Password input component with live strength validation and suggestions.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.PasswordStrengthMeter.password_strength_meter id="password-demo" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.password_strength_meter id="password-input" field={@form[:password]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Suggestions</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.PasswordStrengthMeter.password_strength_meter
                id="password-suggestions"
                show_suggestions={true}
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.password_strength_meter id="signup-password" field={@form[:password]} show_suggestions={true} /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_tag_input_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Tag Input</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Tag / Chips input component for adding and removing multiple tags dynamically.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.TagInput.tag_input
                id="tags-demo"
                tags={["react", "elixir", "phoenix"]}
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.tag_input id="tags-input" tags={@tags} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Max Tags</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.tag_input id="skills-input" tags={@skills} placeholder="Add skills..." max_tags={5} /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_signature_pad_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Signature Pad</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Signature pad / drawing canvas component for approvals or annotations.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.SignaturePad.signature_pad
                id="signature-demo"
                width={400}
                height={200}
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.signature_pad id="signature-pad" width={400} height={200} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Size</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.signature_pad id="approval-signature" width={600} height={300} clear_label="Clear" /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_color_picker_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Color Picker</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Color picker / palette selector component for design dashboards or admin apps.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.ColorPicker.color_picker id="color-demo" value="#3b82f6" />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.color_picker id="primary-color" value="#3b82f6" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Palette</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.ColorPicker.color_picker
                id="color-palette-demo"
                value="#000000"
                show_palette={true}
              />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.color_picker id="theme-color" value="#000000" show_palette={true} /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_conditional_form_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Conditional Form</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Conditional / dynamic form component where fields appear/disappear based on user input.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="max-w-md">
              <Ashui.Components.ConditionalForm.conditional_form id="conditional-form-demo">
                <:field name="user_type" type="select" options={["individual", "business"]} />
                <:conditional_field show_if={%{"user_type" => "business"}}>
                  <div class="mb-4">
                    <label
                      for="company_name-input"
                      class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                    >
                      Company Name
                    </label>
                    <input
                      type="text"
                      id="company_name-input"
                      name="company_name"
                      class="block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
                    />
                  </div>
                </:conditional_field>
              </Ashui.Components.ConditionalForm.conditional_form>
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.conditional_form id="dynamic-form"&gt;
      &lt;:field name="user_type" type="select" options={["individual", "business"]} /&gt;
      &lt;:conditional_field show_if={%{"user_type" => "business"}}&gt;
        &lt;div class="mb-4"&gt;
          &lt;label for="company_name-input"&gt;Company Name&lt;/label&gt;
          &lt;input type="text" id="company_name-input" name="company_name" /&gt;
        &lt;/div&gt;
      &lt;/:conditional_field&gt;
    &lt;/.conditional_form&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_carousel_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Carousel</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Carousel component for displaying images, testimonials, or content cards in a sliding carousel with navigation controls.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Carousel</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Carousel.carousel
              id="docs-carousel-1"
              current_slide={Map.get(assigns, :docs_carousel_1_current_slide, 0)}
            >
              <:slide>
                <div class="bg-blue-100 p-12 text-center rounded-lg">
                  <h3 class="text-2xl font-bold mb-2">Slide 1</h3>

                  <p class="text-gray-700">First slide content</p>
                </div>
              </:slide>

              <:slide>
                <div class="bg-green-100 p-12 text-center rounded-lg">
                  <h3 class="text-2xl font-bold mb-2">Slide 2</h3>

                  <p class="text-gray-700">Second slide content</p>
                </div>
              </:slide>

              <:slide>
                <div class="bg-purple-100 p-12 text-center rounded-lg">
                  <h3 class="text-2xl font-bold mb-2">Slide 3</h3>

                  <p class="text-gray-700">Third slide content</p>
                </div>
              </:slide>
            </Ashui.Components.Carousel.carousel>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.carousel id="my-carousel"&gt;
                &lt;:slide&gt;
                  &lt;div class="p-8"&gt;Slide 1&lt;/div&gt;
                &lt;/:slide&gt;
                &lt;:slide&gt;
                  &lt;div class="p-8"&gt;Slide 2&lt;/div&gt;
                &lt;/:slide&gt;
              &lt;/.carousel&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Autoplay</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.carousel id="autoplay-carousel" autoplay={true} interval={3000} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the carousel</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    autoplay
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Automatically advance slides</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    interval
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5000</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Autoplay interval in milliseconds</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    show_indicators
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Show slide indicators</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    show_arrows
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Show navigation arrows</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_wizard_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Wizard</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Wizard component for multi-step forms or flows with navigation, progress tracking, and validation support.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Wizard</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Wizard.wizard id="docs-wizard-1">
              <:step id="step1" title="Personal Info" active={true}>
                <div class="p-6 bg-gray-50 rounded-lg">
                  <h3 class="text-lg font-semibold mb-2">Step 1: Personal Information</h3>

                  <p class="text-gray-600">Enter your personal details here.</p>
                </div>
              </:step>

              <:step id="step2" title="Account Details">
                <div class="p-6 bg-gray-50 rounded-lg">
                  <h3 class="text-lg font-semibold mb-2">Step 2: Account Details</h3>

                  <p class="text-gray-600">Set up your account information.</p>
                </div>
              </:step>

              <:step id="step3" title="Review">
                <div class="p-6 bg-gray-50 rounded-lg">
                  <h3 class="text-lg font-semibold mb-2">Step 3: Review</h3>

                  <p class="text-gray-600">Review and confirm your information.</p>
                </div>
              </:step>
            </Ashui.Components.Wizard.wizard>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.wizard id="signup-wizard"&gt;
                &lt;:step id="step1" title="Personal Info" active={true}&gt;
                  &lt;p&gt;Step 1 content&lt;/p&gt;
                &lt;/:step&gt;
                &lt;:step id="step2" title="Account Details"&gt;
                  &lt;p&gt;Step 2 content&lt;/p&gt;
                &lt;/:step&gt;
              &lt;/.wizard&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the wizard</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    step.id
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for each step</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    step.title
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Step title</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    step.active
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Whether the step is currently active
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    step.completed
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Whether the step is completed</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_resizable_panels_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Resizable Panels</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Resizable panels component for split layouts like IDEs or dashboards. Users can drag to resize panels horizontally or vertically.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Horizontal Panels</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.ResizablePanels.resizable_panels
              id="docs-panels-1"
              orientation={:horizontal}
            >
              <:panel min_width="150px" default_width="300px">
                <div class="p-4 bg-blue-50 h-full">
                  <h3 class="font-semibold mb-2">Left Panel</h3>

                  <p class="text-sm text-gray-600">Drag the divider to resize</p>
                </div>
              </:panel>

              <:panel>
                <div class="p-4 bg-green-50 h-full">
                  <h3 class="font-semibold mb-2">Right Panel</h3>

                  <p class="text-sm text-gray-600">Resizable content area</p>
                </div>
              </:panel>
            </Ashui.Components.ResizablePanels.resizable_panels>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.resizable_panels id="split-layout" orientation={:horizontal}&gt;
                &lt;:panel min_width="200px" default_width="300px"&gt;
                  &lt;div class="p-4"&gt;Left Panel&lt;/div&gt;
                &lt;/:panel&gt;
                &lt;:panel&gt;
                  &lt;div class="p-4"&gt;Right Panel&lt;/div&gt;
                &lt;/:panel&gt;
              &lt;/.resizable_panels&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the panels</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    orientation
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :horizontal | :vertical
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:horizontal</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Layout orientation</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    panel.min_width
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"100px"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Minimum panel width</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    panel.default_width
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Initial panel width</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_filter_panel_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Filter Panel</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Filter panel component for faceted search and real-time filtering of data tables with collapsible sections.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Filter Panel</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.FilterPanel.filter_panel id="docs-filter-1" title="Product Filters">
              <:filter label="Category" field="category" type={:checkbox}></:filter>
              <:option field="category" value="electronics" label="Electronics" count={42} />
              <:option field="category" value="clothing" label="Clothing" count={28} />
              <:option field="category" value="books" label="Books" count={15} />
              <:filter label="Price Range" field="price" type={:radio}></:filter>
              <:option field="price" value="0-50" label="$0 - $50" />
              <:option field="price" value="50-100" label="$50 - $100" />
              <:option field="price" value="100+" label="$100+" />
            </Ashui.Components.FilterPanel.filter_panel>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.filter_panel id="product-filters"&gt;
                &lt;:filter label="Category" field="category"&gt;
                &lt;/:filter&gt;
                &lt;:option field="category" value="electronics" label="Electronics" count={42} /&gt;
                &lt;:option field="category" value="clothing" label="Clothing" count={28} /&gt;
                &lt;:filter label="Price Range" field="price" type={:radio}&gt;
                &lt;/:filter&gt;
                &lt;:option field="price" value="0-50" label="$0 - $50" /&gt;
              &lt;/.filter_panel&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the filter panel</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">title</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">"Filters"</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Panel title</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    collapsible
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Allow collapsing the panel</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    filter.type
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :checkbox | :radio | :range
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:checkbox</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Filter input type</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_skeleton_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Skeleton</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Skeleton component for loading placeholders during async data loading. Provides visual feedback while content is being fetched.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Text Skeletons</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="space-y-4">
              <Ashui.Components.Skeleton.skeleton variant={:text} size={:sm} />
              <Ashui.Components.Skeleton.skeleton variant={:text} size={:md} />
              <Ashui.Components.Skeleton.skeleton variant={:text} size={:lg} />
              <Ashui.Components.Skeleton.skeleton variant={:text} lines={3} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.skeleton variant={:text} size={:md} /&gt;
              &lt;.skeleton variant={:text} lines={3} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Circle Skeletons</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <div class="flex items-center space-x-4">
              <Ashui.Components.Skeleton.skeleton variant={:circle} size={:sm} />
              <Ashui.Components.Skeleton.skeleton variant={:circle} size={:md} />
              <Ashui.Components.Skeleton.skeleton variant={:circle} size={:lg} />
            </div>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.skeleton variant={:circle} size={:md} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Dimensions</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Skeleton.skeleton variant={:rect} width="200px" height="100px" />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.skeleton variant={:rect} width="200px" height="100px" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    variant
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    :text | :circle | :rect
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:text</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Skeleton shape variant</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:sm | :md | :lg</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Size for text and circle variants</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">lines</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">1</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Number of lines for text variant</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">width</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Custom width (e.g., "200px")</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    height
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Custom height (e.g., "100px")</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_skeleton_layout_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Skeleton Layout</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Full-page skeleton layouts for dashboard, article, and profile loading states.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Dashboard Skeleton</h2>
          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.SkeletonLayout.skeleton_layout variant={:dashboard} />
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Article &amp; Profile</h2>
          <div class="grid gap-6 lg:grid-cols-2">
            <div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
              <Ashui.Components.SkeletonLayout.skeleton_layout variant={:article} />
            </div>
            <div class="bg-white p-6 rounded-lg border border-gray-200 shadow-sm">
              <Ashui.Components.SkeletonLayout.skeleton_layout variant={:profile} />
            </div>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Usage</h2>
          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.skeleton_layout variant={:dashboard} /&gt;
    &lt;.skeleton_layout variant={:article} class="mt-6" /&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_autocomplete_docs(assigns) do
    sample_options = [
      "Apple",
      "Banana",
      "Cherry",
      "Date",
      "Elderberry",
      "Fig",
      "Grape",
      "Honeydew"
    ]

    assigns = assign(assigns, :sample_options, sample_options)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Autocomplete</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Autocomplete component with live search and suggestion list while typing. Provides keyboard navigation and debounced search.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Autocomplete</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Autocomplete.autocomplete
              id="docs-autocomplete-1"
              options={@sample_options}
              placeholder="Search fruits..."
              label="Fruit Search"
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.autocomplete id="search-users" field={@form[:user]} options={users} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Form Field</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.autocomplete id="product-search" field={@form[:product]} options={products} min_chars={2} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Custom Options</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.autocomplete
                id="user-search"
                options={[{"John Doe", "1"}, {"Jane Smith", "2"}]}
                max_results={5}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the autocomplete</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">field</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    Phoenix.HTML.FormField
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Form field struct (optional)</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    options
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List of options (strings or label-value tuples)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    min_chars
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">1</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Minimum characters before showing suggestions
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    max_results
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">10</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Maximum number of suggestions to show
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_sortable_list_docs(assigns) do
    sample_items = [
      %{id: 1, title: "First Item", description: "Drag me around"},
      %{id: 2, title: "Second Item", description: "Rearrange as needed"},
      %{id: 3, title: "Third Item", description: "Drop anywhere"},
      %{id: 4, title: "Fourth Item", description: "Order is preserved"}
    ]

    assigns = assign(assigns, :sample_items, sample_items)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Sortable List</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Sortable list component for drag & drop reordering of items. Users can visually rearrange items by dragging.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Sortable List</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.SortableList.sortable_list id="docs-sortable-1" items={@sample_items}>
              <:item :let={item}>
                <div class="flex items-center justify-between">
                  <div>
                    <h4 class="font-semibold text-gray-900">{item.title}</h4>

                    <p class="text-sm text-gray-600">{item.description}</p>
                  </div>
                  <.icon name="hero-bars-3" class="w-5 h-5 text-gray-400" />
                </div>
              </:item>
            </Ashui.Components.SortableList.sortable_list>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.sortable_list id="todo-list" items={@todos}&gt;
                &lt;:item :let={todo}&gt;
                  &lt;div class="p-4 border rounded"&gt;
                    &lt;%= todo.title %&gt;
                  &lt;/div&gt;
                &lt;/:item&gt;
              &lt;/.sortable_list&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Item ID Key</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.sortable_list id="items" items={@items} item_id={:uuid}&gt;
                &lt;:item :let={item}&gt;
                  &lt;%= item.name %&gt;
                &lt;/:item&gt;
              &lt;/.sortable_list&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Note</h2>

          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <p class="text-sm text-blue-800">
              The sortable list component requires a JavaScript hook (<code class="bg-blue-100 px-1 rounded">SortableListHook</code>) for drag & drop functionality. The order is automatically tracked in a hidden input field.
            </p>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the sortable list</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">items</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">List of items to display</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    item_id
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">atom</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:id</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Key to use as unique identifier for items
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_live_chat_docs(assigns) do
    sample_messages = [
      %{
        id: 1,
        user_id: "user1",
        user_name: "Alice",
        text: "Hello! How are you?",
        timestamp: DateTime.utc_now()
      },
      %{
        id: 2,
        user_id: "user2",
        user_name: "Bob",
        text: "I'm doing great, thanks!",
        timestamp: DateTime.utc_now()
      },
      %{
        id: 3,
        user_id: "user1",
        user_name: "Alice",
        text: "That's wonderful to hear!",
        timestamp: DateTime.utc_now()
      }
    ]

    assigns = assign(assigns, :sample_messages, sample_messages)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Live Chat</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Live chat component with typing indicators and real-time messaging. Supports message bubbles, user identification, and typing status.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Live Chat</h2>

          <div
            class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm"
            style="height: 400px;"
          >
            <Ashui.Components.LiveChat.live_chat
              id="docs-chat-1"
              messages={@sample_messages}
              current_user="user1"
              typing_users={["Bob"]}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.live_chat id="chat-room" messages={@messages} current_user={@current_user} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Typing Indicators</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.live_chat
                id="chat-room"
                messages={@messages}
                current_user={@current_user}
                typing_users={@typing_users}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the chat</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    messages
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">[]</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List of message maps with :text, :user_id, :user_name, :timestamp
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    typing_users
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">[]</td>

                  <td class="px-6 py-4 text-sm text-gray-700">List of users currently typing</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_live_feed_docs(assigns) do
    sample_items = [
      %{
        id: 1,
        title: "New Order",
        content: "Order #1234 has been placed",
        timestamp: DateTime.utc_now(),
        action: "view",
        action_label: "View Order"
      },
      %{
        id: 2,
        title: "Payment Received",
        content: "Payment of $99.99 received",
        timestamp: DateTime.utc_now()
      },
      %{
        id: 3,
        title: "User Registration",
        content: "New user registered",
        timestamp: DateTime.utc_now(),
        action: "view",
        action_label: "View User"
      }
    ]

    assigns = assign(assigns, :sample_items, sample_items)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Live Feed</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Live feed component for scrollable real-time updates and notifications. Automatically scrolls to new items and tracks user scroll position.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Live Feed</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.LiveFeed.live_feed
              id="docs-feed-1"
              items={@sample_items}
              max_height="300px"
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.live_feed id="notifications" items={@notifications} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Custom Height</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.live_feed id="feed" items={@items} max_height="500px" auto_scroll={true} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the feed</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">items</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">[]</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List of feed items with :title, :content, :timestamp, :avatar
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    auto_scroll
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">true</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Automatically scroll to new items</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_countdown_docs(assigns) do
    future_date = DateTime.add(DateTime.utc_now(), 3600, :second)

    assigns = assign(assigns, :future_date, future_date)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Countdown</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Countdown timer component for events, offers, or games. Updates in real-time and dispatches events when complete.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Compact Format</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Countdown.countdown
              id="docs-countdown-1"
              target_date={@future_date}
              format={:compact}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.countdown id="sale-timer" target_date={~U[2024-12-31 23:59:59Z]} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Detailed Format</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Countdown.countdown
              id="docs-countdown-2"
              target_date={@future_date}
              format={:detailed}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.countdown id="event-timer" target_date={@event_date} format={:detailed} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Completion Event</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.countdown
                id="timer"
                target_date={@target_date}
                on_complete="countdown-complete"
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">id</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Unique ID for the countdown</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    target_date
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                    DateTime | NaiveDateTime | string
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Target date/time for countdown</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    format
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">atom</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:compact</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Display format (:compact or :detailed)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    on_complete
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    Event name to dispatch when countdown completes
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_kanban_docs(assigns) do
    columns = [
      %{
        id: "todo",
        title: "To Do",
        cards: [
          %{
            id: "card-1",
            title: "Design homepage",
            description: "Create wireframes",
            tags: ["design", "ui"]
          },
          %{id: "card-2", title: "Setup database", description: "Configure PostgreSQL"}
        ]
      },
      %{
        id: "in-progress",
        title: "In Progress",
        cards: [
          %{
            id: "card-3",
            title: "Implement auth",
            description: "Add user authentication",
            tags: ["backend"]
          }
        ]
      },
      %{
        id: "done",
        title: "Done",
        cards: [
          %{id: "card-4", title: "Setup project", description: "Initialize Phoenix app"}
        ]
      }
    ]

    assigns = assign(assigns, :demo_columns, columns)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Kanban Board</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Kanban / Task Board component with draggable columns and cards for project management apps.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm overflow-x-auto">
            <Ashui.Components.Kanban.kanban id="kanban-demo" columns={@demo_columns} />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    tasks = [
      %{
        id: "task-1",
        name: "Project Planning",
        start_date: ~D[2024-01-01],
        end_date: ~D[2024-01-05],
        progress: 30
      }
    ]

    &lt;.gantt id="project-timeline" tasks={@tasks} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Custom Date Range</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.gantt
      id="project-timeline"
      tasks={@tasks}
      start_date={~D[2024-01-01]}
      end_date={~D[2024-12-31]}
    /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Features</h2>

          <ul class="list-disc list-inside space-y-2 text-gray-700">
            <li>Draggable tasks to adjust dates</li>

            <li>Resizable task bars</li>

            <li>Dependency lines between tasks</li>

            <li>Progress indicators</li>

            <li>Customizable colors and styling</li>

            <li>Auto-calculated date ranges</li>
          </ul>
        </section>
      </div>
    </div>
    """
  end

  defp render_gantt_docs(assigns) do
    tasks = [
      %{
        id: "gantt-task-1",
        name: "Project Kickoff",
        start_date: ~D[2024-01-02],
        end_date: ~D[2024-01-05],
        progress: 100,
        color: "blue"
      },
      %{
        id: "gantt-task-2",
        name: "Design Sprint",
        start_date: ~D[2024-01-06],
        end_date: ~D[2024-01-12],
        progress: 65,
        color: "purple",
        dependencies: ["gantt-task-1"]
      },
      %{
        id: "gantt-task-3",
        name: "Implementation",
        start_date: ~D[2024-01-13],
        end_date: ~D[2024-01-24],
        progress: 35,
        color: "emerald",
        dependencies: ["gantt-task-2"]
      },
      %{
        id: "gantt-task-4",
        name: "QA & Launch",
        start_date: ~D[2024-01-25],
        end_date: ~D[2024-01-31],
        progress: 10,
        color: "amber",
        dependencies: ["gantt-task-3"]
      }
    ]

    assigns =
      assigns
      |> assign(:demo_tasks, tasks)
      |> assign(:demo_start_date, ~D[2024-01-01])
      |> assign(:demo_end_date, ~D[2024-02-05])

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Gantt Chart</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Interactive Gantt chart for project timelines with drag, resize, and dependency visuals.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Project Roadmap</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm overflow-x-auto">
            <Ashui.Components.Gantt.gantt
              id="gantt-demo"
              tasks={@demo_tasks}
              start_date={@demo_start_date}
              end_date={@demo_end_date}
              class="max-w-full"
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    tasks = [
      %{
        id: "task-1",
        name: "Kickoff",
        start_date: ~D[2024-01-02],
        end_date: ~D[2024-01-05],
        progress: 100
      },
      %{
        id: "task-2",
        name: "Design Sprint",
        start_date: ~D[2024-01-06],
        end_date: ~D[2024-01-12],
        dependencies: ["task-1"]
      }
    ]

    &lt;.gantt
      id="product-roadmap"
      tasks={@tasks}
      start_date={~D[2024-01-01]}
      end_date={~D[2024-01-31]}
    /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Highlights</h2>
          <ul class="space-y-2 text-gray-700 list-disc list-inside">
            <li>Auto-calculated date range based on tasks with optional overrides.</li>
            <li>Drag and resize hooks emit events for task updates.</li>
            <li>Dependency lines with arrowheads for critical path visualization.</li>
            <li>Slot support for custom task labels and interactive row content.</li>
            <li>Configurable row and bar sizing for dense timelines.</li>
          </ul>
        </section>
      </div>
    </div>
    """
  end

  defp render_live_data_table_docs(assigns) do
    columns = [
      %{key: "id", label: "ID", sortable: true, width: "80px"},
      %{key: "name", label: "Name", sortable: true},
      %{key: "email", label: "Email", sortable: true},
      %{key: "role", label: "Role", sortable: true, width: "120px"},
      %{key: "status", label: "Status", sortable: true, width: "100px"}
    ]

    # Generate sample data (large dataset for virtual scroll demo)
    rows =
      1..100
      |> Enum.map(fn i ->
        %{
          id: i,
          name: "User #{i}",
          email: "user#{i}@example.com",
          role: if(rem(i, 3) == 0, do: "Admin", else: "User"),
          status: if(rem(i, 2) == 0, do: "Active", else: "Inactive")
        }
      end)

    assigns =
      assigns
      |> assign(:demo_columns, columns)
      |> assign(:demo_rows, rows)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Live Data Table</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Live Data Table component with virtual scrolling for handling huge datasets efficiently. Supports PubSub updates, sorting, filtering, and row selection.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Usage</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.LiveDataTable.live_data_table
              id="table-demo"
              rows={@demo_rows}
              columns={@demo_columns}
              row_height={50}
              visible_rows={10}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    columns = [
      %{key: "id", label: "ID", sortable: true},
      %{key: "name", label: "Name", sortable: true},
      %{key: "email", label: "Email", sortable: true}
    ]

    &lt;.live_data_table
      id="users-table"
      rows={@users}
      columns={@columns}
      row_height={50}
      visible_rows={10}
    /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Row Selection</h2>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.live_data_table
      id="users-table"
      rows={@users}
      columns={@columns}
      enable_selection={true}
      selected_rows={@selected_rows}
    /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Features</h2>

          <ul class="list-disc list-inside space-y-2 text-gray-700">
            <li>Virtual scrolling for huge datasets (10,000+ rows)</li>

            <li>Column sorting (ascending/descending)</li>

            <li>Real-time filtering/search</li>

            <li>Row selection (single or multiple)</li>

            <li>PubSub integration for live updates</li>

            <li>Customizable row and column rendering</li>

            <li>Responsive and accessible</li>
          </ul>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Event Handlers</h2>

          <p class="text-gray-700 mb-4">
            The component dispatches the following events to your LiveView:
          </p>

          <ul class="list-disc list-inside space-y-2 text-gray-700">
            <li>
              <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">filter-table</code>
              - When filter value changes
            </li>

            <li>
              <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">sort-column</code>
              - When column header is clicked
            </li>

            <li>
              <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">toggle-row-selection</code>
              - When row checkbox is toggled
            </li>

            <li>
              <code class="bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">select-all-rows</code>
              - When header checkbox is clicked
            </li>
          </ul>
        </section>
      </div>
    </div>
    """
  end

  defp render_user_profile_card_docs(assigns) do
    sample_actions = [
      %{label: "Message", variant: :primary, on_click: "message-user"},
      %{label: "Follow", variant: :outline, on_click: "follow-user"}
    ]

    assigns = assign(assigns, :sample_actions, sample_actions)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">User Profile Card</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          User profile card component with online/offline status, avatar, and user information. Perfect for displaying user details in a card format.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Basic Profile Card</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.UserProfileCard.user_profile_card
              name="John Doe"
              email="john@example.com"
              role="Software Engineer"
              bio="Passionate developer building amazing products"
              online={true}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.user_profile_card
                name="John Doe"
                email="john@example.com"
                avatar="/images/avatar.jpg"
                online={true}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">With Actions</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.UserProfileCard.user_profile_card
              name="Jane Smith"
              email="jane@example.com"
              role="Product Designer"
              online={false}
              actions={@sample_actions}
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.user_profile_card
                name="Jane Smith"
                actions={[
                  %{label: "Message", variant: :primary, on_click: "message-user"},
                  %{label: "Follow", variant: :outline, on_click: "follow-user"}
                ]}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">name</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">User's full name</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    online
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">boolean</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">false</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Online status indicator</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    avatar
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">string</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">nil</td>

                  <td class="px-6 py-4 text-sm text-gray-700">URL to user's avatar image</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_avatar_group_docs(assigns) do
    sample_users = [
      %{name: "Alice", online: true},
      %{name: "Bob", online: false},
      %{name: "Charlie", online: true},
      %{name: "Diana", online: true},
      %{name: "Eve", online: false},
      %{name: "Frank", online: true}
    ]

    assigns = assign(assigns, :sample_users, sample_users)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Avatar Group</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Avatar group component for displaying multiple users in a row with overlapping avatars. Supports online status indicators and overflow count.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Stacked Avatars</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.AvatarGroup.avatar_group users={@sample_users} max_visible={5} />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
              &lt;.avatar_group users={@users} max_visible={5} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Different Sizes</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm space-y-4">
            <div>
              <p class="text-sm text-gray-600 mb-2">Small</p>

              <Ashui.Components.AvatarGroup.avatar_group
                users={Enum.take(@sample_users, 4)}
                size={:sm}
              />
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Medium</p>

              <Ashui.Components.AvatarGroup.avatar_group
                users={Enum.take(@sample_users, 4)}
                size={:md}
              />
            </div>

            <div>
              <p class="text-sm text-gray-600 mb-2">Large</p>

              <Ashui.Components.AvatarGroup.avatar_group
                users={Enum.take(@sample_users, 4)}
                size={:lg}
              />
            </div>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 border border-gray-200">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">users</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">list</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">-</td>

                  <td class="px-6 py-4 text-sm text-gray-700">
                    List of user maps with :name, :avatar, :online
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                    max_visible
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">integer</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">5</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Maximum number of avatars to show</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">size</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">atom</td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">:md</td>

                  <td class="px-6 py-4 text-sm text-gray-700">Avatar size (:sm, :md, :lg)</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_connections_widget_docs(assigns) do
    demo_connections = [
      %{
        id: 1,
        name: "Ava Johnson",
        username: "ava.designs",
        avatar: "https://i.pravatar.cc/80?img=12",
        is_connected: true,
        mutual_count: 12,
        online: true
      },
      %{
        id: 2,
        name: "Mateo García",
        username: "mateo.codes",
        avatar: "https://i.pravatar.cc/80?img=32",
        is_connected: false,
        mutual_count: 6,
        online: false
      },
      %{
        id: 3,
        name: "Priya Patel",
        username: "priya.product",
        avatar: "https://i.pravatar.cc/80?img=45",
        is_connected: true,
        mutual_count: 18,
        online: true
      },
      %{
        id: 4,
        name: "Noah Williams",
        username: "noah.analytics",
        is_connected: false,
        mutual_count: 3,
        online: true
      }
    ]

    assigns =
      assigns
      |> assign(:demo_connections, demo_connections)
      |> assign(:demo_current_user, 99)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Connections Widget</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Social-style connections list with avatars, status indicators, mutual counts, and custom actions.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Followers Panel</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.ConnectionsWidget.connections_widget
              connections={@demo_connections}
              current_user={@demo_current_user}
              type={:followers}
              max_display={3}
            >
              <:action>
                <button
                  type="button"
                  class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-lg transition-colors"
                >
                  View All
                </button>
              </:action>
            </Ashui.Components.ConnectionsWidget.connections_widget>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.connections_widget
      connections={@connections}
      current_user={@current_user_id}
      type={:followers}
      max_display={5}
    &gt;
      &lt;:action&gt;
        &lt;button class="btn btn-secondary"&gt;View All&lt;/button&gt;
      &lt;/:action&gt;
    &lt;/.connections_widget&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Highlights</h2>
          <ul class="space-y-2 text-gray-700 list-disc list-inside">
            <li>
              Supports followers, following, or connections context via the
              <code class="px-1 py-0.5 bg-gray-200 rounded text-xs">type</code>
              attribute.
            </li>
            <li>Built-in mutual connection counts and online indicators.</li>
            <li>Optional custom action slot for CTA buttons or dropdowns.</li>
            <li>Responsive layout with graceful empty states when no data is available.</li>
          </ul>
        </section>
      </div>
    </div>
    """
  end

  defp render_badge_card_docs(assigns) do
    badges = [
      %{
        title: "First Steps",
        description: "Complete your onboarding checklist",
        icon: "hero-flag",
        unlocked: true,
        progress: 100,
        rarity: :common,
        points: 50,
        unlocked_at: ~D[2024-01-12]
      },
      %{
        title: "Collaboration Pro",
        description: "Invite five teammates to your workspace",
        icon: "hero-users",
        unlocked: false,
        progress: 60,
        rarity: :rare,
        points: 120
      },
      %{
        title: "Ship It",
        description: "Launch your first project milestone",
        icon: "hero-rocket-launch",
        unlocked: false,
        progress: 25,
        rarity: :epic,
        points: 250
      }
    ]

    assigns = assign(assigns, :demo_badges, badges)

    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Badge Card</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Gamified badge card for achievements, loyalty programs, and progress tracking.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Badge Showcase</h2>

          <div class="grid gap-6 md:grid-cols-3">
            <%= for badge <- @demo_badges do %>
              <Ashui.Components.BadgeCard.badge_card {badge} />
            <% end %>
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200 mt-6">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.badge_card
      title="Collaboration Pro"
      description="Invite five teammates"
      icon="hero-users"
      rarity={:rare}
      progress={60}
      points={120}
    /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Tips</h2>
          <ul class="space-y-2 text-gray-700 list-disc list-inside">
            <li>
              Use the <code class="px-1 py-0.5 bg-gray-200 rounded text-xs">rarity</code>
              attr to theme border and icon colors.
            </li>
            <li>
              Show progress bar for locked achievements with <code class="px-1 py-0.5 bg-gray-200 rounded text-xs">progress</code>.
            </li>
            <li>
              Include <code class="px-1 py-0.5 bg-gray-200 rounded text-xs">points</code>
              and <code class="px-1 py-0.5 bg-gray-200 rounded text-xs">unlocked_at</code>
              for richer context.
            </li>
          </ul>
        </section>
      </div>
    </div>
    """
  end

  defp render_theme_switch_docs(assigns) do
    ~H"""
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/95 px-6 py-10 text-slate-100 shadow-[0_60px_140px_-70px_rgba(59,130,246,0.55)]">
      <div class="pointer-events-none absolute -top-48 -right-24 h-80 w-80 rounded-full bg-amber-400/20 blur-3xl">
      </div>
      <div class="pointer-events-none absolute -bottom-56 -left-32 h-[26rem] w-[26rem] rounded-full bg-blue-500/25 blur-3xl">
      </div>
      <div class="pointer-events-none absolute inset-0 bg-[conic-gradient(from_120deg_at_50%_50%,rgba(59,130,246,0.18),transparent_45%)]">
      </div>

      <div class="relative z-10 space-y-12">
        <header class="space-y-4">
          <span class="inline-flex items-center gap-2 rounded-full border border-amber-400/40 bg-amber-400/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-amber-100">
            Theme Switch <span class="h-1 w-1 rounded-full bg-amber-200/80"></span> Dynamic Modes
          </span>
          <h1 class="text-4xl font-semibold tracking-tight text-slate-50">Theme Switch</h1>
          <p class="max-w-3xl text-lg leading-relaxed text-slate-300">
            Accessible toggle powered by the `ThemeToggleHook`. Deliver effortless transitions between light and dark palettes with a single interactive element.
          </p>
        </header>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-amber-300/60 hover:shadow-[0_40px_100px_-70px_rgba(251,191,36,0.45)]">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <h2 class="text-2xl font-semibold text-slate-50">Sizes &amp; Labels</h2>
              <p class="mt-2 max-w-xl text-sm text-slate-300">
                Choose from multiple sizes and optionally surface accessibility labels to clarify mode changes.
              </p>
            </div>
            <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-4 py-1 text-[10px] uppercase tracking-[0.35em] text-slate-200/80">
              Responsive
            </div>
          </div>

          <div class="mt-8 space-y-6">
            <div class="flex flex-wrap items-center gap-6">
              <Ashui.Components.ThemeSwitch.theme_switch size={:sm} />
              <Ashui.Components.ThemeSwitch.theme_switch />
              <Ashui.Components.ThemeSwitch.theme_switch size={:lg} />
            </div>
            <div class="rounded-2xl border border-white/10 bg-slate-950/70 px-6 py-4">
              <div class="text-xs font-semibold uppercase tracking-[0.35em] text-slate-400">
                Labelled Variant
              </div>
              <div class="mt-4">
                <Ashui.Components.ThemeSwitch.theme_switch show_label={true} />
              </div>
            </div>
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-amber-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    &lt;.theme_switch /&gt;
    &lt;.theme_switch size={:lg} /&gt;
    &lt;.theme_switch show_label={true} /&gt;
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm">
          <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <h2 class="text-2xl font-semibold text-slate-50">Usage Notes</h2>
              <p class="mt-2 max-w-2xl text-sm text-slate-300">
                Integrate the switch with minimal wiring and customise visuals using Tailwind utilities to match your brand aura.
              </p>
            </div>
            <div class="inline-flex items-center gap-2 text-xs uppercase tracking-[0.35em] text-slate-300">
              <span class="h-2 w-2 rounded-full bg-amber-300"></span> Hook powered
            </div>
          </div>

          <ul class="mt-6 space-y-3 text-sm text-slate-200">
            <li class="flex items-start gap-3 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3">
              <span class="mt-1 inline-flex h-2.5 w-2.5 flex-shrink-0 rounded-full bg-amber-300">
              </span>
              <span>
                Works out of the box with the bundled
                <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-amber-200">
                  ThemeToggleHook
                </code>
                defined in <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-amber-200">assets/js/app.js</code>.
              </span>
            </li>
            <li class="flex items-start gap-3 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3">
              <span class="mt-1 inline-flex h-2.5 w-2.5 flex-shrink-0 rounded-full bg-amber-300">
              </span>
              <span>
                Set
                <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-amber-200">
                  show_label
                </code>
                for explicit light/dark annotations.
              </span>
            </li>
            <li class="flex items-start gap-3 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-3">
              <span class="mt-1 inline-flex h-2.5 w-2.5 flex-shrink-0 rounded-full bg-amber-300">
              </span>
              <span>
                Extend styling with additional Tailwind classes through the
                <code class="rounded bg-slate-800 px-1.5 py-0.5 text-xs text-amber-200">class</code>
                attribute for unique theming.
              </span>
            </li>
          </ul>
        </section>
      </div>
    </div>
    """
  end

  defp render_alert_docs(assigns) do
    ~H"""
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/95 px-6 py-10 text-slate-100 shadow-[0_50px_120px_-60px_rgba(59,130,246,0.6)]">
      <div class="pointer-events-none absolute -top-40 -right-32 h-80 w-80 rounded-full bg-cyan-500/30 blur-3xl">
      </div>
      <div class="pointer-events-none absolute -bottom-44 -left-40 h-96 w-96 rounded-full bg-purple-500/25 blur-3xl">
      </div>
      <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.08),_transparent_60%)]">
      </div>

      <div class="relative z-10 space-y-12">
        <header class="space-y-4">
          <span class="inline-flex items-center gap-2 rounded-full border border-cyan-500/40 bg-cyan-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-cyan-200">
            Alert <span class="h-1 w-1 rounded-full bg-cyan-300/80"></span> Docs
          </span>
          <h1 class="text-4xl font-semibold tracking-tight text-slate-50">Alert</h1>
          <p class="max-w-3xl text-lg leading-relaxed text-slate-300">
            ARIA-friendly alert component for displaying important messages to users. Supports multiple variants and dismissible alerts so teams can deliver timely, accessible feedback.
          </p>
        </header>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_30px_80px_-60px_rgba(14,165,233,0.45)]">
          <div class="flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
            <div>
              <h2 class="text-2xl font-semibold text-slate-50">Alert Variants</h2>
              <p class="mt-2 max-w-xl text-sm text-slate-300">
                Demonstrates each semantic variant and how it harmonises with the dark UI foundation.
              </p>
            </div>
            <div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-1 text-xs tracking-[0.3em] text-slate-200/70">
              Auto adaptive
            </div>
          </div>

          <div class="mt-8 space-y-4">
            <Ashui.Components.Alert.alert
              variant={:info}
              title="Information"
              message="This is an informational alert"
            />
            <Ashui.Components.Alert.alert
              variant={:success}
              title="Success"
              message="Operation completed successfully"
            />
            <Ashui.Components.Alert.alert
              variant={:warning}
              title="Warning"
              message="Please review this warning"
            />
            <Ashui.Components.Alert.alert
              variant={:error}
              title="Error"
              message="Something went wrong"
            />
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-cyan-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    &lt;.alert variant={:info} title="Information" message="This is an info alert" /&gt;
    &lt;.alert variant={:success} title="Success" message="Operation successful" /&gt;
    &lt;.alert variant={:warning} title="Warning" message="Please review" /&gt;
    &lt;.alert variant={:error} title="Error" message="Something went wrong" /&gt;
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_30px_80px_-60px_rgba(147,197,253,0.35)]">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-slate-50">Dismissible Alert</h2>
            <p class="text-sm text-slate-300">
              Enable dismissible alerts for temporary feedback that users can clear once acknowledged.
            </p>
          </div>

          <div class="mt-6">
            <Ashui.Components.Alert.alert
              variant={:info}
              title="Dismissible Alert"
              message="Click the X button to dismiss this alert"
              dismissible={true}
            />
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-cyan-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    &lt;.alert variant={:info} dismissible={true} title="Alert" message="Message" /&gt;
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm">
          <h2 class="text-2xl font-semibold text-slate-50">Props</h2>
          <p class="mt-2 max-w-xl text-sm text-slate-300">
            Configure alerts with a small, expressive API. Defaults are optimised for accessibility and theme coherence.
          </p>

          <div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
            <table class="min-w-full divide-y divide-white/10 text-sm">
              <thead class="bg-slate-950/60 text-xs uppercase tracking-[0.2em] text-slate-300">
                <tr>
                  <th class="px-6 py-4 text-left">Prop</th>
                  <th class="px-6 py-4 text-left">Type</th>
                  <th class="px-6 py-4 text-left">Default</th>
                  <th class="px-6 py-4 text-left">Description</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/5 bg-slate-950/30 text-slate-200">
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">variant</td>
                  <td class="px-6 py-4">atom</td>
                  <td class="px-6 py-4 text-cyan-200">:info</td>
                  <td class="px-6 py-4">Alert variant (:info, :success, :warning, :error)</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">dismissible</td>
                  <td class="px-6 py-4">boolean</td>
                  <td class="px-6 py-4 text-cyan-200">false</td>
                  <td class="px-6 py-4">Allow dismissing the alert</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">role</td>
                  <td class="px-6 py-4">string</td>
                  <td class="px-6 py-4 text-cyan-200">"alert"</td>
                  <td class="px-6 py-4">ARIA role attribute</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_theme_config_docs(assigns) do
    colors = Ashui.Theme.colors()
    spacing = Ashui.Theme.spacing_tokens()
    fonts = Ashui.Theme.fonts()

    assigns =
      assigns
      |> assign(:colors, colors)
      |> assign(:spacing, spacing)
      |> assign(:fonts, fonts)

    ~H"""
    <div class="relative overflow-hidden rounded-3xl border border-white/10 bg-slate-950/95 px-6 py-10 text-slate-100 shadow-[0_50px_140px_-70px_rgba(99,102,241,0.55)]">
      <div class="pointer-events-none absolute -top-48 right-[-20%] h-96 w-96 rounded-full bg-indigo-500/25 blur-3xl">
      </div>
      <div class="pointer-events-none absolute -bottom-56 left-[-10%] h-[28rem] w-[28rem] rounded-full bg-cyan-500/20 blur-3xl">
      </div>
      <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,_rgba(59,130,246,0.12),_transparent_65%)]">
      </div>

      <div class="relative z-10 space-y-12">
        <header class="space-y-4">
          <span class="inline-flex items-center gap-2 rounded-full border border-indigo-500/40 bg-indigo-500/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.3em] text-indigo-200">
            Theme <span class="h-1 w-1 rounded-full bg-indigo-300/80"></span> Config
          </span>
          <h1 class="text-4xl font-semibold tracking-tight text-slate-50">Theme Configuration</h1>
          <p class="max-w-3xl text-lg leading-relaxed text-slate-300">
            Configurable theme system with color, spacing, and font tokens. Use the `Ashui.Theme` module to orchestrate consistent styling programmatically across your product.
          </p>
        </header>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-cyan-400/60 hover:shadow-[0_30px_90px_-60px_rgba(14,165,233,0.45)]">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-slate-50">Color Tokens</h2>
            <p class="text-sm text-slate-300">
              Curated palette engineered for luminous contrast on dark surfaces.
            </p>
          </div>

          <div class="mt-8 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            <%= for {name, value} <- @colors do %>
              <div class="group relative overflow-hidden rounded-2xl border border-white/10 bg-slate-950/60 p-4 transition-all duration-300 hover:-translate-y-1 hover:border-cyan-300/60 hover:shadow-[0_24px_80px_-50px_rgba(14,165,233,0.5)]">
                <div class="flex items-center justify-between">
                  <div
                    class="h-16 w-16 rounded-xl border border-white/10 shadow-inner shadow-slate-950/40"
                    style={"background-color: #{value}"}
                  >
                  </div>
                  <span class="text-[10px] uppercase tracking-[0.4em] text-slate-400">{name}</span>
                </div>
                <div class="mt-4 flex items-center justify-between text-xs text-slate-400">
                  <span class="font-mono text-cyan-200">{value}</span>
                  <span class="rounded-full border border-white/10 bg-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.35em] text-slate-300">
                    Token
                  </span>
                </div>
              </div>
            <% end %>
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-cyan-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    # Get a color token
    Ashui.Theme.color(:primary)
    # =&gt; "oklch(70% 0.213 47.604)"

    # Get all colors
    Ashui.Theme.colors()
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-indigo-400/60 hover:shadow-[0_30px_90px_-60px_rgba(99,102,241,0.45)]">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-slate-50">Spacing Tokens</h2>
            <p class="text-sm text-slate-300">
              Modular scale spacing mapped to responsive rhythm.
            </p>
          </div>

          <div class="mt-8 space-y-3">
            <%= for {name, value} <- @spacing do %>
              <div class="flex items-center gap-4 rounded-2xl border border-white/10 bg-slate-950/60 px-4 py-4 transition-all duration-300 hover:-translate-y-1 hover:border-indigo-300/60">
                <div class="w-20 text-sm font-medium uppercase tracking-[0.2em] text-slate-300">
                  {name}
                </div>
                <div class="relative flex-1 overflow-hidden rounded-full border border-white/10 bg-slate-900/80">
                  <div
                    class="h-2 bg-gradient-to-r from-cyan-400 via-indigo-500 to-purple-500"
                    style={"width: clamp(#{value}, 20%, 100%);"}
                  >
                  </div>
                </div>
                <div class="w-24 text-right text-xs font-mono text-slate-400">{value}</div>
              </div>
            <% end %>
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-cyan-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    # Get a spacing token
    Ashui.Theme.spacing(:md)
    # =&gt; "1rem"

    # Get all spacing tokens
    Ashui.Theme.spacing_tokens()
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-purple-400/60 hover:shadow-[0_30px_90px_-60px_rgba(168,85,247,0.45)]">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-slate-50">Font Tokens</h2>
            <p class="text-sm text-slate-300">
              Typography stacks that deliver clarity across platforms.
            </p>
          </div>

          <div class="mt-8 space-y-4">
            <%= for {name, families} <- @fonts do %>
              <div class="rounded-2xl border border-white/10 bg-slate-950/60 p-4 transition-all duration-300 hover:-translate-y-1 hover:border-purple-300/60">
                <div class="text-xs font-semibold uppercase tracking-[0.3em] text-slate-300">
                  {name}
                </div>
                <div
                  class="mt-3 text-lg text-slate-100"
                  style={"font-family: #{Enum.join(families, ", ")}"}
                >
                  The quick brown fox jumps over the lazy dog
                </div>
                <div class="mt-3 flex flex-wrap items-center gap-2 text-xs font-mono text-slate-400">
                  <span class="rounded-full border border-white/10 bg-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.3em] text-slate-300">
                    Stack
                  </span>
                  {Enum.join(families, ", ")}
                </div>
              </div>
            <% end %>
          </div>

          <div class="mt-8 rounded-2xl border border-white/5 bg-slate-950/80 p-4">
            <pre class="overflow-x-auto text-sm leading-6 text-cyan-100">
    <code phx-no-curly-interpolation class="block whitespace-pre">
    # Get a font token
    Ashui.Theme.font(:sans)
    # =&gt; ["ui-sans-serif", "system-ui", "sans-serif"]

    # Get all fonts
    Ashui.Theme.fonts()
    </code>
            </pre>
          </div>
        </section>

        <section class="rounded-2xl border border-white/10 bg-slate-900/70 p-8 backdrop-blur-sm">
          <div class="flex flex-col gap-2">
            <h2 class="text-2xl font-semibold text-slate-50">Theme Functions</h2>
            <p class="text-sm text-slate-300">
              Leverage helper functions to access tokens inside LiveViews, components, and modules.
            </p>
          </div>

          <div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
            <table class="min-w-full divide-y divide-white/10 text-sm">
              <thead class="bg-slate-950/60 text-xs uppercase tracking-[0.2em] text-slate-300">
                <tr>
                  <th class="px-6 py-4 text-left">Function</th>
                  <th class="px-6 py-4 text-left">Description</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-white/5 bg-slate-950/30 text-slate-200">
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">Ashui.Theme.color/1</td>
                  <td class="px-6 py-4">Get a color token value</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">Ashui.Theme.spacing/1</td>
                  <td class="px-6 py-4">Get a spacing token value</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">Ashui.Theme.font/1</td>
                  <td class="px-6 py-4">Get a font token value</td>
                </tr>
                <tr>
                  <td class="px-6 py-4 font-medium text-slate-50">Ashui.Theme.current_theme/1</td>
                  <td class="px-6 py-4">Get current theme from assigns</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_diff_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Diff</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Diff component for side-by-side comparison of two items (text, code, etc.).
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Text Diff</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Diff.diff
              left="Old content that needs to be changed"
              right="New content that replaces the old"
              left_label="Before"
              right_label="After"
            />
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.diff left="Old content" right="New content" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Code Diff</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Diff.diff
              left="function old() {\n  return 'old';\n}"
              right="function new() {\n  return 'new';\n}"
              type={:code}
            />
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    left
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    string
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Left side content
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    right
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    string
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Right side content
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    type
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    atom
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    :text
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Content type (:text or :code)
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_kbd_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Kbd</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Keyboard shortcut display component for showing keyboard combinations.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Basic Usage</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <p class="text-gray-700 dark:text-gray-300 mb-4">
              Press
              <Ashui.Components.Kbd.kbd>Ctrl</Ashui.Components.Kbd.kbd>
              +
              <Ashui.Components.Kbd.kbd>S</Ashui.Components.Kbd.kbd>
              to save
            </p>

            <p class="text-gray-700 dark:text-gray-300 mb-4">
              Press
              <Ashui.Components.Kbd.kbd>Esc</Ashui.Components.Kbd.kbd>
              to close
            </p>

            <p class="text-gray-700 dark:text-gray-300">
              Press
              <Ashui.Components.Kbd.kbd>Cmd</Ashui.Components.Kbd.kbd>
              +
              <Ashui.Components.Kbd.kbd>K</Ashui.Components.Kbd.kbd>
              to search
            </p>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              Press &lt;.kbd&gt;Ctrl&lt;/.kbd&gt; + &lt;.kbd&gt;S&lt;/.kbd&gt; to save
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Different Sizes
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm space-y-4">
            <div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Small</p>

              <Ashui.Components.Kbd.kbd size={:sm}>Esc</Ashui.Components.Kbd.kbd>
            </div>

            <div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Medium</p>

              <Ashui.Components.Kbd.kbd size={:md}>Ctrl</Ashui.Components.Kbd.kbd>
            </div>

            <div>
              <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Large</p>

              <Ashui.Components.Kbd.kbd size={:lg}>Enter</Ashui.Components.Kbd.kbd>
            </div>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    size
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    atom
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    :md
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Key size (:sm, :md, :lg)
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_link_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Link</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Styled link component with support for external links and LiveView `navigate`/`patch`.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Variants</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm space-y-4">
            <Ashui.Components.Link.link href="#" variant={:default}>
              Default link
            </Ashui.Components.Link.link>
            <Ashui.Components.Link.link href="#" variant={:primary}>
              Primary link
            </Ashui.Components.Link.link>
            <Ashui.Components.Link.link href="#" variant={:secondary}>
              Secondary link
            </Ashui.Components.Link.link>
            <Ashui.Components.Link.link href="#" variant={:underline}>
              Underline link
            </Ashui.Components.Link.link>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
    &lt;.link href="#"&gt;Default link&lt;/.link&gt;
    &lt;.link href="#" variant={:primary}&gt;Primary&lt;/.link&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            LiveView Navigation
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm space-y-3">
            <Ashui.Components.Link.link navigate={~p"/docs/getting-started"} class="font-semibold">
              Getting started
            </Ashui.Components.Link.link>
            <Ashui.Components.Link.link patch={~p"/docs?section=components"} variant={:secondary}>
              Stay on page (patch)
            </Ashui.Components.Link.link>
            <Ashui.Components.Link.link href="https://ashui.dev" external={true} variant={:primary}>
              External link
            </Ashui.Components.Link.link>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
    &lt;.link navigate={~p"/dashboard"}&gt;Dashboard&lt;/.link&gt;
    &lt;.link patch={~p"/docs?section=components"}&gt;Components&lt;/.link&gt;
    &lt;.link href="https://ashui.dev" external={true}&gt;AshUI&lt;/.link&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_hero_docs(assigns) do
    ~H"""
    <div class="text-gray-900">
      <h1 class="text-4xl font-bold mb-4 text-gray-900">Hero</h1>

      <div class="mb-8">
        <p class="text-gray-700 text-lg">
          Flexible hero banner with title, subtitle, CTA, and optional background image.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Product Launch Hero</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Hero.hero
              title="Ship Better Products"
              subtitle="Plan, collaborate, and deliver features with confidence."
              cta="Get Started"
              cta_href="#"
              background="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1400&q=80"
              class="rounded-2xl overflow-hidden"
            />
          </div>

          <div class="bg-gray-100 p-4 rounded-lg overflow-x-auto border border-gray-200">
            <pre class="text-gray-800"><code phx-no-curly-interpolation>
    &lt;.hero
      title="Ship Better Products"
      subtitle="Plan, collaborate, and deliver features."
      cta="Get Started"
      cta_href={~p"/signup"}
      background="https://example.com/hero.jpg"
    /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900">Custom Content</h2>

          <div class="bg-white p-6 rounded-lg border border-gray-200 mb-4 shadow-sm">
            <Ashui.Components.Hero.hero
              title="Developer Summit 2025"
              subtitle="Join thousands of engineers for three days of talks, workshops, and networking."
              centered={false}
            >
              <div class="flex flex-wrap gap-3">
                <Ashui.Components.Link.link href="#" variant={:primary}>
                  Reserve Seat
                </Ashui.Components.Link.link>
                <Ashui.Components.Link.link href="#" variant={:secondary}>
                  Explore Agenda
                </Ashui.Components.Link.link>
              </div>
            </Ashui.Components.Hero.hero>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_swap_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Swap</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Toggle between two states using animated swap transitions.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Mode Toggle</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm flex items-center gap-6">
            <Ashui.Components.Swap.swap
              id="swap-theme"
              active={true}
              class="text-blue-600 text-sm font-semibold"
            >
              <:on>
                <span class="flex items-center gap-2">
                  <.icon name="hero-moon" class="w-4 h-4" /> Dark Mode
                </span>
              </:on>
              <:off>
                <span class="flex items-center gap-2">
                  <.icon name="hero-sun" class="w-4 h-4" /> Light Mode
                </span>
              </:off>
            </Ashui.Components.Swap.swap>

            <Ashui.Components.Swap.swap id="swap-sound" active={false}>
              <:on>
                <span class="px-3 py-1 rounded-full bg-green-100 text-green-700 text-xs font-semibold">
                  Sound On
                </span>
              </:on>
              <:off>
                <span class="px-3 py-1 rounded-full bg-gray-200 text-gray-600 text-xs font-semibold">
                  Sound Off
                </span>
              </:off>
            </Ashui.Components.Swap.swap>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
    &lt;.swap id="theme-swap" active={@dark_mode}&gt;
      &lt;:on&gt;Dark&lt;/:on&gt;
      &lt;:off&gt;Light&lt;/:off&gt;
    &lt;/.swap&gt;
            </code></pre>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_dock_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Dock</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Dock / Bottom Navigation component for mobile-style bottom navigation bars.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Basic Dock</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Dock.dock id="docs-dock">
              <:item icon="hero-home" label="Home" active={true} />
              <:item icon="hero-user" label="Profile" />
              <:item icon="hero-bell" label="Notifications" />
              <:item icon="hero-cog-6-tooth" label="Settings" />
            </Ashui.Components.Dock.dock>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.dock id="main-dock"&gt;
                &lt;:item icon="hero-home" label="Home" active={true} /&gt;
                &lt;:item icon="hero-user" label="Profile" /&gt;
              &lt;/.dock&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    icon
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    string
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Icon name for dock item
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    active
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    boolean
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    false
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">Active state</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_drawer_docs(assigns) do
    drawer_open = Map.get(assigns, :drawer_docs_open, false)

    assigns = assign(assigns, :drawer_open, drawer_open)

    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Drawer</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Drawer sidebar component for off-canvas navigation.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Left Drawer</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Drawer.drawer id="drawer-docs" open={@drawer_open} side={:left}>
              <:trigger>
                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                  Open Drawer
                </button>
              </:trigger>

              <:content>
                <nav class="space-y-2">
                  <a
                    href="#"
                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
                  >
                    Home
                  </a>
                  <a
                    href="#"
                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
                  >
                    About
                  </a>
                  <a
                    href="#"
                    class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"
                  >
                    Contact
                  </a>
                </nav>
              </:content>
            </Ashui.Components.Drawer.drawer>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.drawer id="nav-drawer" open={@drawer_open}&gt;
                &lt;:trigger&gt;Open Menu&lt;/:trigger&gt;
                &lt;:content&gt;
                  &lt;nav&gt;Navigation items&lt;/nav&gt;
                &lt;/.drawer&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    side
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    atom
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    :left
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Drawer side (:left or :right)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    overlay
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    boolean
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    true
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Show overlay backdrop
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_mockup_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Mockup</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Mockup component for displaying phone, browser, or window mockups.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Phone Mockup</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Mockup.mockup type={:phone}>
              <div class="p-4 bg-gray-100 dark:bg-gray-800 h-64 flex items-center justify-center">
                <p class="text-gray-600 dark:text-gray-400">Phone Content</p>
              </div>
            </Ashui.Components.Mockup.mockup>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.mockup type={:phone}&gt;
                &lt;img src="/screenshot.png" /&gt;
              &lt;/.mockup&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Browser Mockup</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Mockup.mockup type={:browser} url="example.com">
              <div class="p-4">
                <h2 class="text-xl font-bold mb-2">Browser Content</h2>

                <p class="text-gray-600 dark:text-gray-400">This is a browser mockup</p>
              </div>
            </Ashui.Components.Mockup.mockup>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Window Mockup</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Mockup.mockup type={:window} title="Application Window">
              <div class="p-4">
                <p class="text-gray-600 dark:text-gray-400">Window content here</p>
              </div>
            </Ashui.Components.Mockup.mockup>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    type
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    atom
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Mockup type (:phone, :browser, :window)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    url
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    string
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    nil
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    URL for browser mockup
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_timeline_docs(assigns) do
    sample_items = [
      %{
        title: "Project Started",
        date: DateTime.add(DateTime.utc_now(), -30, :day),
        description: "Initial project setup and planning"
      },
      %{
        title: "First Release",
        date: DateTime.add(DateTime.utc_now(), -15, :day),
        description: "Version 1.0 released to production"
      },
      %{
        title: "Major Update",
        date: DateTime.add(DateTime.utc_now(), -7, :day),
        description: "Added new features and improvements"
      },
      %{title: "Current", date: DateTime.utc_now(), description: "Working on next version"}
    ]

    nested_items = [
      %{
        title: "Project Started",
        date: DateTime.add(DateTime.utc_now(), -30, :day),
        description: "Initial project setup",
        children: [
          %{
            title: "Repository Created",
            date: DateTime.add(DateTime.utc_now(), -30, :day),
            description: "GitHub repo initialized"
          },
          %{
            title: "Team Onboarded",
            date: DateTime.add(DateTime.utc_now(), -28, :day),
            description: "Team members added"
          }
        ]
      },
      %{
        title: "First Release",
        date: DateTime.add(DateTime.utc_now(), -15, :day),
        description: "Version 1.0 launched"
      },
      %{
        title: "Major Update",
        date: DateTime.add(DateTime.utc_now(), -7, :day),
        description: "Added new features",
        children: [
          %{
            title: "Feature A",
            date: DateTime.add(DateTime.utc_now(), -7, :day),
            description: "Implemented"
          },
          %{
            title: "Feature B",
            date: DateTime.add(DateTime.utc_now(), -5, :day),
            description: "Implemented"
          }
        ]
      }
    ]

    assigns =
      assigns
      |> assign(:sample_items, sample_items)
      |> assign(:nested_items, nested_items)

    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Timeline</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Timeline component for displaying chronological events or activities with support for nested/collapsible events.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Basic Timeline</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Timeline.timeline
              id="timeline-basic"
              items={@sample_items}
              variant={:vertical}
            />
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.timeline id="events-timeline" items={@events} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Nested Events with Collapsible
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.Timeline.timeline
              id="timeline-nested"
              items={@nested_items}
              collapsible={true}
            />
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.timeline
                id="nested-timeline"
                items={@events}
                collapsible={true}
                default_expanded={true}
              /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Horizontal Timeline
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm overflow-x-auto">
            <Ashui.Components.Timeline.timeline
              id="timeline-horizontal"
              items={Enum.take(@sample_items, 3)}
              variant={:horizontal}
            />
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_lightbox_docs(assigns) do
    sample_images = [
      %{src: "/images/placeholder-1.jpg", alt: "Image 1"},
      %{src: "/images/placeholder-2.jpg", alt: "Image 2"},
      %{src: "/images/placeholder-3.jpg", alt: "Image 3"}
    ]

    lightbox_id = "docs-lightbox"
    lightbox_show = Map.get(assigns, :"#{lightbox_id}_show", false)
    lightbox_current_index = Map.get(assigns, :"#{lightbox_id}_current_index", 0)

    assigns =
      assigns
      |> assign(:sample_images, sample_images)
      |> assign(:lightbox_id, lightbox_id)
      |> assign(:lightbox_show, lightbox_show)
      |> assign(:lightbox_current_index, lightbox_current_index)
      |> assign(:"#{lightbox_id}_images", sample_images)

    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Lightbox</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Lightbox / Image Viewer component for full-screen image previews with navigation.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Basic Lightbox</h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <div class="grid grid-cols-3 gap-4">
              <%= for {image, index} <- Enum.with_index(@sample_images) do %>
                <button
                  type="button"
                  phx-click="open-lightbox"
                  phx-value-id={@lightbox_id}
                  phx-value-index={index}
                  class="cursor-pointer"
                >
                  <img
                    src={image.src}
                    alt={image.alt}
                    class="w-full h-32 object-cover rounded-lg hover:opacity-80 transition-opacity"
                  />
                </button>
              <% end %>
            </div>

            <Ashui.Components.Lightbox.lightbox
              id={@lightbox_id}
              images={@sample_images}
              current_index={@lightbox_current_index}
              show={@lightbox_show}
            />
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.lightbox id="gallery-lightbox" images={@images} current_index={0} show={@show_lightbox} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    images
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    list
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    List of image URLs or maps with :src and optional :alt
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    current_index
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    integer
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    0
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Currently displayed image index
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_video_player_docs(assigns) do
    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Video Player</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Video Player component with custom controls for embedded videos.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Basic Video Player
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.VideoPlayer.video_player
              src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
              poster="https://via.placeholder.com/800x450"
              controls={true}
            />
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.video_player src="/videos/example.mp4" poster="/images/poster.jpg" /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    src
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    string
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">Video source URL</td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    autoplay
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    boolean
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    false
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">Autoplay video</td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_animated_chart_docs(assigns) do
    sample_data = [10, 25, 30, 45, 50, 35, 40]
    sample_labels = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

    assigns =
      assigns
      |> assign(:sample_data, sample_data)
      |> assign(:sample_labels, sample_labels)

    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Animated Chart</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Animated Chart component with smooth transitions when data changes.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Animated Line Chart
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.AnimatedChart.animated_chart
              type={:line}
              data={@sample_data}
              labels={@sample_labels}
              width={600}
              height={300}
            />
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.animated_chart type={:line} data={@chart_data} labels={@labels} /&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Animated Bar Chart
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.AnimatedChart.animated_chart
              type={:bar}
              data={@sample_data}
              labels={@sample_labels}
              width={600}
              height={300}
            />
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    type
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    atom
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    -
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Chart type (:line, :bar, :area)
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    duration
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    integer
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    1000
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Animation duration in milliseconds
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_masonry_grid_docs(assigns) do
    sample_items = [
      %{id: 1, title: "Item 1", height: "h-48"},
      %{id: 2, title: "Item 2", height: "h-64"},
      %{id: 3, title: "Item 3", height: "h-32"},
      %{id: 4, title: "Item 4", height: "h-56"},
      %{id: 5, title: "Item 5", height: "h-40"},
      %{id: 6, title: "Item 6", height: "h-72"}
    ]

    assigns = assign(assigns, :sample_items, sample_items)

    ~H"""
    <div class="text-gray-900 dark:text-gray-100">
      <h1 class="text-4xl font-bold mb-4 text-gray-900 dark:text-gray-100">Masonry Grid</h1>

      <div class="mb-8">
        <p class="text-gray-700 dark:text-gray-300 text-lg">
          Masonry Grid / Pinterest Layout component for dynamic card layouts.
        </p>
      </div>

      <div class="space-y-8">
        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">
            Basic Masonry Grid
          </h2>

          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg border border-gray-200 dark:border-gray-700 mb-4 shadow-sm">
            <Ashui.Components.MasonryGrid.masonry_grid items={@sample_items} columns={3} gap={4}>
              <:item :let={item}>
                <div class={"bg-blue-100 dark:bg-blue-900 p-4 rounded-lg #{item.height} flex items-center justify-center"}>
                  <span class="text-gray-700 dark:text-gray-300 font-semibold">{item.title}</span>
                </div>
              </:item>
            </Ashui.Components.MasonryGrid.masonry_grid>
          </div>

          <div class="bg-gray-100 dark:bg-gray-900 p-4 rounded-lg overflow-x-auto border border-gray-200 dark:border-gray-700">
            <pre class="text-gray-800 dark:text-gray-200"><code phx-no-curly-interpolation>
              &lt;.masonry_grid items={@items} columns={3} gap={4}&gt;
                &lt;:item :let={item}&gt;
                  &lt;div&gt;{item.content}&lt;/div&gt;
                &lt;/:item&gt;
              &lt;/.masonry_grid&gt;
            </code></pre>
          </div>
        </section>

        <section>
          <h2 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Props</h2>

          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700">
              <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Prop
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Type
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Default
                  </th>

                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-700 dark:text-gray-300 uppercase">
                    Description
                  </th>
                </tr>
              </thead>

              <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    columns
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    integer
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    3
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Number of columns
                  </td>
                </tr>

                <tr>
                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">
                    gap
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    integer
                  </td>

                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 dark:text-gray-300">
                    4
                  </td>

                  <td class="px-6 py-4 text-sm text-gray-700 dark:text-gray-300">
                    Gap between items (Tailwind spacing unit)
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>
      </div>
    </div>
    """
  end

  defp render_coming_soon(assigns) do
    ~H"""
    <div>
      <h1 class="text-4xl font-bold mb-4">Coming Soon</h1>

      <p class="text-xl text-gray-600 mb-8">
        This component documentation is being built. Check back soon!
      </p>
    </div>
    """
  end
end