<script setup lang="ts">
import { ArrowRight, Hexagon } from '@lucide/vue'

const people = [
  { name: 'Mara Quinn', src: '/avatars/1.svg' },
  { name: 'Theo Park', src: '/avatars/2.svg' },
  { name: 'Iris Chen', src: '/avatars/3.svg' },
  { name: 'Sam Okafor' },
]
</script>

<template>
  <div class="bg-bg">
    <JNavbar :sticky="false">
      <template #brand>
        <a href="#" class="flex items-center gap-2 text-sm font-semibold text-fg">
          <Hexagon class="size-5" :stroke-width="1.75" />
          Acme
        </a>
      </template>
      <JNavbarLink href="#">Product</JNavbarLink>
      <JNavbarLink href="#">Pricing</JNavbarLink>
      <JNavbarLink href="#">Docs</JNavbarLink>
      <template #actions>
        <JButton variant="ghost" size="sm" class="hidden sm:inline-flex">Sign in</JButton>
        <JButton size="sm">Start free</JButton>
      </template>
      <template #menu-footer>
        <JButton variant="outline">Sign in</JButton>
      </template>
    </JNavbar>

    <section class="mx-auto max-w-3xl px-6 py-20 text-center">
      <JBadge variant="success" dot>New: preview environments</JBadge>
      <h1 class="mt-6 text-4xl font-semibold tracking-tight text-balance text-fg sm:text-5xl">
        Ship every branch to its own URL
      </h1>
      <p class="mx-auto mt-4 max-w-xl text-lg text-pretty text-fg-secondary">
        Acme builds each pull request, gives it a link and tears it down when you merge. Review the real thing, not a screenshot.
      </p>
      <div class="mt-8 flex flex-wrap justify-center gap-3">
        <JButton size="lg">
          Start for free
          <template #trailing><ArrowRight /></template>
        </JButton>
        <JButton size="lg" variant="outline">Talk to sales</JButton>
      </div>
      <div class="mt-10 flex items-center justify-center gap-3 text-sm text-fg-muted">
        <JAvatarGroup :items="people" size="sm" :max="4" />
        Used by 4,000+ teams
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { Check } from '@lucide/vue'

const billing = ref<string | string[] | null>('yearly')

const plans = [
  { name: 'Hobby', monthly: 0, yearly: 0, description: 'For side projects.', features: ['1 project', 'Preview deployments', 'Community support'], cta: 'Start free' },
  { name: 'Pro', monthly: 24, yearly: 19, description: 'For small teams shipping every day.', features: ['Unlimited projects', 'Team roles', 'Analytics', 'Email support'], cta: 'Start trial', popular: true },
  { name: 'Scale', monthly: 99, yearly: 79, description: 'For companies with compliance needs.', features: ['Everything in Pro', 'SSO and audit log', '99.99% SLA', 'Dedicated support'], cta: 'Contact sales' },
]

const price = (plan: typeof plans[number]) => (billing.value === 'yearly' ? plan.yearly : plan.monthly)
</script>

<template>
  <section class="mx-auto max-w-5xl px-6 py-16">
    <div class="flex flex-col items-center text-center">
      <h2 class="text-3xl font-semibold tracking-tight text-fg">Simple pricing</h2>
      <p class="mt-2 text-fg-secondary">Start free. Upgrade when your team grows.</p>
      <JToggleGroup v-model="billing" class="mt-6" label="Billing period">
        <JToggleGroupItem value="monthly">Monthly</JToggleGroupItem>
        <JToggleGroupItem value="yearly">Yearly · save 20%</JToggleGroupItem>
      </JToggleGroup>
    </div>

    <div class="mt-10 grid gap-4 md:grid-cols-3">
      <JCard
        v-for="plan in plans"
        :key="plan.name"
        :title="plan.name"
        :description="plan.description"
        :class="plan.popular ? 'ring-1 ring-fg' : ''"
      >
        <template v-if="plan.popular" #actions>
          <JBadge variant="accent" size="sm">Popular</JBadge>
        </template>
        <p class="flex items-baseline gap-1">
          <span class="text-3xl font-semibold tracking-tight text-fg tabular-nums">${{ price(plan) }}</span>
          <span class="text-sm text-fg-muted">/ user / month</span>
        </p>
        <ul class="mt-5 flex flex-col gap-2.5 text-sm">
          <li v-for="feature in plan.features" :key="feature" class="flex items-center gap-2">
            <Check class="size-4 shrink-0 text-accent-text" :stroke-width="2" />
            {{ feature }}
          </li>
        </ul>
        <template #footer>
          <JButton block :variant="plan.popular ? 'primary' : 'outline'">{{ plan.cta }}</JButton>
        </template>
      </JCard>
    </div>
  </section>
