Hover card with icon

<!--
  Порт c-hover-card-4 ("Hover card with icon") —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/hover-card/c-hover-card-4.tsx

  `IconPlaceholder` (внутри `HoverCardContent`, не смонтирован закрытым)
  заменена инлайновым `<svg>` (lucide-react v0.545.0 "zap").
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"
</script>

<template>
  <div class="flex min-h-[100px] items-center justify-center">
    <HoverCard :open-delay="100" :close-delay="100">
      <HoverCardTrigger as-child>
        <Button variant="outline">Instant Deployment</Button>
      </HoverCardTrigger>
      <HoverCardContent class="w-80 p-3">
        <div class="flex gap-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="mt-0.5 size-4 shrink-0 text-amber-500"
          >
            <path
              d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
            />
          </svg>
          <div class="space-y-1">
            <p class="font-medium">Zero Latency Edge</p>
            <p class="text-muted-foreground leading-relaxed">
              Deploy your applications across our global edge network in seconds.
            </p>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  </div>
</template>