// COLLECTION DETAIL — story + products
function CollectionPage({ id, arabicAccent }) {
  const { navigate } = useRouter();
  const c = COLLECTIONS.find((x) => x.id === id) || COLLECTIONS[0];
  const products = PRODUCTS.filter((p) => p.collection === c.id);
  const others = COLLECTIONS.filter((x) => x.id !== c.id);

  return (
    <div className="page-enter">
      <style>{`
        .cp-hero {
          position: relative;
          height: 90vh; min-height: 600px;
          overflow: hidden;
        }
        .cp-hero__img {
          position: absolute; inset: 0;
          background-size: cover; background-position: center 35%;
          background-image: url('${c.banner}');
          animation: breathe 24s ease-in-out infinite;
        }
        .cp-hero__overlay {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 38%, transparent), transparent 30%, color-mix(in oklab, var(--ink) 80%, transparent));
        }
        .cp-hero__content {
          position: relative; z-index: 2;
          height: 100%;
          display: flex; flex-direction: column; justify-content: flex-end;
          padding-bottom: 80px;
          color: #F4EFE5;
        }
        .cp-hero__kicker {
          font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
          color: var(--gold-soft);
          display: inline-flex; align-items: center; gap: 14px;
        }
        .cp-hero__kicker::before { content: ""; width: 32px; height: 1px; background: var(--gold-soft); }
        .cp-hero__title {
          font-family: var(--display, var(--serif));
          font-weight: 300;
          font-size: clamp(80px, 13vw, 200px);
          line-height: 0.9;
          letter-spacing: -0.02em;
          margin: 16px 0 0;
          display: flex; align-items: baseline; gap: 32px; flex-wrap: wrap;
        }
        .cp-hero__arabic {
          font-family: var(--arabic);
          font-size: clamp(56px, 9vw, 140px);
          color: var(--gold-soft);
          display: ${arabicAccent ? 'inline' : 'none'};
        }
        .cp-hero__tag {
          margin-top: 20px;
          font-style: italic;
          font-family: var(--display, var(--serif));
          font-size: 22px;
          color: #DCD5C7;
        }

        /* STORY BLOCK */
        .cp-story {
          padding: clamp(80px, 11vw, 140px) 0;
          background: var(--bg);
        }
        .cp-story__grid {
          display: grid; grid-template-columns: 1fr 1.4fr;
          gap: clamp(40px, 6vw, 100px);
          align-items: start;
        }
        @media (max-width: 760px) { .cp-story__grid { grid-template-columns: 1fr; } }
        .cp-story__meta { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); }
        .cp-story__meta div { padding: 14px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; }
        .cp-story__meta div:first-child { border-top: 1px solid var(--rule); }
        .cp-story__meta b { color: var(--fg); font-weight: 500; }
        .cp-story__body { font-size: 22px; line-height: 1.55; color: var(--fg); max-width: 720px; font-family: var(--display, var(--serif)); font-weight: 400; }
        .cp-story__body em { color: var(--accent); }

        /* PIECES */
        .cp-pieces {
          padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
          border-top: 1px solid var(--rule);
        }
        .cp-pieces__head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 24px; margin-bottom: 60px; }
        .cp-pieces__head h2 { font-size: clamp(36px, 4.5vw, 64px); }
        .cp-pieces__head em { color: var(--accent); }
        .cp-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 32px 24px;
        }
        @media (max-width: 880px) { .cp-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 540px) { .cp-grid { grid-template-columns: 1fr; } }

        .cp-empty {
          padding: 80px 40px;
          text-align: center;
          background: var(--surface);
          color: var(--fg-mute);
          border: 1px solid var(--rule);
        }
        .cp-empty h3 { font-size: 28px; color: var(--fg); margin-bottom: 14px; }

        /* CROSS COLLECTIONS */
        .cp-cross { padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 120px); border-top: 1px solid var(--rule); }
        .cp-cross__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 40px; flex-wrap: wrap; gap: 16px; }
        .cp-cross__head h3 { font-size: clamp(28px, 3.5vw, 44px); }
        .cp-cross__rail {
          display: grid; grid-auto-flow: column;
          grid-auto-columns: clamp(220px, 22vw, 300px);
          gap: 16px;
          overflow-x: auto;
          padding-bottom: 16px;
          margin: 0 calc(-1 * var(--pad));
          padding-left: var(--pad); padding-right: var(--pad);
        }
        .cp-cross__rail::-webkit-scrollbar { height: 0; }
        .cc-card { cursor: pointer; }
        .cc-card__img { aspect-ratio: 3/4; overflow: hidden; }
        .cc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; }
        .cc-card:hover img { transform: scale(1.05); }
        .cc-card__name { font-family: var(--display, var(--serif)); font-size: 22px; margin-top: 14px; }
        .cc-card__tag { font-size: 13px; color: var(--fg-mute); font-style: italic; }
      `}</style>

      <section className="cp-hero">
        <div className="cp-hero__img"></div>
        <div className="cp-hero__overlay"></div>
        <div className="container cp-hero__content">
          <div className="cp-hero__kicker">Collection · {c.motif}</div>
          <div className="cp-hero__title">
            <span>{c.name}</span>
            <span className="cp-hero__arabic">{c.arabic}</span>
          </div>
          <div className="cp-hero__tag">{c.tagline}</div>
        </div>
      </section>

      <section className="cp-story">
        <div className="container cp-story__grid">
          <Reveal className="cp-story__meta">
            <div><span>Motif</span><b>{c.motif}</b></div>
            <div><span>Pieces in line</span><b>{c.count}</b></div>
            <div><span>Range</span><b>{c.range}</b></div>
            <div><span>Status</span><b>Active</b></div>
          </Reveal>
          <Reveal delay={100}>
            <div className="cp-story__body">
              <em>"{c.tagline}"</em><br/><br/>
              {c.story}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="cp-pieces">
        <div className="container">
          <div className="cp-pieces__head">
            <h2>The <em>pieces.</em></h2>
            <div style={{ color: 'var(--fg-mute)', fontSize: 13, letter: '0.1em' }}>
              Showing {products.length} of {c.count} · AED prices live from boutique
            </div>
          </div>
          {products.length > 0 ? (
            <div className="cp-grid">
              {products.map((p, i) => (
                <Reveal key={p.id} delay={i * 50}>
                  <ProductCard product={p} onClick={() => navigate('product', { id: p.id })} />
                </Reveal>
              ))}
            </div>
          ) : (
            <div className="cp-empty">
              <h3>Catalogue in motion</h3>
              <p>This line is currently lensed in our editorial archive. Reach out for current availability and high‑resolution lookbooks.</p>
              <button className="btn btn--ghost arrow" style={{ marginTop: 24 }} onClick={() => navigate('contact')}>Enquire</button>
            </div>
          )}
        </div>
      </section>

      <section className="cp-cross">
        <div className="container">
          <div className="cp-cross__head">
            <h3>Continue the caravan</h3>
            <button className="btn btn--ghost arrow" onClick={() => navigate('collections')}>All Collections</button>
          </div>
        </div>
        <div className="cp-cross__rail">
          {others.map((o) => (
            <div key={o.id} className="cc-card" onClick={() => navigate('collection', { id: o.id })}>
              <div className="cc-card__img"><img src={o.hero} alt={o.name} loading="lazy" /></div>
              <div className="cc-card__name">{o.name}</div>
              <div className="cc-card__tag">{o.tagline}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { CollectionPage });