// Direction A — "Heritage Mill" // Editorial / agricultural: cream paper, deep forest green, Newsreader serif // display, Schibsted Grotesk body, JetBrains Mono labels. Big numbered // sections, hairline rules, generous whitespace, no fake imagery. const { useState, useMemo, useEffect, Fragment } = React; const A_COLORS = { cream: '#f4ecd8', paper: '#f7f1de', ink: '#15201a', green: '#0e3826', greenDeep: '#082018', rust: '#a85a32', rule: 'rgba(21,32,26,0.18)', ruleSoft: 'rgba(21,32,26,0.10)', muted: 'rgba(21,32,26,0.62)' }; const A_FONTS = { serif: '"Newsreader", "Amiri", Georgia, serif', sans: '"Schibsted Grotesk", "Tajawal", -apple-system, system-ui, sans-serif', mono: '"JetBrains Mono", "DM Mono", ui-monospace, monospace' }; // ──────────────────────────────────────────────────────────────────── // Helpers // ──────────────────────────────────────────────────────────────────── function A_Rule({ color = A_COLORS.rule, style }) { return
; } function A_Eyebrow({ children, ar }) { return (
{children}
); } function A_MonoLabel({ children, ar, style }) { return ( {children}); } // ──────────────────────────────────────────────────────────────────── // Header // ──────────────────────────────────────────────────────────────────── function A_Header({ t, lang, setLang, ar, setCat }) { const [menuOpen, setMenuOpen] = useState(false); const [navOpen, setNavOpen] = useState(false); const mobileLinks = [['about', t.nav.about], ['products', t.nav.products], ['trust', t.nav.trust], ['contact', t.nav.contact]]; return (
{/* Interlock logo */}
{/* Tap-to-call — discreet, present at all times */} e.currentTarget.style.color = A_COLORS.green} onMouseLeave={(e) => e.currentTarget.style.color = A_COLORS.ink}> +971 54 388 8660 {/* Lang toggle */}
{['en', 'ar'].map((l) => )}
{t.nav.quote} → {/* Hamburger — mobile only */}
{/* Mobile dropdown menu */} {navOpen &&
{mobileLinks.map(([k, v]) => setNavOpen(false)} style={{ padding: '13px 4px', textDecoration: 'none', color: A_COLORS.ink, fontFamily: A_FONTS.serif, fontSize: 22, fontWeight: 400, borderBottom: `1px solid ${A_COLORS.ruleSoft}` }}>{v} )} setNavOpen(false)} style={{ marginTop: 16, padding: '14px 18px', background: A_COLORS.ink, color: A_COLORS.cream, fontFamily: A_FONTS.sans, fontSize: 15, fontWeight: 500, textDecoration: 'none', borderRadius: 2, textAlign: 'center' }}>{t.nav.quote} setNavOpen(false)} style={{ marginTop: 10, padding: '4px', textDecoration: 'none', color: A_COLORS.green, fontFamily: A_FONTS.sans, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 8, justifyContent: 'center' }}> +971 54 388 8660
}
); } // ──────────────────────────────────────────────────────────────────── // Hero // ──────────────────────────────────────────────────────────────────── function A_Hero({ t, ar, wordColors }) { // Highlighted Arabic line (index 0) is split into per-word spans so each // word can be coloured independently via the Tweaks panel. Falls back to // the brand green when no wordColors are supplied (e.g. on the live site). const arWordColor = (wi) => (wordColors && wordColors[wi]) || A_COLORS.green; return (
{/* Image hero block — light wash so the deep-green serif sits on top. In Arabic (RTL) the text moves to the right, so the wash + photo mirror horizontally to keep the cream wash behind the text. */}
); } // ──────────────────────────────────────────────────────────────────── // Products // ──────────────────────────────────────────────────────────────────── function A_ProductCard({ p, lang, ar }) { const name = p[`name_${lang}`]; return (
{name}
{p.code}

{name}

