page ExistingComponentsShowcase {
  layout = "none"

  state cards = [
    {
      title: "Citizen services",
      description: "Access applications, certificates and verification services.",
      icon: "icon-[lucide--layout-grid]",
      href: "/services"
    },
    {
      title: "Public safety",
      description: "Read verified safety information and important advisories.",
      icon: "icon-[lucide--shield-check]",
      href: "/safety"
    }
  ]

  state tabs = [
    { value: "overview", label: "Overview", title: "Overview", description: "A complete view of the redesigned component system." },
    { value: "accessibility", label: "Accessibility", title: "Accessible by default", description: "Keyboard, focus and semantic behavior remain part of every component." }
  ]

  view {
    <PublicPageShell fullWidth="true">
      <Section spacing="lg">
        <SectionHeader
          eyebrow="WRNexus UI"
          title="Existing component redesign"
          description="Replacement implementations preserve the 0.5.11 public contracts while improving visual consistency."
          headingLevel="1"
          size="lg"
        />

        <Grid columns="3" gap="md" class="mt-10">
          {#each cards as item}
            <Card
              title='{item.title}'
              description='{item.description}'
              actionLabel="Open"
              actionHref='{item.href}'
              hover="lift"
            >
              <div class="mb-5 flex size-12 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)]">
                <span class='{item.icon + " size-6"}' aria-hidden="true"></span>
              </div>
            </Card>
          {/each}
        </Grid>
      </Section>

      <Section variant="soft" spacing="lg" borderTop="true" borderBottom="true">
        <Columns columns="2" gap="lg">
          <SearchBox
            label="Search services"
            name="q"
            placeholder="Search services, notices or offices"
          />

          <Map
            title="Service locations"
            description="Use the default slot to mount the selected map provider."
            items='{[
              { label: "Head office", x: 30, y: 35 },
              { label: "Service centre", x: 65, y: 55 }
            ]}'
          />
        </Columns>
      </Section>

      <Section spacing="lg">
        <Tabs items='{tabs}' active="overview" />
      </Section>
    </PublicPageShell>
  }
}