/* Pages: Home, Portfolio, CaseStudy, Services, About, Contact */

const TYPE_LABEL = { weddings:"Wedding", luxury:"Private", corporate:"Brand", social:"Social" };
const TYPE_LABEL_AR = { weddings:"عُرس", luxury:"خاص", corporate:"علامة", social:"اجتماعي" };

/* =================== HOME =================== */
const Home = ({ lang, setRoute, setCaseId }) => {
  const t = COPY[lang];
  const featured = ["white-garden","oceanside-canopy","midnight-garden","brand-activation-01"];
  const featuredEvents = featured.map(id => EVENTS.find(e=>e.id===id));

  return (
    <main data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero" data-screen-label="hero">
        <div className="hero-media">
          <img src="media/wedding-04.webp" alt=""/>
        </div>
        <div className="hero-inner">
          <div className="eyebrow on-dark" style={{marginBottom:32}}>
            {t.hero.eyebrow}<span className="dot"></span>{lang==="en"?"Luxury event design studio":"استوديو فعاليات فاخر"}
          </div>
          <h1 className="display hero-tagline">
            {t.hero.tagline_a} <em>{t.hero.tagline_b}</em><br/>
            {t.hero.tagline_c} {t.hero.tagline_d}
          </h1>
          <div className="hero-meta">
            <div className="hero-positioning">
              <strong>{lang==="en" ? "Event Chic Designs — Dubai, since 2015." : "Event Chic Designs — دبي، منذ ٢٠١٥."}</strong> {t.hero.blurb}
            </div>
            <div style={{display:"flex", gap:14, flexWrap:"wrap"}}>
              <button className="btn ghost-light" onClick={()=>setRoute("portfolio")}>{t.hero.cta_secondary} <ArrowRight/></button>
              <button className="btn terracotta" onClick={()=>setRoute("contact")}>{t.hero.cta_primary} <ArrowRight/></button>
            </div>
          </div>
        </div>
        <div className="hero-marquee">
          {t.hero.marquee.map((m,i)=>(<span key={i}>· {m}</span>))}
        </div>
      </section>

      {/* EVENT TYPE TILES */}
      <section className="section-tight" data-screen-label="event-types">
        <div className="shell" style={{paddingBlock:"48px 32px", display:"grid", gridTemplateColumns:"1fr 1.4fr", gap:48, alignItems:"end"}}>
          <div>
            <div className="eyebrow">{lang==="en"?"What we design":"ما نُصمّم"}<span className="dot"></span></div>
            <h2 className="display" style={{fontSize:"clamp(36px, 5vw, 64px)", margin:"18px 0 0"}}>
              {t.types.title}
            </h2>
          </div>
          <p className="lede">{t.types.lede}</p>
        </div>
        <div className="type-tiles">
          {t.types.items.map(it => (
            <div key={it.id} className="type-tile" onClick={()=>{ window.__filterType = it.id; setRoute("portfolio"); }}>
              <div className="num">{it.num} · {lang==="en"?"Category":"تصنيف"}</div>
              <div className="tile-title">{it.title}</div>
              <div className="tile-desc">{it.desc}</div>
              <div className="tile-cta">{lang==="en"?"See work":"شاهد"} <ArrowRight size={14}/></div>
            </div>
          ))}
        </div>
      </section>

      {/* FEATURED — editorial grid */}
      <section className="section" style={{paddingTop:60}} data-screen-label="featured">
        <div className="shell">
          <div className="spread" style={{marginBottom:56}}>
            <div>
              <div className="eyebrow">{t.featured.eyebrow}<span className="dot"></span></div>
              <h2 className="display" style={{fontSize:"clamp(36px, 5vw, 64px)", margin:"18px 0 0", maxWidth:"14ch"}}>{t.featured.title}</h2>
            </div>
            <button className="btn" onClick={()=>setRoute("portfolio")}>{lang==="en"?"All projects":"كل الأعمال"} <ArrowRight/></button>
          </div>
        </div>
        <div className="shell-wide">
          <div className="editorial-grid">
            <FeatBlock e={featuredEvents[0]} cols="span 7" h={620} lang={lang} onOpen={()=>{ setCaseId(featuredEvents[0].id); setRoute("case"); }}/>
            <FeatBlock e={featuredEvents[1]} cols="span 5" h={620} lang={lang} onOpen={()=>{ setCaseId(featuredEvents[1].id); setRoute("case"); }}/>
            <FeatBlock e={featuredEvents[2]} cols="span 5" h={520} lang={lang} onOpen={()=>{ setCaseId(featuredEvents[2].id); setRoute("case"); }}/>
            <FeatBlock e={featuredEvents[3]} cols="span 7" h={520} lang={lang} onOpen={()=>{ setCaseId(featuredEvents[3].id); setRoute("case"); }}/>
          </div>
        </div>
      </section>

      {/* TAGLINE STRIP */}
      <section className="tag-strip">
        <div className="display">
          <span className="word">Passion</span>
          <span className="ampersand">&</span>
          <span className="word"><em style={{fontStyle:"italic", color:"var(--terracotta)"}}>perfection</em></span>
        </div>
        <div className="eyebrow" style={{marginTop:24}}>Tagline since 2015<span className="dot"></span>Studio motto</div>
      </section>

      {/* PROCESS */}
      <Process lang={lang}/>

      {/* PRESS */}
      <PressStrip lang={lang}/>

      {/* CTA BAND */}
      <CtaBand lang={lang} setRoute={setRoute}/>
    </main>
  );
};

