/* 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 (
    <svg viewBox="0 0 420 96" aria-label="QuadrAngle" role="img" style={{ height: compact ? 24 : 30 }}>
      <g fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="square">
        <path d="M6 90 V18 H78"></path>
        <path d="M18 90 V30 H66"></path>
        <path d="M30 90 V42 H54"></path>
        <path d="M42 90 V54"></path>
      </g>
      <g fill="currentColor" fontFamily="Cormorant Garamond, Times New Roman, serif" fontWeight="500" letterSpacing="6">
        <text x="104" y="44" fontSize="30">QUADR</text>
        <text x="104" y="82" fontSize="30">ANGLE</text>
      </g>
    </svg>
  );
}

// ---------- Icons ----------
const Icon = {
  arrow: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  wa: (p) => (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}>
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.92.55 3.75 1.6 5.36L2 22l4.86-1.7c1.55.88 3.32 1.36 5.18 1.36 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.05c-1.6 0-3.16-.43-4.52-1.25l-.32-.19-3.05 1.07 1.08-2.97-.21-.34a8.13 8.13 0 0 1-1.27-4.36c0-4.5 3.67-8.16 8.18-8.16 2.18 0 4.23.85 5.77 2.4a8.12 8.12 0 0 1 2.39 5.76c-.01 4.51-3.67 8.04-8.05 8.04zm4.43-6.07c-.24-.12-1.43-.71-1.66-.79-.22-.08-.38-.12-.54.12-.16.24-.62.79-.76.95-.14.16-.28.18-.52.06-.24-.12-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.02-.37.1-.49.1-.1.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.41-.54-.41-.14 0-.3-.02-.46-.02s-.42.06-.64.3c-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.1.15 1.52.09.46-.07 1.43-.58 1.63-1.15.2-.57.2-1.05.14-1.15-.06-.1-.22-.16-.46-.28z"/>
    </svg>
  ),
  close: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M6 6l12 12M18 6L6 18"/>
    </svg>
  ),
  burger: (p) => (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M4 7h16M4 12h16M4 17h16"/>
    </svg>
  ),
  check: (p) => (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="M5 13l4 4L19 7"/>
    </svg>
  ),
  pin: (p) => (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M12 22s-7-7.58-7-13a7 7 0 1 1 14 0c0 5.42-7 13-7 13z"/>
      <circle cx="12" cy="9" r="2.5"/>
    </svg>
  ),
};

// ---------- 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 (
    <header className="nav">
      <div className="container nav__inner">
        <a href="#top" className="nav__logo" onClick={(e)=>{e.preventDefault(); scrollTo('top');}}>
          <Logo />
        </a>
        <nav className="nav__menu">
          <a href="#collections" onClick={(e)=>{e.preventDefault(); scrollTo('collections');}}>{t.collections}</a>
          <a href="#bespoke"     onClick={(e)=>{e.preventDefault(); scrollTo('bespoke');}}>{t.bespoke}</a>
          <a href="#projects"    onClick={(e)=>{e.preventDefault(); scrollTo('projects');}}>{t.projects}</a>
          <a href="#story"       onClick={(e)=>{e.preventDefault(); scrollTo('story');}}>{t.story}</a>
          <a href="#showroom"    onClick={(e)=>{e.preventDefault(); scrollTo('showroom');}}>{t.showroom}</a>
        </nav>
        <div className="nav__right">
          <div className="lang" role="tablist">
            <button className={lang==='en'?'on':''} onClick={()=>setLang('en')}>EN</button>
            <button className={lang==='ar'?'on':''} onClick={()=>setLang('ar')}>عربي</button>
          </div>
          <button className="btn btn--ink" onClick={()=>openEnquire(null)}>
            {t.enquire} <Icon.arrow className="arr"/>
          </button>
          <button className="nav__burger" onClick={()=>setOpen(o=>!o)}><Icon.burger/></button>
        </div>
      </div>
      {open && (
        <div style={{borderTop:'1px solid var(--line-soft)', background:'var(--ivory)'}}>
          <div className="container" style={{padding:'18px var(--pad-x)', display:'grid', gap:14}}>
            {['collections','bespoke','projects','story','showroom'].map(k => (
              <a key={k} href={'#'+k} onClick={(e)=>{e.preventDefault(); scrollTo(k); setOpen(false);}}
                 style={{fontFamily:'var(--f-display)', fontSize:22}}>{t[k]}</a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

// ---------- 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 (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero__grid">
          <div className="hero__left">
            <div className="hero__caption eyebrow"><span className="dot"></span>{c.eyebrow}</div>
            <h1 className="display hero__title">
              {c.h1A}<em>{c.h1Em}</em>{c.h1B}
            </h1>
            <p className="hero__sub">{c.sub}</p>
            <div className="hero__ctas">
              <button className="btn btn--ink btn--lg" onClick={()=>scrollTo('collections')}>{c.cta1} <Icon.arrow className="arr"/></button>
              <button className="btn btn--ghost btn--lg" onClick={()=>openEnquire(null, 'bespoke')}>{c.cta2}</button>
            </div>
            <div className="hero__meta">
              <div className="stat"><span className="n">{c.s1}</span><span className="l">{c.s1l}</span></div>
              <div className="stat"><span className="n">{c.s2}</span><span className="l">{c.s2l}</span></div>
              <div className="stat"><span className="n">{c.s3}</span><span className="l">{c.s3l}</span></div>
            </div>
          </div>
          <div className="hero__image">
            <img src="media/product-04-cube-sofa.webp" alt="Cube Sofa"/>
            <div className="hero__tag">
              <span>{c.tag}</span>
              <span style={{opacity:.5}}>—</span>
              <span className="price">{c.tagPrice}</span>
            </div>
            <div className="hero__deco">{c.deco}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <div className="marquee" aria-hidden="true">
      <div className="marquee__track">
        {full.map((it, i) => <span key={i}>{it}</span>)}
      </div>
    </div>
  );
}

// ---------- 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 (
    <section id="collections" className="section">
      <div className="container">
        <div className="section__head">
          <div>
            <div className="eyebrow">{t.eye}</div>
            <h2 className="display title">{t.title}</h2>
          </div>
          <p className="desc">{t.desc}</p>
        </div>

        <div className="filterbar">
          {COLLECTIONS.map(c => (
            <button key={c.id}
                    className={cat===c.id?'on':''}
                    onClick={()=>setCat(c.id)}>
              {lang==='ar' ? c.arLabel : c.label}
              <span className="count">{counts[c.id] ?? 0}</span>
            </button>
          ))}
        </div>

        <div className="product-grid">
          {filtered.map(p => {
            const price = fmtPrice(p.price);
            return (
              <article key={p.id} className="card" onClick={()=>openProduct(p)}>
                <div className="card__media">
                  <img src={p.image} alt={p.name} loading="lazy"/>
                  <div className="card__cat">{p.catLabel}</div>
                  <div className="card__quick">
                    <span>{lang==='ar' ? 'تفاصيل القطعة' : 'View piece'}</span>
                    <Icon.arrow/>
                  </div>
                </div>
                <div className="card__body">
                  <h3 className="card__name">{lang==='ar' ? p.arName : p.name}</h3>
                  <span className={'card__price ' + (price ? '' : 'enq')}>
                    {price || (lang==='ar'?'اطلب السعر':'Enquire')}
                  </span>
                </div>
                <div className="card__sub">{p.style}</div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <section className="section section--tight spotlight">
      <div className="container">
        <div className="section__head" style={{marginBottom:36}}>
          <div>
            <div className="eyebrow">{t.eye}</div>
            <h2 className="display title">{t.title}</h2>
          </div>
        </div>
        <div className="spotlight__grid">
          {SPOTLIGHTS.map((s, i) => (
            <div key={i} className="spot">
              <img src={s.image} alt={s.t} loading="lazy"/>
              <div className="spot__caption">
                <div className="t">{s.t}</div>
                <div className="m">{s.m}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <section id="story" className="section story">
      <div className="container">
        <div className="story__inner">
          <div>
            <div className="eyebrow">{t.eye}</div>
            <h2 className="display">{t.h1A}<em>{t.h1Em}</em>{t.h1B}</h2>
            <p>{t.p1}</p>
            <p>{t.p2}</p>
            <div className="story__sig">
              <div style={{width:48, height:48, borderRadius:999, background:'var(--walnut)', display:'grid', placeItems:'center', color:'var(--bronze)', fontFamily:'var(--f-display)', fontSize:22, border:'1px solid rgba(245,239,227,.18)'}}>MY</div>
              <div>
                <div className="name">{t.sigA}</div>
                <div className="role">{t.sigB}</div>
              </div>
            </div>
          </div>
          <div className="story__image">
            <img src="media/feature-02.webp" alt="Founder portrait"/>
            <div className="story__numbers">
              <span className="n">{t.n}</span>
              <span className="l">{t.l}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <section id="bespoke" className="section">
      <div className="container">
        <div className="bespoke__inner">
          <div className="bespoke__lead">
            <div className="eyebrow">{t.eye}</div>
            <h2 className="display">{t.titleA}<em style={{fontStyle:'italic', color:'var(--walnut)'}}>{t.titleEm}</em></h2>
            <p>{t.desc}</p>
            <button className="btn btn--ink btn--lg" onClick={()=>openEnquire(null, 'bespoke')}>{t.cta} <Icon.arrow className="arr"/></button>
          </div>
          <div className="steps">
            {PROCESS.map(s => (
              <div className="step" key={s.n}>
                <div className="step__n">{s.n}</div>
                <div>
                  <h3>{s.title}</h3>
                  <p>{s.p}</p>
                </div>
                <div className="step__t">{s.t}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Projects ----------
function Projects({ lang }) {
  const { PROJECTS } = window.QUADRANGLE;
  const t = lang === 'ar'
    ? { eye:'مشاريع', title:'مشاريع منفّذة' }
    : { eye:'Projects', title:'Recent installations' };
  return (
    <section id="projects" className="section spotlight" style={{background:'var(--ivory)', borderColor:'transparent'}}>
      <div className="container">
        <div className="section__head">
          <div>
            <div className="eyebrow">{t.eye}</div>
            <h2 className="display title">{t.title}</h2>
          </div>
        </div>
        <div className="projects">
          {PROJECTS.map(p => (
            <article key={p.id} className="project">
              <div className="project__img"><img src={p.image} alt={p.title} loading="lazy"/></div>
              <div className="project__cat">{p.cat}</div>
              <div className="project__meta">
                <span className="t">{p.title}</span>
                <span className="y">{p.year}</span>
              </div>
              <p style={{color:'var(--mute)', fontSize:13.5, margin:0, maxWidth:'40ch'}}>{p.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <section id="showroom" className="section">
      <div className="container">
        <div className="showroom__inner">
          <div className="showroom__img">
            <img src="media/showroom-02.webp" alt="QuadrAngle showroom" loading="lazy"/>
          </div>
          <div className="showroom__panel">
            <div className="eyebrow">{t.eye}</div>
            <h2 className="display">{t.title}</h2>
            <p style={{color:'var(--ink-soft)', fontSize:14.5, lineHeight:1.7, maxWidth:'40ch'}}>{t.body}</p>
            <div className="showroom__rows">
              <div className="showroom__row">
                <div className="k">{lang==='ar'?'العنوان':'Address'}</div>
                <div className="v">{t.addr}<br/><small>{t.street}</small><br/><small>{t.floor}</small></div>
              </div>
              <div className="showroom__row">
                <div className="k">{lang==='ar'?'الساعات':'Hours'}</div>
                <div className="v">{t.hrs} <small>{t.hrsn}</small></div>
              </div>
              <div className="showroom__row">
                <div className="k">{lang==='ar'?'واتساب':'WhatsApp'}</div>
                <div className="v">{t.wa}</div>
              </div>
              <div className="showroom__row">
                <div className="k">{lang==='ar'?'هاتف':'Tel.'}</div>
                <div className="v">{t.tel}</div>
              </div>
              <div className="showroom__row">
                <div className="k">{lang==='ar'?'وصول':'By metro'}</div>
                <div className="v">{lang==='ar'?'محطة إكويتي ≈ 7 دقائق':'Equiti Metro ≈ 7 min'}</div>
              </div>
            </div>
            <div className="showroom__ctas">
              <button className="btn btn--ink" onClick={()=>openEnquire(null, 'visit')}>{t.cta1} <Icon.arrow className="arr"/></button>
              <a className="btn btn--wa" href="https://wa.me/971502897570" target="_blank" rel="noopener"><Icon.wa/> {t.cta2}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <section className="section heritage">
      <div className="container">
        <div className="heritage__inner">
          <div>
            <div className="eyebrow" style={{color:'var(--bronze)'}}>{t.eye}</div>
            <h2 className="display">{t.titleA}<em>{t.titleEm}</em></h2>
            <p>{t.p}</p>
            <div className="heritage__meta">
              <div><div className="k">{t.k1}</div><div>{t.v1}</div></div>
              <div><div className="k">{t.k2}</div><div>{t.v2}</div></div>
              <div><div className="k">{t.k3}</div><div>{t.v3}</div></div>
              <div><div className="k">{t.k4}</div><div>{t.v4}</div></div>
            </div>
          </div>
          <div className="heritage__mark">
            <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M10 95 V20 H80"/>
              <path d="M22 95 V32 H68"/>
              <path d="M34 95 V44 H56"/>
              <path d="M46 95 V56"/>
            </svg>
            <div className="lbl">{t.lbl}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- 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 (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <span className="logo"><Logo/></span>
            <p>{t.tagline}</p>
          </div>
          <div>
            <h4>{t.col1}</h4>
            <ul>{t.items1.map(i => <li key={i}><a href="#collections">{i}</a></li>)}</ul>
          </div>
          <div>
            <h4>{t.col2}</h4>
            <ul>{t.items2.map(i => <li key={i}><a href="#story">{i}</a></li>)}</ul>
          </div>
          <div>
            <h4>{t.col3}</h4>
            <ul>
              <li><a href="https://wa.me/971502897570" target="_blank" rel="noopener">WhatsApp +971 50 289 7570</a></li>
              <li><a href="tel:+97148800305">Tel +971 4 880 0305</a></li>
              <li><a href="mailto:info@quadranglehome.com">info@quadranglehome.com</a></li>
              <li><a href="#showroom">Art of Living Mall, Al Barsha 2</a></li>
              <li style={{marginTop:14}}><a href="https://instagram.com/quadrangle.furniture" target="_blank" rel="noopener">{t.socials[0]} · @quadrangle.furniture</a></li>
              <li><a href="https://facebook.com/Quadrangle.Dubai" target="_blank" rel="noopener">{t.socials[1]} · Quadrangle.Dubai</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{t.copy}</span>
          <div className="legal">
            <span>Privacy</span>
            <span>Terms</span>
            <span style={{color:'var(--bronze)'}}>EN · عربي · РУ · 中文</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- 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 (
      <div className="sent">
        <div className="check"><Icon.check/></div>
        <h3 style={{fontFamily:'var(--f-display)', fontSize:30, margin:0}}>{t.sent}</h3>
        <button className="btn btn--ghost" onClick={onClose} style={{marginTop:18}}>{lang==='ar'?'إغلاق':'Close'}</button>
      </div>
    );
    return (
      <form className="enquire-form" onSubmit={(e)=>{ e.preventDefault(); setSent(true); }}>
        <div className="row2">
          <label>{t.name}<input required type="text" placeholder="Aisha Al Marri"/></label>
          <label>{t.phone}<input required type="tel" placeholder="+971 …"/></label>
        </div>
        <label>{t.email}<input required type="email" placeholder="aisha@example.com"/></label>
        <label>{t.subj}
          <select defaultValue={subjectDefault}>
            <option value="bespoke">{t.optBespoke}</option>
            <option value="visit">{t.optVisit}</option>
            <option value="product">{t.optProduct}{product ? ` — ${product.name}` : ''}</option>
            <option value="trade">{t.optTrade}</option>
          </select>
        </label>
        <label>{t.msg}<textarea placeholder="…"/></label>
        <div style={{display:'flex', gap:10, marginTop:4}}>
          <button className="btn btn--ink" type="submit" style={{flex:1, justifyContent:'center'}}>
            {t.send} <Icon.arrow className="arr"/>
          </button>
          <a className="btn btn--wa" href="https://wa.me/971502897570" target="_blank" rel="noopener"><Icon.wa/> WhatsApp</a>
        </div>
      </form>
    );
  };

  return (
    <div className="modal-back" onMouseDown={onBack}>
      <div className="modal" role="dialog" aria-modal="true">
        <button className="modal__close" onClick={onClose} aria-label="Close"><Icon.close/></button>

        {/* Media side */}
        <div className="modal__media">
          {product
            ? <img src={product.image} alt={product.name}/>
            : (
              <div style={{display:'grid', placeItems:'center', gap:14, padding:30, textAlign:'center'}}>
                <svg viewBox="0 0 100 100" width="120" height="120" fill="none" stroke="var(--oak)" strokeWidth="1.4">
                  <path d="M10 95 V20 H80"/><path d="M22 95 V32 H68"/><path d="M34 95 V44 H56"/><path d="M46 95 V56"/>
                </svg>
                <div className="eyebrow">{mode === 'visit' ? t.titleVisit : mode === 'bespoke' ? t.titleBespoke : t.titleGeneral}</div>
                <p style={{maxWidth:'30ch', color:'var(--mute)', fontSize:14}}>{t.descBespoke}</p>
              </div>
            )}
        </div>

        {/* Body side */}
        <div className="modal__body">
          {product ? (
            <>
              <div className="modal__cat">{product.catLabel}</div>
              <h3>{lang==='ar' ? product.arName : product.name}</h3>
              {price ? (
                <div className="modal__price">
                  <span className="label">{lang==='ar'?'السعر':'Price'}</span>
                  <strong>{price}</strong>
                </div>
              ) : (
                <div className="modal__price">
                  <span className="label">{lang==='ar'?'السعر':'Price'}</span>
                  <strong>{lang==='ar' ? 'اطلب السعر' : 'On enquiry'}</strong>
                </div>
              )}
              <p className="modal__desc">{product.desc}</p>
              <div className="specs">
                <div className="specs__row"><div className="k">{lang==='ar'?'الأسلوب':'Style'}</div><div>{product.style}</div></div>
                <div className="specs__row"><div className="k">{lang==='ar'?'الخامة':'Material'}</div><div>{product.material}</div></div>
                <div className="specs__row"><div className="k">{lang==='ar'?'الأبعاد':'Dimensions'}</div><div>{product.dim}</div></div>
                <div className="specs__row"><div className="k">{lang==='ar'?'الفئة':'Category'}</div><div>{product.catLabel}</div></div>
              </div>
              {showForm ? (
                renderEnquireForm('product')
              ) : (
                <div className="modal__form">
                  <button className="btn btn--ink" onClick={()=>setShowForm(true)} style={{flex:1, justifyContent:'center'}}>
                    {t.enq} <Icon.arrow className="arr"/>
                  </button>
                  <a className="btn btn--wa" href="https://wa.me/971502897570" target="_blank" rel="noopener"><Icon.wa/> {t.wa}</a>
                </div>
              )}
            </>
          ) : (
            <>
              <div className="modal__cat">
                {mode === 'visit' ? t.titleVisit : mode === 'bespoke' ? t.titleBespoke : t.titleGeneral}
              </div>
              <h3>{lang==='ar' ? 'لنبدأ.' : 'Let\u2019s begin.'}</h3>
              <p className="modal__desc">{t.descBespoke}</p>
              {renderEnquireForm(mode === 'visit' ? 'visit' : 'bespoke')}
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// Expose to window for App
Object.assign(window, { Header, Hero, Marquee, Collections, Spotlight, Story, Bespoke, Projects, Showroom, Heritage, Footer, Modal });
