const steps = [
  { step:'01', title:'Discover', desc:'Browse curated vendors across every category. Filter by district, budget, and style.' },
  { step:'02', title:'Plan', desc:'Use your planner dashboard to track tasks, manage your budget, and organize your timeline.' },
  { step:'03', title:'Contract', desc:'Review, negotiate, and digitally sign contracts — with a full audit trail for peace of mind.' },
  { step:'04', title:'Celebrate', desc:'Everything is organized, confirmed, and ready. Now enjoy your perfect day.' },
]

export default function HowItWorks() {
  return (
    <section className="py-20 bg-white">
      <div className="wedding-section">
        <div className="text-center mb-16">
          <p className="text-gold-400 font-heading text-sm tracking-[0.2em] uppercase mb-3">Simple steps</p>
          <h2 className="font-heading text-3xl md:text-4xl font-semibold text-charcoal-700">How it works</h2>
          <div className="wedding-divider mt-6" />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
          {steps.map((s,i) => (
            <div key={s.step} className="text-center relative">
              {i < steps.length - 1 && <div className="hidden md:block absolute top-8 left-[60%] w-[80%] h-px bg-gradient-to-r from-gold-200 to-gold-100" />}
              <div className="w-16 h-16 mx-auto rounded-full bg-gold-50 border-2 border-gold-200 flex items-center justify-center mb-4 relative z-10">
                <span className="font-heading text-lg font-semibold text-gold-500">{s.step}</span>
              </div>
              <h3 className="font-heading text-xl font-semibold text-charcoal-700 mb-2">{s.title}</h3>
              <p className="text-sm text-charcoal-400 leading-relaxed">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}