component ChannelFlow {
  props {
    class = ""
  }

  view {
    <div
      class="grid grid-cols-1 items-center gap-3 lg:grid-cols-[1fr_auto_1fr_auto_1.2fr_auto_1fr] {class}"
      role="img"
      aria-label="Customer event flows through profile and consent checks to communication channels, then delivery analytics and webhooks"
    >
      <div
        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
      >
        <span class="icon-[lucide--webhook] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
        <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Customer event</strong>
        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">order.shipped</small>
      </div>
      <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>

      <div
        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
      >
        <span class="icon-[lucide--shield-check] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
        <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Profile + consent</strong>
        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Eligibility checked</small>
      </div>
      <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>

      <div
        class="grid grid-cols-2 gap-2 rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-3"
      >
        <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">WhatsApp</span>
        <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">SMS</span>
        <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Email</span>
        <span class="rounded-xl bg-[var(--wire-color-primary-soft,#ecfdf5)] px-3 py-2.5 text-center text-xs font-bold text-[var(--wire-color-primary,#059669)]">Voice</span>
      </div>
      <span class="hidden text-center text-xl text-[var(--wire-color-primary,#059669)] lg:block" aria-hidden="true">→</span>

      <div
        class="rounded-2xl border border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface,#ffffff)] p-4"
      >
        <span class="icon-[lucide--chart-no-axes-combined] text-xl text-[var(--wire-color-primary,#059669)]" aria-hidden="true"></span>
        <strong class="mt-3 block text-sm text-[var(--wire-color-text,#0f172a)]">Delivery + analytics</strong>
        <small class="mt-1 block text-[var(--wire-color-muted,#64748b)]">Webhook emitted</small>
      </div>
    </div>
  }
}