"use client";

import Image from "next/image";
import { motion } from "framer-motion";
import Link from "next/link";
import { Download, ExternalLink, Award } from "lucide-react";
import { useTranslations } from "next-intl";
import { Statistics } from "@/components/pages/home";

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

  const certs = [
    {
      id: 1,
      src: "/images/about/sertificate.webp",
      title: "Sertifikat 1",
      desc: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      year: "2024",
    },
  ];
  return (
    <>
      <Statistics />
      <main className="min-h-screen bg-[#0f0e0d] text-white pb-44 overflow-x-hidden">
        {/* ── Hero ── */}
        <section className="max-w-6xl mx-auto px-6 pt-14 pb-10">
          <motion.span
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.5 }}
            className="text-[11px] font-black uppercase tracking-[0.22em] text-red-600"
          >
            {t("about.certificatePage.hero.label")}
          </motion.span>

          <motion.h1
            initial={{ opacity: 0, y: 24 }}
            animate={{ opacity: 1, y: 0 }}
            transition={
              {
                duration: 0.6,
                delay: 0.05,
              } as any
            }
            className="mt-3 text-5xl md:text-7xl font-black uppercase tracking-tight leading-[0.92]"
          >
            {t("about.certificatePage.hero.title1")}{" "}
            <span className="text-red-600">
              {t("about.certificatePage.hero.title2")}
            </span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={
              {
                duration: 0.6,
                delay: 0.15,
              } as any
            }
            className="mt-5 max-w-lg text-sm md:text-base text-gray-300 leading-relaxed"
          >
            {t("about.certificatePage.hero.description")}
          </motion.p>

          {/* Divider */}
          <motion.div
            initial={{ scaleX: 0 }}
            animate={{ scaleX: 1 }}
            transition={
              {
                delay: 0.3,
                duration: 0.7,
              } as any
            }
            style={{ originX: 0 }}
            className="mt-8 w-20 h-px bg-red-600"
          />
        </section>

        {/* ── Horizontal scroll track ── */}
        <section className="mt-4 max-w-6xl mx-auto">
          {/* Section header */}
          <div className=" px-6 flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              <Award size={15} className="text-red-600" />
              <span className="text-xs font-black uppercase tracking-widest text-gray-300">
                {certs.length} {t("about.certificatePage.count.suffix")}
              </span>
            </div>
          </div>

          {/* ── Count strip ── */}
          <motion.section
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            transition={{ duration: 0.6 }}
            viewport={{ once: true }}
            className="max-w-6xl mx-auto px-6 my-5 flex items-center gap-6 border-y border-white/5 py-5"
          >
            <span className="text-6xl font-black text-white/10">
              {certs.length}
            </span>
            <p className="text-sm text-gray-300 leading-relaxed max-w-xs">
              {t("about.certificatePage.count.description")}
            </p>
          </motion.section>

          {/* Scrollable row */}
          <div className="w-[80%] mx-auto flex gap-5 overflow-x-auto px-6 pb-6 scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none] snap-x snap-mandatory">
            {certs.map((c, i) => (
              <motion.article
                initial={{ opacity: 0, y: 28 }}
                whileInView={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.55, delay: i * 0.1 }}
                viewport={{ once: true }}
                className="group  p-5 flex flex-row rounded-xl overflow-hidden bg-[#161514] border border-white/5 hover:border-red-600/25 transition-colors duration-300 w-full"
              >
                {/* ── Left: certificate image ── */}
                <div className="relative flex-none w-[50%] h-50 overflow-hidden">
                  <Image
                    src={c.src}
                    alt={c.title}
                    fill
                    className="object-contain transition-transform duration-500 group-hover:scale-105"
                  />
                </div>

                {/* ── Right: info + actions ── */}
                <div className="flex flex-col justify-between flex-1 px-5 py-5 gap-4 min-w-0">
                  {/* Label + title + desc */}
                  <div className="space-y-2">
                    <div className="flex items-center gap-1.5">
                      <Award size={12} className="text-red-600 shrink-0" />
                      <p className="text-[10px] font-black uppercase tracking-widest text-red-600">
                        {t("about.certificatePage.card.badge")}
                      </p>
                    </div>

                    <h3 className="font-bold text-base md:text-lg text-white leading-tight">
                      {c.title}
                    </h3>

                    <p className="text-xs text-gray-300 leading-relaxed line-clamp-2">
                      {c.desc}
                    </p>
                  </div>

                  {/* Actions */}
                  <div className="flex flex-wrap items-center gap-2">
                    <Link
                      href={c.src}
                      target="_blank"
                      className="flex items-center gap-1.5 h-8 px-4 rounded-xl bg-red-600 hover:bg-red-500 transition-colors duration-200 text-white text-xs font-bold"
                    >
                      <ExternalLink size={12} />
                      {t("about.certificatePage.card.view")}
                    </Link>

                    <a
                      href={c.src}
                      download
                      className="flex items-center gap-1.5 h-8 px-4 rounded-xl border border-white/10 hover:border-red-600/40 hover:bg-red-600/5 transition-all duration-200 text-white/80 hover:text-red-600 text-xs font-bold"
                    >
                      <Download size={12} />
                      {t("about.certificatePage.card.download")}
                    </a>
                  </div>
                </div>
              </motion.article>
            ))}

            {/* End spacer */}
            <div className="flex-none w-2" />
          </div>
        </section>
      </main>
    </>
  );
}