// the-practice.jsx — ABC "The Practice" page // HOW we build (not what): our method, our craft, our standard. // The way we work · the work you never see · the crafts in our own // hands · before it's permanent. Bilingual EN/AR. No overlap with // Home (what we do) or the Client Guide (the build journey). // Babel @7.29.0 — PINNED. Do not change CDN version. const { useEffect, useRef, useState, useContext, createContext } = React; const ABC = window.AC_DATA; const P = window.AC_DATA.PRACTICE; const t = (val, lang) => window.AC_T(val, lang); const rich = (str) => { if (!str || !str.includes('*')) return str; const parts = str.split(/(\*[^*]+\*)/); return parts.map((p, i) => p.startsWith('*') && p.endsWith('*') && p.length > 2 ? {p.slice(1, -1)} : p ); }; // ---- Lang context ---- const LangContext = createContext({ lang: "en", setLang: () => {} }); const useLang = () => useContext(LangContext); const LangProvider = ({ children }) => { const [lang, setLang] = useState(() => { try { const q = new URLSearchParams(window.location.search).get("lang"); if (q === "en" || q === "ar") return q; return localStorage.getItem("ac_lang") || localStorage.getItem("abc_lang") || "en"; } catch { return "en"; } }); useEffect(() => { const isAr = lang === "ar"; document.documentElement.lang = lang; document.documentElement.dir = isAr ? "rtl" : "ltr"; document.body.classList.toggle("is-ar", isAr); try { localStorage.setItem("ac_lang", lang); } catch {} }, [lang]); return ( {children} ); }; // ---- Reveal ---- const revealObs = (() => { if (typeof window === "undefined") return null; const obs = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add("in"); obs.unobserve(e.target); } }); }, { threshold: 0.08, rootMargin: "0px" }); return obs; })(); const Reveal = ({ children, delay = 0, as: As = "div", className = "", style, ...rest }) => { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el || !revealObs) return; if (delay) el.style.transitionDelay = `${delay}ms`; revealObs.observe(el); return () => revealObs.unobserve(el); }, [delay]); return {children}; }; // ---- Scroll state ---- const useScrolled = (threshold = 24) => { const [scrolled, setScrolled] = useState(false); useEffect(() => { const cb = () => setScrolled(window.scrollY > threshold); window.addEventListener("scroll", cb, { passive: true }); cb(); return () => window.removeEventListener("scroll", cb); }, [threshold]); return scrolled; }; 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; }; const useSectionProgress = (ref) => { const [p, setP] = useState(0); useEffect(() => { const cb = () => { if (!ref.current) return; const rect = ref.current.getBoundingClientRect(); const vh = window.innerHeight; const total = rect.height + vh; const scrolled = vh - rect.top; setP(Math.min(1, Math.max(0, scrolled / total))); }; window.addEventListener("scroll", cb, { passive: true }); cb(); return () => window.removeEventListener("scroll", cb); }, [ref]); return p; }; // ---- Lang toggle ---- const LangToggle = () => { const { lang, setLang } = useLang(); return (
); }; // ---- TopBar ---- const TopBar = () => { const { lang } = useLang(); const scrolled = useScrolled(); const [menuOpen, setMenuOpen] = useState(false); const closeMenu = () => setMenuOpen(false); return (
Albanna Conwood Construction L.L.C — Since 1981
); }; // ---- Footer ---- const Footer = () => { const { lang } = useLang(); return ( ); }; // ================================================================ // THE ALBANNA STANDARD — three promises // ================================================================ /* PILLAR_ICONS removed — replaced by ghost ordinal numerals in CSS */ const _UNUSED = [ , /* 2. We test before we build A full-size sample wall panel propped on an easel, showing masonry bond pattern. Dimension annotations in emerald confirm it is being tested at actual scale. */ , /* 3. Skilled hands that stay Two courses of brickwork in running bond. A trowel (blade + handle + grip rings) held at an angle spreading the fresh mortar bed — shown in emerald — onto the top course. */ , ]; const StandardDetailSVG = ({ revealed, style }) => ( ); const Standard = () => { const { lang } = useLang(); const sectionRef = useRef(null); const p = useSectionProgress(sectionRef); const svgRevealClass = p > 0.4; const svgOpacity = Math.max(0, (p - 0.4) / 0.6); const ghostWord = lang === "ar" ? t(P.standard_title_em, "ar") : t(P.standard_title_em, "en"); return (
{t(P.standard_title_a, lang)}{t(P.standard_title_em, lang)}
); }; // ================================================================ // THE WORK YOU NEVER SEE — a drawn wall section on drafting paper // ================================================================ const LAYER_SWATCH = [ /* finish — visible face */ , /* substrate — running bond */ , /* services — conduit + box */ , /* waterproofing — sealed membrane */ , /* structure — reinforced concrete */ , ]; const WallSection = ({ lang }) => { const LAYER_Y = [84, 176, 306, 396, 504]; const BANDS = [[44, 112], [112, 240], [240, 350], [350, 420], [420, 588]]; const NUMS = ["01", "02", "03", "04", "05"]; const [active, setActive] = useState(-1); const layerNames = P.buildup_layers.map(ly => t(ly.name, lang)); const layerNotes = P.buildup_layers.map(ly => t(ly.note, lang)); const dim = (i) => "bp-dim" + (active === i ? " on" : ""); return ( = 0 ? " has-focus" : "")} viewBox="0 33 580 558" fill="none" role="img" aria-label={t(P.buildup_title_a, lang) + t(P.buildup_title_em, lang)}> {/* ── Callout annotations — leader line from label to each wall zone ── */} {LAYER_Y.map((y, i) => ( {NUMS[i]} {layerNames[i]} {layerNotes[i]} ))} {/* ── Wall cross-section — shifted right to make room for callouts ── */} {/* Zone background fills — one per layer, dimmable, with focus glow */} {/* Zone boundary dashes */} {/* STRUCTURE — reinforced concrete */} {/* WATERPROOFING — sealed membrane with a slow sheen passing over */} {/* SERVICES — routed conduit with current flowing to the junction box */} {/* SUBSTRATE — running-bond blockwork */} {/* FINISH — the visible face with a passing glint of light */} {/* ── Hover hit bands — focus a layer across callout + wall ── */} {BANDS.map((b, i) => ( setActive(i)} onMouseLeave={() => setActive(-1)} /> ))} ); }; const BuildUp = () => { const { lang } = useLang(); const isAr = lang === "ar"; return (
{t(P.buildup_title_a, lang)}{t(P.buildup_title_em, lang)} {rich(t(P.buildup_intro, lang))} {rich(t(P.buildup_caption, lang))}
); }; // ================================================================ // IN OUR OWN HANDS — the crafts, as bespoke animated material studies // Each card is a fine architectural line-drawing of the material, // alive with one restrained, luxurious motion. viewBox 0 0 500 400. // ================================================================ const CRAFT_SCENES = [ /* 01 — Concrete & structure: rebar cage, breathing pour, swinging plumb */ , /* 02 — Services & MEP: orthogonal routing with pulses flowing to the board */ , /* 03 — Stone & masonry: running-bond ashlar with a raking light drifting across */ , /* 04 — Joinery & finishes: an interlocking joint breathing into a perfect fit */ , /* 05 — Aluminum & glass: curtain wall with glass pane tints, sweeping reflection, seal verification */ , /* 06 — False ceiling: nested cove trays, a soft light breathing, downlights waking in turn */ , ]; const Crafts = () => { const { lang } = useLang(); return (
{t(P.disc_title_a, lang)}{t(P.disc_title_em, lang)}
{P.disc_items.map((it, i) => (
))}
); }; // ================================================================ // BEFORE THE FIRST BRICK — checkpoint stamps // ================================================================ const STAMP_ICONS = [ /* sample first — approval seal with a check */ , /* no swaps — the chosen material, locked */ , /* checked — a lens over the work */ , ]; const Methods = () => { const { lang } = useLang(); return (
{t(P.quality_title_a, lang)}{t(P.quality_title_em, lang)}
    {P.quality_gates.map((g, i) => (

    {t(g.name, lang)}

    {rich(t(g.line, lang))}

     ))}
); }; // ================================================================ // SYSTEMS — applying systems thinking (interconnected network) // ================================================================ const Systems = () => { const { lang } = useLang(); const N = P.systems_nodes.length; const [act, setAct] = React.useState(0); React.useEffect(() => { if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const id = setInterval(() => setAct((a) => (a + 1) % N), 3400); return () => clearInterval(id); }, [N]); const CX = 320, CY = 320, R = 165, LR = 217, ORBIT = 281; const pts = P.systems_nodes.map((n, i) => { const a = -Math.PI / 2 + (i * 2 * Math.PI) / N; return { x: CX + R * Math.cos(a), y: CY + R * Math.sin(a), lx: CX + LR * Math.cos(a), ly: CY + LR * Math.sin(a), node: n, }; }); const ticks = Array.from({ length: 72 }, (_, i) => { const a = (i * 5 * Math.PI) / 180; const major = i % 6 === 0; const r1 = major ? 258 : 264; const r2 = 271; return { x1: CX + r1 * Math.cos(a), y1: CY + r1 * Math.sin(a), x2: CX + r2 * Math.cos(a), y2: CY + r2 * Math.sin(a), major, }; }); const hubWords = t(P.systems_hub, lang).split(" "); return (
{t(P.systems_title_a, lang)}{t(P.systems_title_em, lang)} {rich(t(P.systems_lead, lang))} {rich(t(P.systems_body, lang))}
{P.systems_points.map((pt, i) => (

{t(pt.name, lang)}

{t(pt.line, lang)}

 ))} {pts.map((p, i) => ( ))} {pts.map((p, i) => ( ))} {hubWords.length > 1 ? ( {hubWords[0]} {hubWords.slice(1).join(" ")} ) : ( {hubWords[0]} )} {pts.map((p, i) => ( {t(p.node, lang)} ))} {t(P.systems_sat[0], lang)} {t(P.systems_sat[1], lang)}

