);
};
/* ---- rótulo de dispositivo (ponto de acento + nome + papel) ---- */
const DeviceLabel = ({ name, role, accent = 'var(--ar-cyan)', style }) => (
{name}
{role && }
{role && {role}}
);
/* ---- a seção ---- */
const AppShowcase = () => {
const [active, setActive] = React.useState(0);
const [paused, setPaused] = React.useState(false);
const [narrow, setNarrow] = React.useState(false);
const m = AR_MODULES[active];
React.useEffect(() => {
const mq = window.matchMedia('(max-width: 860px)');
const on = () => setNarrow(mq.matches);
on(); mq.addEventListener('change', on);
return () => mq.removeEventListener('change', on);
}, []);
// recriar ícones lucide a cada troca de módulo / layout
React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
// auto-rotação apenas no desktop (desabilitada em touch/mobile para não interromper leitura)
React.useEffect(() => {
if (paused) return;
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduce || narrow) return;
const t = setInterval(() => { if (!document.hidden) setActive(a => (a + 1) % AR_MODULES.length); }, 4600);
return () => clearInterval(t);
}, [paused, narrow]);
const pick = (i) => { setActive(i); setPaused(true); };
return (
{/* glow de fundo */}
Sistemas web e mobile com IA integrada, sob medida para a sua operação}
sub="Web app, tablet e mobile — um sistema completo para a sua empresa, com inteligência artificial integrada em cada módulo e personalizado para a sua realidade."
subMobile="Web, tablet e mobile com IA integrada em cada módulo."
/>
{/* abas de módulo */}
{AR_MODULES.map((mod, i) => {
const on = i === active;
return (
);
})}
{/* palco dos dispositivos */}
setPaused(true)}
style={{ marginTop: 30, position: 'relative' }}
>
{narrow ? (
/* ---------- mobile: pilha web app → mobile ----------
Cada dispositivo é centrado por um wrapper maxWidth e escalado
pelo ScaleBox, evitando overflow em telas muito estreitas. */
) : (
/* ---------- desktop: dueto web app (protagonista) + celular ----------
Frames com box-sizing border-box → bases alinhadas em y=470;
cluster simétrico (margens 180px) e rótulos centrados 22px abaixo. */
{/* brilho de chão sob os aparelhos (centrado no cluster) */}
{/* web app — protagonista (base 30+440=470) */}
{/* celular — apoio direito, à frente (base 40+430=470) */}
)}
{/* legenda + badges de loja + CTA (blocos centrados e separados) */}
Interfaces ilustrativas — personalizadas para o seu negócio.