Using AI to Build Components

Generate a Svelte 5 component for a [describe your block].

Requirements:
- Use Svelte 5 runes. The Primo browser compiler supplies field props; do not use export let or $: statements.
- Use snake_case for all field names
- Include null checks (e.g., {#if image?.url})
- Make it responsive
- Use $state and $derived for logic; do not use legacy $: statements
- Add data-key attributes for inline-editable content
- Keep the block self-contained; do not import other block folders

Fields:
- [list fields with types, e.g., "headline (text)", "image (image with url and alt)"]

Style: [describe design]

Generate a Svelte 5 component for a feature card.

Requirements:
- Use Svelte 5 runes. The Primo browser compiler supplies field props; do not use export let or $: statements.
- Use snake_case for all field names
- Include null checks
- Responsive

Fields:
- icon (image with url and alt)
- headline (text)
- description (text)
- cta_link (link with url and label)

Style: Card with shadow, rounded corners, hover effect

<div class="card">
  {#if icon?.url}
    <img src={icon.url} alt={icon.alt} />
  {/if}

  {#if headline}
    <h3>{headline}</h3>
  {/if}

  {#if description}
    <p>{description}</p>
  {/if}

  {#if cta_link?.url}
    <a href={cta_link.url}>{cta_link.label || "Learn more"}</a>
  {/if}
</div>

<style>
  .card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
  }

  .card:hover {
    transform: translateY(-4px);
  }

  @media (max-width: 768px) {
    .card { padding: 1.5rem; }
  }
</style>

<!-- ❌ Don't do this -->
<script>
  export let headline
</script>

<!-- ✅ Just use directly -->
<h1>{headline}</h1>

<!-- ❌ Bad -->
<img src={image.url} alt={image.alt} />

<!-- ✅ Good -->
{#if image?.url}
  <img src={image.url} alt={image.alt} />
{/if}