// Banner em destaque para Dia dos Namorados (12/06)
// Inspirado nos stories da Lua Azul: aquarela azul, corações desenhados à mão,
// pulseiras em destaque, contagem regressiva.
const NAMORADOS_DATE = '2026-06-12T00:00:00-03:00';
const NAMORADOS_FEATURED = [
{ id: 'pl-ayla', name: 'Pulseira Ayla', sub: 'Aço Inox Legítimo', price: 45.90, hue: 200 },
{ id: 'pl-nataly', name: 'Pulseira Nataly', sub: 'Banhada a ouro 18K', price: 47.90, hue: 350 },
{ id: 'pl-isabelle', name: 'Pulseira Isabelle', sub: 'Banhada a ouro 18K', price: 47.90, hue: 15 },
{ id: 'pl-sina', name: 'Pulseira Siná', sub: 'Banhada a ouro 18K', price: 47.90, hue: 210 },
];
// ----- countdown hook -----
function useCountdown(targetIso) {
const [now, setNow] = useState(() => Date.now());
useEffect(() => {
const i = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(i);
}, []);
const target = new Date(targetIso).getTime();
const diff = Math.max(0, target - now);
const d = Math.floor(diff / 86400000);
const h = Math.floor((diff % 86400000) / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
return { d, h, m, s, expired: diff === 0 };
}
// ----- watercolor splash via SVG -----
function WatercolorSplash({ pos = 'tl', color = '#7a9cd9', size = 380, rotation = 0, opacity = 0.55 }) {
const id = useMemo(() => 'wc-' + Math.random().toString(36).slice(2), []);
const posStyle = {
tl: { top: -size * 0.35, left: -size * 0.25 },
tr: { top: -size * 0.35, right: -size * 0.25 },
bl: { bottom: -size * 0.35, left: -size * 0.25 },
br: { bottom: -size * 0.35, right: -size * 0.25 },
}[pos] || {};
return (
);
}
// ----- hand-drawn heart -----
function DrawnHeart({ size = 60, color = '#5d7fc4', stroke = 2, style = {} }) {
const id = useMemo(() => 'hh-' + Math.random().toString(36).slice(2), []);
// Two overlapping slightly-offset paths => sketchy double-stroke look
return (
);
}
// ----- small jewelry illustration tuned for bracelets (beaded loop) -----
function BeadedBracelet({ hue = 200, size = '100%' }) {
const id = useMemo(() => 'bb-' + Math.random().toString(36).slice(2), []);
const stone = `oklch(0.72 0.14 ${hue})`;
const stoneB = `oklch(0.58 0.16 ${hue + 4})`;
const accent = `oklch(0.78 0.10 ${(hue + 40) % 360})`;
const pearl = '#f6f1ea';
const metal = '#d4af6a';
const beads = [];
const N = 18;
for (let i = 0; i < N; i++) {
const a = (i / N) * Math.PI * 2 - Math.PI / 2;
const r = 92;
const x = 150 + Math.cos(a) * r;
const y = 150 + Math.sin(a) * r;
// alternate: pearl, stone, pearl, accent
const type = i % 4;
beads.push({ x, y, type });
}
return (
);
}
// ----- countdown pip -----
function CountPip({ n, label }) {
return (
{String(n).padStart(2, '0')}
{label}
);
}
// ====== MAIN BANNER ======
function ValentinesBanner() {
const { d, h, m, s } = useCountdown(NAMORADOS_DATE);
const cart = useCart();
const [items, setItems] = useState(NAMORADOS_FEATURED);
useEffect(() => {
fetch('/api/products?special=namorados&_=' + Date.now(), { cache: 'no-store' })
.then(r => r.ok ? r.json() : null)
.then(data => {
if (data && data.products && data.products.length > 0) {
const mapped = data.products.slice(0, 4).map(p => ({
id: p.id || p.slug,
slug: p.slug,
name: p.name,
sub: p.short || p.cat || '',
price: p.price,
hue: p.hue || 200,
image: p.image,
images: p.images,
}));
setItems(mapped);
}
})
.catch(() => {});
}, []);
// Coral / blush V-Day accent on top of brand blue
const coral = '#e25c7c';
const coralSoft = '#fbe1e7';
return (
{/* watercolor corners */}
{/* floating hand-drawn hearts */}
{/* GRID: copy / featured products */}
{/* LEFT — copy */}
Dia dos Namorados · 12 . 06
Presenteie quem
você
ama
{/* sketchy underline */}
.
Pulseiras, colares e brincos feitos à mão em Salvador. Embalagem de presente cortesia e entrega antes do dia 12.
{/* countdown */}
{/* CTAs */}
{/* perks strip */}
Embalagem presente grátis
Entrega antes do dia 12
Parcele em 6x
{/* RIGHT — featured bracelet stack */}
{/* big halo behind */}
{/* central bracelet card */}
{items[1] &&
cart && cart.add({ ...items[1], cat: 'Pulseiras' })}
/>}
{items[0] && cart && cart.add({ ...items[0], cat: 'Pulseiras' })}
/>}
{items[2] && cart && cart.add({ ...items[2], cat: 'Pulseiras' })}
/>}
{/* moon mark accent */}
{/* ====== GRID of 4 featured bracelets ====== */}
{items.map(item => (
cart && cart.add({ ...item, cat: 'Pulseiras' })}
/>
))}
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: 'white', borderRadius: 22, overflow: 'hidden',
boxShadow: hover
? '0 30px 60px -16px rgba(11,46,54,0.32)'
: '0 20px 40px -16px rgba(11,46,54,0.22)',
transition: 'box-shadow .25s ease, transform .25s ease',
...style,
}}
>
{img1
? <>
:
}
{item.name}
{item.sub}
R$ {item.price.toFixed(2).replace('.', ',')}
setHover(true)} onMouseLeave={() => setHover(false)}
style={{
background: 'white', borderRadius: 18, overflow: 'hidden',
border: '1px solid var(--line)',
transition: 'all .2s ease',
transform: hover ? 'translateY(-4px)' : 'none',
boxShadow: hover
? '0 24px 48px -16px rgba(11,46,54,0.18)'
: '0 4px 12px -6px rgba(11,46,54,0.08)',
position: 'relative',
}}
>
Namorados
{img1
? <>
:
}
{item.name}
{item.sub}
R$ {item.price.toFixed(2).replace('.', ',')}
Dia dos Namorados · 12.06 · Embalagem de presente grátis & entrega antes do dia 12
);
}
Object.assign(window, { ValentinesBanner, ValentinesStrip });