{p[`blurb_${lang}`]}

); } function A_Products({ t, lang, ar, cat, setCat }) { const items = window.JAHIZ_PRODUCTS.filter((p) => p.cat === cat); const catSub = cat === 'feed' ? t.cat_feed_sub : t.cat_bedding_sub; return (
{t.products_eyebrow}

{t.products_sub}

{t.products_title_a}

{/* Category toggle — Animal Feed / Bedding */}
{[['feed', t.cat_feed], ['bedding', t.cat_bedding]].map(([c, label]) => )}
{catSub} · {items.length}
{items.map((p) => )}
); } // ──────────────────────────────────────────────────────────────────── // About // ──────────────────────────────────────────────────────────────────── function A_About({ t, ar }) { return (
{t.about_eyebrow}

{t.about_title_a}

{t.about_body}

{/* Mark detail */}
JahizLink Trading · Abu Dhabi
); } // ──────────────────────────────────────────────────────────────────── // Sourcing // ──────────────────────────────────────────────────────────────────── function A_Sourcing({ t, ar }) { const steps = [ [t.step1_t, t.step1_b], [t.step2_t, t.step2_b], [t.step3_t, t.step3_b], [t.step4_t, t.step4_b]]; return (
{t.sourcing_eyebrow}

{t.sourcing_title_a}

{steps.map(([title, body], i) =>
0{i + 1}

{title}

{body}

)}
); } // ──────────────────────────────────────────────────────────────────── // Trust // ──────────────────────────────────────────────────────────────────── function A_Trust({ t, ar }) { const clients = t.clients; return (
{t.trust_eyebrow}

{t.trust_title_a}

{t.trust_intro}

{/* Trusted-by client showcase */}
{t.trusted_label}
{clients.map((name, i) =>
{name}
)}
); } // ──────────────────────────────────────────────────────────────────── // Quote form // ──────────────────────────────────────────────────────────────────── function A_Quote({ t, lang, ar }) { const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [error, setError] = useState(false); const [form, setForm] = useState({ name: '', company: '', email: '', phone: '', product: '', qty: '', notes: '' }); const setF = (k, v) => setForm((s) => ({ ...s, [k]: v })); // ─────────────────────────────────────────────────────────────────── // Quote form delivery via Web3Forms → emails submissions to info@JahizLink.com // SETUP: get a free access key at https://web3forms.com (enter info@JahizLink.com), // then paste it below. Until a real key is set, the form shows a friendly notice. const WEB3FORMS_ACCESS_KEY = '36c48956-12ee-440d-9fa5-1e3e5eb0a4e1'; // ─────────────────────────────────────────────────────────────────── const submit = async (e) => { e.preventDefault(); setError(false); if (!WEB3FORMS_ACCESS_KEY || WEB3FORMS_ACCESS_KEY.indexOf('PASTE_') === 0) { setError(true); return; } setSending(true); try { const prod = window.JAHIZ_PRODUCTS.find((p) => p.id === form.product); const res = await fetch('https://api.web3forms.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, body: JSON.stringify({ access_key: WEB3FORMS_ACCESS_KEY, subject: 'New quote request — JahizLink', from_name: 'JahizLink Website', name: form.name, company: form.company, email: form.email, phone: form.phone, product: prod ? prod.name_en : form.product, quantity: form.qty, notes: form.notes }) }); const data = await res.json(); if (data && data.success) { setSent(true); } else { setError(true); } } catch (err) { setError(true); } finally { setSending(false); } }; const input = { width: '100%', background: 'transparent', border: 'none', borderBottom: `1px solid ${A_COLORS.rule}`, padding: '12px 0', fontSize: 16, color: A_COLORS.ink, fontFamily: A_FONTS.sans, outline: 'none', textAlign: ar ? 'right' : 'left' }; return (
{t.quote_eyebrow}

{t.quote_title_a}

{t.quote_sub}

{ar ? 'اتصال · واتساب' : 'Call / WhatsApp'}
+971 54 388 8660
info@JahizLink.com
{sent ?
✓

{t.f_sent_t}

{t.f_sent_b}

:
{t.f_name} setF('name', e.target.value)} required />
{t.f_company} setF('company', e.target.value)} />
{t.f_email} setF('email', e.target.value)} required />
{t.f_phone} setF('phone', e.target.value)} />
{t.f_product}
{t.f_qty} setF('qty', e.target.value)} />
{t.f_notes}