page UI {
  state heroActions = [
    {
      label: "Browse components",
      href: "#component-01",
      icon: "icon-[lucide--blocks]",
      variant: "default",
      color: "primary"
    },
    {
      label: "View metrics",
      href: "#component-14",
      icon: "icon-[lucide--chart-no-axes-combined]",
      variant: "outline",
      color: "primary"
    }
  ]

  state statsItems = [
    {
      label: "Composite components",
      value: "18",
      description: "Shown separately with a practical use case",
      icon: "icon-[lucide--blocks]",
      color: "primary"
    },
    {
      label: "Rendering",
      value: "SSR",
      description: "Server-first WRNexusJS component rendering",
      icon: "icon-[lucide--server]",
      color: "info"
    },
    {
      label: "Responsive",
      value: "Yes",
      description: "Mobile, tablet, and desktop layouts",
      icon: "icon-[lucide--monitor-smartphone]",
      color: "success"
    },
    {
      label: "Theme aware",
      value: "Yes",
      description: "Supports active theme and accent palettes",
      icon: "icon-[lucide--palette]",
      color: "warning"
    }
  ]

  state featureItems = [
    {
      icon: "icon-[lucide--shield-check]",
      title: "Citizen services",
      description: "Expose public safety and citizen-service capabilities.",
      href: "/citizen-services",
      actionLabel: "View services"
    },
    {
      icon: "icon-[lucide--map-pinned]",
      title: "Station directory",
      description: "Help visitors locate stations and jurisdiction contacts.",
      href: "/contact/police-station-directory",
      actionLabel: "Find station"
    },
    {
      icon: "icon-[lucide--radio-tower]",
      title: "Public updates",
      description: "Publish official alerts, notices, and verified information.",
      href: "/media",
      actionLabel: "View updates"
    }
  ]

  state metricItems = [
    {
      label: "Public services",
      value: "24",
      description: "Citizen-facing services available online.",
      icon: "icon-[lucide--hand-heart]",
      trend: "+4",
      trendLabel: "this release",
      trendDirection: "up",
      color: "primary"
    },
    {
      label: "Police stations",
      value: "126",
      description: "Searchable directory entries.",
      icon: "icon-[lucide--landmark]",
      trend: "Updated",
      trendLabel: "today",
      trendDirection: "neutral",
      color: "info"
    },
    {
      label: "Availability",
      value: "99.9",
      suffix: "%",
      description: "Target service availability.",
      icon: "icon-[lucide--activity]",
      trend: "Stable",
      trendLabel: "30 days",
      trendDirection: "positive",
      color: "success"
    }
  ]

  state breadcrumbs = [
    {
      label: "Home",
      href: "/",
      value: "home",
      icon: "icon-[lucide--house]"
    },
    {
      label: "Components",
      href: "/components",
      value: "components"
    },
    {
      label: "Page header",
      value: "page-header",
      current: true
    }
  ]

  state heroVisualItems = [
    {
      label: "Reusable components",
      description: "Compose complete pages using shared UI.",
      value: "108",
      icon: "icon-[lucide--blocks]"
    },
    {
      label: "Theme support",
      description: "Built for light, dark, and accent palettes.",
      value: "Ready",
      icon: "icon-[lucide--palette]"
    },
    {
      label: "Responsive layout",
      description: "Optimized for mobile, tablet, and desktop.",
      value: "100%",
      icon: "icon-[lucide--monitor-smartphone]"
    }
  ]

  seo {
    title = "18 UI Components — Names and Use Cases"
    description = "All 18 WRNexusJS composite UI components shown individually with their names and practical use cases."
    canonical = "/ui-18-components"
  }

  view {
    <PublicPageShell
      maxWidth="2xl"
      fullWidth="true"
      background="default"
      overflow="hidden"
      minHeight="screen"
    >
      <div
        class="mx-auto w-full max-w-7xl px-4 py-10 sm:px-6 lg:px-8"
      >
        <div
          id="component-01"
          class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm sm:p-8"
        >
          <p
            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
          >
            01. PublicPageShell
          </p>
          <h1
            class="mt-3 text-3xl font-bold text-[var(--wire-color-text)] sm:text-4xl"
          >
            PublicPageShell
          </h1>
          <p
            class="mt-3 text-base leading-7 text-[var(--wire-color-text-muted)]"
          >
            <strong
              class="text-[var(--wire-color-text)]"
            >
              Use case:
            </strong>
            Provide the outer structure for a complete public page, including maximum width, page background, overflow handling, before/after slots, and minimum-height behavior.
          </p>
          <p
            class="mt-4 rounded-2xl bg-[var(--wire-color-primary-soft)] px-4 py-3 text-sm text-[var(--wire-color-primary-text)]"
          >
            This complete page is rendered inside PublicPageShell.
          </p>
        </div>
      </div>

      <div
        id="component-02"
        class="mx-auto w-full px-4 pb-10 sm:px-6 lg:px-8"
      >
        <div
          class="mb-4"
        >
          <p
            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
          >
            02. AnnouncementBar
          </p>
          <h2
            class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
          >
            AnnouncementBar
          </h2>
          <p
            class="mt-2 text-[var(--wire-color-text-muted)]"
          >
            <strong
              class="text-[var(--wire-color-text)]"
            >
              Use case:</strong> Display an important site-wide update, emergency alert, release notice, or time-sensitive action above the primary page content.
            </p>
          </div>
          <AnnouncementBar
            badge="Public notice"
            badgeIcon="icon-[lucide--sparkles]"
            message="All 18 composite components are now available"
            description="Review each component name and its recommended use case on this page."
            icon="icon-[lucide--megaphone]"
            actionLabel="View components"
            actionHref="#component-03"
            actionIcon="icon-[lucide--arrow-down]"
            dismissible="true"
            width="default"
            size="default"
            color="primary"
            variant="outline"
          />
        </div>

        <div
          id="component-03"
          class="border-y border-[var(--wire-color-border)]"
        >
          <div
            class="mx-auto w-full max-w-7xl px-4 pt-10 sm:px-6 lg:px-8"
          >
            <p
              class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
            >
              03. PageHeader
            </p>
            <h2
              class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
            >
              PageHeader
            </h2>
            <p
              class="mt-2 text-[var(--wire-color-text-muted)]"
            >
              <strong
                class="text-[var(--wire-color-text)]"
              >
                Use case:</strong> Introduce an internal or public page with an eyebrow, title, description, icon, breadcrumbs, and primary or secondary actions.
              </p>
            </div>
            <PageHeader
              eyebrow="Component showcase"
              title="Page headers with clear hierarchy"
              description="Use PageHeader for service pages, directories, legal pages, guides, dashboards, and public information pages."
              icon="icon-[lucide--panel-top]"
              showBreadcrumbs="true"
              breadcrumbs='{breadcrumbs}'
              primaryLabel="Primary action"
              primaryHref="#primary"
              primaryIcon="icon-[lucide--arrow-down]"
              secondaryLabel="Secondary action"
              secondaryHref="#secondary"
              secondaryIcon="icon-[lucide--house]"
              color="primary"
              variant="outline"
              maxWidth="full"
            />
          </div>

          <div
            id="component-04"
            class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
          >
            <div
              class="mb-6"
            >
              <p
                class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
              >
                04. Hero
              </p>
              <h2
                class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
              >
                Hero
              </h2>
              <p
                class="mt-2 text-[var(--wire-color-text-muted)]"
              >
                <strong
                  class="text-[var(--wire-color-text)]"
                >
                  Use case:</strong> Create the primary marketing or public-information introduction with headline emphasis, supporting content, trust items, actions, and an optional visual area.
                </p>
              </div>
              <Hero
                eyebrow="Reusable public UI"
                title="Build polished pages"
                highlight="with consistent hero layouts"
                description="Use a structured visual panel on the right side."
                layout="split"
                visualPosition="right"
                fullBleed="true"
                maxWidth="full"
                size="lg"
                color="primary"
                variant="gradient"
                visualEyebrow="Component system"
                visualTitle="Everything needed for public pages"
                visualDescription="Reusable building blocks with consistent layout, theming, and responsive behavior."
                visualIcon="icon-[lucide--layout-dashboard]"
                visualItems='{heroVisualItems}'
              />
            </div>

            <div
              id="component-05"
              class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
            >
              <div
                class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
              >
                <p
                  class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                >
                  05. HeroActions
                </p>
                <h2
                  class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                >
                  HeroActions
                </h2>
                <p
                  class="mt-2 text-[var(--wire-color-text-muted)]"
                >
                  <strong
                    class="text-[var(--wire-color-text)]"
                  >
                    Use case:</strong> Group hero buttons with consistent alignment, mobile stacking, orientation, sizing, variants, and responsive behavior.
                  </p>
                  <div
                    class="mt-6"
                  >
                    <HeroActions
                      actions='{heroActions}'
                      align="left"
                      orientation="horizontal"
                      stackOnMobile="true"
                      fullWidthMobile="true"
                      size="default"
                      color="primary"
                    />
                  </div>
                </div>
              </div>

              <div
                id="component-06"
                class="mx-auto w-full px-4 py-12 sm:px-6 lg:px-8"
              >
                <div
                  class="mb-6"
                >
                  <p
                    class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                  >
                    06. StatsBar
                  </p>
                  <h2
                    class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                  >
                    StatsBar
                  </h2>
                  <p
                    class="mt-2 text-[var(--wire-color-text-muted)]"
                  >
                    <strong
                      class="text-[var(--wire-color-text)]"
                    >
                      Use case:</strong> Present a compact row of key facts, service counts, performance indicators, trust signals, or public portal statistics.
                    </p>
                  </div>
                  <StatsBar
                    items='{statsItems}'
                    columns="4"
                    compact="true"
                    dividers="true"
                    icons="true"
                    color="primary"
                    variant="outline"
                    maxWidth="xl"
                  />
                </div>

                <div
                  id="component-07"
                  class="py-4"
                >
                  <div
                    class="mx-auto w-full max-w-7xl px-4 pb-5 sm:px-6 lg:px-8"
                  >
                    <p
                      class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                    >
                      07. Section
                    </p>
                    <h2
                      class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                    >
                      Section
                    </h2>
                    <p
                      class="mt-2 text-[var(--wire-color-text-muted)]"
                    >
                      <strong
                        class="text-[var(--wire-color-text)]"
                      >
                        Use case:</strong> Create predictable page sections with shared spacing, width constraints, surfaces, borders, and responsive vertical rhythm.
                      </p>
                    </div>
                    <Section
                      spacing="lg"
                      maxWidth="xl"
                      variant="soft"
                      borderTop="true"
                      borderBottom="true"
                    >
                      <div
                        class="p-6 text-center"
                      >
                        <p
                          class="font-semibold text-[var(--wire-color-text)]"
                        >
                          Content placed inside a Section component
                        </p>
                        <p
                          class="mt-2 text-sm text-[var(--wire-color-text-muted)]"
                        >
                          The component owns spacing, surface, borders, and content width.
                        </p>
                      </div>
                    </Section>
                  </div>

                  <div
                    id="component-08"
                    class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                  >
                    <div
                      class="mb-6"
                    >
                      <p
                        class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                      >
                        08. SectionHeader
                      </p>
                      <h2
                        class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                      >
                        SectionHeader
                      </h2>
                      <p
                        class="mt-2 text-[var(--wire-color-text-muted)]"
                      >
                        <strong
                          class="text-[var(--wire-color-text)]"
                        >
                          Use case:</strong> Add a consistent heading block to content sections, including eyebrow text, description, icon slot, action slot, alignment, and heading level.
                        </p>
                      </div>
                      <SectionHeader
                        eyebrow="Operational overview"
                        title="A reusable heading for every section"
                        description="Use this component before grids, lists, forms, reports, service collections, and related-content blocks."
                        align="split"
                        size="default"
                        color="primary"
                        headingLevel="2"
                        maxWidth="3xl"
                      >
                        <div
                          data-slot="icon"
                        >
                          <span
                            class="inline-flex size-11 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]"
                          >
                            <span
                              class="icon-[lucide--heading-2] size-5"
                              aria-hidden="true"
                            >
                            </span>
                          </span>
                        </div>
                        <div
                          data-slot="actions"
                        >
                          <a
                            href="#component-09"
                            class="font-semibold text-[var(--wire-color-primary)]"
                          >
                            Next component
                          </a>
                        </div>
                      </SectionHeader>
                    </div>

                    <div
                      id="component-09"
                      class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                    >
                      <div
                        class="mb-6"
                      >
                        <p
                          class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                        >
                          09. MarketingSectionHeader
                        </p>
                        <h2
                          class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                        >
                          MarketingSectionHeader
                        </h2>
                        <p
                          class="mt-2 text-[var(--wire-color-text-muted)]"
                        >
                          <strong
                            class="text-[var(--wire-color-text)]"
                          >
                            Use case:</strong> Introduce marketing, services, solutions, features, benefits, case studies, or product sections with a prominent optional action.
                          </p>
                        </div>
                        <MarketingSectionHeader
                          eyebrow="Public services"
                          title="Discover important services in one place"
                          description="Use this header above service cards, solutions, case studies, product capabilities, and campaign sections."
                          align="split"
                          color="primary"
                          actionLabel="View all services"
                          actionHref="/citizen-services"
                          actionIcon="icon-[lucide--arrow-right]"
                        />
                      </div>

                      <div
                        id="component-10"
                        class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                      >
                        <div
                          class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
                        >
                          <p
                            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                          >
                            10. TextLink
                          </p>
                          <h2
                            class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                          >
                            TextLink
                          </h2>
                          <p
                            class="mt-2 text-[var(--wire-color-text-muted)]"
                          >
                            <strong
                              class="text-[var(--wire-color-text)]"
                            >
                              Use case:</strong> Provide a lightweight inline action for “view all,” “learn more,” “open documentation,” or related navigation without using a full button.
                            </p>
                            <div
                              class="mt-6"
                            >
                              <TextLink
                                label="Open component documentation"
                                href="/components"
                                icon="icon-[lucide--book-open]"
                                iconPosition="start"
                                showArrow="true"
                                underline="false"
                                color="primary"
                                variant="button"
                              />
                            </div>
                          </div>
                        </div>

                        <div
                          id="component-11"
                          class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                        >
                          <div
                            class="mb-6"
                          >
                            <p
                              class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                            >
                              11. FeatureGrid
                            </p>
                            <h2
                              class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                            >
                              FeatureGrid
                            </h2>
                            <p
                              class="mt-2 text-[var(--wire-color-text-muted)]"
                            >
                              <strong
                                class="text-[var(--wire-color-text)]"
                              >
                                Use case:</strong> Arrange services, features, solutions, benefits, or linked capabilities in a responsive equal-height grid.
                              </p>
                            </div>
                            <FeatureGrid
                              columns="3"
                              tabletColumns="2"
                              mobileColumns="1"
                              gap="lg"
                              equalHeight="true"
                              align="stretch"
                              maxWidth="full"
                            >
                              {#each featureItems as item, index}
                                <FeatureCard
                                  icon="{item.icon}"
                                  title="{item.title}"
                                  description="{item.description}"
                                  href="{item.href}"
                                  actionLabel="Explore services"
                                  badge="Public"
                                  badgeColor="secondary"
                                  color="primary"
                                  variant="default"
                                  hover="lift"
                                />
                              {/each}
                            </FeatureGrid>
                          </div>

                          <div
                            id="component-12"
                            class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                          >
                            <div
                              class="mb-6"
                            >
                              <p
                                class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                              >
                                12. FeatureCard
                              </p>
                              <h2
                                class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                              >
                                FeatureCard
                              </h2>
                              <p
                                class="mt-2 text-[var(--wire-color-text-muted)]"
                              >
                                <strong
                                  class="text-[var(--wire-color-text)]"
                                >
                                  Use case:</strong> Present a linked feature or service with an icon, title, description, badge, visual variant, hover treatment, and action label.
                                </p>
                              </div>
                              <div
                                class="max-w-md"
                              >
                                <FeatureCard
                                  icon="icon-[lucide--shield-check]"
                                  title="Citizen safety services"
                                  description="Create a clear route for crime reporting, complaints, certificates, and emergency information."
                                  href="/citizen-services"
                                  actionLabel="Explore services"
                                  badge="Public"
                                  badgeColor="primary"
                                  color="primary"
                                  variant="default"
                                  hover="lift"
                                />
                              </div>
                            </div>

                            <div
                              id="component-13"
                              class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                            >
                              <div
                                class="mb-6"
                              >
                                <p
                                  class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                                >
                                  13. FeatureIconCard
                                </p>
                                <h2
                                  class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                                >
                                  FeatureIconCard
                                </h2>
                                <p
                                  class="mt-2 text-[var(--wire-color-text-muted)]"
                                >
                                  <strong
                                    class="text-[var(--wire-color-text)]"
                                  >
                                    Use case:</strong> Highlight a capability where the icon treatment should carry stronger visual importance than a standard feature card.
                                  </p>
                                </div>
                                <div
                                  class="max-w-md"
                                >
                                  <FeatureIconCard
                                    icon="icon-[lucide--file-search]"
                                    iconSize="lg"
                                    iconVariant="soft"
                                    title="Track public requests"
                                    description="Allow citizens to follow complaints, certificates, and verification requests through a clear status journey."
                                    href="/citizen-services/track-complaint"
                                    actionLabel="Track request"
                                    badge="Fast"
                                    color="primary"
                                    variant="raised"
                                  />
                                </div>
                              </div>

                              <div
                                id="component-14"
                                class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                              >
                                <div
                                  class="mb-6"
                                >
                                  <p
                                    class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                                  >
                                    14. MetricGrid
                                  </p>
                                  <h2
                                    class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                                  >
                                    MetricGrid
                                  </h2>
                                  <p
                                    class="mt-2 text-[var(--wire-color-text-muted)]"
                                  >
                                    <strong
                                      class="text-[var(--wire-color-text)]"
                                    >
                                      Use case:</strong> Arrange operational values, KPIs, public statistics, usage summaries, or service indicators in a responsive grid.
                                    </p>
                                  </div>
                                  <MetricGrid
                                    items='{metricItems}'
                                    columns="3"
                                    tabletColumns="2"
                                    mobileColumns="1"
                                    gap="md"
                                    equalHeight="true"
                                    dividers="false"
                                    color="primary"
                                    variant="default"
                                  />
                                </div>

                                <div
                                  id="component-15"
                                  class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                                >
                                  <div
                                    class="mb-6"
                                  >
                                    <p
                                      class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                                    >
                                      15. MetricCard
                                    </p>
                                    <h2
                                      class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                                    >
                                      MetricCard
                                    </h2>
                                    <p
                                      class="mt-2 text-[var(--wire-color-text-muted)]"
                                    >
                                      <strong
                                        class="text-[var(--wire-color-text)]"
                                      >
                                        Use case:</strong> Display one metric with a label, value, suffix, description, icon, trend, status direction, and optional action.
                                      </p>
                                    </div>
                                    <div
                                      class="max-w-md"
                                    >
                                      <MetricCard
                                        label="Service availability"
                                        value="99.9"
                                        suffix="%"
                                        description="Target availability for essential public services."
                                        icon="icon-[lucide--activity]"
                                        trend="Stable"
                                        trendLabel="last 30 days"
                                        trendDirection="positive"
                                        href="/status"
                                        actionLabel="Open status"
                                        color="success"
                                        variant="default"
                                      />
                                    </div>
                                  </div>

                                  <div
                                    id="component-16"
                                    class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                                  >
                                    <div
                                      class="mb-6"
                                    >
                                      <p
                                        class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                                      >
                                        16. SplitHero
                                      </p>
                                      <h2
                                        class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                                      >
                                        SplitHero
                                      </h2>
                                      <p
                                        class="mt-2 text-[var(--wire-color-text-muted)]"
                                      >
                                        <strong
                                          class="text-[var(--wire-color-text)]"
                                        >
                                          Use case:</strong> Build a two-column introduction that balances descriptive content and a visual, screenshot, feature panel, image, map, or media block.
                                        </p>
                                      </div>
                                      <SplitHero
                                        eyebrow="Balanced layout"
                                        title="Combine detailed content"
                                        highlight="with a strong visual panel"
                                        description="Use SplitHero for product explanations, department introductions, public campaigns, service walkthroughs, and feature storytelling."
                                        primaryLabel="View public services"
                                        primaryHref="/citizen-services"
                                        primaryIcon="icon-[lucide--arrow-right]"
                                        secondaryLabel="Contact department"
                                        secondaryHref="/contact"
                                        secondaryIcon="icon-[lucide--phone]"
                                        visualPosition="right"
                                        ratio="balanced"
                                        color="primary"
                                        variant="default"
                                      >
                                        <div
                                          data-slot="visual"
                                        >
                                          <div
                                            class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-8 shadow-lg"
                                          >
                                            <span
                                              class="icon-[lucide--layout-dashboard] size-14 text-[var(--wire-color-primary)]"
                                              aria-hidden="true"
                                            >
                                            </span>
                                            <h3
                                              class="mt-5 text-xl font-bold text-[var(--wire-color-text)]"
                                            >
                                              Visual content area
                                            </h3>
                                            <p
                                              class="mt-2 text-[var(--wire-color-text-muted)]"
                                            >
                                              Add a product screenshot, service diagram, dashboard, image, or interactive preview.
                                            </p>
                                          </div>
                                        </div>
                                      </SplitHero>
                                    </div>

                                    <div
                                      id="component-17"
                                      class="py-12"
                                    >
                                      <div
                                        class="mx-auto w-full max-w-7xl px-4 pb-6 sm:px-6 lg:px-8"
                                      >
                                        <p
                                          class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                                        >
                                          17. CTASection
                                        </p>
                                        <h2
                                          class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                                        >
                                          CTASection
                                        </h2>
                                        <p
                                          class="mt-2 text-[var(--wire-color-text-muted)]"
                                        >
                                          <strong
                                            class="text-[var(--wire-color-text)]"
                                          >
                                            Use case:</strong> Close a page or major section with a strong conversion action such as registration, sign-in, contact, application, service request, or documentation access.
                                          </p>
                                        </div>
                                        <CTASection
                                          eyebrow="Ready to continue"
                                          title="Build public pages with reusable components"
                                          description="Keep application pages focused on content and business data while the shared UI package owns consistent presentation."
                                          icon="icon-[lucide--rocket]"
                                          align="center"
                                          size="lg"
                                          color="primary"
                                          variant="gradient"
                                          primaryLabel="Use these components"
                                          primaryHref="/components"
                                          primaryIcon="icon-[lucide--blocks]"
                                          secondaryLabel="Back to home"
                                          secondaryHref="/"
                                          secondaryIcon="icon-[lucide--house]"
                                          maxWidth="xl"
                                        />
                                      </div>

                                      <div
                                        id="component-18"
                                        class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8"
                                      >
                                        <div
                                          class="rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 sm:p-8"
                                        >
                                          <p
                                            class="text-sm font-bold uppercase tracking-[0.18em] text-[var(--wire-color-primary)]"
                                          >
                                            18. BackToTop
                                          </p>
                                          <h2
                                            class="mt-2 text-2xl font-bold text-[var(--wire-color-text)]"
                                          >
                                            BackToTop
                                          </h2>
                                          <p
                                            class="mt-2 text-[var(--wire-color-text-muted)]"
                                          >
                                            <strong
                                              class="text-[var(--wire-color-text)]"
                                            >
                                              Use case:</strong> Provide a floating control on long pages that returns visitors to the top and can optionally show scroll progress.
                                            </p>
                                            <p
                                              class="mt-4 text-sm text-[var(--wire-color-text-muted)]"
                                            >
                                              Scroll down the page until the floating button becomes visible.
                                            </p>
                                          </div>
                                        </div>

                                        <div
                                          data-slot="after"
                                        >
                                          <BackToTop
                                            threshold="400"
                                            label="Back to top"
                                            ariaLabel="Scroll back to the top of the 18 component showcase"
                                            icon="icon-[lucide--arrow-up]"
                                            position="right"
                                            offset="md"
                                            behavior="smooth"
                                            showProgress="true"
                                            color="primary"
                                            variant="solid"
                                          />
                                        </div>
                                      </PublicPageShell>
                                    }
                                  }