import { CheckCircle2, Zap, BarChart3, Bell, TrendingUp } from 'lucide-react'

const steps = [
  { icon: Zap, label: 'Client submits booking form online', color: '#6366f1' },
  { icon: CheckCircle2, label: 'Auto-quoted & confirmed instantly', color: '#22c55e' },
  { icon: Bell, label: 'Owner notified via dashboard', color: '#6366f1' },
  { icon: BarChart3, label: 'Job tracked end-to-end', color: '#38bdf8' },
  { icon: TrendingUp, label: 'Reports generated automatically', color: '#22c55e' },
]

export function WorkflowAfter() {
  return (
    <div className="w-full">
      <div
        className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium mb-6"
        style={{
          background: 'rgba(34, 197, 94, 0.12)',
          border: '1px solid rgba(34, 197, 94, 0.30)',
          color: '#86efac',
        }}
      >
        <CheckCircle2 className="w-3 h-3" />
        With DaliTek
      </div>

      <div className="space-y-3">
        {steps.map((step, i) => (
          <div
            key={i}
            className="flex items-center gap-3 p-3.5 rounded-xl"
            style={{
              background: 'var(--dt-bg-elevated)',
              border: `1px solid ${step.color}20`,
            }}
          >
            <div
              className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
              style={{ background: `${step.color}15`, border: `1px solid ${step.color}30` }}
            >
              <step.icon className="w-4 h-4" style={{ color: step.color }} />
            </div>
            <span className="text-sm" style={{ color: 'var(--dt-text-secondary)' }}>
              {step.label}
            </span>
            <div
              className="ml-auto text-xs font-medium px-2 py-0.5 rounded"
              style={{ background: 'rgba(34, 197, 94, 0.10)', color: '#86efac' }}
            >
              Auto
            </div>
          </div>
        ))}
      </div>

      <div
        className="mt-6 p-4 rounded-xl text-center"
        style={{
          background: 'rgba(99, 102, 241, 0.08)',
          border: '1px solid var(--dt-border-accent)',
        }}
      >
        <p className="text-sm font-semibold" style={{ color: 'var(--dt-accent-bright)' }}>
          12 hours/week recovered — automatically
        </p>
      </div>
    </div>
  )
}