');
const { lang, setLang } = ctx;
const langs = [{ id: 'pt', label: 'PT' }, { id: 'en', label: 'EN' }];
return (
{langs.map((l) => {
const active = lang === l.id;
return (
);
})}
);
}
// ─────────────────────────────────────────────────────────────────────
// Inject base styles once
// ─────────────────────────────────────────────────────────────────────
(function injectLVStyles() {
if (typeof document === 'undefined') return;
if (document.getElementById('lv-base')) return;
const link = document.createElement('link');
link.rel = 'stylesheet';
link.crossOrigin = 'anonymous';
link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap';
document.head.appendChild(link);
const s = document.createElement('style');
s.id = 'lv-base';
s.textContent = `
html, body { margin:0; padding:0; background: ${LV.cream}; }
html { overflow-x: hidden; }
body { font-family: ${LV.fontUI}; color: ${LV.text}; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
.lv-noise {
position: relative;
}
.lv-noise::before {
content:''; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(15,118,110,0.04) 1px, transparent 1px);
background-size: 16px 16px;
opacity: 0.5;
mask-image: linear-gradient(180deg, black, transparent);
}
.lv-rule {
height: 1px; background: linear-gradient(90deg, transparent, ${LV.borderStrong}, transparent);
}
.lv-fade-bottom { mask-image: linear-gradient(180deg, black 60%, transparent); }
.lv-fade-top { mask-image: linear-gradient(180deg, transparent, black 30%); }
.lv-fade-edges { mask-image: linear-gradient(180deg, transparent, black 8%, black 92%, transparent); }
.lv-marquee {
animation: lv-marquee 60s linear infinite;
}
@keyframes lv-marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes lv-pulse {
0%, 100% { opacity: 0.6; transform: scale(1); }
50% { opacity: 1; transform: scale(1.05); }
}
.lv-pulse { animation: lv-pulse 2.4s ease-in-out infinite; }
.lv-grid-bg {
background-image:
linear-gradient(${LV.creamDeep} 1px, transparent 1px),
linear-gradient(90deg, ${LV.creamDeep} 1px, transparent 1px);
background-size: 56px 56px;
background-position: -1px -1px;
}
/* Reset focus to teal */
*:focus-visible { outline: 2px solid ${LV.teal600}; outline-offset: 2px; border-radius: 6px; }
/* Scaled screen wrappers */
.lv-scaled { transform-origin: top left; will-change: transform; }
`;
document.head.appendChild(s);
})();
// ─────────────────────────────────────────────────────────────────────
// Atoms
// ─────────────────────────────────────────────────────────────────────
function LVContainer({ children, style, narrow }) {
const isMobile = useIsMobile();
return (
{children}
);
}
function LVKicker({ children, color = LV.teal700, style }) {
return (
{children}
);
}
function LVHeading({ children, size = 'lg', italic, style, as = 'h2' }) {
const map = {
xl: { fontSize: 'clamp(56px, 6.4vw, 92px)', lineHeight: 0.96, letterSpacing: -2.4 },
lg: { fontSize: 'clamp(40px, 4vw, 60px)', lineHeight: 1.02, letterSpacing: -1.5 },
md: { fontSize: 'clamp(28px, 2.4vw, 38px)', lineHeight: 1.1, letterSpacing: -0.8 },
sm: { fontSize: 'clamp(22px, 1.8vw, 26px)', lineHeight: 1.2, letterSpacing: -0.4 },
};
const Tag = as;
return (
{children}
);
}
function LVLead({ children, style, size = 'md' }) {
const map = {
lg: { fontSize: 20, lineHeight: 1.55 },
md: { fontSize: 17, lineHeight: 1.6 },
sm: { fontSize: 15, lineHeight: 1.6 },
};
return {children}
;
}
function LVButton({ children, kind = 'primary', size = 'md', full, onClick, style, icon, iconRight }) {
const sizes = {
sm: { padding: '8px 14px', fontSize: 13, height: 36 },
md: { padding: '10px 18px', fontSize: 14, height: 44 },
lg: { padding: '14px 24px', fontSize: 15, height: 52 },
};
const kinds = {
primary: {
background: LV.teal700, color: '#fff',
border: `1px solid ${LV.teal700}`,
boxShadow: '0 1px 0 rgba(15,55,55,0.18), inset 0 1px 0 rgba(255,255,255,0.12)',
},
secondary: {
background: LV.paper, color: LV.ink,
border: `1px solid ${LV.borderStrong}`,
},
ghost: {
background: 'transparent', color: LV.ink,
border: '1px solid transparent',
},
dark: {
background: LV.ink, color: '#fff',
border: `1px solid ${LV.ink}`,
},
};
return (
);
}
function LVPill({ children, tone = 'teal', style }) {
const tones = {
teal: { bg: LV.teal100, fg: LV.teal900, bd: LV.teal200 },
amber: { bg: LV.amberBg, fg: LV.amber, bd: '#fde68a' },
rose: { bg: LV.roseBg, fg: LV.rose, bd: '#fecaca' },
cream: { bg: LV.creamWarm, fg: LV.inkSoft, bd: LV.creamDeep },
dark: { bg: LV.ink, fg: '#fff', bd: LV.ink },
};
const t = tones[tone] || tones.teal;
return (
{children}
);
}
// ─────────────────────────────────────────────────────────────────────
// Brand mark
// ─────────────────────────────────────────────────────────────────────
function LVBrand({ size = 22, color = LV.ink, withMark = true }) {
return (
{withMark ? (
) : null}
Longevium
);
}
// ─────────────────────────────────────────────────────────────────────
// Inline icons (matching lucide style of LPR system)
// ─────────────────────────────────────────────────────────────────────
const LVIcon = {
Arrow: (p) => ,
Check: (p) => ,
Spark: (p) => ,
Heart: (p) => ,
Activity: (p) => ,
Shield: (p) => ,
Building: (p) => ,
Stethoscope: (p) => ,
User: (p) => ,
Lock: (p) => ,
Plug: (p) => ,
Layers: (p) => ,
Brain: (p) => ,
Apple: (p) => ,
Moon: (p) => ,
Flame: (p) => ,
Zap: (p) => ,
Dumbbell: (p) => ,
Target: (p) => ,
Globe: (p) => ,
Trend: (p) => ,
Sparkles: (p) => ,
};
// ─────────────────────────────────────────────────────────────────────
// Sticky top nav
// ─────────────────────────────────────────────────────────────────────
function LVNav() {
const t = useT();
const isMobile = useIsMobile();
const isTablet = useIsTablet();
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 24);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
return (
);
}
// ─────────────────────────────────────────────────────────────────────
// Section wrapper
// ─────────────────────────────────────────────────────────────────────
function LVSection({ id, bg, children, style, divider }) {
const isMobile = useIsMobile();
return (
);
}
// ─────────────────────────────────────────────────────────────────────
// Scaled screen wrapper — clips a real React screen at fixed dimensions
// and scales it to the container.
// ─────────────────────────────────────────────────────────────────────
function ScreenFrame({ width, height, scale = 0.5, radius = 14, shadow = true, border = true, children, style }) {
// Auto-shrink: if the parent is narrower than `width * scale`, recompute scale
// so the frame always fits its container. Prevents horizontal overflow on
// viewports we didn't anticipate (Fold/SE 1st gen/etc.).
const ref = React.useRef(null);
const [actual, setActual] = React.useState(scale);
React.useLayoutEffect(() => {
const el = ref.current;
if (!el || !el.parentElement) return;
const parent = el.parentElement;
const update = () => {
// Use the parent's content-box width (clientWidth minus padding) so we
// don't bleed into its padding when shrinking to fit.
const cs = getComputedStyle(parent);
const padL = parseFloat(cs.paddingLeft) || 0;
const padR = parseFloat(cs.paddingRight) || 0;
const inner = (parent.clientWidth || parent.getBoundingClientRect().width) - padL - padR;
if (inner <= 0) return;
const fitScale = inner / width;
// Quantize to 3 decimals — avoids re-renders from sub-pixel parent jitter
// (font swap, scrollbar reflow, tiny layout animations).
const next = Math.round(Math.min(scale, fitScale) * 1000) / 1000;
setActual((prev) => prev === next ? prev : next);
};
update();
if (typeof ResizeObserver !== 'undefined') {
const ro = new ResizeObserver(update);
ro.observe(parent);
return () => ro.disconnect();
}
window.addEventListener('resize', update);
return () => window.removeEventListener('resize', update);
}, [width, scale]);
const W = width * actual, H = height * actual;
return (
);
}
// expose
Object.assign(window, {
LV, LVContainer, LVKicker, LVHeading, LVLead, LVButton, LVPill, LVBrand, LVIcon, LVNav, LVSection, ScreenFrame,
LV_DICT, LangContext, LangProvider, useT, LangToggle,
LV_BP, useMediaQuery, useIsMobile, useIsTablet,
});