// Page components for Hessa Falasi prototype
const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React;

function HomePage({ locale, navigate, showToast }) {
  const t = window.HF_USE_T(locale);
  const { products, collections } = window.HF_DATA;
  const featured = products.filter(p => !p.aiRender).slice(0,4);

  // Hero h1 layout — two stacked phrases
  const h1 = t("home.heroH1En");

  // Active collections (drop seasonal that isn't active)
  const visibleCollections = collections.filter(c => !c.seasonal || c.active);
  // Layout: 6/6, then 4/4/4 for visual rhythm
  const layouts = ["span-7", "span-5", "span-4", "span-4", "span-4"];

  return (
    <main className="page-enter">
      {/* HERO */}
      <section className="hero">
        <div className="hero__copy">
          <div className="hero__eyebrow eyebrow">{t("home.heroEyebrow")}</div>
          <h1 className="hero__h1">
            {h1[0]}<br/>
            <em>{h1[1]}</em>
          </h1>
          <p className="hero__sub">{t("home.heroSub")}</p>
          <div className="hero__ctas">
            <a href="#/appointments" className="btn btn--light">{t("common.bookFitting")}</a>
            <a href="#/collections" className="btn btn--ghost-light">{t("common.explore")}</a>
          </div>
        </div>
        <div className="hero__media">
          <img src="media/hero-lifestyle-img-9879.webp" alt="" />
          <div className="scroll-indicator">{locale === "ar" ? "اسحبي" : "Scroll"}</div>
        </div>
        <div className="hero__meta">
          <span>—<b style={{marginInlineStart:10}}>{t("common.since")}</b></span>
          <span>{t("common.delivery")}</span>
        </div>
      </section>

      {/* MANIFESTO */}
      <section className="manifesto">
        <div className="quote serif">
          {locale === "ar" ? (
            <>هسة الفلاسي ليست مجرد <em>لباس</em> — بل أسلوب حياة.</>
          ) : (
            <>A <em>HESSA FALASI</em> is not just an outfit — it is a mindset.</>
          )}
        </div>
        <div className="attribution eyebrow">— {locale === "ar" ? "بيان الدار، ٢٠١١" : "House statement, 2011"}</div>
      </section>

      {/* COLLECTIONS */}
      <section className="section container">
        <SectionHead num="i." title={t("home.collectionsTitle")} meta={t("home.collectionsMeta")} />
        <div className="coll-grid">
          {visibleCollections.map((c, i) => (
            <CollectionCard key={c.slug} c={c} locale={locale} span={layouts[i] ? layouts[i].split("-")[1] : "4"} num={`${String(i+1).padStart(2,"0")}.`} />
          ))}
        </div>
        <div style={{marginTop:32, textAlign:"center"}}>
          <a href="#/collections" className="link-arrow">
            {locale === "ar" ? "كل المجموعات" : "All collections"} <span className="arr">→</span>
          </a>
        </div>
      </section>

      {/* HOUSE TEASER */}
      <section className="bg-bone section">
        <div className="container">
          <div className="split reverse">
            <div className="img">
              <img src="media/editorial-01-press.webp" alt="" />
            </div>
            <div className="copy">
              <div className="eyebrow" style={{marginBottom:14, color:"var(--gold)"}}>{locale==="ar"?"الدار · منذ ٢٠١١":"The House · Since 2011"}</div>
              <h2 className="display serif">{t("home.houseTitle")}</h2>
              <p style={{marginTop:24}}>{t("home.houseBody1")}</p>
              <p>{t("home.houseBody2")}</p>
              <div style={{marginTop:28}}>
                <a href="#/the-house" className="link-arrow">{t("common.readStory")} <span className="arr">→</span></a>
              </div>

              <div className="meta-list">
                <div><span>{locale==="ar"?"المؤسِّسة":"Founder"}</span><span>Hessa Al Falasi</span></div>
                <div><span>{locale==="ar"?"التأسيس":"Established"}</span><span>2011, Dubai</span></div>
                <div><span>{locale==="ar"?"التوقيع":"Signature"}</span><span>{locale==="ar"?"العباية المطوية":"The folded abaya"}</span></div>
                <div><span>{locale==="ar"?"الأتيليه":"Atelier"}</span><span>Dubai Design District, Building 2</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED PIECES */}
      <section className="section container">
        <SectionHead
          num="ii."
          title={locale==="ar" ? "مختارات الموسم" : "From the atelier"}
          meta={locale==="ar" ? "قطع مختارة · حقيقية من المخزون" : "Real garments · in-house photography"}
        />
        <div className="prod-grid">
          {featured.map(p => <ProductCard key={p.handle} p={p} locale={locale} navigate={navigate} />)}
        </div>
      </section>

      {/* CREDIBILITY */}
      <section className="credibility">
        <div className="container">
          <div className="row">
            <div className="lbl">{t("common.featuredLine")}</div>
            <div className="marquee">
              <span>The National</span>
              <span className="dot"></span>
              <span>Grazia Middle East</span>
              <span className="dot"></span>
              <span>About Her</span>
              <span className="dot"></span>
              <span>Arab News</span>
              <span className="dot"></span>
              <span>Fashion Forward Dubai</span>
            </div>
          </div>
          <hr className="hairline" style={{margin:"36px 0"}} />
          <div className="row">
            <div className="lbl">{t("common.stockistsLine")}</div>
            <div className="marquee" style={{fontStyle:"italic"}}>
              <span>Ounass</span>
              <span className="dot"></span>
              <span style={{color:"var(--muted)",fontSize:14,fontFamily:"var(--sans)",fontStyle:"normal",letterSpacing:".18em",textTransform:"uppercase"}}>
                {locale==="ar"?"إضافات بانتظار إذن الشركاء":"Additional partners pending permission"}
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* APPOINTMENT CTA */}
      <section className="bg-noir section">
        <div className="container" style={{display:"grid",gridTemplateColumns:"1fr auto",gap:48,alignItems:"end"}}>
          <div>
            <div className="eyebrow" style={{color:"rgba(251,248,242,.55)"}}>{locale==="ar"?"التحويل":"How clients book"}</div>
            <h2 className="display serif" style={{maxWidth:"18ch", marginTop:14}}>{t("home.apptTitle")}</h2>
            <p className="lead" style={{marginTop:24, maxWidth:"52ch",color:"rgba(251,248,242,.78)"}}>{t("home.apptBody")}</p>
          </div>
          <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
            <a href="#/appointments" className="btn btn--light">{t("common.bookFitting")}</a>
            <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn--ghost-light">{t("common.whatsApp")}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