</template>

<script setup lang="ts">
const open = ref<string | string[] | null>('trial')

const questions = [
  { id: 'trial', q: 'Do I need a credit card for the trial?', a: 'No. The 14-day trial of Pro starts without payment details, and drops back to Hobby if you don’t upgrade.' },
  { id: 'seats', q: 'How are seats counted?', a: 'Every member who can deploy counts as a seat. Viewers are free, as many as you like.' },
  { id: 'regions', q: 'Which regions can I deploy to?', a: 'Frankfurt, London, Washington, San Francisco, Tokyo and Sydney. Enterprise plans can add more.' },
  { id: 'cancel', q: 'Can I cancel at any time?', a: 'Yes. You keep access until the end of the billing period, and your projects stay online on the free plan.' },
]
</script>

<template>
  <section class="mx-auto grid max-w-5xl gap-10 px-6 py-16 md:grid-cols-[1fr_2fr]">
    <div>
      <h2 class="text-2xl font-semibold tracking-tight text-fg">Questions</h2>
      <p class="mt-2 text-sm text-fg-secondary">
        Can’t find what you’re looking for? <a href="#" class="text-fg underline underline-offset-4">Write to us</a>.
      </p>
    </div>
    <JAccordion v-model="open">
      <JAccordionItem v-for="item in questions" :key="item.id" :value="item.id" :title="item.q">
        {{ item.a }}
      </JAccordionItem>
    </JAccordion>
  </section>
</template>

<script setup lang="ts">
import { Mail } from '@lucide/vue'

const email = ref('')
const sending = ref(false)

async function subscribe() {
  if (!email.value.includes('@')) return
  sending.value = true
  await new Promise(resolve => setTimeout(resolve, 900))
  sending.value = false
  email.value = ''
  toast.success('You’re on the list', { description: 'One email a month, no more.' })
}
</script>

<template>
  <section class="mx-auto max-w-5xl px-6 py-12">
    <JCard variant="muted" padding="lg">
      <div class="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
        <div>
          <h2 class="text-lg font-semibold text-fg">The monthly changelog</h2>
          <p class="mt-1 text-sm">New features and fixes, once a month. Unsubscribe anytime.</p>
        </div>
        <form class="flex w-full gap-2 md:w-auto" @submit.prevent="subscribe">
          <JInput v-model="email" type="email" placeholder="you@company.com" aria-label="Email" class="flex-1 md:w-64">
            <template #leading><Mail /></template>
          </JInput>
          <JButton type="submit" :loading="sending">Subscribe</JButton>
        </form>
      </div>
    </JCard>
  </section>
</template>

<script setup lang="ts">
import { BarChart3, Bell, Folder, Home, Inbox, Plus, Search, Settings, Users } from '@lucide/vue'

const menu = ref(false)
const current = ref('website')

// One set of items, rendered in the desktop sidebar and in the mobile sheet.
const main = [
  { id: 'overview', label: 'Overview', icon: Home },
  { id: 'inbox', label: 'Inbox', icon: Inbox, count: 3 },
  { id: 'analytics', label: 'Analytics', icon: BarChart3 },
]
const projects = [
  { id: 'website', label: 'Website', icon: Folder },
  { id: 'mobile', label: 'Mobile app', icon: Folder },
]
const bottom = [
  { id: 'members', label: 'Members', icon: Users },
  { id: 'settings', label: 'Settings', icon: Settings },
]

function go(id: string) {
  current.value = id
  menu.value = false
}
</script>