const FeatBlock = ({ e, cols, h, lang, onOpen }) => (
  <div className="feat" style={{ gridColumn:cols, height:h }} onClick={onOpen} role="button">
    <img src={e.cover} alt={e.title}/>
    <div className="feat-caption">
      <div className="ft">{lang==="ar"?e.title_ar:e.title}</div>
      <div className="meta">{lang==="ar"?e.location_ar:e.location} · {e.year}</div>
    </div>
  </div>
);

/* =================== PORTFOLIO =================== */
const Portfolio = ({ lang, setRoute, setCaseId }) => {
  const t = COPY[lang];
  const [filter, setFilter] = React.useState(window.__filterType || "all");
  React.useEffect(()=>{ if (window.__filterType) { setFilter(window.__filterType); delete window.__filterType; } }, []);

  const filtered = filter === "all" ? EVENTS : EVENTS.filter(e => e.type === filter);
  // mosaic layout — alternate spans
  const spans = ["span 5","span 7","span 7","span 5","span 6","span 6","span 8","span 4","span 4","span 8","span 6","span 6"];
  const heights = [520, 520, 480, 480, 540, 540, 460, 460, 460, 460, 500, 500];

  return (
    <main data-screen-label="02 Portfolio">
      <section style={{paddingTop:140, paddingBottom:32}}>
        <div className="shell">
          <div className="eyebrow">{t.portfolio.eyebrow}<span className="dot"></span>{lang==="en"?"All projects":"كل الأعمال"}</div>
          <h1 className="display" style={{fontSize:"clamp(48px, 7vw, 104px)", margin:"24px 0 28px", maxWidth:"18ch"}}>
            {t.portfolio.title}<span style={{color:"var(--terracotta)", fontStyle:"italic", fontWeight:300}}>.</span>
          </h1>
          <p className="lede" style={{maxWidth:"60ch"}}>{t.portfolio.lede}</p>
        </div>
      </section>

      <section>
        <div className="shell">
          <div className="filter-bar">
            <span className="label">{lang==="en"?"Filter":"تصنيف"}:</span>
            {Object.entries(t.portfolio.filters).map(([k,lbl])=>(
              <button key={k} className={`filter-chip ${filter===k?"active":""}`} onClick={()=>setFilter(k)}>{lbl}</button>
            ))}
            <span className="filter-meta">{filtered.length} {t.portfolio.countSuffix}</span>
          </div>

          <div className="port-grid">
            {filtered.map((e, i) => (
              <article key={e.id} className="port-card fade-in"
                style={{gridColumn: spans[i%spans.length], cursor:"pointer"}}
                onClick={()=>{ setCaseId(e.id); setRoute("case"); }}>
                <div className="img" style={{ height: heights[i%heights.length] }}>
                  <img src={e.cover} alt={e.title}/>
                  <span className="tag">{lang==="ar" ? TYPE_LABEL_AR[e.type] : TYPE_LABEL[e.type]} · {e.year}</span>
                </div>
                <div className="info">
                  <div className="title">{lang==="ar"?e.title_ar:e.title}</div>
                  <div className="yr">{e.year}</div>
                </div>
                <div className="loc">{lang==="ar"?e.location_ar:e.location}</div>
              </article>
            ))}
          </div>

          <div style={{marginTop:64, padding:"28px 0", borderTop:"1px solid var(--line)", display:"flex", justifyContent:"space-between", flexWrap:"wrap", gap:16}}>
            <div className="body-s">
              {lang==="en"
                ? "Each project is published once photographer credit and (for weddings) subject consent are confirmed. New entries are added monthly."
                : "تُنشَر كل دراسة حالة عند تأكيد حقوق التصوير وموافقة الأشخاص. تُضاف أعمال جديدة شهرياً."}
              <span className="tbc">Rights gated</span>
            </div>
          </div>
        </div>
      </section>

      <CtaBand lang={lang} setRoute={setRoute}/>
    </main>
  );
};

