// Services, Corporate, Story, Stores, Contact pages

const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS } = React;

// ===== SERVICES =====
function ServicesPage() {
  const { t, lang } = window.useStore();
  const [form, setForm] = useStateS({ name:"", phone:"", date:"", area:"", message:"" });
  const [sent, setSent] = useStateS(false);

  return (
    <div data-screen-label="04 Services">
      <section className="page-hero">
        <div className="shell">
          <div className="breadcrumb">
            <a href="#/">{lang === "ar" ? "الرئيسية" : "Home"}</a>
            <span className="sep">/</span> {t("services")}
          </div>
          <div className="eyebrow">― {t("services_eyebrow")}</div>
          <h1 style={{marginTop:14, fontStyle:"italic", fontWeight: 300}}>{t("services_title")}</h1>
          <p className="lede" style={{marginTop:18, maxWidth:"58ch"}}>{lang === "ar" ? "نلفّ الهدايا منذ 2013. اختر أن تأتي إلينا — أو دعنا نأتي إليك." : "We've been wrapping gifts since 2013. Walk in, or let us come to you."}</p>
        </div>
      </section>

      {/* In-store */}
      <section id="in-store" className="section-sm" style={{borderBottom:"1px solid var(--line)"}}>
        <div className="shell">
          <div className="svc-grid">
            <div className="svc-img"><img src="media/service-door-to-door-01.webp" alt=""/></div>
            <div>
              <div className="eyebrow">― 01 / Walk-in</div>
              <h2 style={{marginTop:14, fontStyle:"italic"}}>{t("svc_in_store_title")}</h2>
              <p className="lede" style={{marginTop: 18}}>{t("in_store_wrapping_body")}</p>
              <div className="svc-steps">
                <div className="svc-step">
                  <div className="svc-step-num">01</div>
                  <div>
                    <h4>{lang === "ar" ? "تعال إلى أحد متاجرنا" : "Visit any MASKA store"}</h4>
                    <p>{lang === "ar" ? "خمسة مواقع في دبي — لا حاجة لحجز موعد." : "Five locations across Dubai — no appointment needed."}</p>
                  </div>
                </div>
                <div className="svc-step">
                  <div className="svc-step-num">02</div>
                  <div>
                    <h4>{lang === "ar" ? "اختر القماش والشريط" : "Choose fabric & ribbon"}</h4>
                    <p>{lang === "ar" ? "ساعدك أحد مغلفي ماسكا على اختيار اللوحة المناسبة للمناسبة." : "A MASKA wrapper helps you choose the palette for the occasion."}</p>
                  </div>
                </div>
                <div className="svc-step">
                  <div className="svc-step-num">03</div>
                  <div>
                    <h4>{lang === "ar" ? "ملفوفة في عشر دقائق" : "Wrapped in ten minutes"}</h4>
                    <p>{lang === "ar" ? "نلفّها بأيدينا أمامك ونعقد العقدة الأخيرة." : "Wrapped by hand in front of you — final knot included."}</p>
                  </div>
                </div>
              </div>
              <div style={{marginTop: 32, display:"flex", gap: 14}}>
                <a href="#/stores" className="btn">{lang === "ar" ? "اعثر على متجر" : "Find a store"} <Icon.arrow/></a>
                <a href="#/contact" className="btn btn-ghost">{lang === "ar" ? "اطلب مكالمة" : "Call ahead"}</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Door to door */}
      <section id="door-to-door" className="section" style={{background:"var(--ink)", color:"var(--paper)"}}>
        <div className="shell">
          <div className="svc-grid" style={{alignItems:"center"}}>
            <div>
              <div className="eyebrow" style={{color:"var(--gold)"}}>― 02 / Door-to-Door</div>
              <h2 style={{marginTop:14, fontStyle:"italic", color:"var(--paper)"}}>{t("svc_door_title")}</h2>
              <p className="lede" style={{marginTop: 18, color: "rgba(246,239,228,0.85)"}}>{lang === "ar" ? "لا وقت لزيارة المتجر؟ نلتقط هديتك من بابك، نلفّها بأيدينا، ونوصلها إلى المكان الذي تختاره — في أي مكان في دبي." : "No time to drop by the store? We collect your gift from your doorstep, wrap it by hand and deliver it to wherever you choose — anywhere in Dubai."}</p>

              <div className="svc-steps" style={{marginTop: 32}}>
                {[
                  ["01", t("svc_step_1"), t("svc_step_1_desc")],
                  ["02", t("svc_step_2"), t("svc_step_2_desc")],
                  ["03", t("svc_step_3"), t("svc_step_3_desc")],
                ].map(([n, title, desc]) => (
                  <div key={n} className="svc-step">
                    <div className="svc-step-num" style={{color:"var(--gold)"}}>{n}</div>
                    <div>
                      <h4 style={{color:"var(--paper)"}}>{title}</h4>
                      <p style={{color:"rgba(246,239,228,0.75)"}}>{desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{background:"var(--paper)", color:"var(--ink)", padding: 36}}>
              <h3 style={{fontFamily:"Fraunces, serif", fontStyle:"italic", fontWeight: 400}}>{t("book_now")}</h3>
              <p style={{color:"var(--muted)", marginTop: 6, fontSize: 14}}>{lang === "ar" ? "نتواصل معك خلال ساعة من العمل لتأكيد الموعد." : "We confirm your slot within one business hour."}</p>

              {sent ? (
                <div style={{padding:"40px 20px", textAlign:"center"}}>
                  <div style={{fontSize: 40, color:"var(--gold)"}}>✓</div>
                  <p style={{fontFamily:"Fraunces, serif", fontStyle:"italic", fontSize: 22, marginTop: 12}}>{lang === "ar" ? "تم استلام طلبك" : "Booking received"}</p>
                  <p style={{color:"var(--muted)", marginTop: 8}}>{lang === "ar" ? "سنتصل بك قريباً." : "We'll call you shortly."}</p>
                  <button className="btn btn-ghost" style={{marginTop: 24}} onClick={() => { setSent(false); setForm({ name:"", phone:"", date:"", area:"", message:"" }); }}>{lang === "ar" ? "حجز آخر" : "Book another"}</button>
                </div>
              ) : (
                <form className="form-grid" onSubmit={e => { e.preventDefault(); setSent(true); }} style={{marginTop: 20}}>
                  <div className="field full">
                    <label>{t("name")}</label>
                    <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
                  </div>
                  <div className="field">
                    <label>{lang === "ar" ? "الهاتف" : "Phone"}</label>
                    <input required value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+971..."/>
                  </div>
                  <div className="field">
                    <label>{lang === "ar" ? "المنطقة في دبي" : "Area in Dubai"}</label>
                    <input value={form.area} onChange={e => setForm({...form, area: e.target.value})} placeholder={lang === "ar" ? "جميرا، الخوانيج..." : "Jumeirah, Mirdif..."}/>
                  </div>
                  <div className="field">
                    <label>{lang === "ar" ? "تاريخ الاستلام" : "Collection date"}</label>
                    <input type="date" value={form.date} onChange={e => setForm({...form, date: e.target.value})}/>
                  </div>
                  <div className="field">
                    <label>{lang === "ar" ? "الوقت المفضل" : "Preferred time"}</label>
                    <select><option>{lang === "ar" ? "صباحاً (10–12)" : "Morning (10–12)"}</option><option>{lang === "ar" ? "ظهراً (12–3)" : "Midday (12–3)"}</option><option>{lang === "ar" ? "مساءً (3–6)" : "Afternoon (3–6)"}</option><option>{lang === "ar" ? "ليلاً (6–9)" : "Evening (6–9)"}</option></select>
                  </div>
                  <div className="field full">
                    <label>{lang === "ar" ? "تفاصيل الهدية" : "Tell us about the gift"}</label>
                    <textarea rows={3} value={form.message} onChange={e => setForm({...form, message: e.target.value})} placeholder={lang === "ar" ? "هدية للزواج، عيد ميلاد..." : "Wedding gift, birthday..."}/>
                  </div>
                  <button type="submit" className="btn full" style={{justifyContent:"center"}}>{t("book_now")} <Icon.arrow/></button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Reuse with Maska */}
      <section className="section-sm">
        <div className="shell" style={{textAlign:"center"}}>
          <div className="eyebrow" style={{justifyContent:"center"}}>― {lang === "ar" ? "الاستدامة" : "Sustainability"}</div>
          <h2 style={{marginTop: 14, fontStyle:"italic", fontWeight: 300, maxWidth: "20ch", margin:"14px auto 0"}}>{t("reuse_card_title")} <span style={{color:"var(--gold)"}}>↻</span></h2>
          <p className="lede" style={{margin:"20px auto 0", textAlign:"center"}}>{t("reuse_card_body")} {lang === "ar" ? "" : "Free, forever."}</p>
        </div>
      </section>
    </div>
  );
}
window.ServicesPage = ServicesPage;

// ===== CORPORATE =====
function CorporatePage() {
  const { t, lang } = window.useStore();
  const [form, setForm] = useStateS({ name:"", company:"", email:"", phone:"", occasion:"", qty:"", msg:"" });
  const [sent, setSent] = useStateS(false);

  return (
    <div data-screen-label="05 Corporate">
      <section className="page-hero">
        <div className="shell">
          <div className="breadcrumb">
            <a href="#/">{lang === "ar" ? "الرئيسية" : "Home"}</a>
            <span className="sep">/</span> {t("corporate")}
          </div>
        </div>
      </section>

      <section style={{padding:"40px 0"}}>
        <div className="shell">
          <div className="corp-hero">
            <div>
              <div className="eyebrow eyebrow-rouge">― {lang === "ar" ? "هدايا الشركات" : "Corporate gifting"}</div>
              <h1 style={{whiteSpace:"pre-line", marginTop: 14, fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.4rem,5vw,4.2rem)"}}>{t("corp_title")}</h1>
              <p className="lede" style={{marginTop: 22}}>{t("corp_sub")}</p>

              <div className="corp-feats">
                {[
                  ["01", t("corp_feat_1"), t("corp_feat_1_desc")],
                  ["02", t("corp_feat_2"), t("corp_feat_2_desc")],
                  ["03", t("corp_feat_3"), t("corp_feat_3_desc")],
                  ["04", t("corp_feat_4"), t("corp_feat_4_desc")],
                ].map(([n, title, desc]) => (
                  <div key={n} className="corp-feat">
                    <div className="corp-feat-num">{n}</div>
                    <div>
                      <h5>{title}</h5>
                      <p>{desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div className="corp-hero-img"><img src="media/occasion-corporate-giveaways.webp" alt=""/></div>
            </div>
          </div>
        </div>
      </section>

      {/* Enquiry form */}
      <section className="section" style={{background: "var(--paper-2)"}}>
        <div className="shell" style={{maxWidth: 880, margin:"0 auto"}}>
          <div style={{textAlign:"center", marginBottom: 32}}>
            <div className="eyebrow" style={{justifyContent:"center"}}>― {lang === "ar" ? "أرسل طلباً" : "Send us an enquiry"}</div>
            <h2 style={{marginTop: 12, fontStyle:"italic", fontWeight: 300}}>{lang === "ar" ? "حدّثنا عن مشروعك." : "Tell us about your project."}</h2>
            <p style={{color: "var(--muted)", marginTop: 8}}>{lang === "ar" ? "نرد عادة خلال يوم عمل." : "We typically respond within one business day."}</p>
          </div>

          {sent ? (
            <div style={{background:"var(--paper)", padding: 60, textAlign:"center"}}>
              <div style={{fontSize: 40, color:"var(--gold)"}}>✓</div>
              <p style={{fontFamily:"Fraunces, serif", fontStyle:"italic", fontSize: 26, marginTop: 12}}>{lang === "ar" ? "شكراً لك" : "Thank you"}</p>
              <p style={{color:"var(--muted)", marginTop: 8}}>{lang === "ar" ? "تم استلام طلبك. سنرد عبر info@maskawraps.com خلال يوم." : "Your enquiry is in. We'll reply from info@maskawraps.com within a day."}</p>
            </div>
          ) : (
            <form onSubmit={e => { e.preventDefault(); setSent(true); }} style={{background:"var(--paper)", padding:40}}>
              <div className="form-grid">
                <div className="field">
                  <label>{t("name")}</label>
                  <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
                </div>
                <div className="field">
                  <label>{t("company")}</label>
                  <input required value={form.company} onChange={e => setForm({...form, company: e.target.value})}/>
                </div>
                <div className="field">
                  <label>{t("email_label")}</label>
                  <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}/>
                </div>
                <div className="field">
                  <label>{lang === "ar" ? "الهاتف" : "Phone"}</label>
                  <input value={form.phone} onChange={e => setForm({...form, phone: e.target.value})} placeholder="+971..."/>
                </div>
                <div className="field">
                  <label>{t("occasion_field")}</label>
                  <select value={form.occasion} onChange={e => setForm({...form, occasion: e.target.value})}>
                    <option value="">{lang === "ar" ? "اختر" : "Choose"}…</option>
                    {MASKA_CONTENT.occasions.map(o => <option key={o.id} value={o.id}>{lang === "ar" ? o.ar : o.en}</option>)}
                    <option value="other">{lang === "ar" ? "أخرى" : "Other"}</option>
                  </select>
                </div>
                <div className="field">
                  <label>{t("quantity")}</label>
                  <select value={form.qty} onChange={e => setForm({...form, qty: e.target.value})}>
                    <option>50–100</option>
                    <option>100–250</option>
                    <option>250–500</option>
                    <option>500–1000</option>
                    <option>{lang === "ar" ? "أكثر من 1000" : "1000+"}</option>
                  </select>
                </div>
                <div className="field full">
                  <label>{t("message")}</label>
                  <textarea rows={4} value={form.msg} onChange={e => setForm({...form, msg: e.target.value})} placeholder={lang === "ar" ? "تاريخ المناسبة، تفاصيل التصميم، الميزانية..." : "Event date, brand guidelines, budget..."}/>
                </div>
              </div>
              <div style={{marginTop: 28, display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:16}}>
                <p style={{fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--muted)"}}>{lang === "ar" ? "البديل: " : "Or email "}<a href="mailto:info@maskawraps.com" style={{color:"var(--gold-deep)", textDecoration:"underline"}}>info@maskawraps.com</a></p>
                <button type="submit" className="btn btn-rouge">{t("send")} <Icon.arrow/></button>
              </div>
            </form>
          )}
        </div>
      </section>

      {/* Trusted by */}
      <section className="section-sm">
        <div className="shell">
          <div style={{textAlign:"center", marginBottom: 24}}>
            <div className="eyebrow">― {lang === "ar" ? "موثوقون لدى" : "Trusted by"}</div>
          </div>
          <div className="press-row">
            {[
              "Emirates NBD", "DAMAC", "Dubai Holding", "Mubadala", "Aldar", "Etihad",
            ].map(p => <div key={p} className="press-item">{p}</div>)}
          </div>
          <p style={{textAlign:"center", marginTop:16, fontSize:11, letterSpacing:"0.14em", color:"var(--muted)"}}>{lang === "ar" ? "* أمثلة توضيحية — تتأكد من القائمة الفعلية." : "* illustrative — final client list confirmed on enquiry"}</p>
        </div>
      </section>
    </div>
  );
}
window.CorporatePage = CorporatePage;

// ===== STORY =====
function StoryPage() {
  const { t, lang } = window.useStore();
  return (
    <div data-screen-label="06 Story">
      <section className="story-hero">
        <div className="story-hero-bg"><img src="media/story-furoshiki-origin.webp" alt=""/></div>
        <div className="shell story-hero-content">
          <div className="eyebrow" style={{color:"var(--gold)"}}>― 2013 → {new Date().getFullYear()}</div>
          <h1 style={{marginTop: 14, fontStyle:"italic", fontWeight: 300, color:"var(--paper)"}}>{lang === "ar" ? "بدأت الحكاية بقماشة." : "It started with a piece of cloth."}</h1>
          <p className="lede" style={{color:"rgba(246,239,228,0.88)", marginTop:20}}>{lang === "ar" ? "في رحلة إلى اليابان، تأمّلت فاطمة الخوري كيف يُلفّ اليابانيون هداياهم في قماش الفوروشيكي. عادت إلى دبي بسؤال: ماذا لو فعلنا هذا في الخليج؟" : "On a trip to Japan, Fatma Al Khoori watched gifts being wrapped in Furoshiki cloth. She came home to Dubai with a question — what if we did this here?"}</p>
        </div>
      </section>

      <section style={{padding:"80px 0"}}>
        <div className="shell">
          <div className="story-timeline">
            {MASKA_CONTENT.timeline.map((row, i) => (
              <div key={row.year} className={"story-row " + (i % 2 === 1 ? "flip" : "")}>
                <div className="story-img"><img src={row.img} alt={row.title}/></div>
                <div>
                  <div className="story-year">{row.year}</div>
                  <h3>{row.title}</h3>
                  <p>{row.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Sustainability */}
      <section id="sustainability" className="sustain">
        <div className="shell">
          <div style={{maxWidth: 720}}>
            <div className="eyebrow" style={{color:"var(--gold)"}}>― {lang === "ar" ? "الاستدامة" : "Sustainability"}</div>
            <h2 style={{marginTop: 14, color:"var(--paper)"}}>{t("sustain_title")}</h2>
            <p className="lede" style={{color:"rgba(246,239,228,0.82)", marginTop: 20}}>{t("sustain_body")}</p>
          </div>

          <div className="sustain-grid">
            <div className="sustain-card">
              <div className="sustain-card-img"><img src="media/reuse-rewrapping-service.webp" alt=""/></div>
              <h3>↻ {t("reuse_card_title")}</h3>
              <p>{t("reuse_card_body")}</p>
            </div>
            <div className="sustain-card">
              <div className="sustain-card-img"><img src="media/story-sewing-machine-initiative.webp" alt=""/></div>
              <h3>✿ {t("smi_card_title")}</h3>
              <p>{t("smi_card_body")}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Press */}
      <section className="section-sm">
        <div className="shell">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 56, alignItems:"center"}} className="press-feat">
            <div className="story-img" style={{aspectRatio:"4/3"}}>
              <img src="media/press-khaleej-times-feature.webp" alt="Khaleej Times feature"/>
            </div>
            <div>
              <div className="eyebrow">― {lang === "ar" ? "أول تغطية" : "Our first feature"}</div>
              <h2 style={{marginTop: 14, fontStyle:"italic", fontWeight: 300}}>"It's a wrap with Fatma and Noory for MASKA!"</h2>
              <p className="lede" style={{marginTop: 18}}>{lang === "ar" ? "خاليج تايمز، 2013 — حين كانت ماسكا متجراً صغيراً في تاون سنتر جميرا." : "Khaleej Times, 2013 — when MASKA was a small store at Town Center Jumeirah, and Furoshiki was still a word most of us hadn't heard."}</p>
              <div style={{display:"flex", gap: 14, marginTop: 28}}>
                <a href="#/contact" className="btn btn-ghost">{lang === "ar" ? "للصحافة، تواصل معنا" : "For press, get in touch"} <Icon.arrow/></a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.StoryPage = StoryPage;

// ===== STORES =====
function StoresPage() {
  const { t, lang } = window.useStore();
  return (
    <div data-screen-label="07 Stores">
      <section className="page-hero">
        <div className="shell">
          <div className="breadcrumb">
            <a href="#/">{lang === "ar" ? "الرئيسية" : "Home"}</a>
            <span className="sep">/</span> {t("stores")}
          </div>
          <div className="eyebrow">― {lang === "ar" ? "خمسة متاجر في دبي" : "Five stores in Dubai"}</div>
          <h1 style={{marginTop: 14, fontStyle:"italic", fontWeight: 300}}>{lang === "ar" ? "تجدنا في كل أرجاء المدينة." : "Find us across the city."}</h1>
          <p className="lede" style={{marginTop: 18}}>{t("stores_intro")}</p>
        </div>
      </section>

      <section>
        <div className="shell">
          <div className="store-grid">
            {MASKA_CONTENT.stores.map(s => (
              <div key={s.name} className={"store-card " + (s.featured ? "featured" : "")}>
                <div className="store-card-meta"><Icon.pin/> {s.sub}</div>
                <div className="store-card-name">{s.name}</div>
                <div className="store-card-addr">{s.addr}<br/>{s.floor}</div>
                <div className="store-card-hours">⏰ {s.hours}</div>
                <div style={{display:"flex", gap:12, marginTop:16}}>
                  <a className="btn-link" style={{color: s.featured ? "var(--paper)" : "var(--ink)", borderColor: s.featured ? "var(--gold)" : "var(--ink)"}} href={`https://www.google.com/maps?q=${encodeURIComponent(s.name + " Dubai")}`} target="_blank" rel="noreferrer">{t("directions")} <Icon.arrow/></a>
                </div>
              </div>
            ))}
          </div>

          <div style={{padding:"60px 0 96px", borderTop:"1px solid var(--line)", marginTop: 32}}>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: 56, alignItems:"center"}} className="store-extra">
              <div>
                <div className="eyebrow">― {lang === "ar" ? "متجر دبي مول" : "Dubai Mall kiosk"}</div>
                <h2 style={{marginTop: 14, fontStyle:"italic", fontWeight: 300}}>{lang === "ar" ? "كشكنا في دبي مول — تصميم بزاوية 360 درجة." : "Our Dubai Mall kiosk — a 360° concept."}</h2>
                <p className="lede" style={{marginTop: 18}}>{lang === "ar" ? "تصميم استوديو سنيها ديفياس — كشك دائري الزوايا حيث يُلفّ كل شيء أمام عينيك." : "Designed by Sneha Divias Atelier — a round-cornered kiosk where everything is wrapped in front of you."}</p>
              </div>
              <div className="store-card" style={{padding: 0, border:0, background:"transparent"}}>
                <div style={{aspectRatio: "4/3", overflow:"hidden", background:"var(--paper-2)"}}>
                  <img src="media/store-mini-shop.webp" alt="" style={{width:"100%", height:"100%", objectFit:"cover"}}/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.StoresPage = StoresPage;

// ===== CONTACT =====
function ContactPage() {
  const { t, lang } = window.useStore();
  const [form, setForm] = useStateS({ name:"", email:"", message:"" });
  const [sent, setSent] = useStateS(false);
  return (
    <div data-screen-label="08 Contact">
      <section className="page-hero">
        <div className="shell">
          <div className="breadcrumb">
            <a href="#/">{lang === "ar" ? "الرئيسية" : "Home"}</a>
            <span className="sep">/</span> {t("contact")}
          </div>
          <div className="eyebrow">― {lang === "ar" ? "تواصل" : "Get in touch"}</div>
          <h1 style={{marginTop: 14, fontStyle:"italic", fontWeight: 300}}>{lang === "ar" ? "نرد على كل رسالة." : "We answer every message."}</h1>
          <p className="lede" style={{marginTop: 18}}>{t("contact_intro")}</p>
        </div>
      </section>

      <section style={{padding:"60px 0 96px"}}>
        <div className="shell">
          <div style={{display:"grid", gridTemplateColumns:"1fr 1.2fr", gap: 64}} className="contact-grid">
            <div>
              <div className="eyebrow">― {lang === "ar" ? "تفاصيل التواصل" : "Reach us"}</div>
              <div style={{marginTop: 24}}>
                <div style={{paddingBottom: 20, borderBottom: "1px solid var(--line)"}}>
                  <div className="eyebrow">{t("phone_label")}</div>
                  <a href={MASKA_CONTENT.brand.phone_href} style={{fontFamily:"Fraunces, serif", fontSize: 26, fontStyle:"italic", display:"block", marginTop:6}}>{MASKA_CONTENT.brand.phone}</a>
                </div>
                <div style={{paddingTop: 20, paddingBottom: 20, borderBottom: "1px solid var(--line)"}}>
                  <div className="eyebrow">{t("email_label")}</div>
                  <a href={`mailto:${MASKA_CONTENT.brand.email}`} style={{fontFamily:"Fraunces, serif", fontSize: 22, fontStyle:"italic", display:"block", marginTop:6}}>{MASKA_CONTENT.brand.email}</a>
                </div>
                <div style={{paddingTop: 20, paddingBottom: 20, borderBottom: "1px solid var(--line)"}}>
                  <div className="eyebrow">{lang === "ar" ? "الاستوديو" : "Studio HQ"}</div>
                  <p style={{marginTop: 6, fontSize: 14, lineHeight:1.6}}>Dubai Design District<br/>Building 4, Office B404<br/>Za'abeel 2, Dubai, UAE</p>
                </div>
                <div style={{paddingTop: 20}}>
                  <div className="eyebrow">{t("follow_us")}</div>
                  <div style={{display:"flex", gap: 18, marginTop: 8, fontSize: 13}}>
                    <a href="#">@maskawraps</a>
                    <a href="#">Facebook</a>
                    <a href="#">TikTok</a>
                    <a href="#">LinkedIn</a>
                  </div>
                </div>
              </div>
            </div>

            <div style={{background:"var(--paper-2)", padding: 40}}>
              <div className="eyebrow">― {t("send_message")}</div>
              <h3 style={{fontFamily:"Fraunces, serif", fontStyle:"italic", fontWeight:400, marginTop: 12}}>{lang === "ar" ? "حدّثنا." : "Write to us."}</h3>

              {sent ? (
                <div style={{padding:"60px 0", textAlign:"center"}}>
                  <div style={{fontSize: 40, color:"var(--gold)"}}>✓</div>
                  <p style={{fontFamily:"Fraunces, serif", fontStyle:"italic", fontSize: 22, marginTop: 12}}>{lang === "ar" ? "وصلتنا رسالتك" : "Got it."}</p>
                  <p style={{color:"var(--muted)", marginTop:8}}>{lang === "ar" ? "سنرد قريباً." : "We'll be in touch shortly."}</p>
                </div>
              ) : (
                <form onSubmit={e => { e.preventDefault(); setSent(true); }} className="form-grid" style={{marginTop:20}}>
                  <div className="field full">
                    <label>{t("name")}</label>
                    <input required value={form.name} onChange={e => setForm({...form, name: e.target.value})}/>
                  </div>
                  <div className="field full">
                    <label>{t("email_label")}</label>
                    <input required type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})}/>
                  </div>
                  <div className="field full">
                    <label>{t("message")}</label>
                    <textarea rows={5} value={form.message} onChange={e => setForm({...form, message: e.target.value})}/>
                  </div>
                  <button className="btn full" style={{justifyContent:"center"}}>{t("send_message")} <Icon.arrow/></button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.ContactPage = ContactPage;