refund roadmap pr-1 and pr-2

features/refund/components/refund-policy-section.tsx

@@ -0,0 +1,45 @@
+import { getRefundPolicyTiers } from "@/lib/refund-policy";
+
+/**
+ * Display kebijakan refund default di trip detail. Sumber tier:
+ * lib/refund-policy.ts. Compact agar tidak mendominasi page.
+ */
+export function RefundPolicySection() {
+  const tiers = getRefundPolicyTiers();
+  return (
+    <details className="rounded-xl border border-neutral-200 bg-neutral-50/60 p-3 text-xs sm:text-sm">
+      <summary className="cursor-pointer select-none font-semibold text-neutral-700">
+        🛟 Kebijakan refund saat peserta cancel
+      </summary>
+      <div className="mt-2 space-y-2 text-neutral-600">
+        <p className="text-[11px] text-neutral-500 sm:text-xs">
+          Kebijakan ini berlaku saat <strong>peserta</strong> cancel booking
+          yang sudah lunas. Kalau <strong>organizer</strong> membatalkan trip,
+          peserta yang sudah bayar selalu dapat refund 100%.
+        </p>
+        <ul className="space-y-1">
+          {tiers.map((t) => (
+            <li key={t.minDaysBefore} className="flex items-baseline gap-2">
+              <span
+                className={`inline-flex min-w-[3rem] justify-center rounded-full px-2 py-0.5 text-[10px] font-bold ${
+                  t.refundPercentage >= 80
+                    ? "bg-primary-100 text-primary-700"
+                    : t.refundPercentage >= 50
+                      ? "bg-amber-100 text-amber-700"
+                      : "bg-red-100 text-red-700"
+                }`}
+              >
+                {t.refundPercentage}%
+              </span>
+              <span>{t.label}</span>
+            </li>
+          ))}
+        </ul>
+        <p className="text-[11px] text-neutral-500 sm:text-xs">
+          Refund diproses manual oleh admin SeTrip — perlu 1–3 hari kerja
+          setelah disetujui untuk uang masuk ke rekening kamu.
+        </p>
+      </div>
+    </details>
+  );
+}