<template>
  <div class="flex h-[34rem] overflow-hidden bg-bg">
    <!-- Desktop: a fixed column -->
    <aside class="hidden w-56 shrink-0 border-r border-border-subtle md:block dark:border-border">
      <JSidebar label="Workspace">
        <template #header>
          <span class="px-1 text-sm font-semibold text-fg">Acme</span>
        </template>
        <div class="flex flex-col gap-0.5">
          <JSidebarItem v-for="item in main" :key="item.id" href="#" :active="current === item.id" @click.prevent="go(item.id)">
            <template #leading><component :is="item.icon" /></template>
            {{ item.label }}
            <template v-if="item.count" #trailing>{{ item.count }}</template>
          </JSidebarItem>
        </div>
        <JSidebarGroup title="Projects">
          <JSidebarItem v-for="item in projects" :key="item.id" href="#" :active="current === item.id" @click.prevent="go(item.id)">
            <template #leading><component :is="item.icon" /></template>
            {{ item.label }}
          </JSidebarItem>
        </JSidebarGroup>
        <template #footer>
          <JSidebarItem v-for="item in bottom" :key="item.id" href="#" :active="current === item.id" @click.prevent="go(item.id)">
            <template #leading><component :is="item.icon" /></template>
            {{ item.label }}
          </JSidebarItem>
        </template>
      </JSidebar>
    </aside>

    <div class="flex min-w-0 flex-1 flex-col">
      <header class="flex h-14 shrink-0 items-center gap-3 border-b border-border-subtle px-4 dark:border-border">
        <JBurger v-model="menu" size="sm" class="md:hidden" />
        <JBreadcrumb :items="[{ label: 'Acme', href: '#' }, { label: 'Projects', href: '#' }, { label: 'Website' }]" />
        <div class="ml-auto flex items-center gap-1">
          <JButton variant="ghost" size="sm" icon aria-label="Search"><Search /></JButton>
          <JButton variant="ghost" size="sm" icon aria-label="Notifications"><Bell /></JButton>
          <JButton size="sm" class="ml-1">
            <template #leading><Plus /></template>
            New
          </JButton>
        </div>
      </header>

      <main class="flex-1 overflow-y-auto p-6">
        <h1 class="text-lg font-semibold tracking-tight text-fg">Website</h1>
        <p class="text-sm text-fg-muted">Production · updated 4 minutes ago</p>
        <div class="mt-6 grid gap-3 sm:grid-cols-3">
          <JCard padding="sm"><JStat label="Visitors" value="12,408" delta="+8%" trend="up" /></JCard>
          <JCard padding="sm"><JStat label="Error rate" value="0.12%" delta="-0.04%" trend="up" /></JCard>
          <JCard padding="sm"><JStat label="P95 latency" value="182ms" delta="+12ms" trend="down" /></JCard>
        </div>
        <JCard class="mt-3" title="Recent deployments">
          <JTimeline>
            <JTimelineItem title="Fix checkout redirect" time="4 min ago" status="current">main · a41f2c9</JTimelineItem>
            <JTimelineItem title="Add pricing FAQ" time="2 h ago" status="complete">main · 9be01d3</JTimelineItem>
            <JTimelineItem title="Upgrade to Nuxt 4.5" time="Yesterday" status="complete">main · 71ce5aa</JTimelineItem>
          </JTimeline>
        </JCard>
      </main>
    </div>

    <!-- Mobile: the same navigation in a sheet, opened by the burger -->
    <JSheet v-model:open="menu" side="left" size="sm" aria-label="Navigation">
      <JSidebar label="Workspace">
        <template #header>
          <span class="px-1 text-sm font-semibold text-fg">Acme</span>
        </template>
        <div class="flex flex-col gap-0.5">
          <JSidebarItem v-for="item in main" :key="item.id" href="#" :active="current === item.id" @click.prevent="go(item.id)">
            <template #leading><component :is="item.icon" /></template>
            {{ item.label }}
            <template v-if="item.count" #trailing>{{ item.count }}</template>
          </JSidebarItem>
        </div>
        <JSidebarGroup title="Projects">
          <JSidebarItem v-for="item in projects" :key="item.id" href="#" :active="current === item.id" @click.prevent="go(item.id)">
            <template #leading><component :is="item.icon" /></template>
            {{ item.label }}
          </JSidebarItem>
        </JSidebarGroup>
        <template #footer>
          <JSidebarItem v-for="item in bottom" :key="item.id" href="#" :active="current === item.id" @click.prevent="go(item.id)">
            <template #leading><component :is="item.icon" /></template>
            {{ item.label }}
          </JSidebarItem>
        </template>
      </JSidebar>
    </JSheet>
  </div>
