// Shared.jsx — Rune, animation hooks, common primitives
const { useEffect, useRef, useState } = React;
// ── Rune mark ───────────────────────────────────────────────
function Rune({ size = 28, color = '#C94A1A', spin = false }) {
const r = size / 2;
const style = spin ? { animation: 'runeSpinAnim 12s linear infinite', transformOrigin: 'center' } : {};
return (
);
}
// ── Scroll-reveal hook ───────────────────────────────────────
function useReveal(threshold = 0.15) {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
if (!('IntersectionObserver' in window)) {
setVisible(true);
return;
}
// Once the desktop columns collapse, some reveal wrappers become taller
// than a phone viewport. A 15% intersection ratio can then be impossible,
// leaving the homepage content permanently transparent after the film.
const mobile = window.matchMedia('(max-width: 720px), (pointer: coarse)').matches;
const effectiveThreshold = mobile ? Math.min(threshold, 0.01) : threshold;
const obs = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) { setVisible(true); obs.unobserve(el); } },
{ threshold: effectiveThreshold, rootMargin: mobile ? '0px 0px 12% 0px' : '0px' }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
return [ref, visible];
}
// ── Reveal wrapper ───────────────────────────────────────────
function Reveal({ children, delay = 0, direction = 'up', threshold = 0.15 }) {
const [ref, visible] = useReveal(threshold);
const translateMap = { up: 'translateY(32px)', down: 'translateY(-32px)', left: 'translateX(32px)', right: 'translateX(-32px)', none: 'none' };
return (
{children}
);
}
// ── Orange divider band ──────────────────────────────────────
function Band() {
return ;
}
// ── Pre-headline label ───────────────────────────────────────
function PreHeadline({ children, light = false }) {
return (
{children}
);
}
// ── Section heading ──────────────────────────────────────────
function SectionHeading({ line1, line2, light = false }) {
return (
{line1}
{line2 &&
{line2}
}
);
}
// ── Kanji watermark ──────────────────────────────────────────
function Kanji({ char, style: extra = {}, size = 280 }) {
return (
{char}
);
}
// ── Grain overlay class applied via inline pseudo-before trick ──
// We rely on the .grain class defined in index.html
// ── Button components ────────────────────────────────────────
function BtnPrimary({ children, onClick, small = false }) {
const [hover, setHover] = useState(false);
return (
);
}
function BtnOutline({ children, onClick, light = false, small = false }) {
const [hover, setHover] = useState(false);
const c = light ? '#F0DFA0' : '#C94A1A';
return (
);
}
// ── Pull quote ───────────────────────────────────────────────
function PullQuote({ children, light = false }) {
return (
{children}
);
}
// ── Stats strip ──────────────────────────────────────────────
function StatsRow({ stats, orange = false }) {
return (
{stats.map((s, i) => (
))}