"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Reveal } from "@/components/landing-page/Reveal";
import { Separator } from "@/components/ui/separator";
import Image from "next/image";
import { useTranslations } from "next-intl";

export default function AboutPage() {
  const t = useTranslations("AboutPage");

  return (
    <div className="min-h-screen bg-[#f9f9f9] dark:bg-black text-gray-800 dark:text-white px-6 lg:px-20 py-12">
      <Reveal>
        <div className="max-w-4xl mx-auto space-y-8">
          {/* Header Section */}
          <div className="text-center space-y-4">
            <h1 className="text-3xl md:text-4xl font-bold text-[#bb3523]">
              {t("title")}
            </h1>
            <p className="text-base md:text-lg text-gray-600 dark:text-gray-300">
              {t("subtitle")}
            </p>
          </div>

          <Separator className="my-8" />

          {/* Deskripsi Umum */}
          <Card className="shadow-md border-none bg-white dark:bg-gray-900">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("whatIs.title")}
              </h2>
              <p className="leading-relaxed text-justify">
                {t.rich("whatIs.p1", {
                  b: (chunks) => <b>{chunks}</b>,
                })}
              </p>
              <p className="leading-relaxed text-justify">{t("whatIs.p2")}</p>
            </CardContent>
          </Card>

          {/* Fungsi Utama */}
          <Card className="shadow-md border-none bg-white dark:bg-gray-900">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("functions.title")}
              </h2>
              <ul className="list-disc list-inside space-y-2 leading-relaxed">
                <li>{t("functions.f1")}</li>
                <li>{t("functions.f2")}</li>
                <li>{t("functions.f3")}</li>
                <li>{t("functions.f4")}</li>
              </ul>
            </CardContent>
          </Card>

          {/* Cara Kerja */}
          <Card className="shadow-md border-none bg-white dark:bg-gray-900">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("howItWorks.title")}
              </h2>
              <ol className="list-decimal list-inside space-y-2 leading-relaxed">
                <li>{t("howItWorks.s1")}</li>
                <li>{t("howItWorks.s2")}</li>
                <li>{t("howItWorks.s3")}</li>
                <li>{t("howItWorks.s4")}</li>
              </ol>
            </CardContent>
          </Card>

          {/* Ilustrasi */}
          <div className="flex justify-center py-6">
            <Image
              src="/assets/about-illustration.png"
              alt={t("title")}
              width={600}
              height={400}
              className="rounded-lg shadow-lg object-cover"
            />
          </div>

          {/* Visi & Misi */}
          <Card className="shadow-md border-none bg-white dark:bg-gray-900">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-xl font-semibold text-[#bb3523]">
                {t("vision.title")}
              </h2>
              <p>{t("vision.text")}</p>

              <p className="font-semibold">{t("mission.title")}</p>
              <ul className="list-disc list-inside space-y-2">
                <li>{t("mission.m1")}</li>
                <li>{t("mission.m2")}</li>
                <li>{t("mission.m3")}</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </Reveal>
    </div>
  );
}