// Collections page

const { useState: useStateC, useMemo: useMemoC } = React;

const PRODUCTS = [
  { id: 'rad-1', name: 'Solitaire Radiant', cut: 'Radiant', metal: '18K White Gold', category: ['rings', 'engagement'], cert: 'GIA', img: 'assets/ring-radiant.webp', tags: ['Natural', 'Solitaire'] },
  { id: 'mar-1', name: 'Marquise Étoile', cut: 'Marquise', metal: '18K White Gold', category: ['rings', 'engagement'], cert: 'IGI', img: 'assets/ring-marquise-studio.webp', tags: ['Lab-grown', 'Cluster'] },
  { id: 'cus-1', name: 'Cushion Halo Split', cut: 'Cushion', metal: '18K White Gold', category: ['rings', 'engagement'], cert: 'GIA', img: 'assets/ring-cushion-halo.webp', tags: ['Natural', 'Halo'] },
  { id: 'oval-1', name: 'Oval Petal', cut: 'Oval', metal: 'Platinum', category: ['rings', 'engagement'], cert: 'IGI', img: 'assets/hero-oval-bougainvillea.webp', tags: ['Lab-grown'] },
  { id: 'rb-1', name: 'Brilliant Eternity', cut: 'Round Brilliant', metal: '18K White Gold', category: ['rings', 'bridal'], cert: 'GIA', img: 'assets/ring-eternity-studio.webp', tags: ['Eternity', 'Natural'] },
  { id: 'rb-2', name: 'Round Solitaire', cut: 'Round Brilliant', metal: 'Platinum', category: ['rings', 'engagement'], cert: 'GIA', img: 'assets/ring-round-velvet.webp', tags: ['Natural'] },
  { id: 'pen-1', name: 'Oval Sapphire Halo', cut: 'Oval Sapphire', metal: '18K White Gold', category: ['pendants'], cert: 'IGI', img: 'assets/pendant-sapphire.webp', tags: ['Sapphire', 'Pendant'] },
  { id: 'ear-1', name: 'Inside-Out Hoops', cut: 'Lab-grown Pavé', metal: '18K White Gold', category: ['earrings'], cert: 'IGI', img: 'assets/earring-studio.webp', tags: ['Lab-grown', 'Hoops'] },
  { id: 'ear-2', name: 'Pavé Studs', cut: 'Pavé', metal: '18K Yellow Gold', category: ['earrings'], cert: 'IGI', img: 'assets/earring-portrait.webp', tags: ['Lab-grown', 'Studs'] },
];

const CATEGORIES = [
  { id: 'all', label: 'All' },
  { id: 'engagement', label: 'Engagement & Bridal' },
  { id: 'rings', label: 'Rings' },
  { id: 'earrings', label: 'Earrings' },
  { id: 'pendants', label: 'Pendants' },
];
const METALS = ['All metals', '18K White Gold', '18K Yellow Gold', 'Platinum'];
const STONES = ['All stones', 'Natural', 'Lab-grown', 'Sapphire'];

function urlCat() {
  const m = new URLSearchParams(location.search);
  return m.get('cat') || 'all';
}

function EnquireModal({ open, product, onClose }) {
  const [submitted, setSubmitted] = useStateC(false);
  React.useEffect(() => { if (open) setSubmitted(false); }, [open, product]);
  return React.createElement('div', { className: 'modal-backdrop' + (open ? ' open' : ''), onClick: onClose },
    React.createElement('div', { className: 'modal', onClick: e => e.stopPropagation() },
      React.createElement('button', { className: 'x', onClick: onClose }, '×'),
      submitted ?
        React.createElement('div', { className: 'thanks' },
          React.createElement('div', { className: 'check' }, '✓'),
          React.createElement('h2', null, 'Enquiry received.'),
          React.createElement('p', { className: 'sub' }, 'An advisor will reach out by WhatsApp with the certificate details, photographs, and quoted price.'),
        )
        :
        React.createElement('form', { onSubmit: e => { e.preventDefault(); setSubmitted(true); } },
          React.createElement('div', { className: 'eyebrow' }, 'Enquire'),
          React.createElement('h2', null, product?.name || ''),
          React.createElement('p', { className: 'sub' }, product?.cut + ' · ' + product?.metal + ' · ' + (product?.cert || '') + ' certified · Price quoted by an advisor.'),
          React.createElement('div', { className: 'field-row' },
            React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Your name'), React.createElement('input', { required: true })),
            React.createElement('div', { className: 'field' }, React.createElement('label', null, 'WhatsApp or phone'), React.createElement('input', { required: true, placeholder: '+971 ...' })),
          ),
          React.createElement('div', { className: 'field' }, React.createElement('label', null, 'Anything specific?'), React.createElement('textarea', { rows: 3, placeholder: 'Carat range, ring size, timeline...' })),
          React.createElement('div', { style: { display: 'flex', gap: 12, marginTop: 16 } },
            React.createElement('button', { type: 'submit', className: 'btn btn-primary' }, 'Send enquiry'),
            React.createElement('a', { href: 'https://wa.me/971568747327?text=Hi%20Queen%20Diamonds%2C%20enquiring%20about%20' + encodeURIComponent(product?.name || ''), target: '_blank', className: 'btn btn-text' }, 'Or on WhatsApp →'),
          ),
        ),
    ),
  );
}

