import Link from "next/link";

const stats = [
  { value: "10+", label: "Tahun Pengalaman" },
  { value: "5000+", label: "Wisatawan Puas" },
  { value: "50+", label: "Destinasi Wisata" },
  { value: "100%", label: "Kepuasan Pelanggan" },
];

export function AboutPreviewSection({
  summary,
}: {
  summary?: string | null;
}) {
  return (
    <section className="bg-bg-white py-20">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:items-center">
          <div>
            <h2 className="text-3xl font-semibold text-heading">
              Tentang Ranata Tour
            </h2>
            <p className="mt-4 text-body">
              {summary ??
                "Ranata Tour hadir dengan pengalaman bertahun-tahun melayani perjalanan wisata dan tiket pesawat ke seluruh Indonesia, dengan pelayanan yang tulus dan harga yang kompetitif."}
            </p>
            <Link
              href="/about-us"
              className="mt-6 inline-block rounded-full bg-merah-ranata px-5 py-2.5 text-sm font-semibold text-white transition hover:bg-merah-hover"
            >
              Selengkapnya
            </Link>
          </div>

          <div className="grid grid-cols-2 gap-6">
            {stats.map((stat) => (
              <div
                key={stat.label}
                className="rounded-2xl bg-bg-light p-6 text-center shadow-sm"
              >
                <p className="text-3xl font-semibold text-merah-ranata">
                  {stat.value}
                </p>
                <p className="mt-2 text-sm text-body">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}