// 3B Printing homepage — composes design-system components only.
const DS = window.Ds3BPrintingDesignSystem_6b9cdf;
const { HeroFull, TrustStrip, GalleryTile, Lightbox, TierCard, BlogCard } = DS;
const { LINE_HREF, t, Header, SectionTitle, SiteFooter } = window.Shared;
// Hostinger-style scroll reveal: the element starts slightly scaled-down and faded, then
// eases to full size/opacity the first time it scrolls into view (IntersectionObserver, not a
// scroll listener). A callback ref is used so it re-arms when the node actually mounts. Shown
// immediately (no animation) in the builder (EDIT_MODE) or where IntersectionObserver is
// unsupported, so content can never stay stuck invisible.
function Reveal({ children }) {
const [node, setNode] = React.useState(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
if (!node) return;
if (window.EDIT_MODE || !('IntersectionObserver' in window)) { setShown(true); return; }
const io = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) { setShown(true); io.disconnect(); }
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
io.observe(node);
return () => io.disconnect();
}, [node]);
return (
{children}
);
}
function PaperSwatch({ paper, lang }) {
const [hover, setHover] = React.useState(false);
// Up to 3 photos per swatch — hover jumps to the secondary image, then cycles every 2s.
const frames = (paper.images && paper.images.length > 0) ? paper.images : null;
const [slide, setSlide] = React.useState(0);
const framesLen = frames ? frames.length : 0;
React.useEffect(() => {
if (!hover || framesLen < 2) { setSlide(0); return; }
setSlide(1 % framesLen);
const id = setInterval(() => setSlide((s) => (s + 1) % framesLen), 2000);
return () => clearInterval(id);
}, [hover, framesLen]);
// GSM may hold several values (e.g. front/back stock) separated by "|".
const gsmList = String(paper.gsm == null ? '' : paper.gsm).split('|').map((s) => s.trim()).filter(Boolean);
return (
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: 'var(--surface-card)', border: '1px solid var(--line)',
borderRadius: 'var(--radius-card)', overflow: 'hidden', fontFamily: 'var(--font-body)',
boxShadow: hover ? 'var(--shadow-lift)' : 'none',
transform: hover ? 'translateY(-2px)' : 'none',
transition: 'all var(--duration-standard) var(--ease-standard)',
// Fill the (stretched) track slot so a 2-line title doesn't make just that card taller —
// the photo stays a fixed 200px and the text block absorbs the leftover space instead.
height: '100%', display: 'flex', flexDirection: 'column',
}}>
);
}
function cellText(val, lang) {
if (val === true || val === false) return val;
if (val && typeof val === 'object') return lang === 'th' ? val.th : (val.en || val.th);
return val;
}
function BusinessCardTable({ lang, columns, rows }) {
const headerH = 68;
const headerBg = 'var(--bg-base)';
const headerFg = '#FFFFFF';
const bodyFg = 'var(--ink)';
const tick = '✓';
return (
{/* minWidth forces the grid past the viewport on mobile so the wrapper's overflowX actually
engages. Without it the 1fr columns squeeze to min-content, wrapping every cell to one
word per line and still clipping the last tier — a scroll, not a squeeze, is the fix. */}
{/* Header */}
{columns.map((tier, i) => (
{tier}
))}
{/* Rows */}
{rows.map((row, i) => (
{row.en}
{/* Always Noto Sans, not --font-heading-thai — that spot is a typography-panel
override meant for Thai headings, and this is a plain caption, not a heading. */}
);
}
// Shared by TierCarousel/PaperCarousel: lets < > arrows step a continuously CSS-animated
// marquee by one screen-width of cards WITHOUT stopping the drift — clicking doesn't switch to
// a different "mode", it just nudges the same animation forward/back.
//
// Mechanism: on click, read the track's CURRENT on-screen translateX (via getComputedStyle,
// works whether the animation is running live or force-paused in the builder), freeze it there
// with a direct, synchronous DOM mutation + a forced reflow (not requestAnimationFrame — a
// backgrounded tab can pause rAF indefinitely, but a synchronous style read/write always
// commits), then hand off to a plain CSS transition that animates to the target position. When
// that transition ends, the keyframe animation resumes with animation-delay set to the
// equivalent negative offset — so it continues from exactly that point, with no visible seam.
// Works identically in the live site and the builder (EDIT_MODE just keeps it paused at rest;
// the step transition itself never checks EDIT_MODE).
function useMarqueeStep(trackRef, containerRef, duration) {
const [stepping, setStepping] = React.useState(false);
const [stepTarget, setStepTarget] = React.useState(0);
const [resumeDelay, setResumeDelay] = React.useState(0);
const go = (dir) => {
const track = trackRef.current, container = containerRef.current;
if (!track || !container || stepping) return;
const oneCopyWidth = track.scrollWidth / 2; // track holds the item list duplicated once
const stepPx = container.clientWidth; // "one screen" of cards, responsive
const cssTransform = getComputedStyle(track).transform;
const m = new DOMMatrixReadOnly(cssTransform === 'none' ? 'matrix(1,0,0,1,0,0)' : cssTransform);
const currentX = m.m41;
// Freeze at the exact live position — synchronous mutation + forced reflow, so the browser
// commits this frame before any state-driven re-render changes the style again.
track.style.transition = 'none';
track.style.animation = 'none';
track.style.transform = `translateX(${currentX}px)`;
void track.offsetWidth;
let targetX = currentX - dir * stepPx;
while (targetX <= -oneCopyWidth) targetX += oneCopyWidth;
while (targetX > 0) targetX -= oneCopyWidth;
setStepTarget(targetX);
setStepping(true);
};
const onTransitionEnd = (e) => {
if (e.propertyName !== 'transform' || !stepping) return;
const oneCopyWidth = trackRef.current.scrollWidth / 2;
const fraction = (-stepTarget) / oneCopyWidth; // 0..1 progress through one loop cycle
setResumeDelay(-(fraction * duration));
setStepping(false);
};
return { stepping, stepTarget, resumeDelay, go, onTransitionEnd };
}
function MarqueeArrows({ onPrev, onNext }) {
const arrowStyle = (side) => ({
position: 'absolute', top: '50%', [side]: 'var(--space-4)', transform: 'translateY(-50%)',
width: 44, height: 44, borderRadius: '50%', border: '1px solid var(--line)',
background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: 'pointer', boxShadow: 'var(--shadow-lift)', zIndex: 5,
color: 'var(--ink)', fontSize: 18, fontFamily: 'var(--font-body)',
});
return (
);
}
// "Roulette" marquee — continuous CSS-animated loop, plus < > arrows (see useMarqueeStep above)
// that step by one screen-width of cards without interrupting the drift. The track is the tier
// list duplicated once; translateX(-50%) always lands exactly on the identical second copy
// regardless of card count/width, so the loop point is invisible.
// A single `paused` boolean (hover or touch) drives animationPlayState — same on/off switch
// for mouse and touch, matching the pause-then-resume behavior used elsewhere on the site.
function TierCarousel({ lang, tiers }) {
const [paused, setPaused] = React.useState(false);
const loop = React.useMemo(() => [...tiers, ...tiers], [tiers]);
const duration = Math.max(20, tiers.length * 6);
const trackRef = React.useRef(null);
const containerRef = React.useRef(null);
const { stepping, stepTarget, resumeDelay, go, onTransitionEnd } = useMarqueeStep(trackRef, containerRef, duration);
return (
{/* Full-bleed break-out: TierCarousel's parent is centered at max-width:1120px
like every other section, but the marquee itself should extend to the true viewport
edges. 100vw + a negative margin equal to half the viewport minus half this element's
own (centered) width re-anchors it to the browser edges regardless of the ancestor's
width — the classic CSS full-bleed trick. */}
setPaused(true)} onMouseLeave={() => setPaused(false)}
onTouchStart={() => setPaused(true)} onTouchEnd={() => setPaused(false)}
style={{
overflow: 'hidden', position: 'relative',
maskImage: 'linear-gradient(to right, transparent, black 12%, black 88%, transparent)',
WebkitMaskImage: 'linear-gradient(to right, transparent, black 12%, black 88%, transparent)',
}}>
);
}
// Full-bleed gallery — an infinite, center-focused carousel of "sets". Each set is one complete
// 3×2 grid (6 cards). The active set sits centered and fully opaque; every other set (including
// the ones peeking at the edges) is dimmed. Left/right arrows page one whole set at a time and
// LOOP: past the last set the first comes back around, and the last set sits to the left of the
// first. Transform-based (not native scroll) because scroll can't loop or dim by center.
//
// Loop mechanic: the set list is rendered THREE times in a row; `active` lives in the middle
// copy, and after each slide settles we silently re-center by ±one copy if it drifted out — the
// destination set is visually identical, so the seam is invisible (classic infinite-carousel trick).
//
// Each tile is a DISTINCT real gallery item — no duplication. Items (those given a Home position
// in the CMS) are chunked sequentially into one set per screen (3×2 desktop, 2×2 mobile — see
// useIsMobile below), so paging always reveals different work and every tile maps 1:1 to its own
// `gallery_items` row (clicking it in edit mode selects exactly that row in the Inspector). To add
// more work, give more items a Home position in the CMS; the final set may be partial until the
// count is a multiple of the set size — that's expected, not padded.
function buildGallerySets(items, setSize) {
const base = items || [];
if (!base.length) return [];
const sets = [];
for (let start = 0; start < base.length; start += setSize) {
const set = [];
for (let k = 0; k < setSize && start + k < base.length; k++) {
const realIndex = start + k;
set.push({ item: base[realIndex], realIndex, key: `cell-${realIndex}` });
}
sets.push(set);
}
return sets;
}
// Matches styles.css's `@media (max-width: 768px)` breakpoint, which is where the gallery grid
// itself switches to 2 columns (.gallery-set rule) — the JS chunk size has to track the same
// breakpoint or the sets would paginate on a column count the grid isn't actually using.
function useIsMobile() {
const [isMobile, setIsMobile] = React.useState(() => window.matchMedia('(max-width: 768px)').matches);
React.useEffect(() => {
const mq = window.matchMedia('(max-width: 768px)');
const onChange = () => setIsMobile(mq.matches);
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}, []);
return isMobile;
}
function GalleryStrip({ items, lang, onSelect }) {
const isMobile = useIsMobile();
const setSize = isMobile ? 4 : 6; // 2×2 mobile, 3×2 desktop
const sets = React.useMemo(() => buildGallerySets(items, setSize), [items, setSize]);
const N = sets.length;
const tripled = React.useMemo(() => (N ? [...sets, ...sets, ...sets] : []), [sets, N]);
const [active, setActive] = React.useState(0);
const [animate, setAnimate] = React.useState(false);
const [paused, setPaused] = React.useState(false);
const touchX = React.useRef(null);
// Center on the middle copy's first set once sets exist (and whenever their count changes).
React.useEffect(() => { if (N) { setAnimate(false); setActive(N); } }, [N]);
const go = (dir) => { setAnimate(true); setActive((a) => a + dir); };
// Autoplay: advance one set every 5s, looping forever; pause while the user is hovering/touching.
React.useEffect(() => {
if (!N || paused) return;
const id = setInterval(() => go(1), 5000);
return () => clearInterval(id);
}, [N, paused]);
// Seamless loop: after the slide settles, if `active` drifted out of the middle copy, silently
// re-center by ±one copy (animation off) — the destination set is visually identical.
// Timeout must exceed the track's transition duration below (0.8s) so it fires post-settle.
React.useEffect(() => {
if (!N || (active >= N && active < 2 * N)) return;
const id = setTimeout(() => { setAnimate(false); setActive((a) => (a < N ? a + N : a - N)); }, 840);
return () => clearTimeout(id);
}, [active, N]);
// Re-arm animation shortly after any silent (animation-off) jump.
React.useEffect(() => {
if (animate) return;
const id = setTimeout(() => setAnimate(true), 60);
return () => clearTimeout(id);
}, [animate]);
const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; setPaused(true); };
const onTouchEnd = (e) => {
setPaused(false);
if (touchX.current == null) return;
const dx = e.changedTouches[0].clientX - touchX.current;
touchX.current = null;
if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
};
const arrowStyle = (side) => ({
position: 'absolute', top: '50%', [side]: 'var(--space-4)', transform: 'translateY(-50%)',
width: 44, height: 44, borderRadius: '50%', border: '1px solid var(--line)',
background: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: 'pointer', boxShadow: 'var(--shadow-lift)', zIndex: 5,
color: 'var(--ink)', fontSize: 18, fontFamily: 'var(--font-body)',
});
// Move the track so set `active` is centered: viewport-center − half a set − active whole strides.
const trackTransform = `translateX(calc(50vw - (var(--gallery-set-w) / 2) - ${active} * (var(--gallery-set-w) + var(--space-6))))`;
return (
setPaused(true)} onMouseLeave={() => setPaused(false)}
style={{
width: '100vw', marginLeft: 'calc(-50vw + 50%)', position: 'relative', overflow: 'hidden',
maskImage: 'linear-gradient(to right, transparent, black 5%, black 95%, transparent)',
WebkitMaskImage: 'linear-gradient(to right, transparent, black 5%, black 95%, transparent)',
}}>
),
footer: () => ,
};
// Plain top-to-bottom section flow (no stacking/curtain cards). Each section just scale-fades
// in as it scrolls into view; hero and footer render straight (no reveal) so the page opens
// and closes cleanly.
return (
))}
{gsmList.length > 0 && (
{gsmList.map((g, i) => {g} {t[lang].paperWeight})}
)}