component ProductArchitectureDiagram {
  props {
    title = ""
    value = ""
    description = ""
    summary = ""
    loading = false
    class = ""
  }

  view {
    <section class="overflow-hidden rounded-3xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] shadow-[var(--wire-shadow-1,0_12px_30px_rgb(0_0_0/0.08))] {class}" aria-label="{title}">
      <header class="flex flex-col gap-4 border-b border-[var(--wire-color-border,#e2e8f0)] p-6 sm:flex-row sm:items-start sm:justify-between lg:p-8">
        <div>
          {#if title}<p class="m-0 font-semibold text-[var(--wire-color-text,#0f172a)]">{title}</p>{/if}
          {#if value}<strong class="mt-3 block text-3xl font-semibold tracking-[-0.04em] text-[var(--wire-color-text,#0f172a)] sm:text-4xl">{value}</strong>{/if}
          {#if description}<p class="mt-3 max-w-2xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
        </div>
        {#if loading}
          <span class="inline-flex w-max items-center gap-2 rounded-full bg-[var(--wire-color-surface-2,#f8fafc)] px-3 py-1.5 text-xs font-semibold text-[var(--wire-color-muted,#64748b)]">
            <span class="h-2 w-2 animate-pulse rounded-full bg-[var(--wire-color-primary,#059669)]"></span>Loading
          </span>
        {/if}
      </header>

      <div class="bg-[var(--wire-color-surface-2,#f8fafc)] p-4 sm:p-6 lg:p-8 empty:hidden">
        <slot />
      </div>

      {#if summary}
        <p class="m-0 border-t border-[var(--wire-color-border,#e2e8f0)] px-6 py-5 text-sm leading-6 text-[var(--wire-color-muted,#64748b)] lg:px-8">{summary}</p>
      {/if}
    </section>
  }
}