/* Friendly Civic — Flat illustration set
All flat, simple geometry. Brand palette only. */
const C = {
navy: "#152340",
coral: "#E5654A",
coralSoft: "#FAD9CD",
peach: "#F5A878",
sand: "#FCC890",
sandSoft: "#FEF3E2",
mint: "#7BC4B5",
mintPale: "#C8E5DD",
mintSoft: "#E8F2EE",
cream: "#FFF7E8",
ink: "#2A2F40",
paper: "#FFFFFF",
};
/* ============================================================
Hero scene — high-school student getting off train,
walking toward the study cafe
============================================================ */
function HeroScene({ className = "" }) {
return (
);
}
/* ============================================================
Home scene — relaxing at home
============================================================ */
function HomeScene({ className = "" }) {
return (
);
}
/* ============================================================
Study scene — at P・SPO desk
============================================================ */
function StudyScene({ className = "" }) {
return (
);
}
/* ============================================================
Family dinner scene
============================================================ */
function FamilyScene({ className = "" }) {
return (
);
}
/* ============================================================
Tiny icons (illustrative, not stroke iconography)
Each ~88px viewBox, brand colored, flat
============================================================ */
function IconStation() {
return (
);
}
function IconClock() {
return (
);
}
function IconShield() {
return (
);
}
function IconWifi() {
return (
);
}
function IconCoffee() {
return (
);
}
function IconBooth() {
return (
);
}
function IconLounge() {
return (
);
}
function IconLockKey() {
return (
);
}
function IconBird() {
return (
);
}
function IconRabbit() {
return (
);
}
/* ============================================================
Background ambient — birds, clouds, train silhouette
used in §03 REFRAME
============================================================ */
function ReframeBackdrop() {
return (
);
}
/* ============================================================
Map — knowledge of Chita peninsula. Stylized, not literal.
============================================================ */
function CatchmentMap() {
const containerRef = React.useRef(null);
const mapRef = React.useRef(null);
React.useEffect(() => {
if (!window.L || !containerRef.current || mapRef.current) return;
const L = window.L;
const map = L.map(containerRef.current, {
center: [34.99, 136.93],
zoom: 11,
zoomControl: true,
scrollWheelZoom: false,
attributionControl: true,
});
mapRef.current = map;
// CartoDB Positron — soft monotone tiles
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '© OpenStreetMap © CARTO',
subdomains: 'abcd',
maxZoom: 19,
}).addTo(map);
const NAVY = '#152340';
const CORAL = '#E5654A';
const MINT = '#7BC4B5';
// P・SPO 拠点
const pspo = [
{ name: '知多半田駅前店', latlng: [34.8878, 136.9285], main: true },
{ name: '住吉店', latlng: [34.9020, 136.9415] },
{ name: '清城店', latlng: [34.8930, 136.9335] },
];
pspo.forEach(s => {
const size = s.main ? 30 : 18;
const ring = s.main ? `` : '';
const star = s.main ? `★` : '';
const label = s.main
? `${s.name} ★
`
: '';
const html = ``;
const icon = L.divIcon({ html, className: 'pspo-marker', iconSize: [size, size], iconAnchor: [size/2, size/2] });
L.marker(s.latlng, { icon, zIndexOffset: s.main ? 1000 : 500 }).addTo(map).bindPopup(`P・SPO ${s.name}`);
});
// 主要駅・主要都市
const cities = [
{ name: '名古屋', latlng: [35.1709, 136.8815], size: 16 },
{ name: '大府', latlng: [35.0151, 136.9612], size: 11 },
{ name: '東海', latlng: [35.0218, 136.9019], size: 11 },
{ name: '武豊', latlng: [34.8455, 136.9203], size: 10 },
{ name: '河和', latlng: [34.7705, 136.9244], size: 10 },
{ name: '常滑', latlng: [34.8839, 136.8367], size: 10 },
{ name: '阿久比', latlng: [34.9527, 136.9242], size: 10 },
];
cities.forEach(c => {
const html = ``;
const icon = L.divIcon({ html, className: '', iconSize: [c.size, c.size + 24], iconAnchor: [c.size/2, c.size/2] });
L.marker(c.latlng, { icon }).addTo(map);
});
// 主要高校
const schools = [
{ name: '半田高校', latlng: [34.8945, 136.9389] },
{ name: '半田東高校', latlng: [34.9106, 136.9525] },
{ name: '武豊高校', latlng: [34.8421, 136.9181] },
{ name: '阿久比高校', latlng: [34.9530, 136.9264] },
{ name: '横須賀高校', latlng: [35.0309, 136.9078] },
{ name: '東海高校', latlng: [35.1610, 136.9170] },
{ name: '旭丘高校', latlng: [35.1798, 136.9132] },
{ name: '愛工大名電', latlng: [35.1671, 136.9326] },
{ name: '東邦高校', latlng: [35.1716, 136.9711] },
{ name: '名城大附属', latlng: [35.1703, 136.8721] },
{ name: '南山高校', latlng: [35.1488, 136.9492] },
{ name: '中部大春日丘', latlng: [35.2517, 136.9740] },
];
schools.forEach(s => {
const html = ``;
const icon = L.divIcon({ html, className: '', iconSize: [10, 10], iconAnchor: [5, 5] });
L.marker(s.latlng, { icon }).addTo(map).bindPopup(`${s.name}`);
});
return () => {
if (mapRef.current) {
mapRef.current.remove();
mapRef.current = null;
}
};
}, []);
return (
);
}
/* === legacy SVG map (kept for reference, replaced by Leaflet above) === */
function CatchmentMapSVG() {
return (
);
}
/* ============================================================
Step illustrations
============================================================ */
function StepLineUp() {
return (
);
}
function StepTour() {
return (
);
}
function StepCardKey() {
return (
);
}
/* expose */
Object.assign(window, {
HeroScene, HomeScene, StudyScene, FamilyScene,
IconStation, IconClock, IconShield, IconWifi, IconCoffee, IconBooth, IconLounge, IconLockKey, IconBird, IconRabbit,
ReframeBackdrop, CatchmentMap,
StepLineUp, StepTour, StepCardKey,
FCColors: C,
});