/* global React, GenesisLogo, SlashMotif, Reveal, RotatingWord, Eyebrow, StepBadge */
const { useState, useEffect, useRef } = React;
/* ============================================================
THEME RAIL — seletor vertical delicado na lateral (segue o scroll)
============================================================ */
function ThemeRail({ theme, onTheme }) {
const themes = [
{ id: "dark", label: "Escuro", icon:
Tema
{themes.map((th) => (
onTheme && onTheme(th.id)}
>
{th.icon}
))}
);
}
/* ============================================================
THEME SWITCH — seletor de tema + acento no header
============================================================ */
function ThemeSwitch({ theme, accentMode, onTheme, onAccent }) {
const themes = [
{ id: "dark", label: "Escuro", icon:
{themes.map((th) => (
onTheme && onTheme(th.id)}
>
{th.icon}
{th.label}
))}
);
}
/* ============================================================
HEADER
============================================================ */
function Header({ theme = "dark", accentMode = "mint", onTheme, onAccent }) {
const [menu, setMenu] = React.useState(false);
const links = [
["#governanca", "Governança"],
["#ia-atendimento", "IA WhatsApp"],
["#assinaturas", "Assinaturas"],
["#fechamento", "Fechamento"],
["#planos", "Planos"],
];
const themes = [
["dark", "Escuro"],
["glass", "Vidro"],
["light", "Claro"],
];
React.useEffect(() => {
document.body.style.overflow = menu ? "hidden" : "";
return () => { document.body.style.overflow = ""; };
}, [menu]);
return (
{links.map(([h, t]) => {t} )}
Ver Planos →
setMenu(v => !v)}
aria-label={menu ? "Fechar menu" : "Abrir menu"}
aria-expanded={menu}
>
{/* Menu mobile */}
);
}
/* ============================================================
HERO
============================================================ */
function Hero() {
return (
— GOVERNANÇA COM INTELIGÊNCIA OPERACIONAL
Pare de gerir
Receba o diagnóstico real do seu lucro todo dia no seu WhatsApp .
Blindagem financeira, comissões auditadas e uma IA que atende leads e recupera clientes.
Finalmente, um sistema de governança que faz o trabalho braçal por você.
{/* Right column — phone mockup */}
{/* Stats row */}
{[
[
, "comissões auditadas"],
["24/7", "IA no WhatsApp"],
[
, "fechamento mensal"],
["Diário", "resumo executivo"],
].map(([num, lbl]) => (
))}
{/* Hero mockup — WhatsApp + dashboard schematic */}
);
}
function HeroPhoneMockup() {
return (
{/* Ambient glow */}
{/* iPhone 17 titanium frame */}
{/* Side buttons */}
{/* Inner bezel */}
{/* Screen */}
{/* Placeholder visual when no video */}
{/* Tela real do sistema */}
{/* Diagonal slashes */}
{Array.from({ length: 10 }).map((_, i) => (
{/* Bottom caption */}
Tela real do sistema
Agenda auditada
{/* Bottom home indicator */}
{/* Floating caption tag */}
{/* Grid background */}
{/* Glow accents */}
{/* Scan line on reveal */}
{/* Top status bar */}
{/* Left — command center */}
{/* Right — WhatsApp stream */}
);
}
function CommandTopBar() {
return (
Sistema online
·
Sessão #G-4471
·
Latência 38ms
Última sincronização há 4s
);
}
function useInView(opts = { threshold: 0.25 }) {
const ref = React.useRef(null);
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
if (!ref.current || inView) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.disconnect(); }
}, opts);
obs.observe(ref.current);
return () => obs.disconnect();
}, [inView]);
return [ref, inView];
}
function useTicker(target, durationMs = 1400, active = true) {
const [val, setVal] = React.useState(0);
React.useEffect(() => {
if (!active) return;
let raf, start = null;
const initial = 0;
const step = (t) => {
if (start === null) start = t;
const p = Math.min(1, (t - start) / durationMs);
const eased = 1 - Math.pow(1 - p, 3);
setVal(initial + (target - initial) * eased);
if (p < 1) raf = requestAnimationFrame(step);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [target, active, durationMs]);
return val;
}
const MockupCtx = React.createContext(false);
function CommandCenter() {
const inView = React.useContext(MockupCtx);
const revenue = useTicker(184720, 2000, inView);
const profit = useTicker(62418, 2000, inView);
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTick(t => (t + 1) % 1000), 1600);
return () => clearInterval(id);
}, []);
return (
{/* Header */}
R$ {Math.round(revenue).toLocaleString("pt-BR")}
↑ 23,4% MoM
—
Meta atingida em 18d
{/* Mini radial gauge */}
{/* Live area chart */}
{/* Mini stat strip */}
{/* Activity feed */}
{Math.round(animated)}%
{label}
);
}
function LiveAreaChart() {
// 28 data points, smooth-ish
const data = React.useMemo(() => {
const seed = [42, 48, 44, 56, 52, 60, 58, 64, 62, 72, 68, 76, 74, 80, 82, 90, 88, 94, 102, 98, 108, 112, 118, 124, 132, 138, 146, 156];
return seed;
}, []);
const W = 520, H = 150, P = 4;
const min = Math.min(...data), max = Math.max(...data);
const points = data.map((v, i) => {
const x = P + (i / (data.length - 1)) * (W - 2 * P);
const y = H - P - ((v - min) / (max - min)) * (H - 2 * P);
return [x, y];
});
const line = points.map(([x, y], i) => `${i === 0 ? "M" : "L"} ${x.toFixed(1)} ${y.toFixed(1)}`).join(" ");
const area = `${line} L ${W - P} ${H - P} L ${P} ${H - P} Z`;
const [head] = points.slice(-1);
return (
{/* Floating tooltip on head */}
22 Nov · 22:14
R$ 8.420 (+18%)
{/* x-axis */}
01/11 08/11 15/11 22/11
);
}
function StatTile({ label, value, spark = [], delta, accent, delay = "0ms" }) {
const min = Math.min(...spark), max = Math.max(...spark);
const w = 100, h = 28;
const pts = spark.map((v, i) => {
const x = (i / (spark.length - 1)) * w;
const y = h - ((v - min) / (max - min || 1)) * h;
return `${x.toFixed(1)},${y.toFixed(1)}`;
}).join(" ");
return (
{label}
{value}
{delta && {delta} }
);
}
function ActivityFeed({ tick, inView }) {
const events = [
{ c: "var(--accent)", k: "TX", t: "Pagamento confirmado · Cliente #4471 · R$ 89,00" },
{ c: "#fff", k: "AI", t: "IA respondeu lead em 8s · agendou 14:30 quinta" },
{ c: "var(--accent)", k: "COM", t: "Comissão lançada · Bruno · R$ 26,70 (líquido)" },
{ c: "#fff", k: "AUD", t: "Auditoria sem divergência · 184 atendimentos" },
{ c: "var(--accent)", k: "REC", t: "Cliente recuperado · não vinha há 47 dias" },
];
return (
{events.map((e, i) => (
{e.k}
{e.t}
{`22:1${4 - i}`}
))}
Gênesis · IA Executiva
online · diagnóstico diário
);
}
function WhatsAppExecutiveReport() {
return (
hoje · 22:14
📊 Resumo Executivo · 22 Nov
Faturamento bruto:
R$ 8.420
Lucro líquido:
R$ 2.840 (33,7%)
Ociosidade cadeiras:
14%
22:14 ✓✓
⚠️ 1 cliente recorrente não voltou em 47 dias. 22:14 ✓✓
🎯 3 colaboradores bateram meta hoje. Comissões já lançadas nos extratos.
22:14 ✓✓
);
}
Object.assign(window, { Header, Hero, HeroPhoneMockup, ThemeRail });
{/* Diagonal slashes */}
{/* Bottom caption */}
{/* Bottom home indicator */}