"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 DisclaimerPage() {
  const t = useTranslations("legalPages.disclaimer");

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

      {/* 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">
          {/* Important Notice */}
          <div className="mb-8 p-4 bg-amber-50 border border-amber-200 rounded-lg">
            <p className="text-sm font-semibold text-amber-800">
              {t("important")}
            </p>
          </div>

          {/* This is NOT Medical Advice */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("notMedical")}
            </h2>
            <p className="text-sm text-gray-600 leading-relaxed mb-3">
              {t("notMedicalDesc")}
            </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("notMedicalItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notMedicalItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notMedicalItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notMedicalItems.item4")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notMedicalItems.item5")}</span>
              </li>
            </ul>
          </div>

          {/* Professional Medical Advice Required */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("professional")}
            </h2>
            <p className="text-sm font-medium text-gray-700 mb-2">{t("alwaysSeek")}</p>
            <ul className="space-y-2 text-sm text-gray-600 mb-4">
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("alwaysSeekItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("alwaysSeekItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("alwaysSeekItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("alwaysSeekItems.item4")}</span>
              </li>
            </ul>

            <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
              <p className="text-sm font-medium text-red-800 mb-2">{t("emergency")}</p>
              <ul className="space-y-1 text-sm text-red-700">
                <li>• {t("emergencyItems.item1")}</li>
                <li>• {t("emergencyItems.item2")}</li>
                <li>• {t("emergencyItems.item3")}</li>
                <li>• {t("emergencyItems.item4")}</li>
                <li>• {t("emergencyItems.item5")}</li>
              </ul>
            </div>
          </div>

          {/* Limitations of Screening Tools */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("screeningLimitations")}
            </h2>
            <div className="grid md:grid-cols-2 gap-4">
              <div className="p-4 bg-green-50 rounded-lg">
                <p className="text-sm font-medium text-green-800 mb-2">{t("canDo")}</p>
                <ul className="space-y-1 text-sm text-green-700">
                  <li>• {t("canDoItems.item1")}</li>
                  <li>• {t("canDoItems.item2")}</li>
                  <li>• {t("canDoItems.item3")}</li>
                  <li>• {t("canDoItems.item4")}</li>
                </ul>
              </div>
              <div className="p-4 bg-red-50 rounded-lg">
                <p className="text-sm font-medium text-red-800 mb-2">{t("cannotDo")}</p>
                <ul className="space-y-1 text-sm text-red-700">
                  <li>• {t("cannotDoItems.item1")}</li>
                  <li>• {t("cannotDoItems.item2")}</li>
                  <li>• {t("cannotDoItems.item3")}</li>
                  <li>• {t("cannotDoItems.item4")}</li>
                  <li>• {t("cannotDoItems.item5")}</li>
                </ul>
              </div>
            </div>
          </div>

          {/* No Doctor-Patient Relationship */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("noRelationship")}
            </h2>
            <p className="text-sm font-medium text-gray-700 mb-2">{t("clarifications")}</p>
            <ul className="space-y-2 text-sm text-gray-600 mb-4">
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("clarificationsItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("clarificationsItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("clarificationsItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("clarificationsItems.item4")}</span>
              </li>
            </ul>

            <div className="p-4 bg-gray-50 rounded-lg">
              <p className="text-sm font-medium text-gray-700 mb-2">{t("forB2B")}</p>
              <ul className="space-y-1 text-sm text-gray-600">
                <li>• {t("forB2BItems.item1")}</li>
                <li>• {t("forB2BItems.item2")}</li>
                <li>• {t("forB2BItems.item3")}</li>
                <li>• {t("forB2BItems.item4")}</li>
              </ul>
            </div>
          </div>

          {/* Accuracy and Reliability */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("accuracy")}
            </h2>
            <p className="text-sm font-medium text-gray-700 mb-2">{t("factors")}</p>
            <ul className="space-y-2 text-sm text-gray-600 mb-4">
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("factorsItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("factorsItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("factorsItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("factorsItems.item4")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("factorsItems.item5")}</span>
              </li>
            </ul>

            <p className="text-sm font-medium text-gray-700 mb-2">{t("validated")}</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("validatedItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("validatedItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("validatedItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("validatedItems.item4")}</span>
              </li>
            </ul>
          </div>

          {/* Specific Clinical Disclaimers */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("clinical")}
            </h2>

            <div className="space-y-4">
              <div>
                <p className="text-sm font-medium text-gray-700 mb-2">{t("suicideRisk")}</p>
                <ul className="space-y-1 text-sm text-gray-600">
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("suicideRiskItems.item1")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("suicideRiskItems.item2")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("suicideRiskItems.item3")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("suicideRiskItems.item4")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("suicideRiskItems.item5")}</span>
                  </li>
                </ul>
              </div>

              <div>
                <p className="text-sm font-medium text-gray-700 mb-2">{t("substance")}</p>
                <ul className="space-y-1 text-sm text-gray-600">
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("substanceItems.item1")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("substanceItems.item2")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("substanceItems.item3")}</span>
                  </li>
                </ul>
              </div>

              <div>
                <p className="text-sm font-medium text-gray-700 mb-2">{t("medication")}</p>
                <ul className="space-y-1 text-sm text-gray-600">
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("medicationItems.item1")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("medicationItems.item2")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("medicationItems.item3")}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-[#3B9EC9] mt-1">•</span>
                    <span>{t("medicationItems.item4")}</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          {/* Individual Differences */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("individual")}
            </h2>
            <p className="text-sm text-gray-600 mb-2">{t("notAppropriate")}</p>
            <ul className="space-y-2 text-sm text-gray-600 mb-3">
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notAppropriateItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notAppropriateItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notAppropriateItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notAppropriateItems.item4")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("notAppropriateItems.item5")}</span>
              </li>
            </ul>
            <p className="text-sm text-gray-600">
              {t("culturalNote")}
            </p>
          </div>

          {/* External Links and Resources */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("external")}
            </h2>
            <p className="text-sm text-gray-600 mb-2">{t("externalDesc")}</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("externalItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("externalItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("externalItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("externalItems.item4")}</span>
              </li>
            </ul>
          </div>

          {/* Changes to Health Status */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("healthChanges")}
            </h2>
            <p className="text-sm font-medium text-gray-700 mb-2">{t("seekHelp")}</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("seekHelpItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("seekHelpItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("seekHelpItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("seekHelpItems.item4")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("seekHelpItems.item5")}</span>
              </li>
            </ul>
          </div>

          {/* Informed Decision Making */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("informed")}
            </h2>
            <p className="text-sm font-medium text-gray-700 mb-2">{t("responsibilities")}</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("responsibilitiesItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("responsibilitiesItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("responsibilitiesItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("responsibilitiesItems.item4")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("responsibilitiesItems.item5")}</span>
              </li>
            </ul>
          </div>

          {/* Legal Disclaimer */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("legal")}
            </h2>
            <p className="text-sm text-gray-600 mb-2">{t("legalDesc")}</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("legalItems.item1")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("legalItems.item2")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("legalItems.item3")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("legalItems.item4")}</span>
              </li>
            </ul>
          </div>

          {/* Questions or Concerns */}
          <div className="mb-8">
            <h2 className="text-xl font-semibold text-gray-900 mb-3">
              {t("questions")}
            </h2>
            <p className="text-sm text-gray-600 mb-2">{t("questionsDesc")}</p>
            <ul className="space-y-2 text-sm text-gray-600 mb-4">
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("questionsItems.mentalHealth")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("questionsItems.mbhsTool")}</span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-[#3B9EC9] mt-1">•</span>
                <span>{t("questionsItems.emergencySit")}</span>
              </li>
            </ul>
            <p className="text-sm text-gray-600 font-medium">
              {t("remember")}
            </p>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
}