// About page — standalone app

const ABOUT_TWEAK_DEFAULTS = {
  "primaryColor": "#14224a",
  "accent": "#2a4691",
  "fontJp": "noto",
  "dark": false,
  "btnRadius": 10,
  "cardRadius": 16,
  "density": "regular",
};

function AboutPage() {
  const [tweaks, setTweak] = useTweaks(ABOUT_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--primary",     tweaks.primaryColor);
    root.style.setProperty("--primary-700", `color-mix(in oklab, ${tweaks.primaryColor} 80%, black)`);
    root.style.setProperty("--primary-600", tweaks.primaryColor);
    root.style.setProperty("--primary-500", tweaks.accent);
    root.style.setProperty("--primary-100", `color-mix(in oklab, ${tweaks.primaryColor} 12%, white)`);
    root.style.setProperty("--primary-50",  `color-mix(in oklab, ${tweaks.primaryColor} 6%, white)`);
    root.style.setProperty("--btn-radius",  `${tweaks.btnRadius}px`);
    root.style.setProperty("--card-radius", `${tweaks.cardRadius}px`);
    root.dataset.theme   = tweaks.dark ? "dark" : "light";
    root.dataset.density = tweaks.density;
  }, [tweaks]);

  return (
    <>
      <Header tweaks={tweaks} setTweak={setTweak} />
      <main>
        {/* Page hero header with image */}
        <div style={{ position: "relative", height: "clamp(200px, 30vw, 320px)", overflow: "hidden" }}>
          {/* 背景画像 */}
          <img
            src="images/about-hero.png"
            alt=""
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}
          />
          {/* 左側オーバーレイ：文字の可読性を確保 */}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(90deg, rgba(10,17,50,0.72) 0%, rgba(10,17,50,0.45) 45%, rgba(10,17,50,0.05) 75%, transparent 100%)",
          }} />
          {/* 下部フェード：下のセクションと自然につなぐ */}
          <div style={{
            position: "absolute", bottom: 0, left: 0, right: 0, height: 64,
            background: "linear-gradient(180deg, transparent, var(--bg))",
          }} />
          {/* テキスト */}
          <div className="container" style={{
            position: "absolute", inset: 0,
            display: "flex", flexDirection: "column", justifyContent: "center",
          }}>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.75)" }}>About</span>
            <h1 style={{
              fontSize: "clamp(28px, 4vw, 52px)",
              fontWeight: 800,
              letterSpacing: "-0.02em",
              margin: "12px 0 0",
              color: "#fff",
              lineHeight: 1.2,
            }}>
              事業<span style={{ color: "var(--primary-100)" }}>概要</span>
            </h1>
          </div>
        </div>
        <About />
      </main>
      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage />);