/* global React, ReactDOM */ const { useState, useEffect, useMemo } = React; /* ------------------------------------------------------------------ Dados: lista de presentes, playlist seed, mural seed ------------------------------------------------------------------ */ const GIFTS_SEED = [ // Faixa 1 — Carinhos pequenos { id: 'g01', cat: 'Carinhos', name: 'Babadores', price: 45, icon: 'bib', tier: 'carinhos' }, { id: 'g02', cat: 'Carinhos', name: 'Pacote de fraldas', price: 60, icon: 'diaperPack', tier: 'carinhos' }, { id: 'g03', cat: 'Carinhos', name: 'Livrinho de pano', price: 75, icon: 'clothBook', tier: 'carinhos' }, { id: 'g04', cat: 'Carinhos', name: 'Naninha', price: 95, icon: 'cuddle', tier: 'carinhos' }, // Faixa 2 — Dia a dia { id: 'g05', cat: 'Dia a dia', name: 'Kit mamadeiras', price: 150, icon: 'bottles', tier: 'diaadia' }, { id: 'g06', cat: 'Dia a dia', name: 'Almofada de amamentação', price: 190, icon: 'pillow', tier: 'diaadia' }, { id: 'g07', cat: 'Dia a dia', name: 'Banheira', price: 230, icon: 'tub', tier: 'diaadia' }, { id: 'g08', cat: 'Dia a dia', name: 'Mochila maternidade', price: 290, icon: 'backpack', tier: 'diaadia' }, // Faixa 3 — Conforto { id: 'g09', cat: 'Conforto', name: 'Trocador', price: 390, icon: 'changingMat', tier: 'conforto' }, { id: 'g10', cat: 'Conforto', name: 'Cadeirinha de descanso', price: 490, icon: 'bouncer', tier: 'conforto' }, { id: 'g11', cat: 'Conforto', name: 'Babá eletrônica', price: 580, icon: 'monitor', tier: 'conforto' }, { id: 'g12', cat: 'Conforto', name: 'Cadeirinha de alimentação', price: 680, icon: 'highChair', tier: 'conforto' }, // Faixa 4 — Itens especiais { id: 'g13', cat: 'Itens especiais', name: 'Bebê conforto', price: 900, icon: 'carSeat', tier: 'especiais' }, { id: 'g14', cat: 'Itens especiais', name: 'Berço', price: 1100, icon: 'crib', tier: 'especiais' }, { id: 'g15', cat: 'Itens especiais', name: 'Carrinho de bebê', price: 1300, icon: 'stroller', tier: 'especiais' }, { id: 'g16', cat: 'Itens especiais', name: 'Cômoda com trocador', price: 1500, icon: 'dresser', tier: 'especiais' }]; /* ------------------------------------------------------------------ Pix BR Code (EMV) — gera payload + QR ------------------------------------------------------------------ */ const PIX_KEY = '1bd18ee8-6692-4003-9fbf-3c02a3d30298'; const PIX_NAME = 'ANDRE RODRIGUES DA SILVA'; const PIX_CITY = 'FLORIANOPOLIS'; // Pix copia-e-cola (BR Code) — gera QR nativo do Pix, sem intermediário. const PIX_CODES = { 45: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d30298520400005303986540545.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEVQ78ESS376BS5QZG9G5763045DEF', 60: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d30298520400005303986540560.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQFE93SEWH0YJQZFQTBCYW263043E78', 75: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d30298520400005303986540575.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQE8WWF08YJRS060BB1BHZX630429DA', 95: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d30298520400005303986540595.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQE9RNPP8C3032ZK4DF0F3D630438FC', 150: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406150.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEB1JDR8QBTGDF4VFS2W6563049348', 190: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406190.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQECD6JNWCCFB9GA7HHT0JV63041CD3', 230: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406230.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEEAPTKVH6GGNRWS767WJA6304C9D9', 290: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406290.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEGVN0KGG25PNV55AHKQV863049852', 390: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406390.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEHWH2CVXCP7TEKRBJ8GQ163048D13', 490: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406490.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEK3WAPZWVXDR930PEZ0GR63042FB7', 580: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406580.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEM089AAN8GZ3GRQ8409BJ6304D3C1', 680: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406680.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQENJGFKT35P6J7R87A73YB63044D28', 900: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d302985204000053039865406900.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQEQ2S9G1T1RX2ZN3YM1CCV63041D75', 1100: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d3029852040000530398654071100.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQER0HRV3GFV13F55T7E8A16304B704', 1300: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d3029852040000530398654071300.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQES9FPPAHFXAR8EGCNGN9P630431F3', 1500: '00020101021126580014br.gov.bcb.pix01361bd18ee8-6692-4003-9fbf-3c02a3d3029852040000530398654071500.005802BR5924ANDRE RODRIGUES DA SILVA6009SAO PAULO622905251KQQETG08SZX2HP9JZYCY7GMK6304A668' }; function pixField(id, value) { const v = String(value); const len = v.length.toString().padStart(2, '0'); return id + len + v; } function pixCRC16(str) { let crc = 0xFFFF; for (let i = 0; i < str.length; i++) { crc ^= str.charCodeAt(i) << 8; for (let j = 0; j < 8; j++) { crc = crc & 0x8000 ? (crc << 1 ^ 0x1021) & 0xFFFF : crc << 1 & 0xFFFF; } } return crc.toString(16).toUpperCase().padStart(4, '0'); } function buildPixPayload(amount) { // Merchant Account Information (ID 26) — Pix static const mai = pixField('00', 'br.gov.bcb.pix') + pixField('01', PIX_KEY); const payload = pixField('00', '01') + // Payload Format pixField('26', mai) + // Merchant Account Info pixField('52', '0000') + // Merchant Category pixField('53', '986') + // Currency BRL pixField('54', amount.toFixed(2)) + // Transaction amount pixField('58', 'BR') + // Country pixField('59', PIX_NAME.slice(0, 25)) + // Merchant name pixField('60', PIX_CITY.slice(0, 15)) + // City pixField('62', pixField('05', '***')); // Additional data const toCRC = payload + '6304'; return toCRC + pixCRC16(toCRC); } /* Mural & playlist data lives in Cloudflare KV via /api/mural and /api/playlist */ /* ------------------------------------------------------------------ Ícones SVG (linha fina, estilo editorial) ------------------------------------------------------------------ */ const stroke = { stroke: 'currentColor', strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' }; const ICON_STYLE = { color: 'var(--sepia-deep)' }; const Icons = { // Babadores — bib com pescoço e laços bib: , // Pacote de fraldas — embalagem retangular diaperPack: , // Livrinho de pano — livro aberto com pontos de costura clothBook: , // Naninha — bichinho de pelúcia (orelhas + corpo) cuddle: , // Kit mamadeiras — duas mamadeiras bottles: , // Almofada de amamentação — formato em "C" pillow: , // Banheira — formato oval com água tub: , // Mochila maternidade — mochila com alça backpack: , // Trocador — almofada com bordas levantadas changingMat: , // Cadeirinha de descanso — bouncer bouncer: , // Babá eletrônica — câmera/monitor com antena monitor: , // Cadeirinha de alimentação — high chair highChair: , // Bebê conforto — car seat com alça carSeat: , // Berço — crib com grade crib: , // Carrinho de bebê — stroller stroller: , // Cômoda com trocador — dresser dresser: }; /* ------------------------------------------------------------------ Ornamentos SVG — laço, cereja, lagosta, balão ------------------------------------------------------------------ */ const Bow = ({ size = 200 }) => ; const Cherry = ({ size = 140 }) => ; const Lobster = ({ size = 200 }) => ; const Balloon = ({ size = 100, color = '#a8c4dc' }) => ; /* ------------------------------------------------------------------ Top bar ------------------------------------------------------------------ */ function Topbar() { return (
Allegra · 2026
); } /* ------------------------------------------------------------------ Hero ------------------------------------------------------------------ */ function Hero() { const items = ['Chá da Allegra', '◆', '09 de Maio', '◆', 'Sábado, 12h', '◆', 'Rua Almirante Lamego, 910', '◆', 'Thais & André', '◆']; const ticker = [...items, ...items, ...items]; return (
Um convite para celebrar

Allegra

Chá de bebê09 · Maio · 2026
QuandoSábado, 12h
OndeR. Almirante Lamego, 910
AnfitriõesThais & André
{ticker.map((t, i) => {t} )}
); } /* ------------------------------------------------------------------ HQ + Pull-quote ------------------------------------------------------------------ */ function HQSection() { return (
HQ — O melhor presente dos meus 40
Arquivo pessoal · 2026
Capítulo 01 · A história

“O melhor presente dos meus 40.” — Allegra está chegando pertinho do aniversário do André. Um chá de bebê que também é comemoração de vida. Dois motivos, uma festa só.

Data
09 de Maio
Motivo
Allegra + 40 do André
Dress code
o que deixar feliz
); } /* ------------------------------------------------------------------ Recado dos pais + galeria ------------------------------------------------------------------ */ function Recado() { return (
02 · Recado

Oi,
gente querida.

A Allegra começou com um encontro em 2009. Virou ultrassom, virou chute no meio da madrugada, virou enxoval. Hoje é chá de bebê marcado pro dia 09 de maio — que também é aniversário do André.

A gente não quer nada demais. Quer que você venha, que coma, que ria, que conte alguma história antiga. Se sobrar tempo, deixa um recado pra ela ler quando crescer. E se quiser presentear, tem uma lista aqui em baixo.

Se tiver que escolher uma coisa pra trazer, traz você. O resto a gente resolve.

— Thais & André
); } /* ------------------------------------------------------------------ Lista de presentes ------------------------------------------------------------------ */ function GiftModal({ gift, onClose }) { const code = PIX_CODES[gift.price] || ''; const fallbackPayload = useMemo(() => buildPixPayload(gift.price), [gift.price]); const payload = code || fallbackPayload; const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=320x320&margin=0&data=${encodeURIComponent(payload)}`; const [copied, setCopied] = useState(false); const copy = () => { navigator.clipboard?.writeText(payload); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (
e.stopPropagation()}>
{gift.cat} · Pix de R$ {gift.price}

{gift.name}

Aponte a câmera do banco no QR code abaixo — R$ {gift.price} já vai preenchido.

{`QR
ou copia-e-cola
{payload}

Obrigada 💛 — Thais & André

); } function PixKeyCopy() { const [copied, setCopied] = useState(false); const copy = () => { navigator.clipboard?.writeText(PIX_KEY); setCopied(true); setTimeout(() => setCopied(false), 2000); }; return (
chave pix · {PIX_KEY}
); } function GiftsSection() { const [filter, setFilter] = useState('todas'); const [open, setOpen] = useState(null); const filters = [ { k: 'todas', label: 'Todas' }, { k: 'carinhos', label: 'Carinhos' }, { k: 'diaadia', label: 'Dia a dia' }, { k: 'conforto', label: 'Conforto' }, { k: 'especiais', label: 'Itens especiais' }]; const visible = useMemo(() => { if (filter === 'todas') return GIFTS_SEED; return GIFTS_SEED.filter((g) => g.tier === filter); }, [filter]); return (
03 · Lista

Lista de
presentes.

Separamos uma listinha em quatro faixas, do mais simbólico ao mais estrutural. Pode escolher pelo que tem a ver com você — e se não quiser presente, traz só sua presença, que já é muita coisa.

{filters.map((f) => )}
{visible.map((g) =>
{Icons[g.icon]}
{g.cat}
{g.name}
R$ {g.price}
)}
{open && setOpen(null)} />}
); } /* ------------------------------------------------------------------ Playlist ------------------------------------------------------------------ */ function Playlist() { const [tracks, setTracks] = useState([]); const [loading, setLoading] = useState(true); const [t, setT] = useState(''); const [a, setA] = useState(''); const [by, setBy] = useState(''); const [submitting, setSubmitting] = useState(false); useEffect(() => { fetch('/api/playlist') .then((r) => r.ok ? r.json() : []) .then((data) => setTracks(Array.isArray(data) ? data : [])) .catch(() => {}) .finally(() => setLoading(false)); }, []); const add = async () => { if (!t.trim() || !a.trim() || submitting) return; setSubmitting(true); try { const res = await fetch('/api/playlist', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ t: t.trim(), a: a.trim(), by: by.trim() }) }); if (!res.ok) throw new Error('post failed'); const created = await res.json(); setTracks((prev) => [...prev, created]); setT(''); setA(''); setBy(''); } catch { alert('Não consegui salvar agora. Tenta de novo daqui a pouco?'); } finally { setSubmitting(false); } }; return (
04 · Playlist

A trilha
da chegada.

Uma playlist aberta pra você sugerir uma música pra Allegra ouvir. Pode ser a que embalou sua infância, a que ficou marcada, a que você canta no chuveiro. A gente toca no dia.

Side A · 2026

Pra
Allegra
ouvir.

{loading && tracks.length === 0 &&
carregando…
} {!loading && tracks.length === 0 &&
seja o primeiro a sugerir uma música ↓
} {tracks.map((tr, i) =>
{String(i + 1).padStart(2, '0')}
{tr.t}
{tr.a}
sug. por {tr.by}
)}
setT(e.target.value)} /> setA(e.target.value)} />
setBy(e.target.value)} />
); } /* ------------------------------------------------------------------ Mural de recados ------------------------------------------------------------------ */ function Mural() { const [msgs, setMsgs] = useState([]); const [loading, setLoading] = useState(true); const [msg, setMsg] = useState(''); const [by, setBy] = useState(''); const [submitting, setSubmitting] = useState(false); useEffect(() => { fetch('/api/mural') .then((r) => r.ok ? r.json() : []) .then((data) => setMsgs(Array.isArray(data) ? data : [])) .catch(() => {}) .finally(() => setLoading(false)); }, []); const add = async () => { if (!msg.trim() || !by.trim() || submitting) return; setSubmitting(true); try { const res = await fetch('/api/mural', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ msg: msg.trim(), by: by.trim() }) }); if (!res.ok) throw new Error('post failed'); const created = await res.json(); setMsgs((prev) => [created, ...prev]); setMsg(''); setBy(''); } catch { alert('Não consegui salvar agora. Tenta de novo daqui a pouco?'); } finally { setSubmitting(false); } }; return (
06 · MURAL

Deixe um
recado.

Vamos guardar todos os recados num caderno que a Allegra vai receber no dia que souber ler. Pode ser conselho, história, bobagem, qualquer coisa. A gente imprime tudo.

Seu recado