</template>

<script setup lang="ts">
import { Activity, CreditCard, Users, Zap } from '@lucide/vue'

const range = ref('7d')
const page = ref(1)

const rows = [
  { name: 'checkout-api', status: 'Healthy', variant: 'success', latency: '82 ms', calls: '1.2M' },
  { name: 'search', status: 'Degraded', variant: 'warning', latency: '410 ms', calls: '640k' },
  { name: 'auth', status: 'Healthy', variant: 'success', latency: '41 ms', calls: '2.8M' },
  { name: 'image-resizer', status: 'Down', variant: 'destructive', latency: '–', calls: '0' },
] as const
</script>

<template>
  <div class="mx-auto max-w-5xl px-6 py-10">
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div>
        <h1 class="text-xl font-semibold tracking-tight text-fg">Overview</h1>
        <p class="text-sm text-fg-muted">All services, last {{ range === '24h' ? '24 hours' : range === '7d' ? '7 days' : '30 days' }}</p>
      </div>
      <JTabs
        v-model="range"
        variant="pill"
        size="sm"
        label="Time range"
        :items="[{ value: '24h', label: '24h' }, { value: '7d', label: '7d' }, { value: '30d', label: '30d' }]"
      />
    </div>

    <div class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
      <JCard padding="sm"><JStat label="Requests" value="4.6M" delta="+12%" trend="up"><template #icon><Activity /></template></JStat></JCard>
      <JCard padding="sm"><JStat label="Active users" value="18,204" delta="+3%" trend="up"><template #icon><Users /></template></JStat></JCard>
      <JCard padding="sm"><JStat label="Revenue" value="$42.1k" delta="-2%" trend="down"><template #icon><CreditCard /></template></JStat></JCard>
      <JCard padding="sm"><JStat label="Cold starts" value="312" delta="0%" trend="neutral"><template #icon><Zap /></template></JStat></JCard>
    </div>

    <JCard class="mt-3" title="Services" padding="none">
      <div class="overflow-x-auto">
        <table class="w-full text-left text-sm">
          <thead class="text-xs text-fg-muted">
            <tr class="border-b border-border-subtle dark:border-border">
              <th class="px-5 py-2.5 font-medium">Service</th>
              <th class="px-5 py-2.5 font-medium">Status</th>
              <th class="px-5 py-2.5 text-right font-medium">P95</th>
              <th class="px-5 py-2.5 text-right font-medium">Calls</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in rows" :key="row.name" class="border-b border-border-subtle last:border-0 dark:border-border">
              <td class="px-5 py-3 font-mono text-xs text-fg">{{ row.name }}</td>
              <td class="px-5 py-3"><JBadge :variant="row.variant" dot>{{ row.status }}</JBadge></td>
              <td class="px-5 py-3 text-right tabular-nums">{{ row.latency }}</td>
              <td class="px-5 py-3 text-right tabular-nums">{{ row.calls }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <template #footer>
        <JPagination v-model="page" :total="6" size="sm" />
      </template>
    </JCard>
  </div>
</template>

<script setup lang="ts">
const tab = ref('general')
const name = ref('Acme Inc.')
const url = ref('acme')
const region = ref<string | null>('fra')
const settings = reactive({ previews: true, comments: true, analytics: false })
const dirty = ref(false)

watch([name, url, region, settings], () => (dirty.value = true), { deep: true })

function save() {
  dirty.value = false
  toast.success('Settings saved')
}

const regions = [
  { value: 'fra', label: 'Frankfurt' },
  { value: 'lhr', label: 'London' },
  { value: 'iad', label: 'Washington, D.C.' },
]
</script>

<template>
  <div class="mx-auto max-w-3xl px-6 py-10">
    <h1 class="text-xl font-semibold tracking-tight text-fg">Settings</h1>
    <JTabs
      v-model="tab"
      class="mt-6"
      :items="[
        { value: 'general', label: 'General' },
        { value: 'members', label: 'Members' },
        { value: 'billing', label: 'Billing' },
      ]"
    >
      <template #general>
        <div class="flex flex-col gap-8 pt-4">
          <section class="grid gap-4 md:grid-cols-[14rem_1fr]">
            <div>
              <h2 class="text-sm font-medium text-fg">Workspace</h2>
              <p class="mt-1 text-sm text-fg-muted">Shown to everyone you invite.</p>
            </div>
            <div class="flex flex-col gap-4">
              <JInput v-model="name" label="Name" />
              <JInput v-model="url" label="URL" description="Changing it breaks existing links.">
                <template #leading><span class="text-xs">acme.app/</span></template>
              </JInput>
              <JSelect v-model="region" label="Default region" :options="regions" />
            </div>
          </section>
          <JSeparator />
          <section class="grid gap-4 md:grid-cols-[14rem_1fr]">
            <div>
              <h2 class="text-sm font-medium text-fg">Features</h2>
              <p class="mt-1 text-sm text-fg-muted">Apply to every project.</p>
            </div>
            <div class="flex flex-col gap-4">
              <JSwitch v-model="settings.previews" label="Preview deployments" description="Build every pull request." />
              <JSwitch v-model="settings.comments" label="Comments" description="Let reviewers comment on previews." />
              <JSwitch v-model="settings.analytics" label="Analytics" description="Collect anonymous usage metrics." />
            </div>
          </section>
          <JSeparator />
          <section class="grid gap-4 md:grid-cols-[14rem_1fr]">
            <div>
              <h2 class="text-sm font-medium text-danger-text">Danger zone</h2>
            </div>
            <JCard>
              <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                  <p class="text-sm font-medium text-fg">Delete workspace</p>
                  <p class="text-sm">Removes all projects and deployments. There is no undo.</p>
                </div>
                <JButton variant="destructive" size="sm">Delete…</JButton>
              </div>
            </JCard>
          </section>
        </div>
      </template>
      <template #members><p class="pt-4 text-sm text-fg-secondary">Members live here.</p></template>
      <template #billing><p class="pt-4 text-sm text-fg-secondary">Invoices and plan.</p></template>
    </JTabs>

    <div class="mt-8 flex items-center justify-end gap-3 border-t border-border-subtle pt-4 dark:border-border">
      <span v-if="dirty" class="text-sm text-fg-muted">Unsaved changes</span>
      <JButton variant="ghost" :disabled="!dirty" @click="dirty = false">Discard</JButton>
      <JButton :disabled="!dirty" @click="save">Save changes</JButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { BadgeVariant } from '@juxtui/ui'
