// ─────────────────────────────────────────────────────────────────
// monogram.jsx — official AM monogram, brand-approved files
//
// Four artworks, all transparent PNGs, two resolutions each (1600 / 4000):
// ┌──────────────┬─────────────────────────────────────────────────────┐
// │ variant │ usage │
// ├──────────────┼─────────────────────────────────────────────────────┤
// │ "dourado" │ default · gold foil · works on cream OR navy │
// │ "petroleo" │ navy ink · for light/cream surfaces only │
// │ "branco" │ white · for photos / saturated colour backgrounds │
// │ "preto" │ black · for stationery, monochrome, embossing │
// └──────────────┴─────────────────────────────────────────────────────┘
//
// Pass `tone="auto"` to let the component pick based on the active mode:
// light-mode body → "dourado" (gold on cream)
// dark-mode body → "dourado" (gold on navy)
// Use explicit variants when the surface is a photo (→ "branco") or when
// you want the navy-ink reading on a cream surface (→ "petroleo").
//
// Sizes ≥240px auto-load the 4000px file; smaller marks use 1600px.
// ─────────────────────────────────────────────────────────────────
const MONOGRAM_FILES = {
dourado: { 1600: 'assets/logo/AM_dourado_1600.png', 4000: 'assets/logo/AM_dourado_4000.png' },
petroleo: { 1600: 'assets/logo/AM_petroleo_1600.png', 4000: 'assets/logo/AM_petroleo_4000.png' },
branco: { 1600: 'assets/logo/AM_branco_1600.png', 4000: 'assets/logo/AM_branco_4000.png' },
preto: { 1600: 'assets/logo/AM_preto_1600.png', 4000: 'assets/logo/AM_preto_4000.png' },
};
function useMode() {
const [mode, setMode] = React.useState(() =>
document.body.classList.contains('mode-dark') ? 'dark' : 'light'
);
React.useEffect(() => {
const ob = new MutationObserver(() => {
setMode(document.body.classList.contains('mode-dark') ? 'dark' : 'light');
});
ob.observe(document.body, { attributes: true, attributeFilter: ['class'] });
return () => ob.disconnect();
}, []);
return mode;
}
function Monogram({
variant, // optional explicit: 'dourado' | 'petroleo' | 'branco' | 'preto'
tone = 'auto', // legacy: 'auto' | 'dark' | 'light' — maps to variant if unset
size = 80,
style,
className,
}) {
const mode = useMode();
// Resolve which artwork to use
let v = variant;
if (!v) {
if (tone === 'dark') v = 'dourado'; // gold on dark
else if (tone === 'light') v = 'dourado'; // gold on cream
else v = mode === 'dark' ? 'dourado' : 'dourado'; // auto: gold by default
}
const set = MONOGRAM_FILES[v] || MONOGRAM_FILES.dourado;
const src = size >= 240 ? set[4000] : set[1600];
return (
);
}
// Small mark used in nav — same monogram, just smaller.
function NavMark({ size = 32, variant, tone }) {
return ;
}
// ─────────────────────────────────────────────────────────────────
// Gift placeholder illustrations — line drawings on tinted backgrounds.
// We don't have real product photos, so we draw delicate icons that
// suggest the item. Each kind returns a JSX
with role of an image.
// ─────────────────────────────────────────────────────────────────
const GIFT_BG_TINTS = [
['#F4EBDD', '#D8C8AD'], // marfim / papel
['#EDE2CC', '#C7B58F'], // beige
['#E8D9BE', '#B9965B'], // ouro soft
['#DCD2C0', '#A89572'], // pedra warm
['#F1E6D0', '#CFB58A']];
function GiftIllustration({ kind, id }) {
// deterministic tint based on id
const tIdx = (id.charCodeAt(1) + id.charCodeAt(2)) % GIFT_BG_TINTS.length;
const [bg, fg] = GIFT_BG_TINTS[tIdx];
return (
{/* corner ornament */}
);
}
function GiftIcon({ kind }) {
switch (kind) {
case 'glassware':
return (
);
case 'cookware':
return (
);
case 'espresso':
return (
);
case 'bedding':
return (
);
case 'wine':
return (
{[10, 30, 56].map((y) =>
)}
);
case 'cutlery':
return (
);
case 'blender':
return (
);
case 'mixer':
return (
);
case 'robot':
return (
);
case 'towel':
return (
);
case 'lamp':
return (
);
// ─── HONEYMOON ───
case 'dinner':
return (
);
case 'dive':
return (
);
case 'catamaran':
return (
);
case 'spa':
return (
);
case 'snorkel':
return (
);
case 'caves':
return (
);
case 'boat':
return (
);
case 'massage':
return (
);
case 'plane':
return (
);
case 'suite':
return (
);
case 'horse':
return (
);
case 'rum':
return (
);
default:
return (
);
}
}
Object.assign(window, { Monogram, NavMark, GiftIllustration });