<%# Variant 1: Users table with filters and active filter chips %>
<section class="bg-background py-8 lg:py-12">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <%# Page Header %>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-foreground text-2xl font-bold tracking-tight">Users</h1>
        <p class="text-muted-foreground mt-1 text-sm">Manage your team members and their account permissions.</p>
      </div>
      <div class="flex gap-2">
        <%= ui.btn variant: :secondary do %>
          <%= ui.icon "arrow-down-tray", size: 5 %>
          Export
        <% end %>
        <%= ui.btn do %>
          <%= ui.icon "plus", size: 5 %>
          Add user
        <% end %>
      </div>
    </div>

    <%# Filters Row %>
    <div class="mt-6">
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-4" do %>
          <%= form_with url: root_path, method: :get, class: "!flex-row !flex-wrap !items-end !gap-3" do |f| %>
            <div class="w-full sm:w-auto sm:flex-1 sm:min-w-[200px]">
              <%= f.search_field :query, label: false, placeholder: "Search by name or email..." %>
            </div>
            <%= f.select :role, options_for_select(["Admin", "Editor", "Viewer", "Developer"]), { include_blank: "All roles" }, { label: false } %>
            <%= f.select :status, options_for_select(["Active", "Inactive", "Pending", "Suspended"]), { include_blank: "All statuses" }, { label: false } %>
            <%= f.select :department, options_for_select(["Engineering", "Design", "Marketing", "Sales", "Support"]), { include_blank: "All departments" }, { label: false } %>
            <%= f.select :age_range, options_for_select(["18-25", "26-35", "36-45", "46-55", "55+"]), { include_blank: "All ages" }, { label: false } %>
            <%= ui.btn "Filter", variant: :secondary %>
          <% end %>

          <%# Active Filters Chips %>
          <div class="flex flex-wrap items-center gap-2">
            <span class="text-muted-foreground text-sm font-medium">Active Filters:</span>
            <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
              Role: Admin
              <button type="button" class="hover:text-primary/70 transition">
                <%= ui.icon "x-mark", size: 3 %>
              </button>
            </span>
            <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
              Status: Active
              <button type="button" class="hover:text-primary/70 transition">
                <%= ui.icon "x-mark", size: 3 %>
              </button>
            </span>
            <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
              Age: 18 – 40
              <button type="button" class="hover:text-primary/70 transition">
                <%= ui.icon "x-mark", size: 3 %>
              </button>
            </span>
            <%= ui.btn "Clear all", variant: :link, size: :xs %>
          </div>
        <% end %>
      <% end %>
    </div>

    <%# Table %>
    <div class="mt-6">
      <%= ui.card class: "overflow-clip" do %>
        <%= ui.table size: :sm, hovered: true do %>
          <%= ui.table_thead do %>
            <%= ui.table_tr do %>
              <%= ui.table_th do %>
                <label class="flex items-center">
                  <input type="checkbox" class="form__checkbox" />
                </label>
              <% end %>
              <%= ui.table_th "Name" %>
              <%= ui.table_th "Email" %>
              <%= ui.table_th "Role" %>
              <%= ui.table_th "Department" %>
              <%= ui.table_th "Status" %>
              <%= ui.table_th "Joined" %>
              <%= ui.table_th "" %>
            <% end %>
          <% end %>
          <%= ui.table_tbody do %>
            <% [
              { name: "Sarah Johnson", email: "sarah@example.com", role: "Admin", dept: "Engineering", status: "Active", status_v: :success, joined: "Jan 12, 2024" },
              { name: "Michael Chen", email: "michael@example.com", role: "Developer", dept: "Engineering", status: "Active", status_v: :success, joined: "Mar 5, 2024" },
              { name: "Emily Rodriguez", email: "emily@example.com", role: "Editor", dept: "Marketing", status: "Active", status_v: :success, joined: "Feb 20, 2024" },
              { name: "James Wilson", email: "james@example.com", role: "Viewer", dept: "Sales", status: "Pending", status_v: :warning, joined: "Apr 1, 2024" },
              { name: "Lisa Anderson", email: "lisa@example.com", role: "Developer", dept: "Engineering", status: "Active", status_v: :success, joined: "Dec 8, 2023" },
              { name: "David Kim", email: "david@example.com", role: "Admin", dept: "Design", status: "Inactive", status_v: :error, joined: "Nov 15, 2023" },
              { name: "Anna Murphy", email: "anna@example.com", role: "Editor", dept: "Support", status: "Active", status_v: :success, joined: "May 22, 2024" },
              { name: "Robert Taylor", email: "robert@example.com", role: "Viewer", dept: "Marketing", status: "Suspended", status_v: :error, joined: "Jun 3, 2024" },
            ].each do |user| %>
              <%= ui.table_tr do %>
                <%= ui.table_td do %>
                  <label class="flex items-center">
                    <input type="checkbox" class="form__checkbox" />
                  </label>
                <% end %>
                <%= ui.table_td do %>
                  <div class="flex items-center gap-3">
                    <div class="flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
                      <%= user[:name].split.map { |w| w[0] }.join %>
                    </div>
                    <span class="font-medium text-foreground"><%= user[:name] %></span>
                  </div>
                <% end %>
                <%= ui.table_td user[:email] %>
                <%= ui.table_td do %>
                  <%= ui.badge user[:role], size: :xs %>
                <% end %>
                <%= ui.table_td user[:dept] %>
                <%= ui.table_td do %>
                  <%= ui.badge user[:status], size: :xs, variant: user[:status_v] %>
                <% end %>
                <%= ui.table_td user[:joined] %>
                <%= ui.table_td actions: true do %>
                  <%= ui.dropdown do %>
                    <%= ui.dropdown_trigger ui.icon("ellipsis-vertical"), as: :btn, variant: :ghost, size: :icon_sm %>
                    <%= ui.dropdown_menu do %>
                      <%= ui.dropdown_link "Edit", url: "#" %>
                      <%= ui.dropdown_link "Deactivate", url: "#" %>
                      <%= ui.dropdown_divider %>
                      <%= ui.dropdown_link "Delete", url: "#", class: "text-destructive" %>
                    <% end %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>

        <%# Pagination footer %>
        <div class="border-t border-border px-6 py-4">
          <%= ui.pagy(pagy: Pagy.new(count: 248, page: 1, limit: 8)) %>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 2: Dashboard page with stats + table — orders overview %>
