/* global React, ReactDOM, I18N */ const { useState, useEffect, useRef } = React; // ------- tiny helpers ------- function useLang() { const [lang, setLang] = useState(() => { const saved = localStorage.getItem("tokyoToMin.lang"); if (saved && I18N[saved]) return saved; return "ja"; }); useEffect(() => { localStorage.setItem("tokyoToMin.lang", lang); document.body.setAttribute("data-lang", lang); document.documentElement.lang = lang; }, [lang]); return [lang, setLang]; } function useReveal() { useEffect(() => { const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.12 } ); document.querySelectorAll(".reveal").forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } // ------- icons ------- const Icon = { Menu: () => (), Close: () => (), Arrow: () => (→), Line: () => (), Check: () => (), Globe: () => (), }; // ------- brand mark (5 petals representing 5 founders, inside Tokyo's circle) ------- function BrandMark() { return ( {[0,72,144,216,288].map((a,i) => { const rad = (a - 90) * Math.PI / 180; const x = 20 + Math.cos(rad) * 9; const y = 20 + Math.sin(rad) * 9; return ; })} ); } // ------- skyline silhouette ------- function Skyline() { return ( {/* Tokyo skyline-ish silhouettes */} {/* Tokyo Tower hint */} ); } // ------- QR placeholder ------- function QRMark() { // decorative QR-like grid const size = 21; const pattern = []; // deterministic pseudo-random pattern seeded by index for (let r = 0; r < size; r++) { for (let c = 0; c < size; c++) { const onCorner = (r < 7 && c < 7) || (r < 7 && c >= size - 7) || (r >= size - 7 && c < 7); if (onCorner) { const inRing = ((r === 0 || r === 6) && c <= 6) || ((c === 0 || c === 6) && r <= 6) || ((r === size - 1 || r === size - 7) && c <= 6) || ((c === 0 || c === 6) && r >= size - 7) || ((r === 0 || r === 6) && c >= size - 7) || ((c === size - 1 || c === size - 7) && r <= 6); const inCenter = (r >= 2 && r <= 4 && c >= 2 && c <= 4) || (r >= 2 && r <= 4 && c >= size - 5 && c <= size - 3) || (r >= size - 5 && r <= size - 3 && c >= 2 && c <= 4); pattern.push({ r, c, on: inRing || inCenter }); continue; } // simple pseudo-random const v = ((r * 73 + c * 131 + r * c) % 7); pattern.push({ r, c, on: v < 3 }); } } const cell = 100 / size; return ( {pattern.map((p,i) => p.on ? : null )} {/* Tokyo-green center mark */} ); } // ------- Seal / circular mark ------- function Seal() { return ( TOKYO · METROPOLITAN · ASSOCIATION · IN · THAILAND · EST · 2026 · {[0,72,144,216,288].map((a,i) => { const rad = (a-90)*Math.PI/180; return ; })} ); } // ------- Header ------- function Header({ lang, setLang, t }) { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const nav = [ ["#about", t.nav.about], ["#qualify", t.nav.qualify || (lang === "ja" ? "参加資格" : lang === "th" ? "เงื่อนไข" : "Eligibility")], ["#officers", t.nav.officers], ["reports.html", t.nav.activities], ["#events", t.nav.events], ["#join", t.nav.join], ["#news", t.nav.news], ]; return ( <>
在タイ東京都民会
Tokyo Met. Assoc. in Thailand
{["ja","en","th"].map((code) => ( ))}
{nav.map(([href, label]) => ( setMobileOpen(false)}>{label} ))}
); } // ------- Hero ------- function Hero({ t }) { return (
{t.hero.eyebrow}

{t.hero.title1} {t.hero.title2}

{t.hero.subtitle}

{t.hero.cta1} {t.hero.cta2}
バンコクで “東京” と繋がろう — 在タイ東京都民会
{[ [t.hero.stat1Value, t.hero.stat1Label], [t.hero.stat2Value, t.hero.stat2Label], [t.hero.stat3Value, t.hero.stat3Label], [t.hero.stat4Value, t.hero.stat4Label], ].map(([v,l], i) => (
{v}
{l}
))}
); } function Marquee({ words }) { const loop = [...words, ...words]; return (
{loop.map((w, i) => {w})}
); } // ------- About ------- function About({ t }) { return (
{t.about.kicker}

