// Atoms: ícones, placeholders de joias, helpers
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;
// ----- ícones SVG (stroke) -----
function Icon({ name, size = 18, stroke = 1.6 }) {
const s = size;
const sw = stroke;
const props = { width: s, height: s, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (name) {
case 'search': return ;
case 'user': return ;
case 'bag': return ;
case 'heart': return ;
case 'menu': return ;
case 'close': return ;
case 'arrow': return ;
case 'arrow-down': return ;
case 'check': return ;
case 'plus': return ;
case 'minus': return ;
case 'star': return ;
case 'whatsapp': return ;
case 'shield': return ;
case 'truck': return ;
case 'card': return ;
case 'sparkle':return ;
case 'moon': return ;
case 'eye': return ;
case 'eye-off':return ;
default: return null;
}
}
// ----- Logo wordmark -----
function Logo({ light = false, size = 22 }) {
const color = light ? '#fff' : 'var(--ink)';
return (
Lua Azul
);
}
function LogoMark({ size = 28, light = false }) {
// Official watercolor moon logo
return (
);
}
// ----- Jewelry placeholder visual -----
// SVG illustration of a stylized piece, parameterized by hue + product category.
function JewelArt({ cat = 'Brincos', hue = 200, size = '100%', tone = 'soft' }) {
// tone: 'soft' (light bg), 'deep' (gradient bg)
const id = useMemo(() => 'ja-' + Math.random().toString(36).slice(2), []);
const bgA = tone === 'deep' ? `oklch(0.55 0.13 ${hue})` : `oklch(0.94 0.04 ${hue})`;
const bgB = tone === 'deep' ? `oklch(0.42 0.15 ${hue - 6})` : `oklch(0.88 0.06 ${hue + 6})`;
const metal = tone === 'deep' ? '#cffafe' : `oklch(0.42 0.13 ${hue + 2})`;
const stoneA = `oklch(0.72 0.15 ${hue})`;
const stoneB = `oklch(0.55 0.17 ${hue + 4})`;
const shine = '#ffffff';
return (
);
}
function Earring({ metal, stone, shine }) {
return (
{/* Hook */}
{/* Chain */}
{/* Stone */}
{/* facet lines */}
);
}
function Necklace({ metal, stone, shine }) {
return (
{/* Chain arc */}
{/* Pendant */}
{/* bail */}
);
}
function Bracelet({ metal, stone, shine }) {
const beads = Array.from({length: 9}, (_,i)=> 60 + i*22);
return (
{beads.map((x,i)=>(
{i%2===0 && }
))}
);
}
function Choker({ metal, stone, shine }) {
return (
{/* center stone */}
);
}
function SetCombo({ metal, stone, shine }) {
return (
{/* mini earring left */}
{/* mini earring right */}
{/* necklace arc */}
);
}
// ----- Cart context -----
const CartContext = createContext(null);
const CART_KEY = 'lua_cart_state';
function itemToStored(i){ return { id: i.id, qty: i.qty, ref: i.ref }; }
function loadLocalCart(){
try {
const raw = localStorage.getItem(CART_KEY);
if (!raw) return [];
const arr = JSON.parse(raw);
return Array.isArray(arr) ? arr.filter(it => it.id && it.ref) : [];
} catch { return []; }
}
function CartProvider({ children }) {
const [items, setItems] = useState(() => loadLocalCart());
const [open, setOpen] = useState(false);
const [flash, setFlash] = useState(null);
const [hydrated, setHydrated] = useState(false);
// Persiste no localStorage sempre (sobrevive refresh)
useEffect(() => {
try { localStorage.setItem(CART_KEY, JSON.stringify(items.map(itemToStored))); } catch {}
// Se logado, sincroniza com backend (debounce)
const token = localStorage.getItem('lua_token');
if (!token || !hydrated) return;
const t = setTimeout(() => {
fetch('/api/cart', {
method: 'PUT',
headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
body: JSON.stringify({ items: items.map(i => ({
id: i.id, name: i.ref?.name, price: i.ref?.price, qty: i.qty,
image: i.ref?.image, variant: i.ref?.variant, cat: i.ref?.cat, hue: i.ref?.hue, slug: i.ref?.slug,
})) }),
}).catch(()=>{});
}, 800);
return () => clearTimeout(t);
}, [items, hydrated]);
// Mount: se logado, busca carrinho do servidor e mescla com local
useEffect(() => {
const token = localStorage.getItem('lua_token');
if (!token){ setHydrated(true); return; }
fetch('/api/cart', { headers: { 'Authorization': 'Bearer ' + token } })
.then(r => r.ok ? r.json() : null)
.then(data => {
if (!data || !Array.isArray(data.cart)) return;
const serverItems = data.cart.map(it => ({ id: it.id, qty: it.qty || 1, ref: { ...it } }));
// Mescla: server prioridade, mas mantém locais que não estão no server
setItems(local => {
const merged = [...serverItems];
for (const l of local){
if (!merged.find(m => m.id === l.id)) merged.push(l);
}
return merged;
});
})
.catch(()=>{})
.finally(() => setHydrated(true));
}, []);
function add(product, qty = 1) {
setItems((cur) => {
const existing = cur.find(i => i.id === product.id);
if (existing) return cur.map(i => i.id === product.id ? { ...i, qty: i.qty + qty } : i);
return [...cur, { id: product.id, qty, ref: product }];
});
setFlash(product.name);
setTimeout(()=> setFlash(null), 1800);
}
function remove(id) { setItems(cur => cur.filter(i => i.id !== id)); }
function setQty(id, qty) {
if (qty <= 0) return remove(id);
setItems(cur => cur.map(i => i.id === id ? { ...i, qty } : i));
}
function buyNow(product) {
add(product, 1);
setTimeout(()=> setOpen(true), 200);
}
function clear() { setItems([]); }
const count = items.reduce((s,i)=> s + (i.qty || 0), 0);
const total = items.reduce((s,i)=> s + (i.qty || 0) * (i.ref?.price || 0), 0);
return (
{children}
);
}
const useCart = () => useContext(CartContext);
// ----- Reveal on scroll -----
function useReveal() {
useEffect(() => {
const els = document.querySelectorAll('.reveal:not(.in)');
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }});
}, { threshold: 0.12 });
els.forEach(el => io.observe(el));
return () => io.disconnect();
});
}
// ----- format money -----
const brl = (v) => 'R$ ' + v.toFixed(2).replace('.', ',');
Object.assign(window, { Icon, Logo, LogoMark, JewelArt, CartProvider, useCart, useReveal, brl });