import { Compass } from "lucide-react";
import { PAGE_CONTENT_INSET } from "../pageContentInset";
import { useI18n } from "../i18n";

const GUIDE_IMAGE_SRC = "/planetarium/lhaaso-aerial.jpg";

export function PlanetariumGuidePage() {
  const { t } = useI18n();
  return (
    <div className={`w-full min-w-0 max-w-full ${PAGE_CONTENT_INSET}`}>
      <div className="flex w-full min-w-0 flex-col">
        <h2 className="mb-3 flex shrink-0 items-center gap-2 text-xl font-bold text-white sm:text-2xl">
          <Compass className="h-6 w-6 shrink-0 text-sky-400" aria-hidden />
          {t("nav.planetarium")}
        </h2>
        <div className="w-full min-w-0 overflow-hidden rounded-2xl border border-white/20 bg-white/[0.06] p-3 shadow-lg shadow-black/20 sm:p-4 lg:p-5">
          <div className="relative h-[min(69svh,calc(100svh-10.5rem))] w-full min-h-[14rem] overflow-hidden rounded-xl sm:h-[min(73svh,calc(100svh-11.5rem))] sm:min-h-[17rem] lg:h-[min(75svh,calc(100svh-12.5rem))] lg:min-h-[19.5rem]">
            <img
              src={GUIDE_IMAGE_SRC}
              alt="天文馆蓝图航拍实景：高海拔宇宙线观测站（LHAASO）台址，中央为大型白色实验建筑，周围为广布于高原台地的探测器阵列与路径网络，蓝天云层与山地景观。"
              className="absolute inset-0 h-full w-full object-cover object-center"
              width={1024}
              height={685}
              loading="eager"
              decoding="async"
            />
          </div>
        </div>
      </div>
    </div>
  );
}