import { Ellipsis, Mail, UserMinus } from '@lucide/vue'

const invite = ref('')
const members = ref([
  { name: 'Mara Quinn', email: 'mara@acme.com', src: '/avatars/1.svg', role: 'Owner' },
  { name: 'Theo Park', email: 'theo@acme.com', src: '/avatars/2.svg', role: 'Admin' },
  { name: 'Iris Chen', email: 'iris@acme.com', src: '/avatars/3.svg', role: 'Member' },
  { name: 'Sam Okafor', email: 'sam@acme.com', src: undefined, role: 'Invited' },
])

const roleVariant: Record<string, BadgeVariant> = { Owner: 'neutral', Admin: 'neutral', Member: 'neutral', Invited: 'warning' }

function send() {
  if (!invite.value.includes('@')) return
  members.value.push({ name: invite.value.split('@')[0]!, email: invite.value, src: undefined, role: 'Invited' })
  toast.success(`Invite sent to ${invite.value}`)
  invite.value = ''
}
</script>

<template>
  <div class="mx-auto max-w-2xl px-4 py-10">
    <JCard title="Members" :description="`${members.length} people in Acme`">
      <form class="flex gap-2" @submit.prevent="send">
        <JInput v-model="invite" type="email" placeholder="colleague@acme.com" aria-label="Email to invite" class="flex-1" />
        <JButton type="submit">Invite</JButton>
      </form>
      <ul class="mt-4 flex flex-col divide-y divide-border-subtle dark:divide-border">
        <li v-for="member in members" :key="member.email" class="flex items-center gap-3 py-3">
          <JAvatar :src="member.src" :name="member.name" />
          <div class="min-w-0 flex-1">
            <p class="truncate text-sm font-medium text-fg">{{ member.name }}</p>
            <p class="truncate text-xs text-fg-muted">{{ member.email }}</p>
          </div>
          <JBadge :variant="roleVariant[member.role]" size="sm">{{ member.role }}</JBadge>
          <JDropdownMenu placement="bottom-end">
            <template #trigger>
              <JButton variant="ghost" size="sm" icon :aria-label="`Actions for ${member.name}`"><Ellipsis /></JButton>
            </template>
            <JDropdownMenuItem><template #leading><Mail /></template>Email</JDropdownMenuItem>
            <JDropdownMenuSeparator />
            <JDropdownMenuItem destructive :disabled="member.role === 'Owner'"><template #leading><UserMinus /></template>Remove</JDropdownMenuItem>
          </JDropdownMenu>
        </li>
      </ul>
    </JCard>
  </div>
