'use client';

import { useTranslations } from 'next-intl';

const steps = [
  { icon: '📝', key: 'step1' },
  { icon: '📄', key: 'step2' },
  { icon: '💳', key: 'step3' },
  { icon: '🤝', key: 'step4' },
] as const;

export default function HowItWorks() {
  const t = useTranslations('HowItWorks');

  return (
    <section className="py-20 bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900">
            {t('title')}
          </h2>
          <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
            {t('subtitle')}
          </p>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {steps.map((step, index) => (
            <div key={step.key} className="relative text-center">
              {/* Connector line (hidden on first item and on small screens) */}
              {index > 0 && (
                <div className="hidden lg:block absolute top-10 -left-4 rtl:-right-4 rtl:left-auto w-8 h-0.5 bg-blue-200" />
              )}

              {/* Step number badge */}
              <div className="relative inline-flex items-center justify-center w-20 h-20 bg-white rounded-2xl shadow-md border border-gray-100 mb-6">
                <span className="text-3xl" role="img" aria-hidden="true">
                  {step.icon}
                </span>
                <span className="absolute -top-2 -right-2 rtl:-left-2 rtl:right-auto w-7 h-7 bg-blue-600 text-white text-sm font-bold rounded-full flex items-center justify-center">
                  {index + 1}
                </span>
              </div>

              <h3 className="text-lg font-semibold text-gray-900 mb-2">
                {t(`${step.key}_title`)}
              </h3>
              <p className="text-gray-600 text-sm leading-relaxed">
                {t(`${step.key}_desc`)}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}