'use client';

import { useTranslations } from 'next-intl';

const STEPS = [
  {
    key: 'step1',
    icon: (
      <svg className="w-6 h-6 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
      </svg>
    ),
    number: '01',
  },
  {
    key: 'step2',
    icon: (
      <svg className="w-6 h-6 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
      </svg>
    ),
    number: '02',
  },
  {
    key: 'step3',
    icon: (
      <svg className="w-6 h-6 text-brand-purple" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.8}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z" />
      </svg>
    ),
    number: '03',
  },
] as const;

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

  return (
    <section className="py-20 bg-white border-t border-gray-100">
      <div className="max-w-6xl mx-auto px-4 sm:px-6">

        {/* Header */}
        <div className="max-w-2xl mb-14">
          <span className="inline-block text-xs font-semibold uppercase tracking-widest text-brand-purple mb-4">
            {t('eyebrow')}
          </span>
          <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 leading-tight mb-4">
            {t('heading')}
          </h2>
          <p className="text-gray-500 text-base leading-relaxed">
            {t('subheading')}
          </p>
        </div>

        {/* Steps */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-14">
          {STEPS.map(({ key, icon, number }) => (
            <div
              key={key}
              className="relative bg-gray-50 rounded-2xl border border-gray-100 p-7 flex flex-col gap-4 overflow-hidden"
            >
              <span className="absolute top-5 right-6 text-5xl font-black text-gray-100 select-none leading-none">
                {number}
              </span>
              <div className="w-11 h-11 rounded-xl bg-purple-50 flex items-center justify-center shrink-0">
                {icon}
              </div>
              <div>
                <h3 className="text-sm font-semibold text-gray-900 mb-1.5">
                  {t(`${key}.title` as Parameters<typeof t>[0])}
                </h3>
                <p className="text-sm text-gray-500 leading-relaxed">
                  {t(`${key}.body` as Parameters<typeof t>[0])}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* Disclaimer strip */}
        <div className="flex items-start gap-3 bg-amber-50 border border-amber-100 rounded-xl px-5 py-4">
          <svg className="w-5 h-5 text-amber-500 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <p className="text-xs text-amber-800 leading-relaxed">
            {t('disclaimer')}
          </p>
        </div>

      </div>
    </section>
  );
}