<script setup lang="ts">
import robotAvatarCyan from "~/assets/images/hero/robots/robot-avatar-cyan-v1.webp";

const { t } = useI18n()
const comparisonRobotRef = ref<HTMLElement | null>(null)
const showComparisonRobotBubble = ref(false)
let comparisonRobotObserver: IntersectionObserver | null = null

interface CellValue {
  status: string
  note?: string
  noteLink?: string
}

interface ComparisonRow {
  feature: string
  us: CellValue
  gastown: CellValue
  paperclip: CellValue
  cursor: CellValue
  claudeCli: CellValue
}

const rows = computed<ComparisonRow[]>(() => [
  {
    feature: t('comparison.features.crossTeam'),
    us: { status: 'yes' },
    gastown: { status: 'partial', note: 'Cross-rig coordination' },
    paperclip: { status: 'partial', note: 'Company-scoped org work' },
    cursor: { status: 'na' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.agentMessaging'),
    us: { status: 'yes', note: 'Native real-time mailbox' },
    gastown: { status: 'yes', note: 'Mailboxes + handoffs' },
    paperclip: { status: 'partial', note: 'Comments + @mentions' },
    cursor: { status: 'no' },
    claudeCli: { status: 'yes', note: 'Team mailbox, no UI' },
  },
  {
    feature: t('comparison.features.linkedTasks'),
    us: { status: 'yes', note: 'Cross-refs + dependencies' },
    gastown: { status: 'partial', note: 'Beads deps + convoys' },
    paperclip: { status: 'yes', note: 'Goals, parents, blockers' },
    cursor: { status: 'no' },
    claudeCli: { status: 'yes', note: 'Shared task list' },
  },
  {
    feature: t('comparison.features.sessionAnalysis'),
    us: { status: 'yes', note: 'Task logs + token tracking' },
    gastown: { status: 'partial', note: 'Session recall, feed, OTEL' },
    paperclip: { status: 'partial', note: 'Run transcripts + cost audit' },
    cursor: { status: 'no' },
    claudeCli: { status: 'partial', note: 'Usage command, no UI' },
  },
  {
    feature: t('comparison.features.taskAttachments'),
    us: { status: 'yes', note: 'Auto-attach, agents read & attach' },
    gastown: { status: 'no', note: 'Not task-level' },
    paperclip: { status: 'yes', note: 'Docs, attachments, work products' },
    cursor: { status: 'partial', note: 'Chat session only' },
    claudeCli: { status: 'partial', note: 'Chat images only' },
  },
  {
    feature: t('comparison.features.hunkReview'),
    us: { status: 'yes', note: 'Accept / reject individual hunks' },
    gastown: { status: 'no' },
    paperclip: { status: 'no', note: 'Bring your own review' },
    cursor: { status: 'yes' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.codeEditor'),
    us: { status: 'yes', note: 'With Git support' },
    gastown: { status: 'no' },
    paperclip: { status: 'no', note: 'Control plane, not editor' },
    cursor: { status: 'yes', note: 'Full IDE' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.fullAutonomy'),
    us: { status: 'yes', note: 'Create, assign, review end-to-end' },
    gastown: { status: 'yes', note: 'Mayor, convoys, recovery' },
    paperclip: { status: 'yes', note: 'Heartbeats + governance' },
    cursor: { status: 'partial', note: 'Background agents, not teams' },
    claudeCli: { status: 'yes', note: 'Experimental CLI teams' },
  },
  {
    feature: t('comparison.features.taskDeps'),
    us: { status: 'yes', note: 'Guaranteed ordering' },
    gastown: { status: 'yes', note: 'DAG waves via Beads' },
    paperclip: { status: 'yes', note: 'Blockers + execution locks' },
    cursor: { status: 'no' },
    claudeCli: { status: 'yes', note: 'Team task deps, no UI' },
  },
  {
    feature: t('comparison.features.reviewWorkflow'),
    us: { status: 'yes', note: 'Agents review each other' },
    gastown: { status: 'partial', note: 'Refinery merge queue' },
    paperclip: { status: 'yes', note: 'Approvals + governance' },
    cursor: { status: 'partial', note: 'PR/BugBot only' },
    claudeCli: { status: 'yes', note: 'Team review, no UI' },
  },
  {
    feature: t('comparison.features.zeroSetup'),
    us: { status: 'yes', note: 'Guided runtime setup' },
    gastown: { status: 'no', note: 'Go/Git/Dolt/Beads/tmux' },
    paperclip: { status: 'partial', note: 'npx + embedded Postgres' },
    cursor: { status: 'yes' },
    claudeCli: { status: 'partial', note: 'CLI + env flag' },
  },
  {
    feature: t('comparison.features.kanban'),
    us: { status: 'yes', note: '5 columns, real-time' },
    gastown: { status: 'no', note: 'Dashboard, not Kanban' },
    paperclip: { status: 'yes', note: '7 columns, drag-and-drop' },
    cursor: { status: 'no' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.execLog'),
    us: { status: 'yes', note: 'Tool calls, reasoning, timeline' },
    gastown: { status: 'partial', note: 'Feed, OTEL, dashboard' },
    paperclip: { status: 'yes', note: 'Run transcripts + ledger' },
    cursor: { status: 'partial', note: 'Agent chat + terminal' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.liveProcesses'),
    us: { status: 'yes', note: 'View, stop, open URLs' },
    gastown: { status: 'partial', note: 'Agent health dashboard' },
    paperclip: { status: 'partial', note: 'Manual services + previews' },
    cursor: { status: 'partial', note: 'Native terminal only' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.perTaskReview'),
    us: { status: 'yes', note: 'Accept / reject / comment' },
    gastown: { status: 'partial', note: 'Merge queue, no diff UI' },
    paperclip: { status: 'partial', note: 'PR/work products, no diff UI' },
    cursor: { status: 'yes', note: 'BugBot on PRs' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.flexAutonomy'),
    us: { status: 'yes', note: 'Per-action approvals + notifications' },
    gastown: { status: 'yes', note: 'Gates, escalation, recovery' },
    paperclip: { status: 'yes', note: 'Board approvals, pause, terminate' },
    cursor: { status: 'partial', note: 'BG agents auto-run commands' },
    claudeCli: { status: 'yes', note: 'Permissions + hooks' },
  },
  {
    feature: t('comparison.features.worktree'),
    us: { status: 'yes', note: 'Optional' },
    gastown: { status: 'yes', note: 'Core primitive' },
    paperclip: { status: 'yes', note: 'Worktrees / branches' },
    cursor: { status: 'partial', note: 'Background branches/VMs' },
    claudeCli: { status: 'partial', note: 'Manual worktrees' },
  },
  {
    feature: t('comparison.features.multiAgent'),
    us: { status: 'yes', note: 'Claude, Codex + OpenCode teammates' },
    gastown: { status: 'yes', note: 'Claude, Codex, Gemini, Copilot + more' },
    paperclip: { status: 'yes', note: 'BYO agents: Claude, Codex, Cursor/OpenCode, HTTP' },
    cursor: { status: 'partial', note: 'Multi-model agents, no team backend' },
    claudeCli: { status: 'partial', note: 'Claude-only experimental teams' },
  },
  {
    feature: t('comparison.features.orgGovernance'),
    us: { status: 'partial', note: 'Roles + approvals, no org chart' },
    gastown: { status: 'partial', note: 'Roles + escalation' },
    paperclip: { status: 'yes', note: 'Org chart + board governance' },
    cursor: { status: 'partial', note: 'Team admin only' },
    claudeCli: { status: 'no' },
  },
  {
    feature: t('comparison.features.budgetControls'),
    us: { status: 'partial', note: 'Cost/token visibility, no hard caps' },
    gastown: { status: 'partial', note: 'Cost tiers + digest, no hard caps' },
    paperclip: { status: 'yes', note: 'Per-agent budgets + hard stops' },
    cursor: { status: 'partial', note: 'Usage + BG spend limits' },
    claudeCli: { status: 'partial', note: '/usage + workspace limits' },
  },
  {
    feature: t('comparison.features.price'),
    us: { status: 'free', note: 'OSS, provider access needed' },
    gastown: { status: 'free', note: 'OSS, runtime plans needed' },
    paperclip: { status: 'free', note: 'OSS, self-hosted + infra' },
    cursor: { status: 'text', note: 'Free + paid usage' },
    claudeCli: { status: 'text', note: 'Claude plan or API usage' },
  },
])

const competitors = [
  { key: 'us', name: 'Agent Teams', highlight: true },
  { key: 'gastown', name: 'Gastown' },
  { key: 'paperclip', name: 'Paperclip' },
  { key: 'cursor', name: 'Cursor' },
  { key: 'claudeCli', name: 'Claude Code CLI' },
]

const sourceLinks = [
  {
    label: 'detailed research notes',
    href: 'https://github.com/777genius/agent-teams-ai/blob/main/docs/research/gastown-paperclip-comparison-2026-05-16.md',
  },
  { label: 'Gastown README', href: 'https://github.com/gastownhall/gastown' },
  {
    label: 'Gastown provider guide',
    href: 'https://github.com/gastownhall/gastown/blob/main/docs/agent-provider-integration.md',
  },
  {
    label: 'Gastown scheduler',
    href: 'https://github.com/gastownhall/gastown/blob/main/docs/design/scheduler.md',
  },
  { label: 'Gastown release', href: 'https://github.com/gastownhall/gastown/releases/tag/v1.1.0' },
  { label: 'Paperclip README', href: 'https://github.com/paperclipai/paperclip' },
  {
    label: 'Paperclip adapters',
    href: 'https://github.com/paperclipai/paperclip/blob/master/docs/adapters/overview.md',
  },
  {
    label: 'Paperclip budgets',
    href: 'https://github.com/paperclipai/paperclip/blob/master/docs/guides/board-operator/costs-and-budgets.md',
  },
  {
    label: 'Paperclip runtime services',
    href: 'https://github.com/paperclipai/paperclip/blob/master/docs/guides/board-operator/execution-workspaces-and-runtime-services.md',
  },
  {
    label: 'Paperclip Kanban source',
    href: 'https://github.com/paperclipai/paperclip/blob/master/ui/src/components/KanbanBoard.tsx',
  },
  {
    label: 'Paperclip work products',
    href: 'https://github.com/paperclipai/paperclip/blob/master/packages/shared/src/validators/work-product.ts',
  },
  { label: 'Paperclip release', href: 'https://github.com/paperclipai/paperclip/releases/tag/v2026.513.0' },
  { label: 'Cursor Background Agents', href: 'https://docs.cursor.com/en/background-agents' },
  { label: 'Cursor Diffs & Review', href: 'https://docs.cursor.com/en/agent/review' },
  { label: 'Cursor Bugbot', href: 'https://docs.cursor.com/en/bugbot' },
  { label: 'Cursor pricing', href: 'https://docs.cursor.com/en/account/usage' },
  { label: 'Claude Code agent teams', href: 'https://code.claude.com/docs/en/agent-teams' },
  { label: 'Claude Code subagents', href: 'https://code.claude.com/docs/en/sub-agents' },
  { label: 'Claude Code workflows', href: 'https://code.claude.com/docs/en/common-workflows' },
  { label: 'Claude Code costs', href: 'https://code.claude.com/docs/en/costs' },
  { label: 'Claude pricing', href: 'https://claude.com/pricing' },
]

onMounted(() => {
  if (!comparisonRobotRef.value) return

  comparisonRobotObserver = new IntersectionObserver(
    ([entry]) => {
      if (!entry?.isIntersecting) return
      showComparisonRobotBubble.value = true
      comparisonRobotObserver?.disconnect()
      comparisonRobotObserver = null
    },
    {
      rootMargin: '0px 0px -12% 0px',
      threshold: 0.35,
    },
  )

  comparisonRobotObserver.observe(comparisonRobotRef.value)
})

onUnmounted(() => {
  comparisonRobotObserver?.disconnect()
  comparisonRobotObserver = null
})

function getCellClass(cell: CellValue): string {
  switch (cell.status) {
    case 'yes': return 'comparison-table__cell--yes'
    case 'no': return 'comparison-table__cell--no'
    case 'partial': return 'comparison-table__cell--partial'
    case 'na': return 'comparison-table__cell--na'
    case 'free': return 'comparison-table__cell--free'
    case 'soon': return 'comparison-table__cell--soon'
    case 'text': return 'comparison-table__cell--text'
    default: return 'comparison-table__cell--text'
  }
}

function getStatusIcon(status: string): string {
  switch (status) {
    case 'yes': return '\u2713'
    case 'no': return '\u2717'
    case 'partial': return '\u25D2'
    case 'na': return 'N/A'
    case 'free': return 'Free'
    case 'soon': return '\uD83D\uDCC5'
    default: return ''
  }
}
</script>

<template>
  <section id="comparison" class="comparison-section section anchor-offset">
    <v-container>
      <div class="comparison-section__header">
        <h2 class="comparison-section__title">
          {{ t("comparison.sectionTitle") }}
        </h2>
        <p class="comparison-section__subtitle">
          {{ t("comparison.sectionSubtitle") }}
        </p>
      </div>

      <div class="comparison-table__wrap">
        <span
          ref="comparisonRobotRef"
          class="comparison-table__robot"
          aria-hidden="true"
        >
          <Transition name="comparison-robot-bubble">
            <RobotSpeechBubble
              v-if="showComparisonRobotBubble"
              class="comparison-table__robot-bubble"
              tail="right"
            >
              {{ t("comparison.robotBubble") }}
            </RobotSpeechBubble>
          </Transition>
          <img
            class="comparison-table__robot-image"
            :src="robotAvatarCyan"
            alt=""
            loading="lazy"
            decoding="async"
            draggable="false"
          >
        </span>
        <table class="comparison-table">
          <thead>
            <tr>
              <th class="comparison-table__th comparison-table__th--feature">
                {{ t("comparison.feature") }}
              </th>
              <th
                v-for="comp in competitors"
                :key="comp.key"
                class="comparison-table__th"
                :class="{ 'comparison-table__th--highlight': comp.highlight }"
              >
                {{ comp.name }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(row, index) in rows"
              :key="index"
              class="comparison-table__row"
            >
              <td class="comparison-table__td comparison-table__td--feature">
                {{ row.feature }}
              </td>
              <td
                v-for="comp in competitors"
                :key="comp.key"
                class="comparison-table__td"
                :class="[
                  getCellClass(row[comp.key as keyof ComparisonRow] as CellValue),
                  { 'comparison-table__td--highlight-col': comp.highlight }
                ]"
              >
                <div class="comparison-table__cell-inner">
                  <span class="comparison-table__cell-content">
                    <template v-if="(row[comp.key as keyof ComparisonRow] as CellValue).status === 'text'">
                      {{ (row[comp.key as keyof ComparisonRow] as CellValue).note }}
                    </template>
                    <template v-else>
                      {{ getStatusIcon((row[comp.key as keyof ComparisonRow] as CellValue).status) }}
                    </template>
                  </span>
                  <a
                    v-if="(row[comp.key as keyof ComparisonRow] as CellValue).noteLink && (row[comp.key as keyof ComparisonRow] as CellValue).status !== 'text'"
                    :href="(row[comp.key as keyof ComparisonRow] as CellValue).noteLink"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="comparison-table__cell-note comparison-table__cell-note--link"
                  >
                    {{ (row[comp.key as keyof ComparisonRow] as CellValue).note }}
                  </a>
                  <span
                    v-else-if="(row[comp.key as keyof ComparisonRow] as CellValue).note && (row[comp.key as keyof ComparisonRow] as CellValue).status !== 'text'"
                    class="comparison-table__cell-note"
                  >
                    {{ (row[comp.key as keyof ComparisonRow] as CellValue).note }}
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <p class="comparison-section__sources">
        Fact sources checked on May 16, 2026:
        <template v-for="(source, index) in sourceLinks" :key="source.href">
          <a :href="source.href" target="_blank" rel="noopener noreferrer">
            {{ source.label }}
          </a><span v-if="index < sourceLinks.length - 1">, </span>
        </template>.
      </p>
    </v-container>
  </section>
</template>

<style scoped>
.comparison-section {
  position: relative;
  --comparison-sticky-header-offset: 76px;
}

.comparison-section__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
  position: relative;
  z-index: 1;
}

.comparison-section__title {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #e0e6ff 0%, #00f0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.comparison-section__subtitle {
  font-size: 1.1rem;
  color: #8892b0;
  line-height: 1.6;
  margin: 0;
}

/* Table wrapper */
.comparison-table__wrap {
  overflow-x: clip;
  border-radius: 16px;
  border: 1px solid rgba(0, 240, 255, 0.15);
  background: rgba(10, 10, 15, 0.6);
  backdrop-filter: blur(12px);
  position: relative;
  z-index: 1;
}

.comparison-table__robot {
  position: absolute;
  right: clamp(28px, 7vw, 96px);
  bottom: calc(100% - 5px);
  z-index: 4;
  width: clamp(82px, 7.2vw, 124px);
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: translateY(4px) rotate(-0.5deg);
  transform-origin: center bottom;
  animation: comparisonRobotIdle 5.2s ease-in-out infinite;
  filter:
    drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 18px rgba(0, 234, 255, 0.26));
}

.comparison-table__robot-image {
  display: block;
  width: 100%;
  height: auto;
  transform:
    scaleX(-1)
    rotate(2deg);
  transform-origin: center bottom;
  user-select: none;
}

.comparison-table__robot::selection {
  background: transparent;
}

.comparison-table__robot-bubble {
  --robot-bubble-position: absolute;
  --robot-bubble-min-width: 96px;
  --robot-bubble-max-width: 190px;
  --robot-bubble-min-height: 42px;
  --robot-bubble-font-size: 0.66rem;
  --robot-bubble-padding: 8px 26px 8px 13px;

  top: 10px;
  right: calc(100% + 12px);
  transform: rotate(-5deg);
  transform-origin: right bottom;
  animation: comparisonRobotBubbleFloat 2.6s ease-in-out 0.42s infinite;
}

.comparison-robot-bubble-enter-active,
.comparison-robot-bubble-leave-active {
  transition:
    opacity 0.26s ease,
    filter 0.26s ease;
}

.comparison-robot-bubble-enter-active {
  animation: comparisonRobotBubblePop 0.52s cubic-bezier(0.18, 0.9, 0.2, 1.24);
}

.comparison-robot-bubble-enter-from,
.comparison-robot-bubble-leave-to {
  opacity: 0;
  filter: blur(2px);
}

@keyframes comparisonRobotIdle {
  0%,
  100% {
    transform: translate3d(0, 4px, 0) rotate(-0.55deg);
  }

  50% {
    transform: translate3d(1px, 3px, 0) rotate(0.75deg);
  }
}

@keyframes comparisonRobotBubblePop {
  0% {
    opacity: 0;
    transform: translate3d(14px, 18px, 0) scale(0.48) rotate(-13deg);
  }

  58% {
    opacity: 1;
    transform: translate3d(-3px, -4px, 0) scale(1.1) rotate(-4deg);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(-5deg);
  }
}

@keyframes comparisonRobotBubbleFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-5deg);
  }

  50% {
    transform: translate3d(0, -2px, 0) rotate(-4deg);
  }
}

.comparison-section__sources {
  max-width: 1040px;
  margin: 18px auto 0;
  color: rgba(136, 146, 176, 0.82);
  font-size: 0.78rem;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.comparison-section__sources a {
  color: #00d4e6;
  text-decoration: none;
}

.comparison-section__sources a:hover {
  color: #00f0ff;
  text-decoration: underline;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
  font-size: 0.85rem;
}

/* Header */
.comparison-table thead {
  position: static;
}

.comparison-table__th {
  position: sticky;
  top: var(--comparison-sticky-header-offset);
  z-index: 3;
  padding: 16px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8892b0;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  white-space: nowrap;
  font-family: "JetBrains Mono", monospace;
  background: rgb(10, 10, 15);
}

.comparison-table__th--feature {
  text-align: left;
  padding-left: 20px;
  min-width: 180px;
}

.comparison-table__th--highlight {
  color: #00f0ff;
  background: rgba(0, 18, 20, 0.97);
  z-index: 4;
}

.comparison-table__th--highlight::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00f0ff, #39ff14);
}

/* Rows */
.comparison-table__row {
  transition: background-color 0.15s ease;
}

.comparison-table__row:hover {
  background: rgba(0, 240, 255, 0.03);
}

.comparison-table__row:not(:last-child) .comparison-table__td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Cells */
.comparison-table__td {
  padding: 10px 8px;
  text-align: center;
  vertical-align: middle;
}

.comparison-table__td--feature {
  text-align: left;
  padding-left: 20px;
  color: #e0e6ff;
  font-weight: 500;
  font-size: 0.85rem;
}

.comparison-table__td--highlight-col {
  background: rgba(0, 240, 255, 0.04);
}

.comparison-table__cell-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.comparison-table__cell-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}

.comparison-table__cell-note {
  font-size: 0.78rem;
  color: #6b7994;
  line-height: 1.3;
  max-width: 140px;
  text-align: center;
  white-space: normal;
}

.comparison-table__cell-note--link {
  color: #00d4e6;
  text-decoration: underline;
  text-decoration-color: rgba(0, 212, 230, 0.3);
  text-underline-offset: 2px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.comparison-table__cell-note--link:hover {
  color: #00f0ff;
  text-decoration-color: rgba(0, 240, 255, 0.6);
}

/* Cell status variants */
.comparison-table__cell--yes .comparison-table__cell-content {
  color: #39ff14;
  background: rgba(57, 255, 20, 0.1);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.comparison-table__cell--no .comparison-table__cell-content {
  color: #ff4757;
  background: rgba(255, 71, 87, 0.08);
  opacity: 0.6;
}

.comparison-table__cell--partial .comparison-table__cell-content {
  color: #ffd700;
  background: rgba(255, 215, 0, 0.08);
}

.comparison-table__cell--na .comparison-table__cell-content {
  color: #4a5568;
  background: transparent;
}

.comparison-table__cell--soon .comparison-table__cell-content {
  width: auto;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: #00f0ff;
  background: rgba(0, 240, 255, 0.08);
  font-family: "JetBrains Mono", monospace;
}

.comparison-table__cell--free .comparison-table__cell-content,
.comparison-table__cell--text .comparison-table__cell-content {
  width: auto;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
}

.comparison-table__cell--free .comparison-table__cell-content {
  color: #39ff14;
  background: rgba(57, 255, 20, 0.1);
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.comparison-table__cell--text .comparison-table__cell-content {
  color: #8892b0;
  background: rgba(255, 255, 255, 0.04);
}

/* Highlight column — our product */
.comparison-table__td--highlight-col.comparison-table__cell--yes .comparison-table__cell-content {
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.2);
}

.comparison-table__td--highlight-col.comparison-table__cell--free .comparison-table__cell-content {
  box-shadow: 0 0 12px rgba(57, 255, 20, 0.2);
}

/* Light theme */
.v-theme--light .comparison-section__title {
  background: linear-gradient(135deg, #1e293b 0%, #0891b2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.v-theme--light .comparison-section__subtitle {
  color: #475569;
}

.v-theme--light .comparison-table__wrap {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 180, 200, 0.2);
}

.v-theme--light .comparison-section__sources {
  color: rgba(71, 85, 105, 0.82);
}

.v-theme--light .comparison-section__sources a {
  color: #0891b2;
}

.v-theme--light .comparison-section__sources a:hover {
  color: #0e7490;
}

.v-theme--light .comparison-table__th {
  color: #64748b;
  border-bottom-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.95);
}

.v-theme--light .comparison-table__th--highlight {
  color: #0891b2;
  background: rgba(240, 253, 255, 0.97);
}

.v-theme--light .comparison-table__th--highlight::after {
  background: linear-gradient(90deg, #0891b2, #059669);
}

.v-theme--light .comparison-table__td--feature {
  color: #1e293b;
}

.v-theme--light .comparison-table__row:hover {
  background: rgba(8, 145, 178, 0.03);
}

.v-theme--light .comparison-table__row:not(:last-child) .comparison-table__td {
  border-bottom-color: rgba(0, 0, 0, 0.05);
}

.v-theme--light .comparison-table__td--highlight-col {
  background: rgba(8, 145, 178, 0.04);
}

.v-theme--light .comparison-table__cell-note {
  color: #94a3b8;
}

.v-theme--light .comparison-table__cell-note--link {
  color: #0891b2;
  text-decoration-color: rgba(8, 145, 178, 0.3);
}

.v-theme--light .comparison-table__cell-note--link:hover {
  color: #0e7490;
  text-decoration-color: rgba(14, 116, 144, 0.6);
}

.v-theme--light .comparison-table__cell--yes .comparison-table__cell-content {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  text-shadow: none;
}

.v-theme--light .comparison-table__cell--no .comparison-table__cell-content {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}

.v-theme--light .comparison-table__cell--partial .comparison-table__cell-content {
  color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}

.v-theme--light .comparison-table__cell--free .comparison-table__cell-content {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  text-shadow: none;
}

.v-theme--light .comparison-table__cell--soon .comparison-table__cell-content {
  color: #0891b2;
  background: rgba(8, 145, 178, 0.08);
}

.v-theme--light .comparison-table__cell--text .comparison-table__cell-content {
  color: #64748b;
  background: rgba(0, 0, 0, 0.04);
}

/* Responsive */
@media (max-width: 960px) {
  .comparison-section {
    --comparison-sticky-header-offset: 60px;
  }

  .comparison-table__wrap {
    overflow-x: auto;
  }

  .comparison-section__title {
    font-size: 1.85rem;
  }

  .comparison-section__header {
    margin-bottom: 40px;
  }

  .comparison-section__subtitle {
    font-size: 1rem;
  }
}

@media (min-width: 1600px) {
  .comparison-section {
    --comparison-sticky-header-offset: 124px;
  }
}

@media (max-width: 600px) {
  .comparison-section__title {
    font-size: 1.6rem;
  }

  .comparison-section__header {
    margin-bottom: 32px;
  }

  .comparison-table {
    font-size: 0.8rem;
  }

  .comparison-table__th {
    padding: 12px 8px;
    font-size: 0.7rem;
  }

  .comparison-table__td {
    padding: 8px 6px;
  }

  .comparison-table__td--feature {
    padding-left: 14px;
    font-size: 0.8rem;
  }

  .comparison-table__cell-note {
    font-size: 0.7rem;
    max-width: 110px;
  }
}
</style>
