---
// .card-gradient + .card-gradient-{preset} come from core/scss/ui/_cards.scss
// (bundled in the base tabler.css — no cssPlugins needed here).
// Composition: one hero card that carries the gradient as emphasis — the
// workspace's plan, with price, what it includes and the upgrade action — and
// under it three small KPI cards from the same story, each on a different
// preset. The accent colors are picked per card rather than derived from the
// preset, so icons and bars stay legible on the tinted surface in dark mode.
import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
import Subheader from '@ui/Subheader.astro'
import Avatar from '@ui/Avatar.astro'
import Progress from '@ui/Progress.astro'
import Button from '@ui/Button.astro'
import Icon from '@ui/Icon.astro'
import Badge from '@ui/Badge.astro'

const plan = {
  name: 'Pro',
  price: '$29',
  period: 'per seat / month',
  includes: ['Unlimited projects', 'Advanced reports', 'Priority support'],
}

const kpis = [
  { preset: 'sun', accent: 'orange', icon: 'users', label: 'Seats', value: '48 / 60', progress: 80 },
  { preset: 'snow', accent: 'cyan', icon: 'database', label: 'Storage', value: '1.2 TB', progress: 60 },
  { preset: 'gold', accent: 'yellow', icon: 'calendar', label: 'Renews in', value: '12 days', progress: 35 },
]
---

<ScreenshotLayout title="Card gradient" columns={2}>
  <div class="row row-cards">
    <div class="col-12">
      <div class="card card-gradient card-gradient-ocean">
        <div class="card-body">
          <div class="row g-4 align-items-center">
            <div class="col">
              <div class="d-flex align-items-center gap-2 mb-2">
                <Subheader as="h4" class="mb-0">Current plan</Subheader>
                <Badge text="Active" color="azure" />
              </div>
              <div class="d-flex align-items-baseline gap-2 mb-3">
                <div class="h1 mb-0">{plan.name}</div>
                <div class="h2 mb-0 fw-normal">{plan.price}</div>
                <div class="text-secondary">{plan.period}</div>
              </div>
              <ul class="list-unstyled space-y-1 mb-0">
                {
                  plan.includes.map((item) => (
                    <li class="d-flex align-items-center gap-2">
                      <Icon name="check" class="text-azure" />
                      <span>{item}</span>
                    </li>
                  ))
                }
              </ul>
            </div>
            <div class="col-auto text-end">
              <Button text="Upgrade to Business" color="azure" icon="arrow-up-right" />
              <div class="text-secondary small mt-2">Next invoice: $1,392 on Oct 1</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {
      kpis.map((kpi) => (
        <div class="col-4">
          <div class={`card card-gradient card-gradient-${kpi.preset}`}>
            <div class="card-body">
              <div class="d-flex align-items-center gap-3 mb-3">
                <Avatar icon={kpi.icon} color={kpi.accent} />
                <div>
                  <Subheader as="h4" class="mb-0">
                    {kpi.label}
                  </Subheader>
                  <div class="h3 mb-0">{kpi.value}</div>
                </div>
              </div>
              <Progress value={kpi.progress} color={kpi.accent} size="sm" />
            </div>
          </div>
        </div>
      ))
    }
  </div>
</ScreenshotLayout>