// COLLECTIONS HUB
function CollectionsPage({ arabicAccent }) {
  const { navigate } = useRouter();
  const [filter, setFilter] = useState('all');

  return (
    <div className="page-enter">
      <style>{`
        .col-hub__head { padding: 180px 0 80px; }
        .col-hub__eyebrow { font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); }
        .col-hub__title { font-size: clamp(56px, 9vw, 130px); line-height: 0.96; margin-top: 24px; max-width: 1200px; font-weight: 300; }
        .col-hub__title em { color: var(--accent); }
        .col-hub__sub { color: var(--fg-mute); font-size: 17px; line-height: 1.65; max-width: 560px; margin-top: 28px; }

        .col-hub__filter { display: flex; gap: 24px; padding: 24px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow-x: auto; }
        .col-hub__filter button {
          font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
          color: var(--fg-mute); white-space: nowrap;
        }
        .col-hub__filter button.is-on { color: var(--accent); }

        .col-hub__grid {
          padding: 80px 0 120px;
          display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
        }
        @media (max-width: 760px) { .col-hub__grid { grid-template-columns: 1fr; } }
        .col-tile {
          position: relative;
          aspect-ratio: 5/4;
          overflow: hidden;
          cursor: pointer;
          background: var(--surface);
        }
        .col-tile img {
          width: 100%; height: 100%; object-fit: cover;
          transition: transform 1.4s ease;
        }
        .col-tile:hover img { transform: scale(1.06); }
        .col-tile__overlay {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(15,14,12,0.15) 0%, rgba(15,14,12,0.6) 100%);
        }
        .col-tile__num {
          position: absolute; top: 24px; left: 28px;
          color: #F4EFE5;
          font-size: 10px; letter-spacing: 0.32em;
        }
        .col-tile__arabic {
          position: absolute; top: 22px; right: 28px;
          font-family: var(--arabic);
          font-size: 40px;
          color: #F4EFE5;
          opacity: 0.85;
          display: ${arabicAccent ? 'block' : 'none'};
        }
        .col-tile__content {
          position: absolute; bottom: 0; left: 0; right: 0;
          padding: 32px;
          color: #F4EFE5;
        }
        .col-tile__name {
          font-family: var(--display, var(--serif));
          font-size: clamp(40px, 5vw, 72px);
          line-height: 1;
        }
        .col-tile__row {
          display: flex; justify-content: space-between; align-items: end;
          margin-top: 12px;
        }
        .col-tile__tag { font-size: 13px; opacity: 0.85; font-style: italic; }
        .col-tile__count {
          font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
          opacity: 0.75;
        }
      `}</style>

      <div className="container col-hub__head">
        <Reveal>
          <div className="col-hub__eyebrow">Collections</div>
          <h1 className="col-hub__title">Seven motifs, one <em>caravan</em>.</h1>
          <p className="col-hub__sub">
            Each line of Gafla is a single Arabian idea worked into wearable form — the sea, the heart, the coin, the lantern, the chain, the perfume wand, the octagon. Begin anywhere.
          </p>
        </Reveal>
      </div>

      <div className="container">
        <div className="col-hub__filter">
          {[
            { id: 'all', label: 'All Lines' },
            { id: 'heritage', label: 'Heritage' },
            { id: 'capsule', label: 'Capsules' },
            { id: 'new', label: 'Newest' },
          ].map((f) => (
            <button key={f.id} className={filter === f.id ? 'is-on' : ''} onClick={() => setFilter(f.id)}>{f.label}</button>
          ))}
        </div>
        <div className="col-hub__grid">
          {COLLECTIONS.map((c, i) => (
            <Reveal key={c.id} delay={i * 50} className="col-tile" onClick={() => navigate('collection', { id: c.id })}>
              <img src={c.hero} alt={c.name} loading="lazy" />
              <div className="col-tile__overlay"></div>
              <div className="col-tile__num">N° 0{i + 1}</div>
              <div className="col-tile__arabic">{c.arabic}</div>
              <div className="col-tile__content">
                <div className="col-tile__name">{c.name}</div>
                <div className="col-tile__row">
                  <span className="col-tile__tag">{c.tagline}</span>
                  <span className="col-tile__count">{c.count} pieces · {c.range}</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CollectionsPage });