import { SectionTitle } from "@/components/section-title";
import type { ProcessStep, SiteSettingsRow } from "@/lib/types";

const DEFAULT: ProcessStep[] = [
  {
    title: "Ücretsiz keşif görüşmesi",
    description:
      "İhtiyacınızı dinliyoruz, hedeflerinizi anlıyoruz. 30 dakika.",
  },
  {
    title: "Teklif ve plan",
    description:
      "Kapsam, takvim ve bütçeyi netleştirip yazılı teklif sunuyoruz.",
  },
  {
    title: "Tasarım + geliştirme",
    description:
      "Sprint bazlı çalışıyoruz, her hafta demo. Geri bildirim alıp ilerliyoruz.",
  },
  {
    title: "Yayın + destek",
    description:
      "Lansman + 1 yıl ücretsiz bakım. Performans takibi ve büyütme önerileri.",
  },
];

function parse(items?: string[] | null): ProcessStep[] {
  if (!items || items.length === 0) return DEFAULT;
  const out: ProcessStep[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<ProcessStep>;
      if (obj.title && obj.description)
        out.push({ title: obj.title, description: obj.description });
    } catch {
      /* ignore */
    }
  }
  return out.length > 0 ? out : DEFAULT;
}

export function ProcessSteps({
  settings,
}: {
  settings?: SiteSettingsRow | null;
}) {
  const steps = parse(settings?.process_steps);

  return (
    <section className="border-y border-[var(--border)] bg-[var(--navy-50)]/40 py-20">
      <div className="mx-auto max-w-7xl px-6">
        <SectionTitle
          eyebrow="Nasıl çalışıyoruz?"
          title="Net süreç, sürprizsiz proje"
          description="İlk görüşmeden lansmana kadar her adım önceden tanımlı."
        />

        <div className="relative mt-14">
          <div
            className="absolute left-6 top-6 hidden h-[calc(100%-3rem)] w-px bg-gradient-to-b from-[var(--sky)] to-[var(--navy)] md:left-1/2 md:top-0 md:h-px md:w-[calc(100%-3rem)] md:bg-gradient-to-r md:translate-x-[-50%] md:top-7"
            aria-hidden
          />
          <div className="grid gap-8 md:grid-cols-4">
            {steps.map((s, i) => (
              <div key={i} className="relative">
                <div className="relative z-10 flex size-12 items-center justify-center rounded-full border-4 border-[var(--navy-50)]/40 bg-[var(--navy)] text-base font-bold text-white shadow-lg shadow-[var(--navy)]/20">
                  {i + 1}
                </div>
                <h3 className="mt-5 text-base font-semibold text-[var(--navy)]">
                  {s.title}
                </h3>
                <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
                  {s.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}