/* QuadrAngle — components (header, hero, marquee, sections, modal, footer) */ /* global React */ const { useState, useEffect, useMemo, useCallback } = React; // ---------- Logo ---------- function Logo({ compact = false }) { // Square mark + wordmark, currentColor return ( QUADR ANGLE ); } // ---------- Icons ---------- const Icon = { arrow: (p) => ( ), wa: (p) => ( ), close: (p) => ( ), burger: (p) => ( ), check: (p) => ( ), pin: (p) => ( ), }; // ---------- Helpers ---------- function fmtPrice(p) { if (!p || p <= 0) return null; return 'AED ' + p.toLocaleString('en-US'); } // ---------- Header ---------- function Header({ lang, setLang, openEnquire, scrollTo }) { const [open, setOpen] = useState(false); const t = lang === 'ar' ? { collections:'المجموعات', bespoke:'تفصيل', projects:'المشاريع', story:'قصتنا', showroom:'المعرض', enquire:'استفسر' } : { collections:'Collections', bespoke:'Bespoke', projects:'Projects', story:'Story', showroom:'Showroom', enquire:'Enquire' }; return (
{e.preventDefault(); scrollTo('top');}}>
{open && (
{['collections','bespoke','projects','story','showroom'].map(k => ( {e.preventDefault(); scrollTo(k); setOpen(false);}} style={{fontFamily:'var(--f-display)', fontSize:22}}>{t[k]} ))}
)}
); } // ---------- Hero ---------- function Hero({ lang, openEnquire, scrollTo }) { const en = { eyebrow: 'Quadrangle · Dubai — since 2009', h1A: 'Furniture, ', h1Em: 'considered', h1B: ' down to the joinery.', sub: 'Modern and modern-classic pieces, designed in Dubai and made in our 3,000 m² Mashhad workshop. Bespoke commissions, reception desks, residential and commercial fit-outs.', cta1: 'Browse collections', cta2: 'Bespoke enquiry', s1: '2009', s1l: 'Founded', s2: '3,000 m²', s2l: 'Workshop', s3: '188+', s3l: 'Catalogue pieces', deco: 'A FOUNDER-LED FURNITURE HOUSE · MEHRAN YOOSHEI', tag: 'Cube Sofa', tagPrice: 'AED 23,900', }; const ar = { eyebrow: 'كوادرانجل · دبي — منذ 2009', h1A: 'أثاثٌ ', h1Em: 'مدروسٌ', h1B: ' حتى أدقّ التفاصيل.', sub: 'قطعٌ معاصرة وكلاسيكية حديثة، تُصمَّم في دبي وتُصنع في ورشتنا بمشهد على مساحة 3,000 م². تصميم خاص، مكاتب استقبال، وتجهيز فلل وأعمال تجارية.', cta1: 'تصفّح المجموعات', cta2: 'طلب تصميم خاص', s1: '2009', s1l: 'تأسّست', s2: '3,000 م²', s2l: 'الورشة', s3: '+188', s3l: 'قطعة في الكتالوج', deco: 'دار أثاث يقودها المؤسس · مهران يوشئي', tag: 'كنبة كيوب', tagPrice: 'د.إ 23,900', }; const c = lang === 'ar' ? ar : en; return (
{c.eyebrow}

{c.h1A}{c.h1Em}{c.h1B}

{c.sub}

