import HeaderWrapper from "@/components/landing/HeaderWrapper";
import Footer from "@/components/landing/Footer";
import { useTranslations } from "next-intl";

export default function CookiePolicyPage() {
  const t = useTranslations("legalPages.cookiePolicy");

  return (
    <div className="min-h-screen flex flex-col">
      <HeaderWrapper />

      {/* Page Title Section */}
      <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("title")}
          </h1>
        </div>
      </section>

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

          {/* Introduction */}
          <div className="mb-8">
            <p className="text-sm text-gray-600 leading-relaxed">
              {t("intro")}
            </p>
          </div>

          {/* What Are Cookies */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("whatAreCookies.title")}
            </h2>
            <p className="text-sm text-gray-600 leading-relaxed">
              {t("whatAreCookies.description")}
            </p>
          </div>

          {/* Essential Cookies */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("essential.title")}
            </h2>
            <p className="text-sm text-gray-600 mb-3">
              {t("essential.description")}
            </p>
            <div className="overflow-x-auto">
              <table className="w-full text-sm border border-gray-200 rounded-lg">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left px-4 py-2 font-medium text-gray-700 border-b">{t("table.name")}</th>
                    <th className="text-left px-4 py-2 font-medium text-gray-700 border-b">{t("table.purpose")}</th>
                    <th className="text-left px-4 py-2 font-medium text-gray-700 border-b">{t("table.duration")}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-gray-100">
                    <td className="px-4 py-2 text-gray-600 font-mono text-xs">access_token</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.accessToken")}</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.accessTokenDuration")}</td>
                  </tr>
                  <tr className="border-b border-gray-100">
                    <td className="px-4 py-2 text-gray-600 font-mono text-xs">mbhs_refresh_token</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.refreshToken")}</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.refreshTokenDuration")}</td>
                  </tr>
                  <tr className="border-b border-gray-100">
                    <td className="px-4 py-2 text-gray-600 font-mono text-xs">mbhs_user_data</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.userData")}</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.userDataDuration")}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-gray-600 font-mono text-xs">mbhs_cookie_consent</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.consent")}</td>
                    <td className="px-4 py-2 text-gray-600">{t("essential.cookies.consentDuration")}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Analytics Cookies */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("analytics.title")}
            </h2>
            <p className="text-sm text-gray-600 mb-3">
              {t("analytics.description")}
            </p>
            <div className="overflow-x-auto">
              <table className="w-full text-sm border border-gray-200 rounded-lg">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left px-4 py-2 font-medium text-gray-700 border-b">{t("table.name")}</th>
                    <th className="text-left px-4 py-2 font-medium text-gray-700 border-b">{t("table.purpose")}</th>
                    <th className="text-left px-4 py-2 font-medium text-gray-700 border-b">{t("table.duration")}</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b border-gray-100">
                    <td className="px-4 py-2 text-gray-600 font-mono text-xs">_ga</td>
                    <td className="px-4 py-2 text-gray-600">{t("analytics.cookies.ga")}</td>
                    <td className="px-4 py-2 text-gray-600">{t("analytics.cookies.gaDuration")}</td>
                  </tr>
                  <tr>
                    <td className="px-4 py-2 text-gray-600 font-mono text-xs">_gid</td>
                    <td className="px-4 py-2 text-gray-600">{t("analytics.cookies.gid")}</td>
                    <td className="px-4 py-2 text-gray-600">{t("analytics.cookies.gidDuration")}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          {/* Preference Cookies */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("preferences.title")}
            </h2>
            <p className="text-sm text-gray-600 leading-relaxed">
              {t("preferences.description")}
            </p>
          </div>

          {/* Marketing Cookies */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("marketing.title")}
            </h2>
            <p className="text-sm text-gray-600 leading-relaxed">
              {t("marketing.description")}
            </p>
          </div>

          {/* How to Manage */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("manage.title")}
            </h2>
            <p className="text-sm text-gray-600 mb-3">
              {t("manage.description")}
            </p>
            <ul className="space-y-2 text-sm text-gray-600">
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("manage.items.banner")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("manage.items.browser")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("manage.items.delete")}</span>
              </li>
            </ul>
          </div>

          {/* Contact */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("contact.title")}
            </h2>
            <p className="text-sm text-gray-600">
              {t("contact.description")}
            </p>
            <p className="text-sm text-gray-600 mt-2">
              Email: <span className="text-[#3B9EC9]">info.mbhssystems@gmail.com</span>
            </p>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}