/**
 * Globals Upgrade Tab — shown to Free users when they click "Globals"
 */

import { FeatureUpgradeTab } from '@/components/pro/feature-upgrade-tab'
import {
  Palette,
  Type,
  Paintbrush,
  RefreshCw,
  Layers,
  Globe,
} from 'lucide-react'

export function GlobalsUpgradeTab() {
  return (
    <FeatureUpgradeTab
      headline="Global Design System"
      description="Define your brand colors and typography once — every Swift Commerce feature inherits them automatically. No more setting the same colors across 15+ features."
      features={[
        {
          icon: Palette,
          title: 'Global Colors',
          description:
            'Create a shared color palette (primary, secondary, accent, etc.) that every front-end feature uses as its default.',
        },
        {
          icon: Type,
          title: 'Global Typography',
          description:
            'Choose your heading and body fonts with weight, size, and transform settings — applied everywhere at once.',
        },
        {
          icon: Paintbrush,
          title: 'CSS Custom Properties',
          description:
            'Colors and fonts are output as CSS variables so your theme and custom CSS can reference them too.',
        },
        {
          icon: RefreshCw,
          title: 'Instant Propagation',
          description:
            'Change your primary color once and every button, link, and accent across all features updates instantly.',
        },
        {
          icon: Layers,
          title: 'Per-Feature Override',
          description:
            'Features still have their own Customize Design tab — override globals on a per-feature basis when needed.',
        },
        {
          icon: Globe,
          title: 'Google Fonts Library',
          description:
            'Search and preview 120+ Google Fonts. Pick your brand typefaces from a curated, performance-friendly list.',
        },
      ]}
      checklist={[
        'Unlimited custom color tokens',
        'Headings & body typography presets',
        'Google Fonts with live preview',
        'CSS custom properties on frontend',
        'One-click brand-wide updates',
        'Per-feature override support',
      ]}
    />
  )
}