// alr-components.jsx — Logo, Nav, Footer, shared UI primitives const { useState, useEffect } = React; // ─── Logo SVG ───────────────────────────────────────────────────────────────── const ALRLogo = ({ height = 48, textColor = '#e8f2e8' }) => ( {/* 2×3 grid — lime + dark green checkerboard */} {/* ALR lettering */} ALR ); // ─── Button ─────────────────────────────────────────────────────────────────── const Btn = ({ children, variant = 'primary', size = 'md', onClick, style: extra = {}, type = 'button' }) => { const [hov, setHov] = useState(false); const base = { display:'inline-flex', alignItems:'center', gap:'0.45rem', fontFamily:"'Barlow',sans-serif", fontWeight:700, letterSpacing:'0.025em', cursor:'pointer', border:'none', transition:'all 0.18s ease', textDecoration:'none', whiteSpace:'nowrap', lineHeight:1, }; const sizes = { sm: { fontSize:'0.83rem', padding:'0.55rem 1.1rem', borderRadius:'5px' }, md: { fontSize:'0.93rem', padding:'0.7rem 1.55rem', borderRadius:'5px' }, lg: { fontSize:'1rem', padding:'0.85rem 2rem', borderRadius:'6px' }, }; const vars = { primary: { background: hov ? '#5ca830' : '#6db83a', color:'#0a1a0d' }, outline: { background:'transparent', color: hov ? '#6db83a' : 'rgba(232,242,232,0.8)', border: hov ? '1.5px solid #6db83a' : '1.5px solid rgba(232,242,232,0.28)' }, ghost: { background: hov ? 'rgba(109,184,58,0.12)' : 'transparent', color:'#6db83a' }, dark: { background: hov ? '#142c19' : '#0f2314', color:'#c8dcc8', border:'1px solid rgba(109,184,58,0.2)' }, }; return ( ); }; // ─── Section Label ──────────────────────────────────────────────────────────── const SectionLabel = ({ children, centered = false, light = false }) => (
{children}
); // ─── Image Placeholder ──────────────────────────────────────────────────────── const ImgPlaceholder = ({ label, style: extra = {}, aspect = '16/9' }) => (
{label}
); // ─── NavBar ─────────────────────────────────────────────────────────────────── const NavBar = ({ currentPage, onNavigate }) => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const el = document.getElementById('alr-scroll'); if (!el) return; const handler = () => setScrolled(el.scrollTop > 56); el.addEventListener('scroll', handler, { passive: true }); return () => el.removeEventListener('scroll', handler); }, []); const links = [ { id:'home', label:'Home' }, { id:'sobre', label:'Sobre Nós' }, { id:'servicos', label:'Serviços' }, { id:'contato', label:'Contato' }, ]; // Hero section é fundo claro — nav precisa de cores escuras quando não rolou const lightBg = currentPage === 'home' && !scrolled; return ( ); }; // ─── Footer ─────────────────────────────────────────────────────────────────── const Footer = ({ onNavigate }) => { const col = (label, color = '#8aad8a') => ({ fontFamily:"'Barlow',sans-serif", color, fontSize:'0.9rem', margin:0 }); const hdr = { fontFamily:"'Barlow Condensed',sans-serif", fontWeight:700, fontSize:'0.73rem', letterSpacing:'0.18em', textTransform:'uppercase', color:'#6db83a', marginBottom:'1.25rem' }; const navLinks = [ { id:'home', label:'Home' }, { id:'sobre', label:'Sobre Nós' }, { id:'servicos', label:'Serviços' }, { id:'contato', label:'Contato' }, ]; return ( ); }; Object.assign(window, { ALRLogo, Btn, SectionLabel, ImgPlaceholder, NavBar, Footer });