'use client';

import React from 'react';
import { 
  Search, 
  MousePointer, 
  CreditCard, 
  Car,
  TrendingUp,
} from 'lucide-react';
import { WorkflowMockup, WorkflowStep } from '@/components/mockups/WorkflowMockup';

const WORKFLOW_STEPS: WorkflowStep[] = [
  {
    id: 1,
    icon: Search,
    title: 'Browse Leagues',
    description: 'Find leagues that match your target audience',
    color: 'text-primary-blue',
  },
  {
    id: 2,
    icon: MousePointer,
    title: 'Select Tier',
    description: 'Choose main or secondary sponsorship slot',
    color: 'text-purple-400',
  },
  {
    id: 3,
    icon: CreditCard,
    title: 'Complete Payment',
    description: 'Secure payment with automatic invoicing',
    color: 'text-warning-amber',
  },
  {
    id: 4,
    icon: Car,
    title: 'Logo Placement',
    description: 'Your brand on liveries and league pages',
    color: 'text-performance-green',
  },
  {
    id: 5,
    icon: TrendingUp,
    title: 'Track Results',
    description: 'Monitor impressions and engagement',
    color: 'text-primary-blue',
  },
];

export function SponsorWorkflowMockup() {
  return <WorkflowMockup steps={WORKFLOW_STEPS} />;
}