"use client";

import { Suspense } from "react";
import Header from "@/components/landing/Header";
import Footer from "@/components/landing/Footer";
import { useTranslations } from "next-intl";

export default function RefundPage() {
  const t = useTranslations();

  return (
    <div className="min-h-screen flex flex-col">
      <Suspense fallback={<div className="h-20 bg-white" />}>
        <Header />
      </Suspense>

      <section className="pt-24 pb-12 bg-gradient-to-b from-[#E8F4F8] to-[#F5FAFB]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h1 className="text-4xl sm:text-5xl font-semibold text-center text-gray-900">
            {t("legalPages.cancellation.title")}
          </h1>
        </div>
      </section>

      <section className="flex-1 py-12 bg-white">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <p className="text-sm text-gray-500 mb-8">{t("legalPages.cancellation.lastUpdated")}</p>

          <div className="space-y-6 text-sm text-gray-600 leading-relaxed">
            <p>{t("legalPages.cancellation.body1")}</p>
            <p>{t("legalPages.cancellation.body2")}</p>
            <p>{t("legalPages.cancellation.body3")}</p>
          </div>

          <div className="mt-10 p-5 bg-gray-50 rounded-xl border border-gray-200">
            <p className="text-sm font-medium text-gray-700 mb-1">{t("legalPages.cancellation.contactTitle")}</p>
            <p className="text-sm text-gray-600">
              {t("legalPages.cancellation.contactBody")}{" "}
              <span className="text-[#3B9EC9]">support@mbhs.com</span>
            </p>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}