// ─── Design tokens ──────────────────────────────────────────────────────────── const C = { dark: '#0F2D1A', // deep logo green — primary dark bg dark2: '#122618', // slightly lighter dark green dark3: '#163020', // card dark bg — green tinted cream: '#F2EFE9', // warm off-white from logo bg cream2: '#E8E4DC', // slightly deeper cream gold: '#C9A84C', // primary accent — logo gold teal: '#3ABDB5', // secondary accent — DNA/insect teal green: '#4A7C59', // mid green — botanical accents leaf: '#2E6B3E', // leaf green for textures textDark: '#1A2D20', // body text on light — green-tinted dark textMid: '#4A6655', // secondary text on light textLight: '#C8DDD2', // body text on dark textDim: '#6A9478', // secondary text on dark — green-tinted white: '#F2EFE9', }; // Expose for all child scripts window.C = C; // ─── Scroll-reveal hook ─────────────────────────────────────────────────────── function useReveal(threshold = 0.12) { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const obs = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } }, { threshold } ); obs.observe(el); return () => obs.disconnect(); }, []); return [ref, visible]; } window.useReveal = useReveal; // ─── Reveal wrapper ─────────────────────────────────────────────────────────── function Reveal({ children, delay = 0, style = {} }) { const [ref, vis] = useReveal(); return (
{children}
); } window.Reveal = Reveal; // ─── Wave dividers ──────────────────────────────────────────────────────────── function WaveDown({ from = 'transparent', to = '#fff' }) { return (
); } function WaveUp({ from = 'transparent', to = '#fff' }) { return (
); } window.WaveDown = WaveDown; window.WaveUp = WaveUp; // ─── Botanical SVG icons (line-art, thin stroke, accent color) ──────────────── const BotIcons = { leaf: (color = C.gold, size = 48) => ( ), root: (color = C.gold, size = 48) => ( ), bug: (color = C.teal, size = 48) => ( ), molecule: (color = C.teal, size = 48) => ( ), mite: (color = C.gold, size = 48) => ( ), dna: (color = C.teal, size = 48) => ( ), circuit: (color = C.teal, size = 48) => ( ), }; window.BotIcons = BotIcons; // ─── Leaf vein + organic circuit texture (for dark green sections) ───────────── function LeafTexture({ opacity = 0.06 }) { return ( {/* Leaf vein — central rib */} {/* Secondary veins */} {/* Circuit node */} {/* Soil dots */} ); } window.LeafTexture = LeafTexture; // keep old name for compatibility window.CircuitBg = LeafTexture; // ─── Shared UI pieces ───────────────────────────────────────────────────────── function AccentBadge({ children, color = C.gold }) { return ( {children} ); } window.AccentBadge = AccentBadge; function SectionLabel({ children, light = false }) { return (
{children}
); } window.SectionLabel = SectionLabel; function H2({ children, light = false, style = {} }) { return (

{children}

); } window.H2 = H2; function Lead({ children, light = false, style = {} }) { return (

{children}

); } window.Lead = Lead; // Card for light sections function BotCard({ icon, title, desc, solution, delay = 0 }) { return (
{ e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = `0 16px 40px #1A1C1B14`; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = '0 2px 24px #1A1C1B08'; }} >
{icon}
{title}
{desc}
{solution &&
{solution}
}
); } window.BotCard = BotCard; // Card for dark sections function TechCard({ icon, title, desc, solution, accent = C.gold, delay = 0 }) { return (
{ e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.borderColor = accent + '66'; e.currentTarget.style.boxShadow = `0 16px 40px ${accent}12`; }} onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = accent + '22'; e.currentTarget.style.boxShadow = ''; }} >
{icon &&
{icon}
}
{title}
{desc}
{solution &&
{solution}
}
); } window.TechCard = TechCard; // Solution callout function SolutionCallout({ children }) { return (
✦
Solução Manihot
{children}
); } window.SolutionCallout = SolutionCallout; function SolutionCalloutLight({ children }) { return (
✦
Solução Manihot
{children}
); } window.SolutionCalloutLight = SolutionCalloutLight; // ─── ModalPortal — renderiza no body, escapa de qualquer transform/overflow pai ─ function ModalPortal({ children }) { return ReactDOM.createPortal(children, document.body); } // ─── PragaModal ─────────────────────────────────────────────────────────────── function PragaModal({ item, onClose }) { React.useEffect(() => { const handler = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, []); React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, []); const agente = item.agente || item.cientifico; const sintomасCompleto = item.sintomасCompleto || item.danoCompleto || item.sintomas || item.dano; const solucaoCompleta = item.solucaoCompleta || item.controleCompleto || item.solucao || item.controle; return (
e.stopPropagation()} style={{ background: '#fff', borderRadius: 20, width: '100%', maxWidth: 800, boxShadow: '0 24px 80px rgba(0,0,0,0.45)', position: 'relative', marginTop: 'auto', marginBottom: 'auto', flexShrink: 0, }} > {/* Botão fechar */} {/* Imagem com gradiente de transição */} {item.imagem && (
{item.nome}
)} {/* Conteúdo */}

{item.nome}

{agente && (

{agente}

)} {/* Sintomas */}
Sintomas e Danos

{sintomасCompleto}

{/* Fase crítica */} {item.fase && (
⏱ {item.fase}
)} {/* Recomendação de aplicação */} {item.aplicacao && (
Recomendação de Aplicação
{item.aplicacao.diluicao && (
Diluição

{item.aplicacao.diluicao}

)} {item.aplicacao.preparo && (
Preparo

{item.aplicacao.preparo}

)} {item.aplicacao.tecnica && (
Técnica

{item.aplicacao.tecnica}

)}
)} {/* Solução Manihot — destaque máximo */}
Solução Manihot

{solucaoCompleta}

); } window.PragaModal = PragaModal;