/* global React */
const { useEffect: useEffectM } = React;

// ====================================================================
// 福祉エリアマップ — /#/map ルートのリダイレクトページ
// 本物の分析マップは Next.js アプリ (fukushi-area-map) として独立稼働。
// このページは map.yoriai.life/map に即リダイレクトするだけのシム。
//
// 経緯:
//   旧 MapPage は SVG 模式図 + 価格表 + 比較セクション + フロー + CTA で
//   構成された "分析デモ" だったが、「地図に詳細が載った本物のやつを
//   見せて」というゆうきさんの指示で本物の分析ツールへ寄せる方針に変更。
//   価格表/比較/フロー等の情報は /#/products/fukushi-area-map に重複して
//   存在するため、このページから取り除いても情報は失われない。
// ====================================================================

const MAP_DESTINATION = "https://map.yoriai.life/map";

function MapPage() {
  useEffectM(() => {
    // 即時リダイレクト。replace を使ってブラウザ履歴を汚さない。
    window.location.replace(MAP_DESTINATION);
  }, []);

  return (
    <div className="page-enter" style={{
      background: "var(--washi)",
      minHeight: "70vh",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      padding: "64px 24px",
    }}>
      <div style={{ maxWidth: 520, textAlign: "center" }}>
        <div className="eyebrow" style={{ marginBottom: 16, color: "var(--ink-60)" }}>
          FUKUSHI AREA MAP · 福祉エリアマップ
        </div>
        <h1 className="serif d-3" style={{ marginBottom: 20 }}>
          分析マップを開いています…
        </h1>
        <p className="body" style={{ color: "var(--ink-75)", marginBottom: 32, lineHeight: 1.8 }}>
          自動で移動しない場合は、下のリンクから開いてください。
        </p>
        <a href={MAP_DESTINATION}
          className="btn btn-primary arrow-r"
          rel="noopener">
          分析マップを開く
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { MapPage });