./knowledge-base/frontend/src/pages/HomePage.tsx

import { Box, Typography, Paper, AppBar, Toolbar } from "@mui/material";
import { useNavigate } from "react-router-dom";

/** 時代考証アシスト URL
 *  本番: CloudFront経由の相対パス /era-assist/
 *  開発: 環境変数 VITE_ASSIST_URL に別URLを指定可
 */
const ASSIST_URL = import.meta.env.VITE_ASSIST_URL || "/era-assist/";

interface NavButtonProps {
  label: string;
  imageSrc: string;
  onClick: () => void;
}

function NavButton({ label, imageSrc, onClick }: NavButtonProps) {
  return (
    <Paper
      elevation={3}
      onClick={onClick}
      sx={{
        width: 240,
        height: 240,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        gap: 2,
        cursor: "pointer",
        borderRadius: 4,
        transition: "all 0.2s ease",
        "&:hover": {
          elevation: 8,
          transform: "translateY(-6px)",
          boxShadow: "0 12px 32px rgba(0,0,0,0.18)",
          bgcolor: "primary.50",
        },
        "&:active": {
          transform: "translateY(-2px)",
        },
        userSelect: "none",
      }}
    >
      <Box
        component="img"
        src={imageSrc}
        alt={label}
        sx={{ width: 96, height: 96, objectFit: "contain" }}
      />
      <Typography
        variant="h6"
        fontWeight="bold"
        textAlign="center"
        sx={{ px: 1 }}
      >
        {label}
      </Typography>
    </Paper>
  );
}

export default function HomePage() {
  const navigate = useNavigate();

  return (
    <>
      <AppBar position="static">
        <Toolbar>
          <Box
            component="img"
            src="/img/fav.png"
            alt="ロゴ"
            sx={{ height: 32, width: 32, mr: 1, borderRadius: 1 }}
          />
          <Typography variant="h6" sx={{ flexGrow: 1 }}>
            時代考証システム
          </Typography>
        </Toolbar>
      </AppBar>

      <Box
        sx={{
          minHeight: "calc(100vh - 64px)",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 4,
          px: 2,
          py: 6,
        }}
      >
        <Typography
          variant="h4"
          fontWeight="bold"
          textAlign="center"
          gutterBottom
        >
          ようこそ、時代考証システムへ
        </Typography>
        <Typography
          variant="body1"
          color="text.secondary"
          textAlign="center"
          sx={{ mb: 4 }}
        >
          ご利用になる機能を選択してください
        </Typography>

        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            gap: 4,
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <NavButton
            label="資料アップロード"
            imageSrc="/img/upload.png"
            onClick={() => navigate("/upload")}
          />
          <NavButton
            label="資料検索"
            imageSrc="/img/search.png"
            onClick={() => navigate("/search")}
          />
          <NavButton
            label="時代考証アシスト"
            imageSrc="/img/assist.png"
            onClick={() =>
              window.open(ASSIST_URL, "_blank", "noopener,noreferrer")
            }
          />
          <NavButton
            label="メンテナンス"
            imageSrc="/img/mentenance.png"
            onClick={() => navigate("/maintenance")}
          />
        </Box>
      </Box>
    </>
  );
}