/* =================== CASE STUDY =================== */
const CaseStudy = ({ caseId, lang, setRoute, setCaseId }) => {
  const t = COPY[lang];
  const e = EVENTS.find(x => x.id === caseId) || EVENTS[0];
  const [lb, setLb] = React.useState(-1);
  const related = EVENTS.filter(x => x.type === e.type && x.id !== e.id).slice(0, 3);

  // gallery span pattern
  const gSpans = ["span 7","span 5","span 6","span 6","span 12","span 4","span 8","span 6","span 6"];
  const gHeights = [620, 480, 520, 520, 720, 480, 580, 500, 500];

  return (
    <main data-screen-label="03 Case Study">
      <section className="case-hero">
        <img src={e.cover} alt={e.title}/>
        <button className="case-back" onClick={()=>setRoute("portfolio")}>← {lang==="en"?"All projects":"كل الأعمال"}</button>
        <div className="case-title">
          <div className="eyebrow on-dark" style={{marginBottom:14}}>
            {lang==="ar"?TYPE_LABEL_AR[e.type]:TYPE_LABEL[e.type]}<span className="dot"></span>{e.year}<span className="dot"></span>{lang==="ar"?e.location_ar:e.location}
          </div>
          <h1>{lang==="ar"?e.title_ar:e.title}</h1>
        </div>
      </section>

      <section className="shell">
        <dl className="case-meta">
          <div><dt>{lang==="en"?"Event type":"النوع"}</dt><dd>{lang==="ar"?TYPE_LABEL_AR[e.type]:TYPE_LABEL[e.type]}</dd></div>
          <div><dt>{lang==="en"?"Location":"الموقع"}</dt><dd>{lang==="ar"?e.location_ar:e.location}</dd></div>
          <div><dt>{lang==="en"?"Scope":"النطاق"}</dt><dd style={{fontSize:18}}>{lang==="ar"?e.scope_ar:e.scope}</dd></div>
          <div><dt>{lang==="en"?"Year":"السنة"}</dt><dd>{e.year}</dd></div>
        </dl>

        <div className="case-narr">
          <h2 className="heading">
            {lang==="en"
              ? <>The brief, the build,<br/><em style={{fontStyle:"italic", color:"var(--terracotta)"}}>the day.</em></>
              : <>الفكرة، البناء،<br/><em style={{fontStyle:"italic", color:"var(--terracotta)"}}>اليوم.</em></>}
          </h2>
          <div className="narr-body">
            {(lang==="ar"?e.narrative_ar:e.narrative).map((p, i)=>(<p key={i}>{p}</p>))}
            <div className="body-s" style={{marginTop:32, color:"var(--muted)", fontStyle:"italic"}}>
              {lang==="en"
                ? "Photographer credit: [TBC — confirmed per event] · Subject consent on file."
                : "حقوق التصوير: [يُؤكَّد لكل حدث] · موافقة الأشخاص محفوظة."}
              <span className="tbc">Credit gated</span>
            </div>
          </div>
        </div>
      </section>

      <section className="shell-wide">
        <div className="case-gallery">
          {e.images.map((src, i)=>(
            <div key={i} className="feat" style={{gridColumn:gSpans[i%gSpans.length], height:gHeights[i%gHeights.length], cursor:"zoom-in"}}
              onClick={()=>setLb(i)}>
              <img src={src} alt=""/>
            </div>
          ))}
        </div>
      </section>

      <section className="case-pull">
        <div className="shell">
          <blockquote>“{lang==="ar"?e.pull_ar:e.pull}”</blockquote>
          <cite>— Jardel Silva · {lang==="en"?"Founder & Lead Designer":"المؤسس والمصمم الرئيسي"}</cite>
        </div>
      </section>

      {/* Related */}
      <section className="section-tight">
        <div className="shell">
          <div className="spread" style={{marginBottom:32}}>
            <h3 className="display" style={{fontSize:"clamp(28px,3.4vw,44px)", margin:0}}>{lang==="en"?"Related projects":"أعمال ذات صلة"}</h3>
            <button className="btn" onClick={()=>setRoute("portfolio")}>{lang==="en"?"All projects":"كل الأعمال"} <ArrowRight/></button>
          </div>
          <div className="port-grid">
            {related.map((re, i)=>(
              <article key={re.id} className="port-card" style={{gridColumn:"span 4", cursor:"pointer"}}
                onClick={()=>{ setCaseId(re.id); window.scrollTo({top:0, behavior:"smooth"}); }}>
                <div className="img" style={{height:380}}>
                  <img src={re.cover} alt=""/>
                  <span className="tag">{lang==="ar"?TYPE_LABEL_AR[re.type]:TYPE_LABEL[re.type]} · {re.year}</span>
                </div>
                <div className="info">
                  <div className="title">{lang==="ar"?re.title_ar:re.title}</div>
                  <div className="yr">{re.year}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <CtaBand lang={lang} setRoute={setRoute}/>

      {lb >= 0 && (
        <Lightbox images={e.images} index={lb}
          onClose={()=>setLb(-1)}
          onPrev={()=>setLb((lb - 1 + e.images.length) % e.images.length)}
          onNext={()=>setLb((lb + 1) % e.images.length)}/>
      )}
    </main>
  );
};

/* =================== SERVICES =================== */
const Services = ({ lang, setRoute }) => {
  const t = COPY[lang];
  return (
    <main data-screen-label="04 Services">
      <section style={{paddingTop:140, paddingBottom:48}}>
        <div className="shell">
          <div className="eyebrow">{t.services.eyebrow}<span className="dot"></span>{lang==="en"?"Studio capabilities":"خدمات الاستوديو"}</div>
          <h1 className="display" style={{fontSize:"clamp(48px, 7vw, 104px)", margin:"24px 0 28px", maxWidth:"15ch"}}>
            {t.services.title}
          </h1>
          <p className="lede" style={{maxWidth:"58ch"}}>{t.services.lede}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="shell">
          <div className="svc-list">
            {SERVICES.map((s, i) => (
              <div key={s.id} className="svc-row">
                <div className="idx">{String(i+1).padStart(2,"0")} / 0{SERVICES.length}</div>
                <div className="nm">{lang==="ar"?s.nm_ar:s.nm}</div>
                <div className="ds">
                  {lang==="ar"?s.ds_ar:s.ds}
                  <ul>
                    {(lang==="ar"?s.bullets_ar:s.bullets).map((b, j)=>(<li key={j}>{b}</li>))}
                  </ul>
                </div>
                <div className="cta">
                  <button className="btn" onClick={()=>setRoute("contact")} style={{padding:"12px 18px", fontSize:11}}>{t.services.ctaEach} </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Process lang={lang}/>
      <PressStrip lang={lang}/>
      <CtaBand lang={lang} setRoute={setRoute}/>
    </main>
  );
};

/* =================== ABOUT =================== */
const About = ({ lang, setRoute }) => {
  const t = COPY[lang];
  return (
    <main data-screen-label="05 About">
      <section style={{paddingTop:140, paddingBottom:48}}>
        <div className="shell">
          <div className="eyebrow">{t.about.eyebrow}<span className="dot"></span>{lang==="en"?"Founder & studio":"المؤسس والاستوديو"}</div>
          <h1 className="display" style={{fontSize:"clamp(44px, 6.4vw, 96px)", margin:"24px 0 0", maxWidth:"18ch"}}>
            {t.about.title.split('.').map((part, i, arr)=> i === arr.length - 1 ? part : <span key={i}>{part}<em style={{color:"var(--terracotta)", fontStyle:"italic", fontWeight:300}}>.</em></span>)}
          </h1>
        </div>
      </section>

      <section className="section-tight">
        <div className="shell">
          <div className="about-grid">
            <div>
              <img src="media/about-founder-or-studio.webp" alt="Studio"/>
              <div className="body-s" style={{marginTop:12, color:"var(--muted)", fontStyle:"italic"}}>
                {lang==="en" ? "Portrait subject to be confirmed against founder; portrait rights to be cleared." : "تأكيد هوية الصورة وحقوقها مطلوب."}
                <span className="tbc">TBC</span>
              </div>
            </div>
            <div>
              <p className="lede" style={{marginBottom:24}}>{t.about.lede}</p>
              {t.about.body.map((p,i)=>(<p key={i} className="body-l" style={{marginBottom:18, color:"var(--ink)"}}>{p}</p>))}

              <div className="about-stats">
                {t.about.stats.map((s,i)=>(
                  <div className="about-stat" key={i}>
                    <div className="v">{s.v}</div>
                    <div className="l">{s.l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* International note */}
      <section className="section-tight" style={{background:"var(--cream)"}}>
        <div className="shell" style={{display:"grid", gridTemplateColumns:"1fr 2fr", gap:64}}>
          <div>
            <div className="eyebrow">{lang==="en"?"International":"دولي"}<span className="dot"></span></div>
            <h3 className="display" style={{fontSize:"clamp(28px,3.4vw,44px)", margin:"14px 0 0"}}>
              {lang==="en"?"Beyond the GCC.":"خارج الخليج."}
            </h3>
          </div>
          <div>
            <p className="body-l">
              {lang==="en"
                ? "The studio has produced events across Angola, London, Paris, the Netherlands, Brazil, Nigeria and India. Destination briefs are taken on a case-by-case basis once the dates, scope and rights position are clear."
                : "أنتج الاستوديو فعاليات في أنغولا، لندن، باريس، هولندا، البرازيل، نيجيريا، والهند. تُقبَل مشاريع الوجهات بحسب التواريخ والنطاق والحقوق."}
            </p>
            <p className="body-s" style={{marginTop:18, fontStyle:"italic", color:"var(--muted)"}}>
              {lang==="en"
                ? "Founder-stated; specific events confirmed individually."
                : "تصريح من المؤسس؛ تؤكَّد الأحداث فردياً."}
              <span className="tbc">Founder claim</span>
            </p>
          </div>
        </div>
      </section>

      <PressStrip lang={lang}/>
      <CtaBand lang={lang} setRoute={setRoute}/>
    </main>
  );
};

/* =================== CONTACT =================== */
const Contact = ({ lang, setRoute }) => {
  const t = COPY[lang];
  const [form, setForm] = React.useState({
    name:"", email:"", phone:"", type:"", date:"", guests:"", venue:"", message:""
  });
  const [sent, setSent] = React.useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); window.scrollTo({top: 0, behavior:"smooth"}); };
  const set = (k,v) => setForm(f => ({...f, [k]:v}));

  return (
    <main data-screen-label="06 Contact">
      <section style={{paddingTop:140, paddingBottom:32}}>
        <div className="shell">
          <div className="eyebrow">{t.contact.eyebrow}<span className="dot"></span>{lang==="en"?"Begin the design":"ابدأ التصميم"}</div>
          <h1 className="display" style={{fontSize:"clamp(48px, 7vw, 104px)", margin:"24px 0 28px", maxWidth:"15ch"}}>
            {t.contact.title.split('.').map((part, i, arr)=>i === arr.length - 1 ? part : <span key={i}>{part}<em style={{color:"var(--terracotta)", fontStyle:"italic", fontWeight:300}}>.</em></span>)}
          </h1>
          <p className="lede" style={{maxWidth:"56ch"}}>{t.contact.lede}</p>
        </div>
      </section>

      <section>
        <div className="shell">
          <div className="contact-grid">
            <div>
              {sent ? (
                <div style={{padding:"60px 0"}}>
                  <div className="eyebrow" style={{color:"var(--terracotta)"}}>{lang==="en"?"Sent":"أُرسِل"}<span className="dot"></span></div>
                  <h3 className="display" style={{fontSize:"clamp(32px, 4vw, 56px)", margin:"18px 0 0"}}>{t.contact.form.sent}</h3>
                  <button className="btn" style={{marginTop:32}} onClick={()=>{ setSent(false); setForm({name:"",email:"",phone:"",type:"",date:"",guests:"",venue:"",message:""}); }}>{lang==="en"?"Send another":"إرسال آخر"} <ArrowRight/></button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <div className="field-row">
                    <div className="field"><label>{t.contact.form.name}</label><input required value={form.name} onChange={e=>set("name", e.target.value)}/></div>
                    <div className="field"><label>{t.contact.form.email}</label><input type="email" required value={form.email} onChange={e=>set("email", e.target.value)}/></div>
                  </div>
                  <div className="field-row">
                    <div className="field"><label>{t.contact.form.phone}</label><input value={form.phone} onChange={e=>set("phone", e.target.value)}/></div>
                    <div className="field">
                      <label>{t.contact.form.type}</label>
                      <select required value={form.type} onChange={e=>set("type", e.target.value)}>
                        <option value="">—</option>
                        {Object.entries(t.portfolio.filters).filter(([k])=>k!=="all").map(([k,lbl])=>(<option key={k} value={k}>{lbl}</option>))}
                        <option value="destination">{lang==="en"?"Destination":"وجهة"}</option>
                        <option value="other">{lang==="en"?"Other":"آخر"}</option>
                      </select>
                    </div>
                  </div>
                  <div className="field-row">
                    <div className="field"><label>{t.contact.form.date}</label><input type="date" value={form.date} onChange={e=>set("date", e.target.value)}/></div>
                    <div className="field"><label>{t.contact.form.guests}</label><input type="number" min="1" value={form.guests} onChange={e=>set("guests", e.target.value)} placeholder="100"/></div>
                  </div>
                  <div className="field"><label>{t.contact.form.venue}</label><input value={form.venue} onChange={e=>set("venue", e.target.value)} placeholder={lang==="en"?"Hotel, beach, private estate…":"فندق، شاطئ، خاص…"}/></div>
                  <div className="field"><label>{t.contact.form.message}</label><textarea value={form.message} onChange={e=>set("message", e.target.value)} placeholder={lang==="en"?"References, mood, the wish behind the brief…":"مراجع، مزاج، الأمنية خلف الفكرة…"}/></div>
                  <button type="submit" className="btn terracotta" style={{marginTop:14}}>{t.contact.form.submit} <ArrowRight/></button>
                </form>
              )}
            </div>

            <div className="contact-info">
              <div className="grp">
                <div className="lbl">{t.contact.info_studio}</div>
                <div className="val">{t.contact.info_studio_v}</div>
                <div className="body-s" style={{color:"var(--muted)", marginTop:4, fontStyle:"italic"}}>
                  {t.contact.info_studio_n} <span className="tbc">Unit TBC</span>
                </div>
              </div>
              <div className="grp">
                <div className="lbl">{t.contact.info_phone}</div>
                <div className="val">
                  <div><a href="tel:+97143378967">+971 4 337 8967</a></div>
                  <div><a href="tel:+971582759609">+971 58 275 9609</a></div>
                </div>
                <div className="body-s" style={{color:"var(--muted)", marginTop:4, fontStyle:"italic"}}>
                  {t.contact.info_phone_n}
                </div>
              </div>
              <div className="grp">
                <div className="lbl">{t.contact.info_email}</div>
                <div className="val"><a href="mailto:info@eventchicdesigns.com">info@eventchicdesigns.com</a></div>
              </div>
              <div className="grp">
                <div className="lbl">{t.contact.info_hours}</div>
                <div className="val">{t.contact.info_hours_v}</div>
              </div>
              <div className="grp">
                <div className="lbl">{lang==="en"?"Follow":"تابعنا"}</div>
                <div className="val" style={{display:"flex", gap:18, fontSize:16, fontFamily:"var(--mono)", letterSpacing:"0.14em", textTransform:"uppercase"}}>
                  <a href="https://instagram.com/eventchicdesigns" target="_blank" rel="noopener noreferrer">IG</a>
                  <a href="https://linkedin.com/company/eventchicdesigns" target="_blank" rel="noopener noreferrer">LI</a>
                  <a href="https://youtube.com/c/EventChicDesigns" target="_blank" rel="noopener noreferrer">YT</a>
                  <a href="https://www.facebook.com/100063644553540" target="_blank" rel="noopener noreferrer">FB</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Map placeholder */}
      <section style={{padding:"80px 0 120px"}}>
        <div className="shell">
          <div style={{
            position:"relative", height:420, background:"var(--cream)",
            display:"flex", alignItems:"center", justifyContent:"center",
            border:"1px solid var(--line)",
            overflow:"hidden"
          }}>
            <svg width="100%" height="100%" style={{position:"absolute", inset:0, opacity:0.5}}>
              <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="var(--line)" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width="100%" height="100%" fill="url(#grid)"/>
            </svg>
            <div style={{position:"relative", textAlign:"center"}}>
              <div style={{width:48, height:48, borderRadius:"50%", border:"3px solid var(--terracotta)", margin:"0 auto 18px", display:"flex", alignItems:"center", justifyContent:"center", background:"var(--paper)"}}>
                <div style={{width:14, height:14, borderRadius:"50%", background:"var(--terracotta)"}}></div>
              </div>
              <div className="display" style={{fontSize:24, marginBottom:6}}>Al Quoz Industrial Area 2</div>
              <div className="body-s">Dubai, UAE — {lang==="en"?"exact unit confirmed on appointment":"يُؤكَّد الموقع عند الموعد"}</div>
              <div style={{marginTop:18}}>
                <span className="tbc">Coords TBC — to be supplied by client</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { Home, Portfolio, CaseStudy, Services, About, Contact });