function CollectionsHubPage({ locale, navigate }) {
  const t = window.HF_USE_T(locale);
  const { collections } = window.HF_DATA;
  const visible = collections.filter(c => !c.seasonal || c.active);
  const layouts = ["7","5","6","6"];
  return (
    <main className="page-enter">
      <header className="section section--tight container">
        <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"المجموعات":"Collections"}</div>
        <h1 className="display serif" style={{marginTop:14,maxWidth:"18ch"}}>
          {locale==="ar"
            ? "أربعة خطوط، صياغة واحدة."
            : "Four lines, one quiet hand."}
        </h1>
        <p className="lead" style={{maxWidth:"58ch",marginTop:18,color:"var(--muted)"}}>
          {locale==="ar"
            ? "تتفرّع الدار إلى أربعة خطوط — أساسية وموسمية — جميعها تُفصّل في أتيليه دبي للتصميم. كل خط يحمل توقيع العباية المطوية بطريقته."
            : "Four lines extend the house — three evergreen, one seasonal. Every piece is cut in our d3 atelier; each line interprets the folded silhouette in its own register."}
        </p>
      </header>
      <section className="section container">
        <div className="coll-grid">
          {visible.map((c,i) => (
            <CollectionCard key={c.slug} c={c} locale={locale} span={layouts[i]||"6"} num={`${String(i+1).padStart(2,"0")}.`} />
          ))}
        </div>
      </section>
    </main>
  );
}