{t.about.title}

{t.about.lead}

{t.about.body.map((p, i) =>

{p}

)}
{t.about.pillars.map((p, i) => (
{p.n}

{p.t}

{p.d}

))}
); } // ------- Qualify ------- function Qualify({ t }) { if (!t.qualify) return null; return (
{t.qualify.kicker}

{t.qualify.title}

{t.qualify.lead}

{t.qualify.rules.map((r, i) => (

{r.t}

{r.d}

))}

{t.qualify.note}

); } function RuleIcon({ kind }) { const stroke = "#c8a24b"; const sw = 1.6; const common = { width: 26, height: 26, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" }; switch (kind) { case "live": // 東京在住経験 return ( ); case "office": // 本社・支社が在京 return ( ); case "pass": // 東京を通過 return ( ); case "name": // 都知事の名前が言える return ( ); default: return null; } } // ------- Officers ------- function Officers({ t }) { return (
{t.officers.kicker}

{t.officers.title}

{t.officers.lead}

{t.officers.list.map((o, i) => (
{o.initial}
{o.role}
{o.name}
))}
); } // ------- Activities ------- function Activities({ t, lang }) { return (
{t.activities.kicker}

{t.activities.title}

{t.activities.lead}

{t.activities.items.map((a, i) => { const Tag = a.href ? "a" : "article"; return (
{a.date}
{a.tag}

{a.title}

{a.excerpt}

{a.href && {lang === "ja" ? "活動報告を見る →" : lang === "th" ? "ดูรายงาน →" : "Read report →"}}
); })}
); } // ------- Events ------- function Events({ t }) { const n = t.events.next; return (
{t.events.kicker}

{t.events.title}

{t.events.lead}

{n.eyebrow}
{n.num}
{n.weekday} · {n.date}
{n.dateDisplay}
{n.timeRange}

{n.title}

{n.body}

Venue
{n.venue}
{n.venueSub}
Fee
{n.fee}
{n.feeSub}
Capacity
{n.capacity}
{n.capacitySub}
{n.timelineLabel}
    {n.timeline.map((row, i) => (
  1. {row.t} {row.d}
    2. ))}
{n.ctaPrimary} {n.ctaSecondary}
{t.events.note}
); } // ------- Join ------- function Join({ t }) { const plan = t.join.plans[0]; return (
{t.join.kicker}

{t.join.title}

{t.join.lead}

    {t.join.steps.map((s, i) => (
  1. {s.n}

    {s.t}

    {s.d}

    2. ))}
{plan.name}
{t.join.lead.split(/[。.]/)[0]}
{plan.price}
{plan.unit}
    {plan.features.map((f, i) =>
  • {f}
    • )}
{t.join.lineLabel}
{t.join.lineId}
); } // ------- News ------- function News({ t }) { return (
{t.news.kicker}

{t.news.title}

{t.news.items.map((n, i) => (
{n.date}
{n.tag}
{n.title}
→
 ))}
); } // ------- Contact ------- function Contact({ t }) { return (
{t.contact.kicker}

{t.contact.title}

{t.contact.lead}

LINE ID
{t.contact.addrLabel}
{t.contact.addr}
Hours
{t.contact.hours}
LINE QR
{t.join.lineLabel}
@703nfbjm
LINE で友だち追加
); } // ------- Footer ------- function Footer({ t, lang, setLang }) { return ( ); } // ------- App ------- function App() { const [lang, setLang] = useLang(); const t = I18N[lang]; useReveal(); // re-observe on lang switch (new nodes) useEffect(() => { const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } }); }, { threshold: 0.1 } ); document.querySelectorAll(".reveal:not(.in)").forEach((el) => io.observe(el)); return () => io.disconnect(); }, [lang]); return ( <>