// ============================================================
//  MONOGRAM — Collection page (Sculptural, shown as the demo)
// ============================================================

function CollectionScreen({ id, setRoute, locale }) {
  const t = COPY[locale];
  const collection = COLLECTIONS.find((c) => c.id === id) || COLLECTIONS[0];
  const isSculptural = collection.id === "sculptural";

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" });
  }, [id]);

  return (
    <main>
      <section className="coll-hero">
        <div className="wrap">
          <button className="back-link" onClick={() => setRoute({ name: "home" })}>
            <span aria-hidden="true">{locale === "ar" ? "→" : "←"}</span>
            <span>{locale === "ar" ? "العودة إلى الرئيسية" : "Back to home"}</span>
          </button>

          <div className="coll-hero-head reveal">
            <div>
              <div className="ch-eyebrow">
                {locale === "ar"
                  ? `مجموعة · ${collection.nameAr}`
                  : `Collection · ${String(COLLECTIONS.findIndex(c=>c.id===collection.id) + 1).padStart(2, "0")} of 05`}
              </div>
              <h1>
                <span>{locale === "ar" ? collection.nameAr : collection.nameEn.split(" ")[0]}</span>{" "}
                <span className="ital">{
                  locale === "ar"
                    ? ""
                    : (collection.nameEn.split(" ").slice(1).join(" ") || "Collection.")
                }</span>
              </h1>
            </div>
            <dl className="ch-meta">
              <div>
                <dt>{locale === "ar" ? "المادّة" : "Material"}</dt>
                <dd className="gold">{locale === "ar" ? "ذهب عيار ١٨" : "18k Gold"}</dd>
              </div>
              <div>
                <dt>{locale === "ar" ? "السعر" : "Pricing"}</dt>
                <dd>{locale === "ar" ? "حسب الطلب" : "On request"}</dd>
              </div>
              <div>
                <dt>{locale === "ar" ? "السياق" : "Provenance"}</dt>
                <dd>Dubai Design Week ’15/’16</dd>
              </div>
              <div>
                <dt>{locale === "ar" ? "الاستوديو" : "Studio"}</dt>
                <dd>d3 · B205</dd>
              </div>
            </dl>
          </div>

          <div className="coll-intro reveal d1">
            <p className="ci-lead">
              {isSculptural
                ? (locale === "ar"
                    ? "«قطعٌ تُلبَس ـ كأشكال نحتيّة ـ من ذهب عيار ١٨.» تكشف Sculptural عن لحظة خروج الحرف من الورقة، حين يكتسب ظلًّا وحجمًا ووزنًا."
                    : "“Wearable art forms made from 18k gold.” The Sculptural collection captures the precise moment a letter leaves the page — when it gains shadow, volume, and weight.")
                : (locale === "ar"
                    ? `مجموعة ${collection.nameAr}: ترجمةٌ مختلفة للحرف العربيّ، تعتمد على نفس الأبجديّة وتنتهي إلى شكلٍ مختلف من الذهب.`
                    : `${collection.nameEn}: a different translation of the Arabic letter, built from the same alphabet, ending in a different volume of gold.`)
              }
            </p>
            <div className="ci-body">
              <p>{isSculptural
                ? (locale === "ar"
                    ? "كلّ قطعة في المجموعة منحوتةٌ يدويًّا، وتمرّ على ثلاث مراحل: دراسة الحرف الورقيّة، نموذج ثلاثيّ الأبعاد، ثمّ صبٌّ في الذهب الأصفر أو الأبيض عيار ١٨. الأوزان تتراوح بين ١٢ و٣٣ غرامًا، وكلّ قطعة موقَّعة برمز الاستوديو."
                    : "Every piece in the collection is hand-sculpted in three stages: a paper study of the letter, a three-dimensional prototype, and a final casting in 18k yellow or white gold. Weights range from 12 g to 33 g, and each piece is hallmarked with the studio mark.")
                : (locale === "ar"
                    ? "تبدأ كلّ قطعة بمحادثة في الاستوديو. اتفقنا على الحرف، ثمّ صغناه يدويًّا، ثمّ سُلِّم في علبة تُشبه قطعة معماريّة مصغّرة."
                    : "Every piece begins with a conversation in the studio. We agree the letter, sculpt it by hand, and deliver it in a vitrine that reads as a small piece of architecture.")
              }</p>
              <p>{locale === "ar"
                ? "تُصاغ القطع بموعد مسبق. زيارة الاستوديو ممكنة بين الإثنين والجمعة، من ١٠٫٣٠ إلى ١٥٫٠٠."
                : "Pieces are commissioned by appointment. Visit the studio Monday to Friday, 10:30 to 15:00 — or begin the conversation on WhatsApp."}</p>
              <div style={{ display: "flex", gap: 12, marginTop: 22, flexWrap: "wrap" }}>
                <button className="btn solid" onClick={() => setRoute({ name: "bespoke", collection: collection.id })}>
                  <span>{locale === "ar" ? "احجز استشارة" : "Enquire about this collection"}</span>
                  <span className="arrow">→</span>
                </button>
                <a className="btn ghost" href="https://wa.me/971504563365" target="_blank" rel="noopener noreferrer">
                  <span>WhatsApp</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Gallery */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="gallery-grid">
            {SCULPTURAL_PIECES.map((p, i) => (
              <article key={p.id} className={`piece ${p.layout} reveal d${i % 4}`}>
                <div className="piece-img" style={{ backgroundImage: `url(${p.image})` }}/>
                {p.tag ? <span className="piece-tag">{p.tag}</span> : null}
                <div className="piece-info">
                  <div className="piece-name">
                    <span className="ar" aria-hidden="true">{p.ar}</span>
                    <span>{locale === "ar" ? p.nameAr : p.nameEn}</span>
                  </div>
                  <div className="piece-num">
                    {String(i + 1).padStart(2, "0")} / 0{SCULPTURAL_PIECES.length}
                  </div>
                </div>
              </article>
            ))}
          </div>
          <p style={{
            color: "var(--muted)",
            fontFamily: "var(--font-mono)",
            fontSize: 11,
            letterSpacing: "0.22em",
            textTransform: "uppercase",
            marginTop: 24,
          }}>
            {locale === "ar"
              ? "ملاحظة: الصور الحاليّة من أرشيف الاستوديو وأسبوع دبي للتصميم ـ في انتظار صور ٢٠٢٦ من العميل."
              : "Note · imagery shown from studio archive + Dubai Design Week press. Awaiting 2026 client photography."}
          </p>
        </div>
      </section>

      {/* Material / process */}
      <section className="wrap">
        <div className="material-note reveal">
          <div className="mn-spec">
            <div className="mn-row">
              <div className="mn-key">{locale === "ar" ? "المادّة" : "Material"}</div>
              <div className="mn-val gold">{locale === "ar" ? "ذهب عيار ١٨" : "18k Yellow / White Gold"}</div>
            </div>
            <div className="mn-row">
              <div className="mn-key">{locale === "ar" ? "الحرفة" : "Craft"}</div>
              <div className="mn-val">{locale === "ar" ? "صياغة يدويّة" : "Hand-sculpted, hallmarked"}</div>
            </div>
            <div className="mn-row">
              <div className="mn-key">{locale === "ar" ? "الوزن" : "Weight"}</div>
              <div className="mn-val">{locale === "ar" ? "١٢٫٥٥–٣٢٫٨٩ غ" : "12.55 – 32.89 g"}</div>
            </div>
            <div className="mn-row">
              <div className="mn-key">{locale === "ar" ? "النشأة" : "Origin"}</div>
              <div className="mn-val">{locale === "ar" ? "الإمارات العربيّة المتّحدة" : "Designed & made in the UAE"}</div>
            </div>
            <div className="mn-row" style={{ border: 0, paddingBottom: 0 }}>
              <div className="mn-key">{locale === "ar" ? "التسليم" : "Lead time"}</div>
              <div className="mn-val">{locale === "ar" ? "حسب الطلب" : "Confirmed at consultation"}</div>
            </div>
          </div>
          <div>
            <h3>
              {locale === "ar"
                ? <>عن <span className="ital">صياغة الحرف.</span></>
                : <>On <span className="ital">setting a letter.</span></>
              }
            </h3>
            <p>{locale === "ar"
              ? "كل صياغة تبدأ من ورقة. نرسم الحرف، ثمّ نطويه، ثمّ نقطعه، ثمّ نتركه يقف على ظلِّه. لا يصير «حُلِيًّا» إلّا حين يحفظ، في حجمه الصغير، ما كان الورق يعجز عن قوله."
              : "Each piece starts on paper. We draw the letter, fold it, cut it, leave it standing on its own shadow. It only becomes “jewellery” when it carries, in its small volume, what the page could not say."}</p>
            <p>{locale === "ar"
              ? "تُصبّ النماذج بعد دراسة الميزان، فلا تثقل عنق صاحبها ولا تنزلق على معصمه. كل قطعة تأتي بتوقيع MONOGRAM ـ ضمانًا للأصالة."
              : "Prototypes are cast only after a balance study, so a pendant never weighs on the neck and a bangle never slips on the wrist. Each piece carries the MONOGRAM hallmark."}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 24, flexWrap: "wrap" }}>
              <button className="btn solid" onClick={() => setRoute({ name: "bespoke", collection: collection.id })}>
                <span>{locale === "ar" ? "ابدأ التصميم" : "Begin a commission"}</span>
                <span className="arrow">→</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            num="(II)"
            eyebrow={locale === "ar" ? "تابع" : "Keep exploring"}
            title={locale === "ar" ? "بقيّة" : "Other"}
            titleItal={locale === "ar" ? "المجموعات." : "collections."}
          />
          <div className="coll-grid">
            {COLLECTIONS.filter((c) => c.id !== collection.id).map((c, i) => (
              <article key={c.id} className={`coll-card reveal d${i}`} onClick={() => setRoute({ name: "collection", id: c.id })}>
                <div className="ct-img" style={{ backgroundImage: `url(${c.image})` }}>
                  <span className="ct-letter" aria-hidden="true">{c.letter}</span>
                </div>
                <div className="ct-meta">
                  <div className="ct-name">{locale === "ar" ? c.nameAr : c.nameEn}</div>
                  <div className="ct-num">0{COLLECTIONS.findIndex(x=>x.id===c.id) + 1}</div>
                </div>
                <p className="ct-desc">{locale === "ar" ? c.descAr : c.descEn}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <ContactBand setRoute={setRoute} locale={locale}/>
    </main>
  );
}

Object.assign(window, { CollectionScreen });