{t(P.systems_caption, lang)}
); }; // ================================================================ // KAIZEN — committed to continuous improvement // ================================================================ // Compounding curve — small daily gains stacking into a year of growth. const KaizenCompound = ({ lang }) => { const rootRef = React.useRef(null); const isRTL = lang === "ar"; const X0 = 70, X1 = 1100, Y0 = 404, YT = 56, DAYS = 365, STEP = 5, DRAW = 3.2; const vmax = Math.pow(1.01, DAYS); // RTL: mirror x so Day 1 → right (X1), Day 365 → left (X0) const xOf = (d) => { const raw = X0 + ((X1 - X0) * d) / DAYS; return isRTL ? X0 + X1 - raw : raw; }; const yOf = (d) => Y0 - ((Math.pow(1.01, d) - 1) / (vmax - 1)) * (Y0 - YT); const days = []; for (let d = 0; d <= DAYS; d += STEP) days.push(d); const pts = days.map((d) => [xOf(d), yOf(d)]); const cum = [0]; for (let i = 1; i < pts.length; i++) { cum.push(cum[i - 1] + Math.hypot(pts[i][0] - pts[i - 1][0], pts[i][1] - pts[i - 1][1])); } const total = cum[cum.length - 1]; const delayAt = (d) => (0.15 + (DRAW * cum[Math.round(d / STEP)]) / total).toFixed(2); const dAttr = "M " + pts.map((p) => `${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(" L "); const end = pts[pts.length - 1]; // Area closes from curve-end → axis-corner below end → axis-corner below start → back const areaAttr = `${dAttr} L ${end[0]} ${Y0} L ${xOf(0)} ${Y0} Z`; const yGrid = [10, 20, 30]; const yOfV = (v) => Y0 - ((v - 1) / (vmax - 1)) * (Y0 - YT); // RTL-aware anchors const endAnchor = isRTL ? "start" : "end"; const startAnchor = isRTL ? "end" : "start"; const xYLab = isRTL ? X1 + 16 : X0 - 14; const marks = [ { d: 70, lab: "×2" }, { d: 180, lab: "×6" }, { d: 270, lab: "×15" }, ]; const dotDays = [70, 180, 270]; const stepMonths = []; for (let d = 90; d <= 360; d += 90) stepMonths.push(d); const ticks = []; for (let d = 0; d <= 360; d += 30) ticks.push(d); ticks.push(DAYS); return ( ); }; // Signals intake — five sources feeding the kaizen loop, pulses gliding // along the lines into the 改善 hub (sparks travel, never ripple). const KZS_ICONS = (() => { const teeth = [0, 45, 90, 135, 180, 225, 270, 315] .map((a) => { const r = (a * Math.PI) / 180; const c = Math.cos(r), s = Math.sin(r); return `M ${(9 * c).toFixed(2)} ${(9 * s).toFixed(2)} L ${(13 * c).toFixed(2)} ${(13 * s).toFixed(2)}`; }) .join(" "); return { site: ( <> ), consultants: ( <> ), owners: , market: , industry: ( <> ), }; })(); const KaizenSignals = ({ lang }) => { const XS = [110, 340, 570, 800, 1030]; const HUBX = 570, HUBY = 300, HUBR = 46; const srcs = lang === "ar" ? [...P.kaizen_signals].reverse() : P.kaizen_signals; return ( ); }; const Kaizen = () => { const { lang } = useLang(); return (
{t(P.kaizen_title_a, lang)}{t(P.kaizen_title_em, lang)} {t(P.kaizen_lead, lang)}

{t(P.kaizen_close_a, lang)}{t(P.kaizen_close_em, lang)}

{t(P.kaizen_coda, lang)} {P.kaizen_signals.map((s) => t(s.label, lang)).join(" · ")} · {t(P.kaizen_loop, lang)} · {t(P.kaizen_next, lang)}
); }; // ================================================================ // APP // ================================================================ const ProgressBar = () => { const p = useScrollProgress(); return