native-select — the platform popup, kept

<script lang="ts">
  import NativeSelect from '@ui/native-select.svelte';
  import PressButton from '@ui/press-button.svelte';
  import TerminalCard from '$lib/ui/terminal-card/terminal-card.svelte';

let result = $state<{ outputs: string[] } | null>(null);

function onSubmit(event: SubmitEvent) {
  event.preventDefault();
  const data = new FormData(event.currentTarget as HTMLFormElement);
  const outputs: string[] = [];
  for (const [key, value] of data) {
    if (typeof value === 'string' && value !== '') outputs.push(`${key}: ${value}`);
  }
  outputs.push('form submitted ✓');
  result = { outputs };
}
</script>

<div class="grid gap-6 min-[900px]:grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)]">
  <form class="flex flex-col gap-4" aria-label="plan" onsubmit={onSubmit}>
    <NativeSelect label="plan" name="plan" required>
      <option value="">— choose a plan —</option>
      <option value="free">free — community</option>
      <option value="pro">pro — dedicated backend</option>
    </NativeSelect>
    <div class="flex flex-wrap items-center gap-3 pt-1">
      <PressButton type="submit" variant="fill">sign up</PressButton>
      <span class="text-muted-foreground text-[12.5px]">
        required fields use native validation — try submitting empty
      </span>
    </div>
  </form>
  <div>
    {#if result}
      {#key result}
        <TerminalCard
          barTitle="form — zsh"
          command="form.submit"
          outputs={result.outputs}
        />
      {/key}
    {:else}
      <div class="border-border bg-muted/40 text-muted-foreground flex h-full min-h-40 flex-col items-center justify-center gap-2 border p-6 text-center text-[13px]">
        <span class="font-nav text-primary text-[11px] uppercase tracking-[0.24em]">awaiting submit</span>
        <span>choose a plan and press <code class="text-accent">sign up</code> — the FormData payload prints here</span>
      </div>
    {/if}
  </div>
</div>