function CollectionDetailPage({ slug, locale, navigate }) {
  const t = window.HF_USE_T(locale);
  const { collections, products } = window.HF_DATA;
  const collection = collections.find(c => c.slug === slug);
  const list = products.filter(p => p.collection === slug);
  const [silhouette, setSilhouette] = useStateP("all");

  if (!collection) {
    return <main className="container section"><h1 className="display serif">Collection not found</h1></main>;
  }

  const sils = ["all", ...Array.from(new Set(list.map(p => p.silhouette)))];
  const filtered = silhouette === "all" ? list : list.filter(p => p.silhouette === silhouette);

  return (
    <main className="page-enter">
      <header className="section section--tight container" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,alignItems:"end"}}>
        <div>
          <div className="eyebrow" style={{color:"var(--gold)"}}>
            {locale==="ar"?"مجموعة":"Collection"} · {String(collections.findIndex(c=>c.slug===slug)+1).padStart(2,"0")}
          </div>
          <h1 className="display serif" style={{marginTop:14}}>{collection.name[locale]}</h1>
          <p className="lead" style={{marginTop:18,maxWidth:"50ch",color:"var(--muted)"}}>{collection.descriptor[locale]}</p>
        </div>
        <div className="img" style={{aspectRatio:"4/3",overflow:"hidden",background:"var(--sand)"}}>
          <img src={collection.cover} alt="" style={{width:"100%",height:"100%",objectFit:"cover"}}/>
        </div>
      </header>

      <section className="section container">
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:16,marginBottom:32}}>
          <div className="chips">
            {sils.map(s => (
              <button key={s} className={"chip" + (silhouette===s?" active":"")} onClick={()=>setSilhouette(s)}>
                {t(`silhouettes.${s}`) || s}
              </button>
            ))}
          </div>
          <div className="eyebrow" style={{color:"var(--muted)"}}>
            {filtered.length} {locale==="ar"?"قطعة":(filtered.length===1?"piece":"pieces")}
          </div>
        </div>
        {filtered.length === 0 ? (
          <div style={{padding:"80px 0",textAlign:"center",color:"var(--muted)"}}>
            <p>{locale==="ar"?"لا توجد قطع متاحة في هذا التصنيف.":"No pieces in this filter."}</p>
          </div>
        ) : (
          <div className="prod-grid">
            {filtered.map(p => <ProductCard key={p.handle} p={p} locale={locale} navigate={navigate} />)}
          </div>
        )}
      </section>
    </main>
  );
}

function ProductPage({ handle, locale, navigate, showToast }) {
  const t = window.HF_USE_T(locale);
  const { products } = window.HF_DATA;
  const p = products.find(x => x.handle === handle);
  const [size, setSize] = useStateP(null);
  const [activeImg, setActiveImg] = useStateP(0);

  if (!p) {
    return <main className="container section"><h1 className="display serif">Product not found</h1></main>;
  }

  // Create gallery — main + a few real-photo siblings + same-collection variants
  const sibs = products.filter(x => x.collection === p.collection && x.handle !== p.handle).slice(0,3);
  const gallery = [p.image, ...sibs.map(s => s.image)];

  const sizes = ["XS","S","M","L","XL"];

  const onAdd = () => {
    if (!size) { showToast(locale==="ar"?"اختاري المقاس أولاً":"Choose a size first"); return; }
    showToast(locale==="ar"?"أُضيفت إلى الحقيبة — جاري التوجيه إلى الدفع…":"Added to bag — handing off to Shopify checkout…");
  };

  const waUrl = WA_LINK.replace("styling%20appointment", `styling%20on%20${encodeURIComponent(p.name.en)}`);

  // cross-sell
  const cross = products.filter(x => x.handle !== p.handle).slice(0,4);

  return (
    <main className="page-enter">
      <div className="container" style={{padding:"24px 0",fontSize:11,letterSpacing:".18em",textTransform:"uppercase",color:"var(--muted)"}}>
        <a href="#/" style={{color:"inherit"}}>{locale==="ar"?"الدار":"House"}</a>
        <span style={{margin:"0 10px"}}>/</span>
        <a href={`#/collection/${p.collection}`} style={{color:"inherit"}}>{p.collection}</a>
        <span style={{margin:"0 10px"}}>/</span>
        <span style={{color:"var(--ink)"}}>{p.name[locale]}</span>
      </div>

      <section className="container" style={{paddingBottom:96}}>
        <div className="pdp">
          <div className="gallery">
            <div className="main"><img src={gallery[activeImg]} alt={p.name[locale]} /></div>
            <div className="thumbs">
              {gallery.map((g,i) => (
                <div key={i} className={"t"+(i===activeImg?" active":"")} onClick={()=>setActiveImg(i)}>
                  <img src={g} alt="" />
                </div>
              ))}
            </div>
          </div>

          <div className="info">
            <div className="eyebrow" style={{color:"var(--gold)"}}>{p.collection.toUpperCase()} · {t(`silhouettes.${p.silhouette}`) || ""}</div>
            <h1>{p.name[locale]}</h1>
            <div className="price serif num">
              {p.priceFrom ? <span className="from">{t("common.from")}</span> : null}
              {formatAED(p.priceAED)}
              {p.priceTo ? <span style={{color:"var(--muted)",fontSize:14,marginInlineStart:10}}>— {formatAED(p.priceTo)}</span> : null}
            </div>

            <p style={{marginTop:22,color:"var(--ink)"}}>{p.story[locale]}</p>

            <div className="field">
              <label>
                <span>{t("common.pickSize")}</span>
                <a href="#/size-guide" style={{color:"var(--gold)"}}>{t("common.sizeGuide")} →</a>
              </label>
              <div className="sizes">
                {sizes.map(s => (
                  <button key={s} className={"size"+(size===s?" active":"")} onClick={()=>setSize(s)}>{s}</button>
                ))}
              </div>
              {size ? (
                <div style={{marginTop:10,fontSize:12,color:"var(--muted)",letterSpacing:".06em"}}>
                  {t("common.selectedSize")}: <b style={{color:"var(--ink)"}}>{size}</b> · {locale==="ar"?"يُمكن تعديل الطول في الموعد الخاص":"length adjusted at private fitting"}
                </div>
              ) : null}
            </div>

            <div className="ctas">
              <button className="btn" onClick={onAdd}>{t("common.addToBag")}</button>
              <a href={waUrl} target="_blank" rel="noopener" className="btn btn--ghost">{t("common.whatsAppLong")}</a>
              <a href="#/appointments" className="link-arrow" style={{alignSelf:"start",marginTop:8}}>
                {locale==="ar"?"احجزي قياساً خاصاً":"Book a private fitting"} <span className="arr">→</span>
              </a>
            </div>

            <div className="meta">
              <details open>
                <summary>{locale==="ar"?"القماش والصنع":"Fabric & craft"}</summary>
                <div className="panel">{p.fabric[locale]}. {locale==="ar"?"مقصوص في أتيليه دبي للتصميم وملمَّس باليد.":"Cut in our Dubai Design District atelier and finished by hand."}</div>
              </details>
              <details>
                <summary>{locale==="ar"?"المقاس والتفصيل":"Sizing & made-to-measure"}</summary>
                <div className="panel">{locale==="ar"?"يتوفر مقاس قياسي XS–XL مع تعديل الطول مجاناً عند جلسة القياس الخاصة. التفصيل التام متاح بطلب خاص.":"Standard XS–XL with complimentary length adjustment at your private fitting. Full made-to-measure available on request."}</div>
              </details>
              <details>
                <summary>{locale==="ar"?"الشحن والإرجاع":"Delivery & care"}</summary>
                <div className="panel">{locale==="ar"?"يُسلَّم خلال ٧–١٤ يوماً. شحن عالمي. تنظيف جاف فقط، نُوصي بأكياس الحفظ القطنية.":"7–14 days production. Worldwide shipping. Dry-clean only; we recommend cotton garment bags."}</div>
              </details>
            </div>
          </div>
        </div>
      </section>

      <section className="bg-bone section">
        <div className="container">
          <SectionHead num="iii." title={locale==="ar"?"قد يعجبكِ أيضاً":"You may also love"} meta={`${cross.length} ${locale==="ar"?"قطع":"pieces"}`} />
          <div className="prod-grid">
            {cross.map(c => <ProductCard key={c.handle} p={c} locale={locale} navigate={navigate} />)}
          </div>
        </div>
      </section>
    </main>
  );
}

