// Shared atoms — logo, nav, footer, hero scene, placeholder imagery // ════════════════════════ LOGO ════════════════════════ function LogoMark({ size = 38, stroke = "var(--kin)" }) { // Abstract 華 (flower) + 曜 (radiance) mark — concentric rings with a tsubaki petal return ( {/* Stylized 華 inside */} ); } // ════════════════════════ NAV ════════════════════════ function Nav({ current, onNav }) { const [scrolled, setScrolled] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); window.addEventListener("scroll", onScroll); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); const go = (p) => (e) => { e.preventDefault(); onNav(p); }; const items = [ ["home", "表紙", "HOME"], ["omakase", "お任せ", "OMAKASE"], ["shokunin", "店主", "CHEF"], ["sake", "日本酒", "SAKE"], ["interior", "店内", "INTERIOR"], ["access", "所在", "ACCESS"], ["journal", "便り", "JOURNAL"], ]; return ( ); } // ════════════════════════ FOOTER ════════════════════════ function Footer({ onNav }) { const go = (p) => (e) => { e.preventDefault(); onNav(p); }; return ( ); } // ════════════════════════ HERO SCENE — Photorealistic ════════════════════════ function HeroScene() { return (
{/* Deep background — warm key light from above-right */}
{/* Hinoki counter wood — turbulence grain */} {/* Wood grain lines */} {/* Counter front edge highlight */} {/* Hero subject — photorealistic nigiri close-up */} {/* Sushi rice — warm, glistening */} {/* Otoro — deeply marbled */} {/* Out-of-focus back row — heavy bokeh */} {/* Mid bokeh */} {/* Bokeh dots — golden light */} {/* Hero nigiri — slightly tilted, with proper subsurface depth */} {/* Cast shadow */} {/* Rice base — front face */} {/* Rice grain micro-texture — many tiny ovals */} {Array.from({length: 110}).map((_, i) => { const r = i / 110; const angle = (i * 137.5) * Math.PI / 180; const dist = 30 + (i % 9) * 22; const x = Math.cos(angle) * dist; const y = -10 + Math.sin(angle) * (dist * 0.35); const rx = 3 + (i % 3); return ; })} {Array.from({length: 90}).map((_, i) => { const angle = (i * 137.5 + 47) * Math.PI / 180; const dist = 40 + (i % 7) * 26; const x = Math.cos(angle) * dist; const y = -5 + Math.sin(angle) * (dist * 0.32); return ; })} {/* Rice gloss */} {/* Underside shadow */} {/* Toro slice side (depth) */} {/* Toro slice — top */} {/* Marbling — many soft white striations */} {/* Short marbling flecks */} {/* Top gloss */} {/* Nikiri (soy brush) — wet streak */} {/* Tiny salt crystals */} {/* Wasabi tucked under */} {/* Foreground bokeh — extreme depth */} {/* Drifting highlight */}
); } // ════════════════════════ PLACEHOLDER IMAGERY ════════════════════════ // Drag-and-drop slots for real photographs. function Ph({ kind, slotId, placeholder, style }) { const map = { counter: "檜のカウンター", chef: "店主の姿", sake: "酒瓶と盃", tatami: "離れ・障子", fish: "本鮪のフィレ", washi: "和紙・書", plate: "黒楽の皿と握り", moon: "卯月の床の間", }; const id = slotId || `kayou-${kind}`; const ph = placeholder || `${map[kind] || kind} の写真をドロップ`; return ( ); } Object.assign(window, { LogoMark, Nav, Footer, HeroScene, Ph });