// Shared primitive components — adapted for multi-page navigation
const { useState, useEffect } = React;
// レスポンシブ用：メディアクエリの一致状態を返すフック
function useMediaQuery(query) {
const [matches, setMatches] = useState(
typeof window !== "undefined" && window.matchMedia ? window.matchMedia(query).matches : false
);
useEffect(() => {
if (typeof window === "undefined" || !window.matchMedia) return;
const m = window.matchMedia(query);
const handler = () => setMatches(m.matches);
handler();
m.addEventListener("change", handler);
return () => m.removeEventListener("change", handler);
}, [query]);
return matches;
}
// Compute base prefix so links & assets resolve correctly from both the site root
// (index.html, strengths.html, ...) and the /recruit/ subdirectory.
const BASE = (typeof window !== "undefined" && /\/recruit(\/|$)/.test(window.location.pathname)) ? "../" : "";
const p = (rel) => BASE + rel;
function Button({ variant = "primary", children, href, onClick, style, arrow = true }) {
const [hover, setHover] = useState(false);
const base = {
fontFamily: 'var(--font-sans)',
fontSize: 15,
fontWeight: 500,
padding: "16px 28px",
borderRadius: "var(--radius-pill)",
border: "none",
cursor: "pointer",
display: "inline-flex",
alignItems: "center",
gap: 10,
transition: "all 160ms cubic-bezier(0.22,1,0.36,1)",
textDecoration: "none",
whiteSpace: "nowrap",
};
const primary = {
background: hover ? "var(--purple-dark)" : "var(--purple)",
color: "#fff",
transform: hover ? "translateY(-2px)" : "translateY(0)",
boxShadow: hover ? "0 8px 22px rgba(124,92,255,0.32)" : "0 0 0 rgba(0,0,0,0)",
};
const secondary = {
background: hover ? "#1A1A1A" : "transparent",
color: hover ? "#fff" : "#1A1A1A",
border: "1px solid #1A1A1A",
transform: hover ? "translateY(-2px)" : "translateY(0)",
};
const ghost = {
background: "transparent",
color: hover ? "var(--purple)" : "#1A1A1A",
border: "1px solid " + (hover ? "var(--purple)" : "#E5E5E5"),
};
const onDark = {
background: hover ? "#fff" : "transparent",
color: hover ? "#1A1530" : "#fff",
border: "1px solid rgba(255,255,255,0.5)",
transform: hover ? "translateY(-2px)" : "translateY(0)",
};
const styleMap = { primary, secondary, ghost, onDark };
const Tag = href ? "a" : "button";
return (
setHover(true)}
onMouseLeave={() => setHover(false)}
style={{ ...base, ...styleMap[variant], ...style }}
>
{children}
{arrow && →}
);
}
function SectionLabel({ children, accent = true, dark = false, style }) {
return (
—
{children}
—
);
}
function TopBar() {
return (
EST. 2024
AI-NATIVE SYSTEM ENGINEERING
BACKED BY EAST VENTURES
);
}
function Logo({ height = 32 }) {
const aspect = 827 / 344;
return (
![日本AIセンター]({p("assets/logo-horizontal.png")})
);
}
function Nav() {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
const isMobile = useMediaQuery("(max-width: 860px)");
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 10);
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
useEffect(() => { if (!isMobile) setOpen(false); }, [isMobile]);
const isRecruit = BASE === "../";
const corporateItems = [
{ href: p("strengths.html"), label: "私たちの強み" },
{ href: p("business.html"), label: "事業内容" },
{ href: p("about.html"), label: "会社概要" },
// 発信コンテンツ準備中のため非表示（記事整備後に戻す）
// { href: p("insights.html"), label: "発信" },
{ href: p("contact.html"), label: "お問い合わせ" },
];
const recruitItems = [
{ href: p("recruit/index.html"), label: "採用TOP" },
{ href: p("recruit/about.html"), label: "私たちについて" },
{ href: p("recruit/jobs.html"), label: "求人一覧" },
{ href: p("recruit/interview.html"), label: "インタビュー" },
{ href: p("recruit/environment.html"), label: "働く環境" },
];
const items = isRecruit ? recruitItems : corporateItems;
const logoHref = isRecruit ? p("recruit/index.html") : p("index.html");
const ctaPrimary = isRecruit
? { href: p("recruit/entry.html"), label: "エントリー" }
: { href: p("recruit/index.html"), label: "採用情報" };
const ctaSecondary = isRecruit
? { href: p("index.html"), label: "コーポレートサイト" }
: { href: p("recruit/entry.html"), label: "カジュアル面談" };
return (
);
}
function SideRail() {
const isMobile = useMediaQuery("(max-width: 860px)");
if (isMobile) return null;
return (
);
}
function Footer() {
const corp = [
{ href: p("index.html"), label: "TOP" },
{ href: p("strengths.html"), label: "選ばれる理由" },
{ href: p("business.html"), label: "事業内容" },
{ href: p("about.html"), label: "会社概要" },
// 発信コンテンツ準備中のため非表示（記事整備後に戻す）
// { href: p("insights.html"), label: "発信" },
{ href: p("contact.html"), label: "お問い合わせ" },
];
const rec = [
{ href: p("recruit/index.html"), label: "採用TOP" },
{ href: p("recruit/about.html"), label: "私たちについて" },
{ href: p("recruit/jobs.html"), label: "求人一覧" },
{ href: p("recruit/interview.html"), label: "エンジニアインタビュー" },
{ href: p("recruit/environment.html"), label: "働く環境・制度" },
{ href: p("recruit/entry.html"), label: "エントリー" },
];
const linkStyle = { fontFamily: 'var(--font-sans)', fontSize: 14, color: "#1A1A1A", textDecoration: "none", transition: "color 160ms" };
const isMobile = useMediaQuery("(max-width: 768px)");
return (
);
}
// Scroll-reveal wrapper
function Reveal({ children, delay = 0, style }) {
const ref = React.useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const obs = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.disconnect(); } },
{ threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
);
if (ref.current) obs.observe(ref.current);
return () => obs.disconnect();
}, []);
return (
{children}
);
}
Object.assign(window, { Button, SectionLabel, TopBar, Logo, Nav, SideRail, Footer, Reveal, BASE, p, useMediaQuery });