function HousePage({ locale, navigate }) {
  const t = window.HF_USE_T(locale);
  return (
    <main className="page-enter">
      <header className="section container">
        <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"عن الدار":"The House"}</div>
        <h1 className="display serif" style={{maxWidth:"22ch",marginTop:14}}>
          {locale==="ar"?"هسة الفلاسي — مصمّمة، مؤسِّسة، إماراتية.":"Hessa Al Falasi — designer, founder, Emirati."}
        </h1>
        <p className="lead" style={{maxWidth:"60ch",marginTop:20,color:"var(--muted)"}}>{t("house.sub")}</p>
      </header>

      <section className="container" style={{paddingBottom:80}}>
        <div className="split">
          <div className="img">
            <img src="media/editorial-02-press.webp" alt="" />
          </div>
          <div className="copy">
            <div className="eyebrow">{locale==="ar"?"البدايات":"The origin"}</div>
            <h2 className="display serif" style={{marginTop:8}}>{locale==="ar"?"بدأت بتفصيل لنفسها.":"She began by designing for herself."}</h2>
            <p style={{marginTop:18}}>
              {locale==="ar"
                ? "علّمتها والدتها الأساسيات في صغرها. ثم بدأت تفصّل لنفسها، ثم لأخواتها وصديقاتها، إلى أن أصبح الحديث عن قطعها أكثر من الحديث عن أي شيء آخر. عام ٢٠١١، أطلقت العلامة رسمياً."
                : "Her mother taught her the fundamentals. She began designing for herself, then for her sisters, then for friends — and when more conversations were about her pieces than about anything else, she made the brand official in 2011."}
            </p>
            <p>
              {locale==="ar"
                ? "تصاميمها مستوحاة من تجارب الحياة، الثقافة العربية، وأسفارها — مفرداتها الثابتة هي الأناقة، البساطة، الجودة، والخلود."
                : "Her work is, in her words, inspired by life experiences, Arabic culture and her travels — the working lexicon of the house remains elegance, simplicity, quality, the timeless."}
            </p>
          </div>
        </div>
      </section>

      <section className="bg-bone section">
        <div className="container">
          <div className="split reverse">
            <div className="img">
              <img src="media/editorial-03-press.webp" alt="" />
            </div>
            <div className="copy">
              <div className="eyebrow">{locale==="ar"?"التوقيع":"The signature"}</div>
              <h2 className="display serif" style={{marginTop:8}}>
                {locale==="ar"?"العباية المطوية.":"The folded abaya."}
              </h2>
              <p style={{marginTop:18}}>
                {locale==="ar"
                  ? "وصف الصحفيون توقيعها بـ«العباية المطوية» — قطعة يمكن طيّها، حزمها، تقصيرها على الخصر، وإطلاقها في الأرض كلّه دون أن تفقد هدوءها. هذا السلويت — السلويت المطوي — يبقى العمود الفقري للدار."
                  : "Press calls her signature the folded abaya — a piece that can be folded, belted, cinched at the waist and released at the hem without losing its quiet. That silhouette remains the spine of the house."}
              </p>
              <div style={{marginTop:24}}>
                <a href="#/collections" className="link-arrow">{locale==="ar"?"المجموعات":"See the collections"} <span className="arr">→</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section container">
        <SectionHead num="iv." title={locale==="ar"?"الأتيليه":"The atelier"} meta="Dubai Design District" />
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:24}}>
          {[
            {n:"01", t: locale==="ar"?"القماش":"Fabric", b: locale==="ar"?"الكريب، التول، الدانتيل المغربي، والحبيبات اليدوية.":"Crêpes, tulles, Moroccan lace and hand-set bead lace."},
            {n:"02", t: locale==="ar"?"اليد":"By hand", b: locale==="ar"?"تطريز، حلية، وقصّ يدوي في أتيليه d3.":"Embroidery, trim and cutting — all by hand in our d3 atelier."},
            {n:"03", t: locale==="ar"?"التفصيل":"Made to measure", b: locale==="ar"?"كل قطعة قابلة للتفصيل أثناء جلسة قياس خاصة — في الأتيليه أو في منزلك.":"Every piece adjustable during a private fitting — atelier or home."}
          ].map(card => (
            <div key={card.n} style={{padding:"32px 0",borderTop:"1px solid var(--line)"}}>
              <div className="num-mark serif" style={{color:"var(--gold)",fontStyle:"italic",fontSize:18}}>{card.n}.</div>
              <h3 className="display serif" style={{marginTop:14,fontSize:28}}>{card.t}</h3>
              <p style={{marginTop:14,color:"var(--muted)",lineHeight:1.7}}>{card.b}</p>
            </div>
          ))}
        </div>
      </section>
    </main>
  );
}