<section class="bg-background py-8 lg:py-12">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <%# Page Header %>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-foreground text-2xl font-bold tracking-tight">Orders</h1>
        <p class="text-muted-foreground mt-1 text-sm">Track and manage all customer orders.</p>
      </div>
      <%= ui.tabs variant: :pill do %>
        <%= ui.tabs_item "All", href: "#", active: true %>
        <%= ui.tabs_item "Pending", href: "#" %>
        <%= ui.tabs_item "Completed", href: "#" %>
        <%= ui.tabs_item "Cancelled", href: "#" %>
      <% end %>
    </div>

    <%# Stats Row %>
    <div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <%= ui.stat do %>
        <%= ui.stat_label "Total Orders" %>
        <%= ui.stat_value "3,456" %>
        <%= ui.stat_description "+12.5% from last month", variant: :success %>
      <% end %>
      <%= ui.stat do %>
        <%= ui.stat_label "Revenue" %>
        <%= ui.stat_value "$128,430" %>
        <%= ui.stat_description "+8.2% from last month", variant: :success %>
      <% end %>
      <%= ui.stat do %>
        <%= ui.stat_label "Avg. Order Value" %>
        <%= ui.stat_value "$37.15" %>
        <%= ui.stat_description "-2.1% from last month", variant: :error %>
      <% end %>
      <%= ui.stat do %>
        <%= ui.stat_label "Pending Fulfillment" %>
        <%= ui.stat_value "23" %>
        <%= ui.stat_description "5 urgent", variant: :warning %>
      <% end %>
    </div>

    <%# Filters + Search %>
    <div class="mt-6">
      <%= form_with url: root_path, method: :get, class: "!flex-row !flex-wrap !items-end !gap-3" do |f| %>
        <div class="w-full sm:w-auto sm:flex-1 sm:min-w-[200px]">
          <%= f.search_field :query, label: false, placeholder: "Search orders..." %>
        </div>
        <%= f.select :date_range, options_for_select(["Last 7 days", "Last 30 days", "Last 90 days", "This year", "All time"]), { include_blank: false }, { label: false } %>
        <%= ui.btn variant: :secondary do %>
          <%= ui.icon "funnel", size: 5 %>
          More filters
        <% end %>
      <% end %>
    </div>

    <%# Active Filters %>
    <div class="mt-3 flex flex-wrap items-center gap-2">
      <span class="text-muted-foreground text-sm font-medium">Active Filters:</span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
        Date: Last 30 days
        <button type="button" class="hover:text-primary/70 transition"><%= ui.icon "x-mark", size: 3 %></button>
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
        Status: Pending
        <button type="button" class="hover:text-primary/70 transition"><%= ui.icon "x-mark", size: 3 %></button>
      </span>
    </div>

    <%# Orders Table %>
    <div class="mt-6">
      <%= ui.card class: "overflow-clip" do %>
        <%= ui.table size: :sm, hovered: true do %>
          <%= ui.table_thead do %>
            <%= ui.table_tr do %>
              <%= ui.table_th "Order" %>
              <%= ui.table_th "Customer" %>
              <%= ui.table_th "Items" %>
              <%= ui.table_th "Total" %>
              <%= ui.table_th "Status" %>
              <%= ui.table_th "Date" %>
              <%= ui.table_th "" %>
            <% end %>
          <% end %>
          <%= ui.table_tbody do %>
            <% [
              { id: "#ORD-7291", customer: "Sarah Johnson", items: 3, total: "$124.00", status: "Completed", status_v: :success, date: "Mar 28, 2024" },
              { id: "#ORD-7290", customer: "Michael Chen", items: 1, total: "$59.99", status: "Pending", status_v: :warning, date: "Mar 28, 2024" },
              { id: "#ORD-7289", customer: "Emily Rodriguez", items: 5, total: "$287.50", status: "Completed", status_v: :success, date: "Mar 27, 2024" },
              { id: "#ORD-7288", customer: "James Wilson", items: 2, total: "$89.00", status: "Processing", status_v: :info, date: "Mar 27, 2024" },
              { id: "#ORD-7287", customer: "Lisa Anderson", items: 1, total: "$34.99", status: "Cancelled", status_v: :error, date: "Mar 26, 2024" },
              { id: "#ORD-7286", customer: "David Kim", items: 4, total: "$199.00", status: "Completed", status_v: :success, date: "Mar 26, 2024" },
            ].each do |order| %>
              <%= ui.table_tr do %>
                <%= ui.table_td do %>
                  <span class="font-medium text-foreground"><%= order[:id] %></span>
                <% end %>
                <%= ui.table_td order[:customer] %>
                <%= ui.table_td do %>
                  <span class="text-muted-foreground"><%= order[:items] %> item<%= order[:items] > 1 ? "s" : "" %></span>
                <% end %>
                <%= ui.table_td do %>
                  <span class="font-medium text-foreground"><%= order[:total] %></span>
                <% end %>
                <%= ui.table_td do %>
                  <%= ui.badge order[:status], size: :xs, variant: order[:status_v] %>
                <% end %>
                <%= ui.table_td order[:date] %>
                <%= ui.table_td actions: true do %>
                  <%= ui.btn "View", variant: :ghost, size: :xs %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>

        <div class="border-t border-border px-6 py-4">
          <%= ui.pagy(pagy: Pagy.new(count: 3456, page: 1, limit: 6)) %>
        </div>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 3: Sidebar filters + content area — products catalog %>