function ProductTile({ p, onEnquire }) {
  return React.createElement('div', { className: 'product-tile' },
    React.createElement('div', { className: 'corner-cert' }, p.cert + ' certified'),
    React.createElement('div', { className: 'img' }, React.createElement('img', { src: p.img, alt: p.name })),
    React.createElement('div', { className: 'meta' },
      React.createElement('div', { className: 'tags' },
        ...p.tags.map((t, i) => React.createElement('span', { key: i, className: 'tag' }, t)),
      ),
      React.createElement('h3', null, p.name),
      React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-muted)', letterSpacing: '0.04em' } }, p.cut + ' · ' + p.metal),
      React.createElement('div', { className: 'price-line' },
        React.createElement('div', { className: 'por' }, 'Price on request'),
        React.createElement('button', { className: 'enq', onClick: () => onEnquire(p) }, 'Enquire'),
      ),
    ),
  );
}

function CollectionsPage() {
  const [cat, setCat] = useStateC(urlCat());
  const [metal, setMetal] = useStateC('All metals');
  const [stone, setStone] = useStateC('All stones');
  const [enq, setEnq] = useStateC(null);

  const filtered = useMemoC(() => PRODUCTS.filter(p => {
    if (cat !== 'all' && !p.category.includes(cat)) return false;
    if (metal !== 'All metals' && p.metal !== metal) return false;
    if (stone !== 'All stones') {
      if (stone === 'Natural') return p.tags.includes('Natural');
      if (stone === 'Lab-grown') return p.tags.includes('Lab-grown');
      if (stone === 'Sapphire') return p.tags.includes('Sapphire');
    }
    return true;
  }), [cat, metal, stone]);

  return React.createElement(Shell, { current: 'collections' }, () =>
    React.createElement(React.Fragment, null,
      React.createElement('section', { className: 'page-hero' },
        React.createElement('div', { className: 'container' },
          React.createElement('div', { className: 'eyebrow' }, 'The collections · ' + filtered.length + ' pieces'),
          React.createElement('h1', null, 'Pieces, ', React.createElement('em', null, 'chosen'), ' and crafted in Dubai.'),
          React.createElement('p', { className: 'lede' }, 'Every centre stone arrives with its GIA or IGI report. Prices are quoted in person — there are no shelf tags here, only conversations and certificates.'),
        ),
      ),
      React.createElement('section', null,
        React.createElement('div', { className: 'container' },
          React.createElement('div', { className: 'filter-bar' },
            React.createElement('span', { className: 'label' }, 'Category'),
            ...CATEGORIES.map(c =>
              React.createElement('button', { key: c.id, className: 'filter-pill' + (cat === c.id ? ' active' : ''), onClick: () => setCat(c.id) }, c.label),
            ),
            React.createElement('span', { className: 'count' }, filtered.length + ' result' + (filtered.length === 1 ? '' : 's')),
          ),
          React.createElement('div', { style: { display: 'flex', gap: 28, alignItems: 'center', marginBottom: 56, flexWrap: 'wrap' } },
            React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
              React.createElement('span', { className: 'eyebrow muted' }, 'Metal'),
              ...METALS.map(m =>
                React.createElement('button', { key: m, className: 'filter-pill' + (metal === m ? ' active' : ''), onClick: () => setMetal(m) }, m),
              ),
            ),
            React.createElement('div', { style: { width: 1, height: 24, background: 'var(--rule)' } }),
            React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } },
              React.createElement('span', { className: 'eyebrow muted' }, 'Stone'),
              ...STONES.map(s =>
                React.createElement('button', { key: s, className: 'filter-pill' + (stone === s ? ' active' : ''), onClick: () => setStone(s) }, s),
              ),
            ),
          ),
          filtered.length === 0 ?
            React.createElement('div', { style: { padding: '80px 0', textAlign: 'center', color: 'var(--ink-muted)' } },
              React.createElement('div', { className: 'serif', style: { fontSize: 32, fontStyle: 'italic', color: 'var(--accent-deep)' } }, 'No pieces match that exact combination.'),
              React.createElement('p', { style: { marginTop: 12 } }, 'Reach out — we can source or commission what you have in mind.'),
            )
            :
            React.createElement('div', { className: 'product-grid' },
              ...filtered.map(p => React.createElement(ProductTile, { p, key: p.id, onEnquire: setEnq })),
            ),
        ),
      ),
      React.createElement('section', { className: 'section' },
        React.createElement('div', { className: 'container' },
          React.createElement('div', { className: 'editorial right' },
            React.createElement('div', { className: 'body' },
              React.createElement('div', { className: 'eyebrow' }, 'Don\'t see it here'),
              React.createElement('h2', null, 'Bespoke is our first language.'),
              React.createElement('p', null, 'These pieces are a start, not a catalogue. We design new rings, redesign heirlooms, source loose stones, and finish bespoke commissions in days, not months.'),
              React.createElement('a', { href: 'bespoke.html', className: 'btn btn-primary' }, 'Start a Bespoke Design'),
            ),
            React.createElement('div', { className: 'img' }, React.createElement('img', { src: 'assets/hand-cushion.webp', alt: '' })),
          ),
        ),
      ),
      React.createElement(EnquireModal, { open: !!enq, product: enq, onClose: () => setEnq(null) }),
    ),
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(CollectionsPage));