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

const DEFAULT: WhyUsItem[] = [
  {
    icon: "Zap",
    title: "Hızlı teslim",
    description:
      "Standart kurumsal site 2-3 hafta içinde teslim. Sprint bazlı şeffaf takvim.",
  },
  {
    icon: "Award",
    title: "Kocaeli'de yerel destek",
    description:
      "İzmit ofisimizde yüz yüze görüşme imkanı. Yerel ekip, hızlı yanıt.",
  },
  {
    icon: "Code2",
    title: "Modern teknoloji",
    description:
      "Next.js, React, Appwrite gibi güncel stack. SEO, performans ve güvenlik standartlarında.",
  },
  {
    icon: "Headphones",
    title: "Satış sonrası destek",
    description:
      "Yayın sonrası 1 yıl ücretsiz teknik destek. WhatsApp üzerinden hızlı iletişim.",
  },
];

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

export function WhyUs({ settings }: { settings?: SiteSettingsRow | null }) {
  const items = parse(settings?.why_us);

  return (
    <section className="py-20">
      <div className="mx-auto max-w-7xl px-6">
        <SectionTitle
          eyebrow="Neden Kovak Yazılım?"
          title="Reklam bütçenizin karşılığını alın"
          description="Hızlı, şeffaf ve uzun vadeli bir ortaklık — fark yaratan detaylar."
        />
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {items.map((it, i) => (
            <article
              key={i}
              className="rounded-2xl border border-[var(--border)] bg-white p-6 transition hover:border-[var(--sky)]/40 hover:shadow-md"
            >
              <div className="flex size-12 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--sky-50)] to-[var(--navy-50)] text-[var(--navy)]">
                <Icon name={it.icon} className="size-6" />
              </div>
              <h3 className="mt-5 text-base font-semibold text-[var(--navy)]">
                {it.title}
              </h3>
              <p className="mt-2 text-sm leading-relaxed text-[var(--muted)]">
                {it.description}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}