{c.s1}{c.s1l}
{c.s2}{c.s2l}
{c.s3}{c.s3l}
Cube Sofa
{c.tag} — {c.tagPrice}
{c.deco}
); } // ---------- Marquee ---------- function Marquee({ lang }) { const items = lang === 'ar' ? ['الكلاسيكية الحديثة','صنعة يدوية','تصميم مهران يوشئي','تصميم خاص في دبي','ورشة مشهد','الجلوس · الطعام · الميديا · المكاتب'] : ['Modern Classic', 'Made by hand', 'Designed by Mehran Yooshei', 'Bespoke in Dubai', 'Mashhad workshop', 'Living · Dining · Media · Office']; const full = [...items, ...items]; return ( ); } // ---------- Collections ---------- function Collections({ lang, openProduct }) { const { PRODUCTS, COLLECTIONS } = window.QUADRANGLE; const [cat, setCat] = useState('all'); const filtered = useMemo(() => cat === 'all' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat) , [cat, PRODUCTS]); const counts = useMemo(() => { const out = { all: PRODUCTS.length }; COLLECTIONS.forEach(c => { if (c.id !== 'all') out[c.id] = PRODUCTS.filter(p => p.cat === c.id).length; }); return out; }, [PRODUCTS, COLLECTIONS]); const t = lang === 'ar' ? { eye:'المجموعات', title:'مختاراتٌ من كتالوجنا', desc:'٢١ قطعة بأسعار حقيقية من واجهة المتجر. السعر بالدرهم الإماراتي. القطع المخصّصة عبر الاستفسار.', enq:'اطلب السعر' } : { eye:'Collections / Live catalogue', title:'A studied selection', desc:'Twenty-one pieces drawn from the live catalogue — real AED prices, real photography from our workshop and showroom. Bespoke is by enquiry.', enq:'Enquire' }; return (
{t.eye}

{t.title}

{t.desc}

{COLLECTIONS.map(c => ( ))}
{filtered.map(p => { const price = fmtPrice(p.price); return (
openProduct(p)}>
{p.name}
{p.catLabel}
{lang==='ar' ? 'تفاصيل القطعة' : 'View piece'}

{lang==='ar' ? p.arName : p.name}

{price || (lang==='ar'?'اطلب السعر':'Enquire')}
{p.style}
); })}
); } // ---------- Spotlight ---------- function Spotlight({ lang }) { const { SPOTLIGHTS } = window.QUADRANGLE; const t = lang === 'ar' ? { eye:'لقطات من الورشة والمعرض', title:'تفاصيل لا تستعرض نفسها' } : { eye:'In-situ — workshop & showroom', title:'Details that don\u2019t announce themselves' }; return (
{t.eye}

{t.title}

{SPOTLIGHTS.map((s, i) => (
{s.t}
{s.t}
{s.m}
))}
); } // ---------- Story ---------- function Story({ lang }) { const t = lang === 'ar' ? { eye:'القصة', h1A:'من ورشة خشب صغيرة، ', h1Em:'إلى مصنعٍ', h1B:' مساحته 3,000 م².', p1:'بدأ مهران يوشئي — المصمم والمعماري — علامة "4zelee" عام 2009 من ورشة خشبٍ صغيرة في مشهد. خمس سنواتٍ من العمل الدؤوب نقلت الورشة إلى مصنعٍ بمساحة 3,000 متراً مربعاً.', p2:'منذ ذلك الحين، نتّبع نفس عملية التصميم المعماري في كل قطعة: رسمٌ يدوي، نموذجٌ بمقياس، ثم بناءٌ يخضع لتفقّدات الجودة في كل مرحلة. كل قطعة تخرج من باب الورشة محمّلةً بأكثر من الخامة — تحمل قراراً.', sigA:'مهران يوشئي', sigB:'المؤسس · المصمم والمعماري', n:'15+', l:'سنة' } : { eye:'The story', h1A:'From a small woodshop ', h1Em:'to a 3,000 m²', h1B:' factory.', p1:'Mehran Yooshei, designer and architect, opened the 4zelee atelier in Mashhad in 2009. Five years of patient work turned a small woodshop into a 3,000 m² workshop.', p2:'Every piece since has followed the same architectural process: hand drawings, a scaled model, then a build inspected at every stage. Nothing leaves the workshop without earning its way out.', sigA:'Mehran Yooshei', sigB:'Founder · Designer & Architect', n:'15+', l:'Years in craft' }; return (
{t.eye}

{t.h1A}{t.h1Em}{t.h1B}

{t.p1}

{t.p2}

