// ui.jsx — Shared corporate-engineering UI primitives for Enginuity // Calm, photographic, professional. Like Hatch/DRA/EPCM. const { useState, useEffect, useRef } = React; // ── Logo ──────────────────────────────────────────────────────────────────── function Logo({ size = 32, variant = 'dark' }) { // Official Enginuity brand lockup (three bars + wordmark + tagline). // 'light' = white wordmark for dark backgrounds; 'dark' = steel-blue for light backgrounds; // 'black' = near-black wordmark for maximum contrast on light surfaces. const src = variant === 'light' ? 'assets/enginuity-logo-light.png' : variant === 'black' ? 'assets/enginuity-logo-black.png' : 'assets/enginuity-logo-dark.png'; return ( Enginuity — Empowering innovation, engineering success ); } // ── Eyebrow — small label above titles ───────────────────────────────────── function Eyebrow({ children, color, style = {} }) { return (
{children}
); } // ── Headline ─────────────────────────────────────────────────────────────── function Headline({ children, size = 'lg', as = 'h2', style = {}, balance = true }) { const Tag = as; const sizes = { sm: 'clamp(22px, 2vw, 30px)', md: 'clamp(28px, 3vw, 42px)', lg: 'clamp(36px, 4.5vw, 58px)', xl: 'clamp(44px, 6vw, 80px)', xxl: 'clamp(54px, 8vw, 110px)', }; const lh = { sm: 1.2, md: 1.15, lg: 1.08, xl: 1.04, xxl: 1.0, }; return ( {children} ); } // ── Photo placeholder — clean, no HUD chrome ─────────────────────────────── // Diagonal-stripe placeholder with a small mono caption corner that says what // image goes here. Photo is the star — we don't decorate it. function Photo({ caption, src, objectPosition = 'center', aspect = '4/3', tone = 'industrial', kind = 'plant', style = {}, parallax = 0, overlay, className = '' }) { const ref = useRef(null); const [offset, setOffset] = useState(0); useEffect(() => { if (!parallax) return; const onScroll = () => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const center = r.top + r.height / 2; const vh = window.innerHeight; const dist = (center - vh / 2) / vh; setOffset(dist * parallax); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [parallax]); // Tone-driven gradient for the placeholder; once real photos drop in this whole // backdrop disappears behind . const tones = { industrial: ['#2c2823', '#0e0c08'], sky: ['#3d5b75', '#1d2e3f'], earth: ['#5a4a35', '#2a2218'], plant: ['#3a4538', '#1a201a'], studio: ['#5a5650', '#2a2722'], }; const [c1, c2] = tones[tone] || tones.industrial; const stripe = 'rgba(255,255,255,0.025)'; const ink = 'rgba(255,255,255,0.5)'; return (
{src ? ( {caption ) : ( <>
{/* Subtle silhouette suggestion — industrial */}
Photograph · {caption}
)} {overlay}
); } // ── Header ───────────────────────────────────────────────────────────────── function Header({ route, onNav }) { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); useEffect(() => { const on = () => setScrolled(window.scrollY > 24); on(); window.addEventListener('scroll', on, { passive: true }); return () => window.removeEventListener('scroll', on); }, []); const items = [ { id: 'about', label: 'About' }, { id: 'capabilities', label: 'Services' }, { id: 'careers', label: 'Careers' }, ]; const onHeroPage = route === 'home' || route === ''; const transparent = onHeroPage && !scrolled; return (
{menuOpen && (
{[...items, { id: 'contact', label: 'Contact' }].map((it) => ( ))}
)}
); } // ── Section wrapper ──────────────────────────────────────────────────────── function Section({ id, children, style = {}, contained = true, py = true }) { return (
{children}
); } // ── Button ───────────────────────────────────────────────────────────────── function Button({ children, onClick, variant = 'solid', size = 'md', style = {}, icon = '→' }) { const sizes = { sm: { padX: 16, padY: 9, fs: 14 }, md: { padX: 20, padY: 12, fs: 15 }, lg: { padX: 26, padY: 15, fs: 16 }, }[size]; const variants = { solid: { bg: 'var(--accent)', fg: 'var(--on-accent)', border: 'var(--accent)' }, outline: { bg: 'transparent', fg: 'var(--fg)', border: 'var(--hair-s)' }, ghost: { bg: 'transparent', fg: 'var(--accent)', border: 'transparent' }, invert: { bg: 'var(--fg)', fg: 'var(--bg)', border: 'var(--fg)' }, light: { bg: '#ffffff', fg: '#15171a', border: '#ffffff' }, }[variant]; return ( ); } // ── ReadMore — text link with arrow ──────────────────────────────────────── function ReadMore({ children = 'Read more', onClick, style = {}, color }) { const [h, setH] = useState(false); return ( ); } // ── Footer ───────────────────────────────────────────────────────────────── function Footer({ onNav }) { return ( ); } // ── PageHero — inner-page hero with a photo band ─────────────────────────── function PageHero({ eyebrow, title, sub, tone = 'industrial', img, shift = false, children }) { return (
{eyebrow && {eyebrow}} {title} {sub && (

{sub}

)} {children}
); } // ── Form delivery ────────────────────────────────────────────────────────── // Server-side email via Web3Forms (free, supports file attachments). // Get a free access key at https://web3forms.com for karla.naude@engn.co.za, // then paste it below. Until a real key is set, forms gracefully fall back to // opening the visitor's mail app addressed to Karla, so nothing breaks. const WEB3FORMS_ACCESS_KEY = '466cc269-b222-4986-81a1-b9630ca83cd9'; async function sendEnginuityForm({ subject, fields, file }) { const keyMissing = !WEB3FORMS_ACCESS_KEY || WEB3FORMS_ACCESS_KEY.indexOf('REPLACE') === 0; if (keyMissing) { const body = Object.entries(fields).map(([k, v]) => `${k}: ${v || ''}`).join('\n'); window.location.href = `mailto:karla.naude@engn.co.za?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`; return { ok: true, fallback: true }; } try { const fd = new FormData(); fd.append('access_key', WEB3FORMS_ACCESS_KEY); fd.append('subject', subject); fd.append('from_name', fields.Name || 'Enginuity website'); Object.entries(fields).forEach(([k, v]) => fd.append(k, v || '')); if (file) fd.append('attachment', file, file.name); const r = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: fd }); const data = await r.json().catch(() => ({})); return { ok: r.ok && data.success !== false }; } catch (err) { return { ok: false, error: err.message }; } } Object.assign(window, { Logo, Eyebrow, Headline, Photo, Header, Section, Button, ReadMore, Footer, PageHero, sendEnginuityForm, });