</template>

<script setup lang="ts">
import { FolderPlus, Upload } from '@lucide/vue'
</script>

<template>
  <div class="mx-auto max-w-2xl px-4 py-12">
    <JCard variant="muted" padding="lg">
      <JEmptyState
        title="No projects yet"
        description="Import a repository to deploy it, or start from a template. It takes about a minute."
      >
        <template #icon><FolderPlus /></template>
        <template #actions>
          <JButton>
            <template #leading><Upload /></template>
            Import repository
          </JButton>
          <JButton variant="outline">Browse templates</JButton>
        </template>
      </JEmptyState>
    </JCard>
  </div>
</template>

<script setup lang="ts">
import { Hexagon } from '@lucide/vue'

const email = ref('')
const password = ref('')
const remember = ref(true)
const loading = ref(false)
const error = ref('')

async function submit() {
  error.value = ''
  if (!email.value || !password.value) {
    error.value = 'Enter your email and password.'
    return
  }
  loading.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  loading.value = false
  toast.success('Signed in')
}
</script>

<template>
  <div class="flex justify-center px-4 py-12">
    <div class="w-full max-w-sm">
      <div class="mb-6 flex flex-col items-center text-center">
        <Hexagon class="size-7 text-fg" :stroke-width="1.5" />
        <h1 class="mt-4 text-xl font-semibold tracking-tight text-fg">Sign in to Acme</h1>
        <p class="mt-1 text-sm text-fg-muted">Welcome back. Pick up where you left off.</p>
      </div>
      <JCard>
        <form class="flex flex-col gap-4" novalidate @submit.prevent="submit">
          <JBanner v-if="error" variant="destructive" :description="error" />
          <JInput v-model="email" label="Email" type="email" autocomplete="email" placeholder="you@company.com" />
          <JInput v-model="password" label="Password" type="password" autocomplete="current-password" />
          <div class="flex items-center justify-between">
            <JCheckbox v-model="remember" label="Keep me signed in" />
            <a href="#" class="text-sm text-fg-muted hover:text-fg">Forgot password?</a>
          </div>
          <JButton type="submit" block :loading="loading">Sign in</JButton>
          <JSeparator label="or" />
          <JButton variant="outline" block>Continue with SSO</JButton>
        </form>
      </JCard>
      <p class="mt-6 text-center text-sm text-fg-muted">
        No account? <a href="#" class="font-medium text-fg hover:underline">Create one</a>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const topic = ref<string | number | null>('question')
const message = ref('')
const rating = ref(4)
</script>

<template>
  <div class="mx-auto max-w-lg px-4 py-10">
    <JCard title="Send feedback" description="We read everything. Replies usually within a day.">
      <form class="flex flex-col gap-5" @submit.prevent="toast.success('Thanks, we got it')">
        <JRadioGroup v-model="topic" label="What’s it about?" orientation="horizontal">
          <JRadio value="question" label="Question" />
          <JRadio value="bug" label="Bug" />
          <JRadio value="idea" label="Idea" />
        </JRadioGroup>
        <JTextarea v-model="message" label="Message" placeholder="Tell us what happened, or what you’d like to see." autoresize :rows="4" />
        <div class="flex flex-col gap-2">
          <span class="text-sm font-medium text-fg">How’s your experience so far?</span>
          <JRating v-model="rating" label="Experience rating" />
        </div>
        <div class="flex justify-end gap-2">
          <JButton variant="ghost">Cancel</JButton>
          <JButton type="submit">Send</JButton>
        </div>
      </form>
    </JCard>
  </div>
</template>