MY
{t.sigA}
{t.sigB}
Founder portrait
{t.n} {t.l}
); } // ---------- Bespoke ---------- function Bespoke({ lang, openEnquire }) { const { PROCESS } = window.QUADRANGLE; const t = lang === 'ar' ? { eye:'تصميم خاص · صنعة على المقاس', titleA:'قطعةٌ لمساحتك، ', titleEm:'لا غير.', desc:'مكاتب استقبال، مكتباتٌ، طاولات طعام بأبعاد غير اعتيادية، تجهيزٌ كامل لمكتبٍ أو فيلا. كل تصميمٍ يخرج من رسوماتٍ يدوية، ويُصنع بإشرافٍ مباشر.', cta:'ابدأ المشروع' } : { eye:'Bespoke · Made-to-measure', titleA:'A piece for your room, ', titleEm:'and only yours.', desc:'Reception desks, library walls, dining tables in non-standard dimensions, full residential and commercial fit-outs. Every commission begins with hand drawings and is supervised directly from the workshop floor.', cta:'Start a commission' }; return (
{t.eye}

{t.titleA}{t.titleEm}

{t.desc}

{PROCESS.map(s => (
{s.n}

{s.title}

{s.p}

{s.t}
))}
); } // ---------- Projects ---------- function Projects({ lang }) { const { PROJECTS } = window.QUADRANGLE; const t = lang === 'ar' ? { eye:'مشاريع', title:'مشاريع منفّذة' } : { eye:'Projects', title:'Recent installations' }; return (
{t.eye}

{t.title}

{PROJECTS.map(p => (
{p.title}
{p.cat}
{p.title} {p.year}

{p.desc}

))}
); } // ---------- Showroom ---------- function Showroom({ lang, openEnquire }) { const t = lang === 'ar' ? { eye:'المعرض', title:'زورونا في معرض دبي', body:'القطعُ على أرض الواقع: ألمس الجلد، اختبر زاوية الكرسي، قِسْ الطاولة. نحجز لكم استشارةً خاصة أو زيارة بدون موعد.', addr:'مجمّع آرت أوف ليفينج', street:'شارع أم سقيم، البرشاء 2 — دبي', floor:'يُؤكّد عند الزيارة', hrs:'يومياً 10:00–22:00', hrsn:'(وفق توقيت المجمّع)', wa:'+971 50 289 7570', tel:'+971 4 880 0305', cta1:'احجز استشارة', cta2:'تواصل عبر واتساب' } : { eye:'Showroom', title:'Visit us in Dubai', body:'See the pieces in person — touch the leather, sit in the chair, measure the table. Book a private consultation or simply drop in.', addr:'Art of Living Mall', street:'Umm Suqeim Road, Al Barsha 2 — Dubai', floor:'To be confirmed on visit', hrs:'Daily 10:00–22:00', hrsn:'(mall hours)', wa:'+971 50 289 7570', tel:'+971 4 880 0305', cta1:'Book a consultation', cta2:'WhatsApp us' }; return (
QuadrAngle showroom
{t.eye}

{t.title}

{t.body}

{lang==='ar'?'العنوان':'Address'}
{t.addr}
{t.street}
{t.floor}
{lang==='ar'?'الساعات':'Hours'}
{t.hrs} {t.hrsn}
{lang==='ar'?'واتساب':'WhatsApp'}
{t.wa}
{lang==='ar'?'هاتف':'Tel.'}
{t.tel}
{lang==='ar'?'وصول':'By metro'}
{lang==='ar'?'محطة إكويتي ≈ 7 دقائق':'Equiti Metro ≈ 7 min'}
{t.cta2}
); } // ---------- Heritage (Iran / 4zelee) ---------- function Heritage({ lang }) { const t = lang === 'ar' ? { eye:'تراثٌ صناعي', titleA:'الأصل في ', titleEm:'مشهد.', p:'4zelee هو الاسم الذي وُلدت تحته الدار في إيران عام 2009. مصنعنا في مشهد مزوّدٌ بآلات النجارة والـ CNC وفرق التنجيد التقليدية — كل ذلك تحت سقفٍ واحد، يُشرف عليه المؤسّس مباشرةً.', k1:'الورشة', v1:'مشهد، إيران', k2:'العلامة', v2:'QuadrAngle (دبي) / 4zelee (إيران)', k3:'الأسلوب', v3:'حديث · كلاسيكي حديث', k4:'الخدمات', v4:'تصميم · تصنيع · تركيب', lbl:'الورشة الأم' } : { eye:'Heritage', titleA:'The workshop is in ', titleEm:'Mashhad.', p:'4zelee is the name under which the house was founded in Iran in 2009. The Mashhad workshop houses joinery, CNC, and traditional upholstery teams under one roof, supervised by the founder directly.', k1:'Workshop', v1:'Mashhad, Iran', k2:'Brands', v2:'QuadrAngle (Dubai) / 4zelee (Iran)', k3:'Discipline', v3:'Modern · Modern Classic', k4:'Services', v4:'Design · Manufacture · Install', lbl:'The originating atelier' }; return (
{t.eye}

