import React from 'react';
import Header from '../components/Header';
import { useTranslation } from 'react-i18next';
import '@splidejs/react-splide/css';
import BottomNav from '../components/BottomNav';
import GalleryCarousel from '../components/GalleryCarousel';
import { useParams } from 'react-router-dom';
import { getDeputyTitleFromRouteId } from '../utils/deputy';
import { getBackgroundImage } from '../utils/organization';

export default function GalleryPage() {
  const { id } = useParams();
  const { t } = useTranslation();
  const bgImage = getBackgroundImage(id);
  const deputyTitle = getDeputyTitleFromRouteId(id, t);

  return (
    <div
      className="min-h-screen w-full bg-[#002D4B] flex flex-col justify-between text-white bg-cover bg-no-repeat relative overflow-x-hidden overflow-y-auto"
      style={{
        backgroundImage: `linear-gradient(180deg, rgba(0, 30, 49, 0.88) 0%, rgba(0, 45, 75, 0.95) 100%), url("${bgImage}")`,
      }}
    >
      <div className="w-full max-w-[1500px] mx-auto px-4 md:px-[60px] min-h-screen flex flex-col justify-between py-[20px] relative z-10">
        <Header />

        {/* Main Content Area */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-[32px] my-auto w-full flex-1 items-stretch py-[10px]">
          {/* Left Title Card (4 Cols) */}
          <div className="lg:col-span-4 flex flex-col justify-center space-y-[12px] bg-slate-900/60 border border-white/15 rounded-3xl p-[32px] backdrop-blur-md shadow-2xl min-h-[420px] lg:h-[calc(100vh-240px)]">
            <div>
              <span className="text-xs uppercase font-extrabold tracking-widest text-[#00AFDD] bg-[#001E31]/90 px-[16px] py-[6px] rounded-full border border-[#00AFDD]/40 backdrop-blur-md shadow-md">
                {deputyTitle}
              </span>
            </div>
            <h1 className="text-2xl md:text-3xl lg:text-4xl font-extrabold uppercase tracking-wide text-white leading-tight drop-shadow-md">
              <span className="text-[#00AFDD] block">{t('documentation')}</span>
              {t('fromTimeToTime')}
            </h1>
            <div className="w-[80px] h-[4px] bg-[#00AFDD] rounded-full mt-2"></div>
            <p className="text-xs md:text-sm text-slate-300 mt-3 font-normal leading-relaxed">
              Galeri dokumentasi foto, video, dan berkas publikasi resmi Kedeputian BNN RI dari masa ke masa.
            </p>
          </div>

          {/* Right Carousel Card (8 Cols) */}
          <div className="lg:col-span-8 flex flex-col justify-start items-stretch bg-slate-900/70 border border-white/15 rounded-3xl p-[20px] md:p-[28px] backdrop-blur-md shadow-2xl min-h-[480px] lg:h-[calc(100vh-240px)] relative overflow-y-auto custom-scrollbar">
            <div className="w-full flex-1 flex flex-col justify-start">
              <GalleryCarousel />
            </div>
          </div>
        </div>

        <BottomNav page={0} totalPage={1} />
      </div>
    </div>
  );
}