// client-tips.jsx — ABC Client Guide — "The Field Guide" edition
// Standalone page — does NOT depend on app.jsx.
const { useEffect, useRef, useState, useContext, createContext, useCallback } = React;
const ABC = window.AC_DATA;
const Ic = window.Icon;
const t = (val, lang) => window.AC_T(val, lang);
// ── Language ──────────────────────────────────────────────────────────
const CTLangContext = createContext({ lang: "en", setLang: () => {} });
const useLang = () => useContext(CTLangContext);
const LangProvider = ({ children }) => {
const [lang, setLangState] = useState(() => {
try {
const q = new URLSearchParams(window.location.search).get("lang");
if (q === "en" || q === "ar") return q;
const s = localStorage.getItem("ac_lang");
if (s === "en" || s === "ar") return s;
if (typeof navigator !== "undefined" && navigator.language?.toLowerCase().startsWith("ar")) return "ar";
} catch (e) {}
return "en";
});
useEffect(() => {
document.documentElement.lang = lang;
document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
document.documentElement.dataset.lang = lang;
try { localStorage.setItem("ac_lang", lang); } catch (e) {}
}, [lang]);
return {children};
};
// ── Helpers ───────────────────────────────────────────────────────────
const L = (en, ar) => ({ en, ar });
const g = (obj, lang) => (lang === "ar" ? obj.ar : obj.en);
const useInView = (threshold = 0.14) => {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.disconnect(); }
}, { threshold });
obs.observe(el);
return () => obs.disconnect();
}, []);
return [ref, inView];
};
const useScrollProgress = () => {
const [p, setP] = useState(0);
useEffect(() => {
const cb = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
setP(max > 0 ? Math.min(1, h.scrollTop / max) : 0);
};
window.addEventListener("scroll", cb, { passive: true }); cb();
return () => window.removeEventListener("scroll", cb);
}, []);
return p;
};
// ── Guide content ─────────────────────────────────────────────────────
const INTRO = {
title_a: L("Build with ", "ابدأ "),
title_em: L("Foresight", "على بيّنة."),
lead: L(
"What our team has learned from forty-five years on Dubai's sites, set down plainly.",
"خمسة وأربعون عاما في مواقع دبي علّمتنا دروسا. اقرأها قبل أن تبدأ، فهي عدّتك قبل أوّل حجر."
),
measure_val: L("Lessons from the field", "خبرة في الميدان"),
};
const TIPS_HEAD = {
eyebrow: L("From our team", "من فريقنا"),
title_a: L("Ten lessons, ", "عشرة دروس، "),
title_em: L("before the first brick.", "قبل أوّل حجر."),
lead: L(
"These are the lessons we share first with our valued clients:",
"هذه الدروس التي نشاركها أولا مع عملائنا الكرام:"
),
note_label: L("Our practice", "من ممارستنا"),
};
const TIPS = [
{
num: "01", num_ar: "01",
tag: L("The brief", "البداية"),
head: L("Begin with how your family lives", "ابدأ من عيشة أهل البيت"),
line: L(
"The majlis, the guests, the school-morning rush, the long nights of Ramadan. A good home is drawn around your real days, not around a facade.",
"المجلس، والضيوف، وزحمة صباح المدرسة، وليالي رمضان الطويلة. البيت الطيّب ترسمه أيامكم الحقيقية، لا الواجهة."
),
note: L(
"We build homes that work the way families truly live in them.",
"نبني بيوتا تسير على إيقاع الأهل الذين يسكنونها."
),
},
{
num: "02", num_ar: "02",
tag: L("The budget", "الميزانية"),
head: L("Give your budget room to breathe", "اترك لميزانيتك متنفّسا"),
line: L(
"Set aside a comfortable margin from the first day. It turns the surprises that any build can meet into small, simple decisions instead of painful compromises later on.",
"خصّص هامشا مريحا من أول يوم. البناء لا يخلو من مفاجآت، وهامشك هو ما يحوّلها إلى قرارات صغيرة، لا تنازلات مؤلمة."
),
note: L(
"We put the real numbers in front of you plainly, from the very first meeting.",
"نضع الأرقام الحقيقية أمامكم بوضوح، من أول لقاء."
),
},
{
num: "03", num_ar: "03",
tag: L("The land", "الأرض"),
head: L("Let the plot shape the design", "دع الأرض تشكّل التصميم"),
line: L(
"Where the sun falls, where the wind comes from, where the neighbours' windows look, and the direction of the qibla. These should guide the villa before the first line is drawn.",
"أين تقع الشمس، ومن أين تهبّ الريح، وأين تطلّ نوافذ الجيران، واتجاه القبلة. كلّ هذا يجب أن يشكّل الفيلا قبل رسم أول خط."
),
note: L(
"The soil and the water table beneath a plot shape its foundations. We account for them before we build.",
"تربة الأرض ومنسوب الماء تحتها يحدّدان الأساسات. نحسب لها حسابها قبل أن نبني."
),
},
{
num: "04", num_ar: "04",
tag: L("The people", "الثقة"),
head: L("Choose who you trust with your home", "اختر من تأتمنه على بيتك"),
line: L(
"You, your consultant and your contractor make the decisions together. Within the family, agree early who speaks for the home. Many opinions make a rich brief; many instructions make a confused site.",
"أنت واستشاريك ومقاولك تتخذون القرارات معا. وداخل العائلة، اتّفقوا مبكرا على من يتحدّث باسم البيت. الآراء الكثيرة تغني التصور، أما التعليمات الكثيرة فتربك الموقع."
),
note: L(
"Most of our work comes to us through families recommending us to one another. We earn the relationship before we earn the villa.",
"أغلب أعمالنا تأتينا بتوصية الأهل بعضهم لبعض. نكسب الثقة قبل أن نكسب الفيلا."
),
},
{
num: "05", num_ar: "05",
tag: L("The build", "البناء"),
head: L("Ask what lies behind the finish", "اسأل عمّا خلف التشطيب"),
line: L(
"Structure, waterproofing, insulation: the parts you don't see are the ones that decide how well your home ages.",
"الهيكل، والعزل المائي، والعزل الحراري: الأجزاء التي لا تراها هي التي تقرّر كيف يكبر بيتك مع السنين."
),
note: L(
"We keep the core trades in our own hands, so the hidden work meets our own standard.",
"نبقي الحرف الأساسية بأيدي فريقنا، ليخرج العمل المخفيّ على مستوانا نحن."
),
},
{
num: "06", num_ar: "06",
tag: L("The permits", "الموافقات"),
head: L("Give the approvals their time", "أعط الموافقات وقتها"),
line: L(
"Approvals pass through Dubai's authorities one step at a time. A realistic schedule makes room for them from the start, so the waiting rarely catches you by surprise.",
"الموافقات تمرّ بين جهات دبي خطوة خطوة. والجدول الواقعي يفسح لها المكان من البداية، حتى لا يفاجئك الانتظار."
),
note: L(
"Forty-five years working alongside Dubai's authorities have taught us where the time is truly saved.",
"خمسة وأربعون عاما من العمل مع جهات دبي علّمتنا أين نوفر الوقت حقا."
),
},
{
num: "07", num_ar: "07",
tag: L("The drawings", "الرسومات"),
head: L("Decide it on paper, not on site", "احسمها على الورق لا في الموقع"),
line: L(
"A change made on paper costs the stroke of a pencil. The same change, once the walls are up, costs time, money and peace of mind.",
"التغيير على الورق يكلّف خطّ قلم. والتغيير نفسه بعد أن تقوم الجدران يكلّف وقتا ومالا وراحة بال."
),
note: L(
"A fully resolved set of drawings is the best foundation we can build from.",
"مجموعة رسومات مكتملة ومحسومة هي خير أساس ننطلق منه في البناء."
),
},
{
num: "08", num_ar: "08",
tag: L("The materials", "المواد"),
head: L("Judge the sample, not the catalogue", "احكم على العيّنة لا على الكتالوج"),
line: L(
"A material looks one way on a screen, another in a showroom, and another again in your own home. See it at full size, in your own light, before it is ordered.",
"المادة تبدو على الشاشة غيرها في المعرض، وغيرها في بيتك أنت. شاهدها بحجمها الكامل وتحت ضوء بيتك قبل أن تطلبها."
),
note: L(
"We build a full sample and agree it with you before we carry it through the rest of the home.",
"نبني عينة كاملة ونتّفق عليها معك قبل أن نمضي بها في باقي البيت."
),
},
{
num: "09", num_ar: "09",
tag: L("The comfort", "الراحة"),
head: L("Plan comfort and privacy early", "خطّط للراحة والخصوصية مبكرا"),
line: L(
"Cooling that holds through August, shade where you need it, and privacy from overlooking windows. This is the comfort you feel day after day.",
"تكييف يصمد في حرّ أغسطس، وظلّ حيث تحتاجه، وخصوصية من النوافذ المطلّة. هذه هي الراحة التي تعيشها يوما بعد يوم."
),
note: L(
"We route the services and insulation before the finishes go on: comfort is built into the walls, not added afterwards.",
"نمدّ الخدمات والعزل قبل التشطيبات: الراحة مبنيّة في الجدران، لا مضافة بعدها."
),
},
{
num: "10", num_ar: "10",
tag: L("The decades", "بيت العمر"),
head: L("Build the home of a lifetime", "اجعله بيت العمر"),
line: L(
"A home should hold your family today, and your children long after you. Choose what will still feel right, and still make you proud, twenty years from now.",
"البيت يتّسع لأهلك اليوم، ولعيالك من بعدك. اختر ما يبقى جميلا، وما يبقى مفخرة لك، بعد عشرين سنة."
),
note: L(
"The children of our first clients now come to us with plots of their own. That is the test we build for.",
"عيال عملائنا الأوائل يأتوننا اليوم بأراضيهم. وهذا هو الاختبار الذي نبني لأجله."
),
},
];
const CTA_COPY = {
eyebrow: L("Start the conversation", "ابدأ المحادثة"),
title_a: L("A home worth living in ", "بيت العمر "),
title_em: L("begins with a conversation.", "يبدأ بمحادثة."),
sub: L(
"Tell us what you are building. Your enquiry reaches our team directly. Where there is a fit, we plan together.",
"خبّرنا عمّا تنوي بناءه. استفسارك يصل إلى فريقنا مباشرة. وحين نجد التوافق، نخطط معا."
),
btn: L("Get in touch", "تواصل معنا"),
};
// ── UI Scaffolding ────────────────────────────────────────────────────
const LangToggle = () => {
const { lang, setLang } = useLang();
return (
);
};
const Footer = () => {
const { lang } = useLang();
return (
);
};
const ProgressBar = () => {
const p = useScrollProgress();
return ;
};
// ── Foresight field — drifting triangulated sightlines (a surveyor's net) ──
// Slow-floating points that link into faint emerald sightlines when near —
// a plan quietly forming in the air, mapping the ground ahead.
const ForesightField = () => {
const ref = useRef(null);
useEffect(() => {
const canvas = ref.current;
const host = canvas && canvas.parentElement;
if (!canvas || !host) return;
const ctx = canvas.getContext("2d");
const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
const dpr = Math.min(window.devicePixelRatio || 1, 2);
const rnd = (a, b) => a + Math.random() * (b - a);
const PI2 = Math.PI * 2;
// depth-layer constants 0=far 1=mid 2=near
const LINK = [112, 148, 182]; // moderate — enough to form clusters, not a web
const D_ALPHA = [0.36, 0.62, 0.90]; // base dot opacity
const D_SPEED = [0.38, 0.68, 1.00]; // velocity scale
const D_RADIUS = [[0.9, 1.6], [1.8, 2.5], [2.8, 4.2]]; // dot size range
const D_GLOW = [2, 5, 10]; // shadowBlur base
let w = 0, h = 0, pts = [], raf = 0;
let signals = [], nextFire = 0, adj = [], lastT = 0;
let mx = -9999, my = -9999;
const MR = 148; // mouse influence radius
// Precise per-zone exclusion matching actual text layout
// Each zone: test fn + repulsion vector that pushes OUT of that zone
const ZONES = [
{ t: (x,y) => x < w*0.62 && y > h*0.03 && y < h*0.30, fx: 0.030, fy: -0.010 }, // title
{ t: (x,y) => x < w*0.50 && y > h*0.27 && y < h*0.52, fx: 0.030, fy: 0.005 }, // lead
{ t: (x,y) => x > w*0.10 && x < w*0.82 && y > h*0.50 && y < h*0.70, fx: 0, fy: -0.040 }, // timeline label
];
const anyZone = (x, y) => ZONES.some(z => z.t(x, y));
// Spawn a single node, optionally pinned to a y-band
const spawn = (layer, yLo, yHi, hub) => {
const sp = D_SPEED[layer];
let x, y, tries = 0;
do {
x = rnd(0, w);
y = rnd(yLo != null ? yLo : 0, yHi != null ? yHi : h);
tries++;
} while (anyZone(x, y) && tries < 24);
return {
x, y, layer, hub: !!hub,
vx: rnd(-0.05,0.06)*sp, vy: rnd(-0.04,0.04)*sp,
dvx: rnd(-0.018,0.030)*sp, dvy: rnd(-0.018,0.016)*sp,
ax1: rnd(0.30,0.95)*sp, fx1: rnd(0.00026,0.00068), px1: rnd(0,PI2),
ay1: rnd(0.20,0.75)*sp, fy1: rnd(0.00020,0.00060), py1: rnd(0,PI2),
ax2: rnd(0.10,0.42)*sp, fx2: rnd(0.00052,0.00125), px2: rnd(0,PI2),
ay2: rnd(0.10,0.32)*sp, fy2: rnd(0.00048,0.00115), py2: rnd(0,PI2),
brF: rnd(0.00042,0.00088), brP: rnd(0,PI2),
r: hub ? rnd(3.6,5.8) : rnd(...D_RADIUS[layer]),
baseOp: hub ? 0.88 : D_ALPHA[layer],
lit: 0,
};
};
const build = () => {
const rect = host.getBoundingClientRect();
w = Math.max(1, rect.width); h = Math.max(1, rect.height);
canvas.width = Math.round(w * dpr);
canvas.height = Math.round(h * dpr);
canvas.style.width = w + "px";
canvas.style.height = h + "px";
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
const n = Math.round(Math.max(36, Math.min(52, (w * h) / 11000)));
pts = [];
// Hub anchor nodes — 3–4 large near-layer anchors
const hc = Math.max(3, Math.round(n * 0.08));
for (let i = 0; i < hc; i++) {
const yLo = i < Math.ceil(hc/2) ? 0 : h * 0.52;
const yHi = i < Math.ceil(hc/2) ? h * 0.52 : h;
pts.push(spawn(2, yLo, yHi, true));
}
// 35% guaranteed below timeline (y > 55%)
const lc = Math.round((n - hc) * 0.35);
for (let i = 0; i < lc; i++) {
pts.push(spawn(i % 3, h * 0.55, h, false));
}
// Remaining: full canvas
const rem = n - pts.length;
for (let i = 0; i < rem; i++) {
const layer = i < rem * 0.33 ? 0 : i < rem * 0.67 ? 1 : 2;
pts.push(spawn(layer, null, null, false));
}
// Sort far→near for z-order consistency
pts.sort((a, b) => a.layer - b.layer);
signals = [];
adj = [];
nextFire = performance.now() + rnd(700, 1500);
};
const render = (t) => {
ctx.clearRect(0, 0, w, h);
// — connections: sort by distance, cap per-node so each node joins ≤3-5 lines —
const CAP = [4, 5, 6]; // max connections per [far, mid, near/hub]
const connCt = new Uint8Array(pts.length);
// gather candidates within LINK range
const cands = [];
for (let i = 0; i < pts.length; i++) {
const a = pts[i];
for (let j = i + 1; j < pts.length; j++) {
const b = pts[j];
if (Math.abs(a.layer - b.layer) > 1) continue;
const maxD = LINK[Math.min(a.layer, b.layer)];
const dx = a.x - b.x, dy = a.y - b.y;
const d2 = dx*dx + dy*dy;
if (d2 < maxD*maxD) cands.push([i, j, Math.sqrt(d2)]);
}
}
cands.sort((a, b) => a[2] - b[2]); // shortest first → most natural network
// adjacency for neuron signal routing (rebuilt every frame)
adj = Array.from({ length: pts.length }, () => []);
for (const [i, j, d] of cands) {
const a = pts[i], b = pts[j];
const capA = a.hub ? 6 : CAP[a.layer];
const capB = b.hub ? 6 : CAP[b.layer];
if (connCt[i] >= capA || connCt[j] >= capB) continue;
connCt[i]++; connCt[j]++;
adj[i].push(j); adj[j].push(i);
const maxD = LINK[Math.min(a.layer, b.layer)];
const prox = 1 - d / maxD;
const da = (D_ALPHA[a.layer] + D_ALPHA[b.layer]) * 0.5;
const lit = Math.max(a.lit, b.lit);
const hub = a.hub || b.hub;
const alpha = Math.min(0.78, prox * da * 0.50 + lit * 0.30 + (hub ? prox * 0.18 : 0));
if (alpha < 0.010) continue;
if (hub && alpha > 0.06) {
const g = ctx.createLinearGradient(a.x, a.y, b.x, b.y);
g.addColorStop(0, "rgba(78,131,124," + (a.hub ? alpha : alpha*0.50).toFixed(3) + ")");
g.addColorStop(1, "rgba(78,131,124," + (b.hub ? alpha : alpha*0.50).toFixed(3) + ")");
ctx.strokeStyle = g;
} else {
ctx.strokeStyle = "rgba(78,131,124," + alpha.toFixed(3) + ")";
}
ctx.lineWidth = prox > 0.60 ? 1.2 * da : 0.55 * da;
ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke();
}
// — dots (sorted far→near; skip if inside a text zone so dots never cover text) —
for (const p of pts) {
if (anyZone(p.x, p.y)) continue; // lines may pass through, dots never render over text
const breath = Math.sin(t * p.brF + p.brP) * 0.11;
const ao = Math.min(1, p.baseOp + p.lit * (1 - p.baseOp) * 0.55 + breath);
const ar = p.r + p.lit * 1.8;
if (p.hub) {
ctx.beginPath(); ctx.arc(p.x, p.y, ar * 3.0, 0, PI2);
const gr = ctx.createRadialGradient(p.x, p.y, ar * 0.4, p.x, p.y, ar * 3.0);
gr.addColorStop(0, "rgba(78,131,124," + (ao * 0.18).toFixed(3) + ")");
gr.addColorStop(1, "rgba(78,131,124,0)");
ctx.fillStyle = gr; ctx.fill();
}
ctx.shadowColor = "rgba(78,131,124," + (0.22 + p.lit * 0.46 + (p.hub ? 0.14 : 0)).toFixed(2) + ")";
ctx.shadowBlur = D_GLOW[p.layer] + p.lit * (p.hub ? 20 : p.layer === 2 ? 14 : p.layer === 1 ? 8 : 4);
ctx.beginPath(); ctx.arc(p.x, p.y, ar, 0, PI2);
ctx.fillStyle = "rgba(78,131,124," + ao.toFixed(3) + ")";
ctx.fill();
if ((p.layer === 2 || p.hub) && ar > 2.4) {
ctx.shadowBlur = 0;
ctx.beginPath(); ctx.arc(p.x - ar*0.22, p.y - ar*0.22, ar*0.33, 0, PI2);
ctx.fillStyle = "rgba(255,255,255," + (0.18 + p.lit*0.14).toFixed(2) + ")";
ctx.fill();
}
}
ctx.shadowBlur = 0;
// Neuron signals: a soft spark gliding along a connection, comet tail behind
for (const s of signals) {
const a = pts[s.from], b = pts[s.to];
if (!a || !b) continue;
const ease = s.prog < 0.5
? 2 * s.prog * s.prog
: 1 - Math.pow(-2 * s.prog + 2, 2) / 2; // easeInOutQuad — synaptic glide
const hx = a.x + (b.x - a.x) * ease;
const hy = a.y + (b.y - a.y) * ease;
// fade in on departure, fade out on arrival
const vis = Math.min(1, s.prog * 6, (1 - s.prog) * 6 + 0.35);
const tt = Math.max(0, ease - 0.16);
const tx = a.x + (b.x - a.x) * tt;
const ty = a.y + (b.y - a.y) * tt;
const tail = ctx.createLinearGradient(tx, ty, hx, hy);
tail.addColorStop(0, "rgba(78,131,124,0)");
tail.addColorStop(1, "rgba(78,131,124," + (0.42 * vis).toFixed(3) + ")");
ctx.strokeStyle = tail;
ctx.lineWidth = 1;
ctx.beginPath(); ctx.moveTo(tx, ty); ctx.lineTo(hx, hy); ctx.stroke();
ctx.shadowColor = "rgba(78,131,124,0.75)";
ctx.shadowBlur = 9;
ctx.beginPath(); ctx.arc(hx, hy, 1.7, 0, PI2);
ctx.fillStyle = "rgba(96,148,140," + (0.85 * vis).toFixed(3) + ")";
ctx.fill();
ctx.shadowBlur = 0;
ctx.beginPath(); ctx.arc(hx, hy, 0.7, 0, PI2);
ctx.fillStyle = "rgba(236,244,242," + (0.8 * vis).toFixed(3) + ")";
ctx.fill();
}
ctx.shadowBlur = 0;
};
// Fire a neuron signal from node index `from` to 1–2 of its neighbours
const fireFrom = (from, hop, exclude) => {
if (signals.length >= 26) return;
const nbrs = (adj[from] || []).filter(n => n !== exclude);
if (nbrs.length === 0) return;
const count = nbrs.length > 1 && Math.random() < 0.35 ? 2 : 1;
for (let k = 0; k < count && nbrs.length > 0; k++) {
const idx = Math.floor(Math.random() * nbrs.length);
const to = nbrs.splice(idx, 1)[0];
signals.push({ from, to, prog: 0, hop });
}
};
const step = (t) => {
const dt = lastT ? Math.min(48, t - lastT) : 16.67;
lastT = t;
// Neuron firing: a signal leaves a node and travels its connections
if (!reduce && t >= nextFire && pts.length > 0) {
const hubIdxs = pts.reduce((a, p, i) => (p.hub && a.push(i), a), []);
const src = hubIdxs.length > 0 && Math.random() > 0.3
? hubIdxs[Math.floor(Math.random() * hubIdxs.length)]
: Math.floor(Math.random() * pts.length);
pts[src].lit = Math.min(1, pts[src].lit + 0.65);
fireFrom(src, 0, -1);
nextFire = t + rnd(1400, 3200);
}
// Advance signals at constant speed; on arrival, light node + maybe chain
if (signals.length > 0) {
const next = [];
for (const s of signals) {
const a = pts[s.from], b = pts[s.to];
if (!a || !b) continue;
const d = Math.max(8, Math.hypot(b.x - a.x, b.y - a.y));
s.prog += (dt * 0.085) / d;
if (s.prog >= 1) {
b.lit = Math.min(1, b.lit + 0.85);
if (s.hop < 3 && Math.random() < 0.62 - s.hop * 0.14) {
fireFrom(s.to, s.hop + 1, s.from);
}
} else {
next.push(s);
}
}
signals = next;
}
for (const p of pts) {
const driftX = Math.sin(t*p.fx1+p.px1)*p.ax1 + Math.sin(t*p.fx2+p.px2)*p.ax2;
const driftY = Math.sin(t*p.fy1+p.py1)*p.ay1 + Math.sin(t*p.fy2+p.py2)*p.ay2;
p.vx += (p.dvx - p.vx) * 0.004;
p.vy += (p.dvy - p.vy) * 0.004;
// Mouse repulsion
const mdx = p.x - mx, mdy = p.y - my;
const md = Math.sqrt(mdx*mdx + mdy*mdy);
if (md < MR && md > 0.5) {
const mf = (1 - md/MR) * 0.032;
p.vx += (mdx/md)*mf; p.vy += (mdy/md)*mf;
p.lit = Math.min(1, p.lit + 0.055*(1 - md/MR));
} else {
p.lit = Math.max(0, p.lit - 0.024);
}
// Precise per-zone repulsion
for (const z of ZONES) {
if (z.t(p.x, p.y)) { p.vx += z.fx; p.vy += z.fy; }
}
p.vx = Math.max(-0.26, Math.min(0.26, p.vx));
p.vy = Math.max(-0.24, Math.min(0.24, p.vy));
p.x += p.vx + driftX * 0.013;
p.y += p.vy + driftY * 0.013;
if (p.x < -18) p.x = w+18; else if (p.x > w+18) p.x = -18;
if (p.y < -18) p.y = h+18; else if (p.y > h+18) p.y = -18;
}
render(t);
raf = requestAnimationFrame(step);
};
const onMove = (e) => {
const r = canvas.getBoundingClientRect();
mx = e.clientX - r.left; my = e.clientY - r.top;
};
const onLeave = () => { mx = -9999; my = -9999; };
build();
if (reduce) render(0);
else raf = requestAnimationFrame(step);
let ro;
if (window.ResizeObserver) {
ro = new ResizeObserver(() => { build(); if (reduce) render(0); });
ro.observe(host);
} else {
window.addEventListener("resize", build);
}
const onVis = () => {
if (reduce) return;
cancelAnimationFrame(raf);
if (!document.hidden) raf = requestAnimationFrame(step);
};
document.addEventListener("visibilitychange", onVis);
host.addEventListener("mousemove", onMove);
host.addEventListener("mouseleave", onLeave);
return () => {
cancelAnimationFrame(raf);
if (ro) ro.disconnect(); else window.removeEventListener("resize", build);
document.removeEventListener("visibilitychange", onVis);
host.removeEventListener("mousemove", onMove);
host.removeEventListener("mouseleave", onLeave);
};
}, []);
return ;
};
// ── Hero ──────────────────────────────────────────────────────────────
const Hero = ({ lang }) => {
const isAr = lang === "ar";
return (
{g(INTRO.title_a, lang)}{g(INTRO.title_em, lang)}
{g(INTRO.lead, lang)}
1981{g(INTRO.measure_val, lang)}2026
);
};
// ── Tip icons — thin-stroke, one per tip ──────────────────────────────
// Classes: .drw = stroke draws on (needs pathLength), .dsh = dashed guide
// (fades in), .dot = filled dot (pops in). Draw order = DOM order.
const TIP_ICONS = [
/* 01 — open door: daily life shapes the plan */
,
/* 02 — balance scale: budget with margin */
,
/* 03 — plot with sun: read the land */
,
/* 04 — triangle with nodes: owner, consultant, contractor */
,
/* 05 — wall cutaway layers: how it is built */
,
/* 06 — hourglass: approvals take their season */
,
/* 07 — sheet with pencil: decide on paper */
,
/* 08 — overlapping swatches: see the sample */
,
/* 09 — sun over louvres: the quiet comforts */
,
/* 10 — gable on the horizon: think in decades */
,
];
// ── A single tip ──────────────────────────────────────────────────────
const Tip = ({ tip, i, lang }) => {
const [ref, inView] = useInView(0.2);
const num = lang === "ar" ? tip.num_ar : tip.num;
return (
{num}
{TIP_ICONS[i]}
{g(tip.tag, lang)}
{g(tip.head, lang)}
{g(tip.line, lang)}
);
};
const Tips = ({ lang }) => {
const isAr = lang === "ar";
const [headRef, headIn] = useInView(0.3);
const listRef = useRef(null);
// Scroll-linked dimension spine + restrained ghost parallax.
// rAF writes a CSS custom property + transforms; no React re-renders.
// All geometry reads are batched before any writes to avoid layout thrash.
useEffect(() => {
const list = listRef.current;
if (!list) return;
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
if (mq.matches) { list.style.setProperty("--spine-p", "1"); return; }
let raf = 0;
const update = () => {
raf = 0;
const vh = window.innerHeight || document.documentElement.clientHeight;
const rect = list.getBoundingClientRect();
const denom = Math.max(1, rect.height - vh * 0.42);
const p = clamp((vh * 0.72 - rect.top) / denom, 0, 1);
list.style.setProperty("--spine-p", p.toFixed(4));
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll, { passive: true });
update();
return () => {
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
if (raf) cancelAnimationFrame(raf);
};
}, [lang]);
return (