<section class="bg-background py-8 lg:py-12">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <%# Page Header %>
    <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h1 class="text-foreground text-2xl font-bold tracking-tight">Products</h1>
        <p class="text-muted-foreground mt-1 text-sm">Browse and manage your product catalog.</p>
      </div>
      <div class="flex gap-2">
        <%= ui.btn variant: :secondary do %>
          <%= ui.icon "arrow-up-tray", size: 5 %>
          Import
        <% end %>
        <%= ui.btn do %>
          <%= ui.icon "plus", size: 5 %>
          Add product
        <% end %>
      </div>
    </div>

    <%# Active Filters %>
    <div class="mt-4 flex flex-wrap items-center gap-2">
      <span class="text-muted-foreground text-sm font-medium">Active Filters:</span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
        Category: Electronics
        <button type="button" class="hover:text-primary/70 transition"><%= ui.icon "x-mark", size: 3 %></button>
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
        Price: $50 – $500
        <button type="button" class="hover:text-primary/70 transition"><%= ui.icon "x-mark", size: 3 %></button>
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
        In Stock
        <button type="button" class="hover:text-primary/70 transition"><%= ui.icon "x-mark", size: 3 %></button>
      </span>
      <%= ui.btn "Clear all", variant: :link, size: :xs %>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-8 lg:grid-cols-4">
      <%# Sidebar Filters %>
      <div class="lg:col-span-1">
        <%= ui.card class: "overflow-clip" do %>
          <%= ui.card_header do %>
            <%= ui.card_title do %>
              <%= ui.icon "funnel", size: 5 %>
              Filters
            <% end %>
          <% end %>
          <%= ui.card_body class: "flex flex-col gap-6" do %>
            <%= form_with url: root_path, method: :get, class: "flex flex-col gap-6" do |f| %>
              <%= f.search_field :query, label: false, placeholder: "Search products..." %>

              <div>
                <p class="text-foreground mb-3 text-sm font-medium">Category</p>
                <%= f.group class: "form__checkbox_collection" do %>
                  <%= f.check_box :electronics, label: "Electronics" %>
                  <%= f.check_box :clothing, label: "Clothing" %>
                  <%= f.check_box :home_garden, label: "Home & Garden" %>
                  <%= f.check_box :books, label: "Books" %>
                  <%= f.check_box :sports, label: "Sports & Outdoors" %>
                <% end %>
              </div>

              <div>
                <p class="text-foreground mb-3 text-sm font-medium">Price Range</p>
                <div class="grid grid-cols-2 gap-2">
                  <%= f.number_field :price_min, label: false, placeholder: "Min" %>
                  <%= f.number_field :price_max, label: false, placeholder: "Max" %>
                </div>
              </div>

              <div>
                <p class="text-foreground mb-3 text-sm font-medium">Status</p>
                <%= f.group class: "form__checkbox_collection" do %>
                  <%= f.check_box :in_stock, label: "In Stock" %>
                  <%= f.check_box :on_sale, label: "On Sale" %>
                  <%= f.check_box :featured, label: "Featured" %>
                <% end %>
              </div>

              <div>
                <%= f.select :sort_by, options_for_select(["Newest first", "Price: Low to High", "Price: High to Low", "Best selling", "Name A-Z"]), { include_blank: false }, { label: "Sort by" } %>
              </div>

              <%= ui.btn "Apply filters", block: true %>
            <% end %>
          <% end %>
        <% end %>
      </div>

      <%# Product table %>
      <div class="lg:col-span-3">
        <div class="mb-4 flex items-center justify-between">
          <p class="text-muted-foreground text-sm"><strong class="text-foreground">156</strong> products found</p>
          <div class="flex gap-1">
            <%= ui.btn ui.icon("list-bullet"), variant: :default, size: :icon_sm %>
            <%= ui.btn ui.icon("squares-2x2"), variant: :secondary, size: :icon_sm %>
          </div>
        </div>

        <%= ui.card do %>
          <%= ui.table size: :sm, hovered: true do %>
            <%= ui.table_thead do %>
              <%= ui.table_tr do %>
                <%= ui.table_th "Product" %>
                <%= ui.table_th "SKU" %>
                <%= ui.table_th "Price" %>
                <%= ui.table_th "Stock" %>
                <%= ui.table_th "Status" %>
                <%= ui.table_th "" %>
              <% end %>
            <% end %>
            <%= ui.table_tbody do %>
              <% [
                { name: "Wireless Headphones Pro", sku: "WHP-001", price: "$199.99", stock: 45, status: "Active", status_v: :success },
                { name: "USB-C Hub 7-in-1", sku: "UCH-042", price: "$49.99", stock: 128, status: "Active", status_v: :success },
                { name: "Mechanical Keyboard", sku: "MKB-015", price: "$149.00", stock: 0, status: "Out of stock", status_v: :error },
                { name: "Portable Monitor 15\"", sku: "PM-108", price: "$329.99", stock: 12, status: "Low stock", status_v: :warning },
                { name: "Webcam 4K Ultra", sku: "WC-067", price: "$89.99", stock: 67, status: "Active", status_v: :success },
                { name: "Smart Desk Lamp", sku: "SDL-023", price: "$75.00", stock: 34, status: "Active", status_v: :success },
                { name: "Noise Canceling Earbuds", sku: "NCE-091", price: "$129.99", stock: 8, status: "Low stock", status_v: :warning },
              ].each do |product| %>
                <%= ui.table_tr do %>
                  <%= ui.table_td do %>
                    <div class="flex items-center gap-3">
                      <div class="flex size-10 items-center justify-center rounded-lg bg-muted">
                        <%= ui.icon "cube", size: 5, class: "text-muted-foreground" %>
                      </div>
                      <span class="font-medium text-foreground"><%= product[:name] %></span>
                    </div>
                  <% end %>
                  <%= ui.table_td do %>
                    <code class="text-xs text-muted-foreground"><%= product[:sku] %></code>
                  <% end %>
                  <%= ui.table_td do %>
                    <span class="font-medium text-foreground"><%= product[:price] %></span>
                  <% end %>
                  <%= ui.table_td do %>
                    <span class="text-muted-foreground"><%= product[:stock] %> units</span>
                  <% end %>
                  <%= ui.table_td do %>
                    <%= ui.badge product[:status], size: :xs, variant: product[:status_v] %>
                  <% end %>
                  <%= ui.table_td actions: true do %>
                    <%= ui.dropdown do %>
                      <%= ui.dropdown_trigger ui.icon("ellipsis-vertical"), as: :btn, variant: :ghost, size: :icon_sm %>
                      <%= ui.dropdown_menu do %>
                        <%= ui.dropdown_link "Edit", url: "#" %>
                        <%= ui.dropdown_link "Duplicate", url: "#" %>
                        <%= ui.dropdown_divider %>
                        <%= ui.dropdown_link "Archive", url: "#", class: "text-destructive" %>
                      <% end %>
                    <% end %>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>

          <div class="border-t border-border px-6 py-4">
            <%= ui.pagy(pagy: Pagy.new(count: 160, page: 1, limit: 10)) %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</section>

