/* global React, Reveal, Eyebrow, StepBadge, SlashMotif */ const { useState, useEffect, useRef } = React; /* ============================================================ SEÇÃO 2 — CONTA CORRENTE DO COLABORADOR ============================================================ */ function ContaCorrente() { return (
Governança da Equipe

Transparência de banco para sua equipe.
Paz mental para o seu caixa.

Chega de "reuniões de cobrança" ou discussões no fim do mês para saber quem deve o quê. No GÊNESIS, cada profissional tem uma Conta Corrente individual, que funciona como um extrato bancário em tempo real.

{/* Quadrados de benefícios — largura total, abaixo do texto + celular */} {[ { n: "I", t: "Comissão Instantânea", d: "Serviço pago, comissão lançada no extrato do colaborador na hora." }, { n: "II", t: "Vales e Consumo", d: "Vale, café ou produto: o sistema debita do saldo automaticamente." }, { n: "III", t: "Fechamento em 1 Clique", d: "Sem cálculo manual — você confere um saldo já auditado e aceito." }, ].map((f) => (
))}
); } function ExtratoBancarioMockup() { return ; } /* ============================================================ BANK FLOATING TOASTS — notificações com vida ao redor do celular ============================================================ */ function BankFloatingToasts() { const toasts = [ { side: "left", top: "20%", ic: "+", tone: "credit", k: "Comissão recebida", t: "Corte Premium · J. Silva", v: "+ R$ 55,00" }, { side: "right", top: "46%", ic: "↑", tone: "credit", k: "Roberto transferiu", t: "para sua conta", v: "+ R$ 230,00" }, { side: "left", top: "62%", ic: "✓", tone: "ready", k: "Saque liberado", t: "disponível agora", v: "R$ 500,00" }, { side: "right", top: "26%", ic: "%", tone: "credit", k: "Margem do dia", t: "acima da meta", v: "73%" }, ]; const [i, setI] = React.useState(-1); React.useEffect(() => { let idx = 0; const start = setTimeout(() => setI(0), 1100); const id = setInterval(() => { idx = (idx + 1) % toasts.length; setI(idx); }, 2800); return () => { clearTimeout(start); clearInterval(id); }; }, []); return ( ); } /* ============================================================ MULTI-BARBER LIVE BANK — vida, tecnologia, dinamismo ============================================================ */ function MultiBarberLiveBank() { const barbers = [ { id: 1, name: "Segunda Almeida", initials: "SA", role: "Sênior", saldo: 1847.30, today: 312.50, status: "online", color: "var(--accent)" }, { id: 2, name: "Terça Souza", initials: "TS", role: "Pleno", saldo: 2240.80, today: 218.00, status: "online", color: "var(--accent)" }, { id: 3, name: "Quarta Pereira", initials: "QP", role: "Júnior", saldo: 984.10, today: 88.00, status: "online", color: "var(--accent)" }, { id: 4, name: "Quinta Carvalho", initials: "QC", role: "Sênior", saldo: 1612.45, today: 245.50, status: "pausa", color: "rgba(255,255,255,0.55)" }, ]; const txByBarber = { 1: [ { d: "09:14", desc: "Corte Premium · J. Silva", v: 28.00, t: "credito" }, { d: "10:02", desc: "Barba + Hidratação · M. Costa", v: 42.50, t: "credito" }, { d: "11:30", desc: "Vale em dinheiro", v: 80.00, t: "debito" }, { d: "12:45", desc: "Pomada modeladora (consumo)", v: 35.00, t: "debito" }, { d: "14:20", desc: "Corte + Sobrancelha · R. Lima", v: 38.00, t: "credito" }, { d: "16:10", desc: "Coloração Premium · A. Santos", v: 95.00, t: "credito" }, ], 2: [ { d: "08:45", desc: "Degradê · F. Mendes", v: 65.00, t: "credito" }, { d: "09:50", desc: "Barba Lenhador · T. Rocha", v: 55.00, t: "credito" }, { d: "11:10", desc: "Café/Almoço (consumo)", v: 32.00, t: "debito" }, { d: "13:15", desc: "Corte Infantil · Cliente W.", v: 35.00, t: "credito" }, { d: "15:30", desc: "Pacote Noivo · G. Borges", v: 180.00, t: "credito" }, ], 3: [ { d: "09:30", desc: "Corte Tradicional · P. Vieira", v: 40.00, t: "credito" }, { d: "11:00", desc: "Vale produto (creme)", v: 28.00, t: "debito" }, { d: "14:00", desc: "Barba Simples · L. Cabral", v: 35.00, t: "credito" }, { d: "16:45", desc: "Hidratação · K. Reis", v: 45.00, t: "credito" }, ], 4: [ { d: "08:30", desc: "Corte + Barba · D. Pinto", v: 75.00, t: "credito" }, { d: "10:15", desc: "Coloração · E. Vargas", v: 85.00, t: "credito" }, { d: "12:00", desc: "Adiantamento", v: 200.00, t: "debito" }, { d: "14:30", desc: "Degradê + Sobrancelha · S. Tavares", v: 50.00, t: "credito" }, { d: "16:20", desc: "Pacote Premium · M. Vasconcelos", v: 145.00, t: "credito" }, ], }; const [activeId, setActiveId] = useState(1); const [reveal, setReveal] = useState(0); // 0..N rows shown const [pulse, setPulse] = useState(false); const ref = useRef(null); const animatedRef = useRef(false); const frameRef = useRef(null); const screenRef = useRef(null); // Escala o conteúdo do app para caber na largura do celular (print real) useEffect(() => { const frame = frameRef.current, screen = screenRef.current; if (!frame || !screen) return; const DESIGN = 400; const apply = () => { const mobile = window.matchMedia("(max-width: 880px)").matches; if (mobile) { screen.style.transform = "none"; screen.style.width = "100%"; return; } screen.style.width = DESIGN + "px"; const w = frame.clientWidth; if (w > 0) screen.style.transform = "scale(" + (w / DESIGN) + ")"; }; apply(); const ro = new ResizeObserver(apply); ro.observe(frame); window.addEventListener("resize", apply); return () => { ro.disconnect(); window.removeEventListener("resize", apply); }; }, []); const active = barbers.find(b => b.id === activeId); const txs = txByBarber[activeId] || []; // Trigger animation when in view (first time) useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting && !animatedRef.current) { animatedRef.current = true; // stream rows txs.forEach((_, i) => { setTimeout(() => setReveal(i + 1), 380 + i * 240); }); // pulse the last row setTimeout(() => setPulse(true), 380 + txs.length * 240); setTimeout(() => setPulse(false), 380 + txs.length * 240 + 1200); } }); }, { threshold: 0.25 }); io.observe(ref.current); return () => io.disconnect(); }, []); // eslint-disable-line // when changing barber, re-stream useEffect(() => { if (!animatedRef.current) return; setReveal(0); const list = txByBarber[activeId] || []; list.forEach((_, i) => { setTimeout(() => setReveal(i + 1), 120 + i * 130); }); }, [activeId]); // eslint-disable-line const [hideBalance, setHideBalance] = useState(false); // Group transactions by day label for app feed const grouped = [{ label: "Hoje · 22 nov", items: txs }]; // Sum today const todayIn = txs.filter(t => t.t === "credito").reduce((a, b) => a + b.v, 0); const todayOut = txs.filter(t => t.t === "debito").reduce((a, b) => a + b.v, 0); return (
{/* Status bar + dynamic island */}