page NewComponentsShowcase {
  layout = "none"

  state features = [
    {
      title: "Reusable sections",
      description: "Keep page spacing and surfaces consistent across applications.",
      icon: "icon-[lucide--panels-top-left]",
      href: "#sections"
    },
    {
      title: "Controlled cards",
      description: "Compose capabilities without duplicating card styles.",
      icon: "icon-[lucide--layout-grid]",
      href: "#cards"
    },
    {
      title: "Accessible actions",
      description: "Shared buttons, links and focus states remain predictable.",
      icon: "icon-[lucide--mouse-pointer-click]",
      href: "#actions"
    }
  ]

  state metrics = [
    { label: "Existing redesigns", value: "15", icon: "icon-[lucide--refresh-cw]" },
    { label: "New composites", value: "18", icon: "icon-[lucide--blocks]" },
    { label: "Total files", value: "33", icon: "icon-[lucide--files]" },
    { label: "Theme support", value: "100", suffix: "%", icon: "icon-[lucide--palette]" }
  ]

  view {
    <PublicPageShell fullWidth="true">
      <AnnouncementBar
        badge="New"
        message="WRNexus UI composite component release"
        description="The package adds reusable marketing and public-page components."
        actionLabel="Review components"
        actionHref="#components"
        dismissible="true"
      />

      <SplitHero
        eyebrow="@wrnexus/ui 0.5.12"
        title="A complete reusable"
        highlight="page-building system"
        description="Build PMS, WRNexus and WorkRoot pages from shared, theme-aware components instead of repeated page markup."
        primaryLabel="Browse components"
        primaryHref="#components"
        primaryIcon="icon-[lucide--blocks]"
        secondaryLabel="Read migration guide"
        secondaryHref="#migration"
      >
        <Card
          data-slot="visual"
          title="Component release"
          description="15 redesigned primitives and 18 new composites."
          variant="soft"
          size="lg"
        >
          <MetricGrid items='{metrics}' columns="2" tabletColumns="2" />
        </Card>
      </SplitHero>

      <Section id="components" variant="soft" spacing="lg" borderTop="true" borderBottom="true">
        <MarketingSectionHeader
          eyebrow="Component system"
          title="Design once and reuse everywhere"
          description="The new composites are application-independent and remain controlled by the WRNexus theme tokens."
          actionLabel="View all documentation"
          actionHref="/components"
        />

        <FeatureGrid columns="3" tabletColumns="2" gap="lg" class="mt-10">
          {#each features as feature}
            <FeatureIconCard
              icon='{feature.icon}'
              title='{feature.title}'
              description='{feature.description}'
              href='{feature.href}'
            />
          {/each}
        </FeatureGrid>
      </Section>

      <StatsBar items='{metrics}' columns="4" />

      <CTASection
        eyebrow="Ready for PMS"
        title="Publish the UI package, then rebuild the Police Management System"
        description="Pages can now focus on police-domain data while the UI package owns shared layout and visual behavior."
        primaryLabel="Publish release"
        primaryHref="#publish"
        primaryIcon="icon-[lucide--package-check]"
        secondaryLabel="Open checklist"
        secondaryHref="#checklist"
        variant="gradient"
      />

      <BackToTop threshold="400" showProgress="true" />
    </PublicPageShell>
  }
}