{t.titleA}{t.titleEm}

{t.p}

{t.k1}
{t.v1}
{t.k2}
{t.v2}
{t.k3}
{t.v3}
{t.k4}
{t.v4}
{t.lbl}
); } // ---------- Footer ---------- function Footer({ lang }) { const t = lang === 'ar' ? { tagline:'دار أثاثٍ يقودها المؤسس، مقرّها دبي. حرفةٌ إيرانية، عمليةُ تصميمٍ معمارية، نتائج بمعيارٍ فندقيّ.', col1:'تصفّح', col2:'الاستوديو', col3:'تواصل', items1:['المجموعات','تصميم خاص','المشاريع','الإكسسوارات'], items2:['القصة','الورشة','الصحافة','الوظائف'], copy:'© 2026 QuadrAngle. جميع الحقوق محفوظة.', socials:['إنستغرام','فيسبوك'] } : { tagline:'A founder-led furniture house in Dubai. Iranian craftsmanship, an architectural design process, hotel-grade outcomes.', col1:'Shop', col2:'Studio', col3:'Contact', items1:['Collections','Bespoke','Projects','Accessories'], items2:['Story','Workshop','Press','Careers'], copy:'© 2026 QuadrAngle. All rights reserved.', socials:['Instagram','Facebook'] }; return ( ); } // ---------- Modal (Product + Enquire) ---------- function Modal({ product, mode, lang, onClose }) { const [sent, setSent] = useState(false); const [showForm, setShowForm] = useState(mode === 'bespoke' || mode === 'visit' || mode === 'enquire' || !product); const t = lang === 'ar' ? { enq:'استفسر عن القطعة', wa:'تواصل عبر واتساب', specs:'المواصفات', name:'الاسم', email:'البريد', phone:'الهاتف', msg:'رسالتك', send:'إرسال الاستفسار', sent:'شكراً لك. تواصلنا قريباً.', backTo:'تفاصيل القطعة', titleBespoke:'استفسار تصميم خاص', titleVisit:'احجز استشارة في المعرض', titleGeneral:'تواصل معنا', descBespoke:'صف القطعة أو المساحة التي تخطّط لها — نعود إليك خلال يومٍ واحد بمسوّدة برنامج.', subj:'الموضوع', optBespoke:'تصميم خاص', optVisit:'زيارة المعرض', optProduct:'استفسار عن قطعة', optTrade:'استفسار تجاري' } : { enq:'Enquire about this piece', wa:'WhatsApp us', specs:'Specifications', name:'Your name', email:'Email', phone:'Phone / WhatsApp', msg:'Tell us about the room or piece', send:'Send enquiry', sent:'Thank you. We\u2019ll be in touch within a day.', backTo:'Back to piece', titleBespoke:'Bespoke enquiry', titleVisit:'Book a showroom consultation', titleGeneral:'Get in touch', descBespoke:'A short note about the piece or space and a preferred contact channel. We\u2019ll come back within a working day with a brief draft.', subj:'Subject', optBespoke:'Bespoke commission', optVisit:'Visit showroom', optProduct:'Product enquiry', optTrade:'Trade / commercial' }; const onKey = useCallback((e) => { if (e.key === 'Escape') onClose(); }, [onClose]); useEffect(() => { document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [onKey]); const onBack = (e) => { if (e.target === e.currentTarget) onClose(); }; const price = product ? fmtPrice(product.price) : null; const renderEnquireForm = (subjectDefault) => { if (sent) return (

{t.sent}

); return (
{ e.preventDefault(); setSent(true); }}>