// components.jsx — Navbar, Footer, ProductCard, WhatsAppBtn (LIGHT THEME)
const { useState, useEffect, useRef } = React;
const { Link, NavLink, useLocation } = window.ReactRouterDOM;
const G = '#264A31',GOLD = '#F27D16',TEXTD = '#1A1A1A',TEXTM = '#595959';
function ShieldLogo({ size = 36, className = '' }) {
const url = window.useRemoveBg(window.__resources ? window.__resources.logoPng : 'logo.png');
return (
);
}
/* ── NAVBAR ── */
function Navbar() {
const [scrolled, setScrolled] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const location = useLocation();
useEffect(() => {
const h = () => setScrolled(window.scrollY > 60);
window.addEventListener('scroll', h, { passive: true });
return () => window.removeEventListener('scroll', h);
}, []);
useEffect(() => setMobileOpen(false), [location]);
const links = [['/', 'Home'], ['/products', 'Products'], ['/about', 'About'], ['/contact', 'Contact']];
return (
<>
{/* Mobile overlay */}
{links.map(([to, label], i) =>
setMobileOpen(false)}
style={({ isActive }) => ({ fontFamily: 'Montserrat, sans-serif', fontWeight: 800, fontSize: 30, color: isActive ? G : TEXTD, textDecoration: 'none', opacity: mobileOpen ? 1 : 0, transform: mobileOpen ? 'none' : 'translateY(16px)', transition: `all 0.4s ease ${i * 0.06}s` })}>
{label}
)}
setMobileOpen(false)} style={{ background: G, color: '#fff', padding: '13px 36px', borderRadius: 999, fontFamily: 'Montserrat, sans-serif', fontWeight: 700, fontSize: 15, textDecoration: 'none', marginTop: 8 }}>Get in Touch
);
}
/* ── FOOTER ── */
function Footer() {
return (
);
}
/* ── PRODUCT CARD — equal height via flex column ── */
function ProductCard({ product }) {
const [hovered, setHovered] = useState(false);
const catColor = { Insecticide: G, Fungicide: '#6B854A', Fertilizer: GOLD }[product.category] || G;
return (
setHovered(true)} onMouseLeave={() => setHovered(false)}
style={{ background: '#fff', borderRadius: 16, border: `1.5px solid ${hovered ? catColor : 'rgba(38,74,49,0.1)'}`, boxShadow: hovered ? '0 16px 40px rgba(38,74,49,0.12)' : '0 2px 12px rgba(38,74,49,0.06)', transform: hovered ? 'translateY(-4px)' : 'none', transition: 'all 0.28s cubic-bezier(0.34,1.56,0.64,1)', overflow: 'hidden', cursor: 'pointer', display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
{/* Header */}
{product.name}
{product.tagline}
{/* Body — flex:1 so all cards stretch equally */}
{product.description.slice(0, 95)}…
{/* Benefits */}
{product.benefits.slice(0, 2).map((b, i) =>
)}
{/* Crop tags */}
{product.crops.slice(0, 4).map((crop) =>
{crop}
)}
{/* CTA pinned to bottom */}
{hovered &&
Chat with us
}
setHovered(true)} onMouseLeave={() => setHovered(false)}
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 56, height: 56, borderRadius: '50%', background: hovered ? '#1C3A26' : G, boxShadow: hovered ? '0 6px 24px rgba(38,74,49,0.45)' : '0 4px 16px rgba(38,74,49,0.3)', transition: 'all 0.22s ease', color: '#fff', textDecoration: 'none', transform: hovered ? 'scale(1.07)' : 'scale(1)' }}>
);
}
Object.assign(window, { ShieldLogo, Navbar, Footer, ProductCard, WhatsAppBtn });