import { ShieldCheck, CheckCircle2 } from "lucide-react";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import type { SiteSettingsRow } from "@/lib/types";

const DEFAULT_ITEMS = [
  "İlk tasarım taslağı ücretsiz",
  "Ön ödeme garanti altında — müşteri devam etmek istemezse iade",
  "1 yıl ücretsiz teknik destek",
  "Kaynak kodlar size aittir, bağımlılık yok",
];

export function Guarantee({
  settings,
}: {
  settings?: SiteSettingsRow | null;
}) {
  const title =
    settings?.guarantee_title ??
    "İlk taslak ücretsiz, memnun değilseniz devam etmiyoruz";
  const description =
    settings?.guarantee_description ??
    "Görüşme + ihtiyaç analizinin ardından ilk tasarım taslağı ücretsizdir. Beğenmezseniz devam etmek zorunda değilsiniz. İşimizden eminiz, ama karar sizin.";
  const items =
    settings?.guarantee_items && settings.guarantee_items.length > 0
      ? settings.guarantee_items
      : DEFAULT_ITEMS;

  return (
    <section className="relative overflow-hidden border-y border-[var(--border)] bg-gradient-to-br from-[var(--sky-50)]/60 via-white to-[var(--navy-50)]/40 py-20">
      <div className="absolute -right-32 top-1/2 -z-0 size-[420px] -translate-y-1/2 rounded-full bg-[var(--sky)]/10 blur-3xl" aria-hidden />
      <div className="relative mx-auto grid max-w-6xl items-center gap-12 px-6 md:grid-cols-[auto_1fr]">
        <div className="flex justify-center md:justify-start">
          <div className="relative">
            <div
              className="absolute inset-0 -z-10 rounded-full bg-[var(--sky)]/20 blur-2xl"
              aria-hidden
            />
            <div className="flex size-28 items-center justify-center rounded-full border-4 border-white bg-[var(--navy)] text-white shadow-xl shadow-[var(--navy)]/20 md:size-36">
              <ShieldCheck className="size-12 md:size-16" />
            </div>
          </div>
        </div>

        <div>
          <p className="text-xs font-semibold uppercase tracking-[0.18em] text-[var(--sky-600)]">
            Risk almazsınız
          </p>
          <h2 className="mt-3 text-3xl font-bold tracking-tight text-[var(--navy)] sm:text-4xl">
            {title}
          </h2>
          <p className="mt-4 max-w-2xl text-base leading-relaxed text-[var(--muted)]">
            {description}
          </p>

          <ul className="mt-6 grid gap-3 sm:grid-cols-2">
            {items.map((it, i) => (
              <li
                key={i}
                className="flex items-start gap-2 rounded-xl border border-[var(--border)] bg-white p-3"
              >
                <CheckCircle2 className="mt-0.5 size-5 shrink-0 text-[var(--sky-600)]" />
                <span className="text-sm text-[var(--foreground)]">{it}</span>
              </li>
            ))}
          </ul>

          <Link
            href="/iletisim"
            className="mt-6 inline-flex items-center gap-2 rounded-full bg-[var(--navy)] px-5 py-3 text-sm font-semibold text-white transition hover:bg-[var(--navy-700)]"
          >
            Ücretsiz keşif görüşmesi
            <ArrowRight className="size-4" />
          </Link>
        </div>
      </div>
    </section>
  );
}