import { CheckCircle, MessageSquare, Headphones, UserCheck } from 'lucide-react';

const steps = [
  { icon: CheckCircle, label: '选择产品' },
  { icon: MessageSquare, label: '联系销售' },
  { icon: Headphones, label: '沟通业务' },
  { icon: UserCheck, label: '开通账户' },
];

export default function Process() {
  return (
    <section className="px-6 py-section bg-background">
      <h2 className="text-3xl font-semibold text-center mb-12">开通流程</h2>
      <div className="max-w-screen-lg mx-auto flex justify-between items-center">
        {steps.map(({ icon: Icon, label }, idx) => (
          <div key={label} className="flex flex-col items-center text-center">
            <Icon className="h-12 w-12 text-accent mb-4" />
            <div className="h-0.5 bg-accent w-24 mb-2"></div>
            <span className="text-base text-primary">{label}</span>
          </div>
        ))}
      </div>
    </section>
  );
}