<%# Variant 4: Detail page — user profile with activity and info cards %>
<section class="bg-background py-8 lg:py-12">
  <div class="mx-auto max-w-7xl px-6 lg:px-8">
    <%# Breadcrumb %>
    <div class="mb-6 flex items-center gap-2 text-sm">
      <a href="#" class="text-muted-foreground hover:text-foreground transition">Users</a>
      <span class="text-muted-foreground">/</span>
      <span class="text-foreground font-medium">Sarah Johnson</span>
    </div>

    <%# Profile Header %>
    <%= ui.card class: "mb-6" do %>
      <%= ui.card_body class: "flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between" do %>
        <div class="flex items-center gap-4">
          <div class="flex size-16 items-center justify-center rounded-full bg-primary/10 text-lg font-semibold text-primary">
            SJ
          </div>
          <div>
            <h1 class="text-foreground text-xl font-bold">Sarah Johnson</h1>
            <p class="text-muted-foreground text-sm">sarah@example.com</p>
            <div class="mt-1 flex items-center gap-2">
              <%= ui.badge "Admin", size: :xs, variant: :info %>
              <%= ui.badge "Active", size: :xs, variant: :success %>
            </div>
          </div>
        </div>
        <div class="flex gap-2">
          <%= ui.btn variant: :secondary do %>
            <%= ui.icon "envelope", size: 5 %>
            Message
          <% end %>
          <%= ui.btn do %>
            <%= ui.icon "pencil-square", size: 5 %>
            Edit profile
          <% end %>
        </div>
      <% end %>
    <% end %>

    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
      <%# Left column — info %>
      <div class="flex flex-col gap-6">
        <%# Details card %>
        <%= ui.card class: "overflow-clip" do %>
          <%= ui.card_header do %>
            <%= ui.card_title "Details" %>
          <% end %>
          <%= ui.card_body do %>
            <dl class="flex flex-col gap-4">
              <% [
                { label: "Full Name", value: "Sarah Elizabeth Johnson" },
                { label: "Email", value: "sarah@example.com" },
                { label: "Phone", value: "+1 (555) 123-4567" },
                { label: "Department", value: "Engineering" },
                { label: "Location", value: "San Francisco, CA" },
                { label: "Joined", value: "January 12, 2024" },
              ].each do |item| %>
                <div class="flex justify-between">
                  <dt class="text-muted-foreground text-sm"><%= item[:label] %></dt>
                  <dd class="text-foreground text-sm font-medium"><%= item[:value] %></dd>
                </div>
              <% end %>
            </dl>
          <% end %>
        <% end %>

        <%# Permissions card %>
        <%= ui.card do %>
          <%= ui.card_header do %>
            <%= ui.card_title "Permissions" %>
          <% end %>
          <%= ui.card_body do %>
            <div class="flex flex-col gap-3">
              <% [
                { perm: "User management", granted: true },
                { perm: "Content editing", granted: true },
                { perm: "Billing access", granted: false },
                { perm: "API keys", granted: true },
                { perm: "Audit logs", granted: false },
              ].each do |item| %>
                <div class="flex items-center justify-between">
                  <span class="text-sm text-foreground"><%= item[:perm] %></span>
                  <% if item[:granted] %>
                    <%= ui.icon "check-circle", size: 5, class: "text-success" %>
                  <% else %>
                    <%= ui.icon "x-circle", size: 5, class: "text-muted-foreground" %>
                  <% end %>
                </div>
              <% end %>
            </div>
          <% end %>
        <% end %>
      </div>

      <%# Right column — activity %>
      <div class="lg:col-span-2 flex flex-col gap-6">
        <%# Stats %>
        <div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
          <%= ui.stat do %>
            <%= ui.stat_label "Projects" %>
            <%= ui.stat_value "12" %>
          <% end %>
          <%= ui.stat do %>
            <%= ui.stat_label "Tasks Done" %>
            <%= ui.stat_value "248" %>
          <% end %>
          <%= ui.stat do %>
            <%= ui.stat_label "Comments" %>
            <%= ui.stat_value "1,024" %>
          <% end %>
          <%= ui.stat do %>
            <%= ui.stat_label "Uptime" %>
            <%= ui.stat_value "99.8%" %>
          <% end %>
        </div>

        <%# Recent activity %>
        <%= ui.card do %>
          <%= ui.card_header(justify: :between, align: :center, direction: :row) do %>
            <%= ui.card_title "Recent Activity" %>
            <%= ui.btn "View all", variant: :ghost, size: :sm %>
          <% end %>
          <%= ui.card_body do %>
            <%= ui.timeline do %>
              <% [
                { action: "Deployed", desc: "v2.4.1 to production", time: "2 hours ago", variant: :success },
                { action: "Merged", desc: "PR #847 — Fix authentication flow", time: "5 hours ago", variant: :info },
                { action: "Commented", desc: "on Issue #312 — API rate limiting", time: "Yesterday", variant: :default },
                { action: "Created", desc: "new project — Dashboard Redesign", time: "2 days ago", variant: :info },
                { action: "Updated", desc: "team permissions for Engineering", time: "3 days ago", variant: :warning },
              ].each do |event| %>
                <%= ui.timeline_item do %>
                  <%= ui.timeline_dot variant: event[:variant] %>
                  <%= ui.timeline_content do %>
                    <%= ui.timeline_time event[:time] %>
                    <p class="text-foreground text-sm">
                      <strong><%= event[:action] %></strong> <%= event[:desc] %>
                    </p>
                  <% end %>
                <% end %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      </div>
    </div>
  </div>
</section>