/* global React, useLang, LanguageSwitcher */ const { useState, useRef, useEffect } = React; /* ============================================================ useBP — viewport breakpoint hook sm: ≤ 720 md: 721–1024 lg: > 1024 Mirrors the breakpoints baked into the page-level CSS vars. ============================================================ */ const useBP = () => { const get = () => (typeof window !== "undefined" ? window.innerWidth : 1280); const [w, setW] = useState(get()); useEffect(() => { const on = () => setW(window.innerWidth); window.addEventListener("resize", on); return () => window.removeEventListener("resize", on); }, []); return { w, sm: w <= 720, md: w > 720 && w <= 1024, lg: w > 1024, notLg: w <= 1024, }; }; /* ============================================================ Primitives — text-level atoms reused throughout the kit ============================================================ */ const Kicker = ({ children, color = "bronze" }) => (
{children}
); const Folio = ({ children, light }) => (
{children}
); const Tag = ({ children, solid, muted }) => { const base = { fontFamily: "var(--font-latin-sans)", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", padding: "7px 14px", borderRadius: 999, border: "1px solid var(--foiga-bronze)", color: "var(--foiga-bronze)", background: "var(--paper-warm)", display: "inline-block", }; if (solid) Object.assign(base, { background: "var(--foiga-bronze)", color: "var(--paper-warm)" }); if (muted) Object.assign(base, { borderColor: "var(--rule)", color: "var(--ink-3)" }); return {children}; }; const Button = ({ children, variant = "primary", as = "button", ...rest }) => { const base = { fontFamily: "var(--font-latin-sans)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", padding: "14px 22px", border: "1px solid transparent", background: "transparent", cursor: "pointer", lineHeight: 1, display: "inline-block", textDecoration: "none", transition: "background 140ms ease, color 140ms ease, border-color 140ms ease", }; const variants = { primary: { background: "var(--ink-1)", color: "var(--paper-warm)" }, bronze: { background: "var(--foiga-bronze)", color: "var(--paper-warm)" }, outline: { borderColor: "var(--ink-1)", color: "var(--ink-1)" }, ghost: { color: "var(--ink-1)", borderBottom: "1px solid var(--ink-1)", padding: "8px 0" }, }; const TagEl = as; return {children}; }; const Hairline = ({ width, ink, style }) => (
); /* ============================================================ Top navigation — sticky hairline, brand + nav + language switch Sessions item opens a small dropdown of subsections. ============================================================ */ const navItems = [ { key: "home", href: "#top" }, { key: "journal", href: "#journal" }, { key: "sessions", href: "#sessions", sub: [ { key: "plans", href: "#sessions-plans" }, { key: "short", href: "#sessions-short" }, { key: "addons", href: "#sessions-addons" }, { key: "details", href: "#sessions-details" }, { key: "album", href: "#sessions-album" }, ]}, { key: "about", href: "#about" }, ]; const NavItem = ({ item }) => { const { t } = useLang(); const [open, setOpen] = useState(false); const timer = useRef(null); const onEnter = () => { clearTimeout(timer.current); setOpen(true); }; const onLeave = () => { timer.current = setTimeout(() => setOpen(false), 160); }; if (!item.sub) { return ( {t("nav." + item.key)} ); } return (
{t("nav." + item.key)} ▾
{item.sub.map((s, i) => ( { e.currentTarget.style.background = "var(--paper-cream)"; e.currentTarget.style.color = "var(--foiga-bronze)"; }} onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink-1)"; }} > 0{i + 1} {t("sub." + s.key)} ))}
); }; const TopNav = () => { const { t } = useLang(); const { sm, notLg } = useBP(); const [drawer, setDrawer] = useState(false); // Close drawer when viewport grows or when a link is clicked useEffect(() => { if (!notLg) setDrawer(false); }, [notLg]); useEffect(() => { document.body.style.overflow = drawer ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [drawer]); return (
setDrawer(false)} style={{ display: "flex", alignItems: "center", gap: 12, border: 0 }}> Foiga {sm ? "FOIGA" : t("nav.brand")}
{/* Desktop nav */} {!notLg && ( <> {t("nav.inquire")} )} {/* Mobile / tablet — hamburger */} {notLg && ( )} {/* Mobile drawer */} {notLg && (
)}
); }; /* ============================================================ Hero — paper layout, title left, current-issue artifact right ============================================================ */ const Hero = () => { const { t, lang } = useLang(); const { sm, notLg } = useBP(); // Hero uses a 3-line stacked headline — text per language const titleLines = { zh: ["用一勺光，", "記下", "每一天。"], en: ["A spoonful", "of light,", "a record of days."], ja: ["ひとさじの", "光で、", "日々を。"], }[lang]; const subtitle = { zh: "日々を、ひとさじの光で。", en: "日々を、ひとさじの光で。", ja: "A spoonful of light, a record of days.", }[lang]; return (
{t("hero.folio.issue")}
{t("hero.folio.city")} {t("hero.folio.date")}
{t("hero.kicker")}

{titleLines.map((l, i) => {l})}

{subtitle}

{t("hero.body")}

{t("hero.current")}
{t("hero.current.title")}
{t("hero.current.meta")}
); }; /* ============================================================ Section header — reusable across page sections ============================================================ */ const SectionHead = ({ kicker, title, subtitle, num }) => { const { sm } = useBP(); return (
● {kicker}

{title}

{subtitle && (
{subtitle}
)}
{num && {num}}
); }; /* ============================================================ Journal strip — editorial cards (seed + pipeline API) ============================================================ */ const CATEGORY_ZH = { wedding:"婚紗", portrait:"人像", landscape:"風景", season:"季節", event:"活動", travel:"旅拍", commercial:"商業", family:"家庭", }; const JournalCard = ({ image, num, place, title, sub, meta }) => (
№ {num} · {place}

{title}

{sub && (
{sub}
)} {meta}
); const JournalStrip = () => { const { t, lang } = useLang(); const { sm, md } = useBP(); const [apiPosts, setApiPosts] = useState([]); useEffect(() => { fetch('https://foiga-api.foigafoto.workers.dev/api/posts?limit=6') .then(r => r.ok ? r.json() : { posts: [] }) .then(({ posts = [] }) => setApiPosts(posts)) .catch(() => {}); }, []); const SEED_IMGS = [window.__resources.p07, window.__resources.p17, window.__resources.p18]; const seed = ({ zh: [ { place: "奈良", title: "與鹿並肩的早晨", sub: "東大寺前的櫻花林。", meta: "光影手帖 · 約 8 分鐘" }, { place: "京都", title: "緣側上的午後", sub: "粉色袷、一只風鈴、無風。", meta: "京都散步 · 約 12 分鐘" }, { place: "町家", title: "拍攝結束後，他們跳起來。", sub: "在居酒屋的門口、雨後的下午。", meta: "拍攝側記 · 約 6 分鐘" }, ], en: [ { place: "Nara", title: "A morning beside the deer", sub: "Cherry trees in front of Tōdaiji.", meta: "Journal · 8 min read" }, { place: "Kyoto", title: "An afternoon on the engawa", sub: "Pink awase, one wind chime, no wind.", meta: "A walk in Kyoto · 12 min" }, { place: "Machiya", title: "After the shoot, they jumped", sub: "Outside an izakaya, after rain.", meta: "Behind the camera · 6 min" }, ], ja: [ { place: "奈良", title: "鹿のとなりの朝", sub: "東大寺前の桜並木で。", meta: "写真手帖 · 約 8 分" }, { place: "京都", title: "縁側のひととき", sub: "ピンクの袷、風鈴ひとつ、風なし。", meta: "京都散歩 · 約 12 分" }, { place: "町家", title: "撮影が終わって、跳ねた。", sub: "居酒屋の前、雨上がりの午後。", meta: "撮影の余白 · 約 6 分" }, ], }[lang] || []).map((e, i) => ({ ...e, image: SEED_IMGS[i] })); const pipeline = apiPosts.map(p => ({ image: p.thumb_url, place: p.exif_location || CATEGORY_ZH[p.ai_category] || "Foiga", title: p.title, sub: p.body ? p.body.slice(0, 52) + "…" : "", meta: `光影手帖 · ${CATEGORY_ZH[p.ai_category] || "攝影"}`, })); const all = [...pipeline, ...seed]; return (
{all.map((e, i) => )}
); }; /* ============================================================ Feature spread — magazine work commission ============================================================ */ const Feature = () => { const { t } = useLang(); const { sm, notLg } = useBP(); return (
{t("feature.kicker")}

{t("feature.title")}

{t("feature.subtitle")}

{t("feature.body")}

{t("feature.credit")}

{t("feature.tag1")} {t("feature.tag2")}
); }; /* ============================================================ Portfolio grid — five-up thumbnail row ============================================================ */ const PortfolioGrid = () => { const { t, lang } = useLang(); const { sm, md } = useBP(); // 8-photo masonry-style grid — real Foiga work const items = [ { img: window.__resources.p05, zh: "屋簷上 · 京都", en: "On the rooftops · Kyoto", ja: "屋根の上 · 京都", span: "wide" }, { img: window.__resources.p13, zh: "鹿與笑聲 · 奈良", en: "Deer & laughter · Nara", ja: "鹿と笑い · 奈良", span: null }, { img: window.__resources.p10, zh: "黑振袖 · 伏見稻荷", en: "Black furisode · Fushimi", ja: "黒振袖 · 伏見稲荷", span: "wide" }, { img: window.__resources.p14, zh: "和裝 · 神社午後", en: "Kimono · shrine afternoon", ja: "和装 · 神社の午後", span: null }, { img: window.__resources.p16, zh: "櫻吹雪 · 京都", en: "Cherry blossoms · Kyoto", ja: "桜吹雪 · 京都", span: "tall" }, { img: window.__resources.p02, zh: "粉色和服 · 庭園", en: "Pink kimono · garden", ja: "桜色の着物 · 庭園", span: null }, { img: window.__resources.p19, zh: "二人參拜 · 神社", en: "A prayer · Inari shrine", ja: "二人で参拝 · 神社", span: null }, ]; const caption = (it) => ({ zh: it.zh, en: it.en, ja: it.ja }[lang]); return (
{items.map((it, i) => { // On small screens, drop the column-span so layout doesn't break. const colSpan = sm ? 1 : (it.span === "wide" ? 2 : 1); const rowSpan = it.span === "tall" ? 2 : 1; return (
(e.currentTarget.style.opacity = 0.88)} onMouseLeave={(e) => (e.currentTarget.style.opacity = 1)} />
{caption(it)}
); })}
); }; /* ============================================================ Inquiry — underline-only form + hanko mark ============================================================ */ const InquiryField = ({ label, placeholder, type = "text", textarea, name, value, onChange, required }) => (