function PressPage({ locale }) {
  const t = window.HF_USE_T(locale);
  const { press } = window.HF_DATA;
  return (
    <main className="page-enter">
      <header className="section container">
        <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"الصحافة":"Press"}</div>
        <h1 className="display serif" style={{marginTop:14,maxWidth:"22ch"}}>{t("press.title")}</h1>
        <p className="lead" style={{marginTop:18,maxWidth:"60ch",color:"var(--muted)"}}>{t("press.sub")}</p>
      </header>

      <section className="container" style={{paddingBottom:64}}>
        <div className="press-grid">
          {press.map((p,i) => (
            <a key={i} className="press-cell" href="#" onClick={e=>e.preventDefault()}>
              <span className="yr serif">{p.year}</span>
              <span>
                <div className="out serif">{p.outlet}</div>
                <div className="tit">{p.title[locale]}</div>
              </span>
              <span className="ext">↗</span>
            </a>
          ))}
        </div>
      </section>

      <section className="bg-bone section">
        <div className="container" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48}}>
          <div>
            <div className="eyebrow" style={{color:"var(--gold)"}}>{t("press.stockistsTitle")}</div>
            <h2 className="display serif" style={{marginTop:12,fontSize:36}}>Ounass.</h2>
            <p style={{marginTop:14,color:"var(--muted)",lineHeight:1.7}}>{t("press.stockistsBody")}</p>
          </div>
          <div>
            <div className="eyebrow" style={{color:"var(--gold)"}}>{t("press.collabsTitle")}</div>
            <h2 className="display serif" style={{marginTop:12,fontSize:36}}>{locale==="ar"?"شراكات مختارة.":"Selected collaborations."}</h2>
            <p style={{marginTop:14,color:"var(--muted)",lineHeight:1.7}}>{t("press.collabsBody")}</p>
            <div style={{marginTop:18,padding:"12px 14px",border:"1px dashed var(--line-strong)",fontSize:11,letterSpacing:".18em",textTransform:"uppercase",color:"var(--muted)"}}>
              {locale==="ar"?"شعارات الشركاء بانتظار تأكيد الإذن من العميلة":"Partner logos withheld pending client permission"}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function AppointmentsPage({ locale, showToast }) {
  const t = window.HF_USE_T(locale);
  const [apptType, setApptType] = useStateP("atelier");
  const [submitted, setSubmitted] = useStateP(false);
  const [form, setForm] = useStateP({ name:"", phone:"", email:"", collection:"abaya", date:"", notes:"" });

  const update = (k) => (e) => setForm({...form, [k]: e.target.value});

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    showToast(t("appt.thanks"));
  };

  return (
    <main className="page-enter">
      <header className="section container">
        <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"المواعيد":"Appointments"}</div>
        <h1 className="display serif" style={{marginTop:14,maxWidth:"22ch"}}>{t("appt.title")}</h1>
        <p className="lead" style={{marginTop:18,maxWidth:"60ch",color:"var(--muted)"}}>{t("appt.sub")}</p>
      </header>

      <section className="container" style={{paddingBottom:96}}>
        <div style={{display:"grid",gridTemplateColumns:"1.1fr 1fr",gap:64,alignItems:"start"}}>
          <form onSubmit={submit}>
            <div style={{marginBottom:24}}>
              <label className="eyebrow" style={{display:"block",marginBottom:10,color:"var(--muted)"}}>{t("appt.type")}</label>
              <div className="seg">
                <button type="button" className={apptType==="atelier"?"active":""} onClick={()=>setApptType("atelier")}>{t("appt.atrelier")}</button>
                <button type="button" className={apptType==="home"?"active":""} onClick={()=>setApptType("home")}>{t("appt.home")}</button>
              </div>
            </div>

            <div className="form-grid">
              <div className="field-row">
                <label>{t("appt.name")}</label>
                <input required value={form.name} onChange={update("name")} placeholder={locale==="ar"?"الاسم الكامل":"Your full name"} />
              </div>
              <div className="field-row">
                <label>{t("appt.phone")}</label>
                <input required value={form.phone} onChange={update("phone")} placeholder="+971 ..." />
              </div>
              <div className="field-row" style={{gridColumn:"1/-1"}}>
                <label>{t("appt.email")}</label>
                <input type="email" value={form.email} onChange={update("email")} placeholder="name@email.com" />
              </div>
              <div className="field-row">
                <label>{t("appt.collection")}</label>
                <select value={form.collection} onChange={update("collection")}>
                  <option value="abaya">Abaya</option>
                  <option value="kaftan">Kaftan</option>
                  <option value="marrakech">Marrakech</option>
                  <option value="ramadan-25">Ramadan 25</option>
                </select>
              </div>
              <div className="field-row">
                <label>{t("appt.date")}</label>
                <input type="date" value={form.date} onChange={update("date")} />
              </div>
              <div className="field-row" style={{gridColumn:"1/-1"}}>
                <label>{t("appt.notes")}</label>
                <textarea value={form.notes} onChange={update("notes")} placeholder={t("appt.placeholderNotes")}></textarea>
              </div>
            </div>

            <div style={{display:"flex",gap:12,marginTop:24,flexWrap:"wrap"}}>
              <button type="submit" className="btn">{t("appt.submit")}</button>
              <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn--ghost">{locale==="ar"?"أو واتساب":"or WhatsApp"}</a>
            </div>

            {submitted ? (
              <div style={{marginTop:24,padding:18,background:"var(--bone)",borderInlineStart:"2px solid var(--gold)",fontSize:14}}>
                <b style={{fontFamily:"var(--serif)",fontSize:18}}>{t("appt.thanks")}</b>
                <p style={{margin:"8px 0 0",color:"var(--muted)"}}>{locale==="ar"?"ستصلكِ رسالة من فريق الأتيليه خلال يوم عمل واحد.":"Our atelier team will reply within one business day."}</p>
              </div>
            ) : null}
          </form>

          <aside style={{position:"sticky",top:88}}>
            <div style={{background:"var(--bone)",padding:36}}>
              <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"كيف يجري الموعد":"What to expect"}</div>
              <h3 className="display serif" style={{marginTop:10,fontSize:28}}>
                {apptType === "atelier"
                  ? (locale==="ar"?"في الأتيليه — d3":"At the atelier — d3")
                  : (locale==="ar"?"خدمة منزلية":"Home service")}
              </h3>
              <ul style={{listStyle:"none",margin:"24px 0 0",padding:0,display:"grid",gap:18}}>
                {(apptType==="atelier" ? [
                  [locale==="ar"?"٦٠ – ٩٠ دقيقة":"60 – 90 minutes", locale==="ar"?"جلسة خاصة معكِ ومع مصمّمة من الدار.":"Private session with a house stylist."],
                  [locale==="ar"?"تجربة كاملة":"Full try-on", locale==="ar"?"تجربة المجموعة الحالية مع قياسات الجسم.":"Try the current collection with body measurements."],
                  [locale==="ar"?"تعديلات":"Alterations", locale==="ar"?"تعديلات الطول والمقاس مشمولة.":"Length and fit alterations included."],
                  [locale==="ar"?"شاي عربي":"Refreshments", locale==="ar"?"قهوة عربية وتمر في الأتيليه.":"Arabic coffee and dates at the atelier."]
                ] : [
                  [locale==="ar"?"مجاناً":"Complimentary", locale==="ar"?"الموعد المنزلي مجاني داخل الإمارات.":"Free of charge within the UAE."],
                  [locale==="ar"?"المجموعة تأتيكِ":"Collection brought to you", locale==="ar"?"نختار قطعاً تناسب طلبكِ ونحضرها إلى منزلك.":"We curate pieces matched to your brief and bring them to your home."],
                  [locale==="ar"?"قياس وتفصيل":"Measure & tailor", locale==="ar"?"قياسات الجسم والتفصيل تتم في المنزل.":"Body measurements and tailoring on site."],
                  [locale==="ar"?"إيصال هادئ":"Discreet delivery", locale==="ar"?"الفريق يصل بمظهر هادئ ودون أي علامات تجارية.":"Our team arrives unmarked and discreet."]
                ]).map((row,i) => (
                  <li key={i} style={{display:"grid",gridTemplateColumns:"24px 1fr",gap:14,paddingBlock:14,borderTop:"1px solid var(--line)"}}>
                    <span className="num-mark serif" style={{color:"var(--gold)",fontStyle:"italic"}}>{String(i+1).padStart(2,"0")}.</span>
                    <div>
                      <div style={{fontFamily:"var(--serif)",fontSize:20,fontWeight:500}}>{row[0]}</div>
                      <div style={{color:"var(--muted)",fontSize:14,marginTop:6,lineHeight:1.6}}>{row[1]}</div>
                    </div>
                  </li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

function VisitPage({ locale }) {
  const t = window.HF_USE_T(locale);
  return (
    <main className="page-enter">
      <header className="section container">
        <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"زورونا":"Visit"}</div>
        <h1 className="display serif" style={{marginTop:14,maxWidth:"22ch"}}>{t("visit.title")}</h1>
        <p className="lead" style={{marginTop:18,maxWidth:"60ch",color:"var(--muted)"}}>{t("visit.sub")}</p>
      </header>

      <section className="container" style={{paddingBottom:96}}>
        <div className="visit-grid">
          <div className="visit-card">
            <div className="row">
              <span>{t("visit.addressLabel")}</span>
              <span style={{whiteSpace:"pre-line"}}>{t("visit.addressVal")}</span>
            </div>
            <div className="row">
              <span>{t("visit.hoursLabel")}</span>
              <span>
                {t("visit.hoursVal")}<br/>
                <small style={{color:"var(--muted)",fontSize:12}}>{t("visit.hoursNote")}</small>
              </span>
            </div>
            <div className="row">
              <span>{t("visit.contactLabel")}</span>
              <span style={{whiteSpace:"pre-line"}}>{t("visit.contactVal")}</span>
            </div>
            <div className="row">
              <span>{t("visit.parkingLabel")}</span>
              <span>{t("visit.parkingVal")}</span>
            </div>
            <div style={{display:"flex",gap:10,marginTop:8,flexWrap:"wrap"}}>
              <a href="https://maps.google.com/?q=Dubai+Design+District+Building+2" target="_blank" rel="noopener" className="btn">{t("visit.directions")}</a>
              <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn--ghost">{locale==="ar"?"واتساب":"WhatsApp"}</a>
            </div>
          </div>

          <div className="map-frame">
            {/* Stylised map placeholder until coordinates confirmed */}
            <svg viewBox="0 0 400 500" style={{position:"absolute",inset:0,width:"100%",height:"100%"}} preserveAspectRatio="xMidYMid slice" aria-hidden="true">
              <rect width="400" height="500" fill="#E7DECF"/>
              {/* roads */}
              <g stroke="#CFC4B0" strokeWidth="14" fill="none" strokeLinecap="square">
                <line x1="0" y1="120" x2="400" y2="170"/>
                <line x1="60" y1="0" x2="100" y2="500"/>
                <line x1="0" y1="360" x2="400" y2="320"/>
                <line x1="260" y1="0" x2="300" y2="500"/>
              </g>
              <g stroke="#D4C7AE" strokeWidth="2" fill="none">
                <line x1="0" y1="220" x2="400" y2="240"/>
                <line x1="180" y1="0" x2="200" y2="500"/>
                <line x1="0" y1="430" x2="400" y2="450"/>
              </g>
              {/* buildings */}
              <g fill="#FBF8F2" opacity=".9">
                <rect x="120" y="180" width="100" height="80"/>
                <rect x="320" y="200" width="60" height="80"/>
                <rect x="20" y="260" width="60" height="40"/>
                <rect x="220" y="380" width="60" height="60"/>
              </g>
              {/* highlight building */}
              <rect x="148" y="200" width="44" height="44" fill="#0E0D0B"/>
              <text x="155" y="226" fill="#FBF8F2" fontFamily="Inter" fontSize="10" letterSpacing="1.5">B2</text>
            </svg>
            <div style={{position:"absolute",top:"calc(40% - 16px)",left:"42%",display:"flex",flexDirection:"column",alignItems:"center",gap:8}}>
              <div className="pin"></div>
              <div style={{background:"var(--noir)",color:"var(--ivory)",padding:"6px 10px",fontSize:10,letterSpacing:".22em",textTransform:"uppercase"}}>Building 2 · R07</div>
            </div>
            <div style={{position:"absolute",bottom:18,left:18,right:18,fontSize:10,letterSpacing:".22em",textTransform:"uppercase",color:"var(--muted)"}}>
              {t("visit.mapNote")}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function SizeGuidePage({ locale }) {
  const t = window.HF_USE_T(locale);
  return (
    <main className="page-enter">
      <header className="section container">
        <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"دليل المقاسات":"Size guide"}</div>
        <h1 className="display serif" style={{marginTop:14,maxWidth:"22ch"}}>{t("size.title")}</h1>
        <p className="lead" style={{marginTop:18,maxWidth:"60ch",color:"var(--muted)"}}>{t("size.sub")}</p>
      </header>

      <section className="container" style={{paddingBottom:96}}>
        <table className="size-table">
          <thead><tr>{t("size.cols").map((c,i)=> <th key={i}>{c}</th>)}</tr></thead>
          <tbody>
            {t("size.rows").map((row,i) => (
              <tr key={i}>{row.map((cell,j)=> <td key={j}>{cell}</td>)}</tr>
            ))}
          </tbody>
        </table>

        <div style={{marginTop:48,display:"grid",gridTemplateColumns:"1fr 1fr",gap:32,padding:32,background:"var(--bone)"}}>
          <div>
            <div className="eyebrow" style={{color:"var(--gold)"}}>{locale==="ar"?"التفصيل":"Made to measure"}</div>
            <h3 className="display serif" style={{marginTop:8,fontSize:28}}>
              {locale==="ar"?"كل قطعة قابلة للتعديل.":"Every piece can be tailored."}
            </h3>
            <p style={{marginTop:12,color:"var(--muted)",lineHeight:1.6}}>
              {locale==="ar"?"إذا لم تجدي مقاسكِ، تواصلي معنا — التفصيل التام متاح بطلب.":"If you don't find your size, talk to us — full made-to-measure is available on request."}
            </p>
          </div>
          <div style={{display:"flex",alignItems:"end",gap:10,flexWrap:"wrap"}}>
            <a href="#/appointments" className="btn">{t("common.bookFitting")}</a>
            <a href={WA_LINK} target="_blank" rel="noopener" className="btn btn--ghost">{t("common.whatsApp")}</a>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, {
  HomePage, CollectionsHubPage, CollectionDetailPage, ProductPage, HousePage, PressPage, AppointmentsPage, VisitPage, SizeGuidePage
});