// Catalogus pagina — A · Showroom richting
// Filter sidebar + product grid + dashboard-stijl filterbar bovenin

const { Supercar: SupercarC, F1Car: F1CarC, ClassicCar: ClassicCarC, Truck: TruckC, RallyCar: RallyCarC } = window;

const PageCatalog = ({ go }) => {
  const [cat, setCat] = React.useState('Alle');
  const [brand, setBrand] = React.useState('Alle');
  const [sort, setSort] = React.useState('Populair');
  const [view, setView] = React.useState('grid');
  const [hovered, setHovered] = React.useState(null);

  const filtered = PRODUCTS.filter(p =>
    (cat === 'Alle' || p.cat.includes(cat)) &&
    (brand === 'Alle' || p.brand === brand)
  );

  return (
    <div style={{ background: SR.bg, color: SR.ink, fontFamily: '"Space Grotesk", sans-serif', minHeight: '100vh' }}>
      <ShowroomHeader active="catalog" go={go} />

      {/* breadcrumb + page title */}
      <section style={{ padding: '40px 56px 24px' }}>
        <div style={{ fontSize: 11, letterSpacing: '0.25em', color: SR.ink2, marginBottom: 14 }}>
          <span onClick={() => go('home')} style={{ cursor: 'pointer' }}>SHOWROOM</span> · CATALOGUS
        </div>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <h1 style={{
            fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 76,
            letterSpacing: '-0.02em', margin: 0, lineHeight: 1,
          }}>
            De volledige <em style={{ color: SR.copper }}>showroomvloer</em>
          </h1>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12, color: SR.ink2, letterSpacing: '0.15em' }}>
            {filtered.length} VAN {PRODUCTS.length} GETOOND
          </div>
        </div>
      </section>

      {/* Filter dashboard */}
      <section style={{
        margin: '0 56px', background: '#fff', border: `1px solid ${SR.line}`,
        boxShadow: '0 8px 24px rgba(0,0,0,0.04)', padding: '24px 28px',
        display: 'grid', gridTemplateColumns: '120px 1fr auto', gap: 24, alignItems: 'center',
      }}>
        {/* gear shifter */}
        <div style={{ background: SR.ink, color: '#fff', padding: 12, borderRadius: 4 }}>
          <div style={{ fontSize: 9, letterSpacing: '0.2em', opacity: 0.6 }}>VERSNELLING</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, marginTop: 6 }}>
            {['1', '2', '3', '4', '5', 'R'].map((g, i) => (
              <div key={i} style={{
                height: 22, display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: i === 2 ? SR.copper : 'rgba(255,255,255,0.08)',
                fontFamily: 'Anton, sans-serif', fontSize: 12, borderRadius: 2,
              }}>{g}</div>
            ))}
          </div>
        </div>

        {/* category chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
          {[
            ['Alle', PRODUCTS.length],
            ['Supercar', PRODUCTS.filter(p => p.cat.includes('Supercar') || p.cat.includes('Hyper')).length],
            ['F1', PRODUCTS.filter(p => p.cat.includes('F1')).length],
            ['Klassieker', PRODUCTS.filter(p => p.cat.includes('Klass')).length],
            ['Pickup', PRODUCTS.filter(p => p.cat.includes('Pickup') || p.cat.includes('Off')).length],
            ['Rally', PRODUCTS.filter(p => p.cat.includes('Rally')).length],
          ].map(([label, n], i) => {
            const active = cat === label;
            return (
              <button key={i} onClick={() => setCat(label)} style={{
                padding: '8px 14px', borderRadius: 99,
                border: `1px solid ${active ? SR.ink : SR.line}`,
                background: active ? SR.ink : 'transparent',
                color: active ? '#fff' : SR.ink, cursor: 'pointer',
                fontFamily: '"Space Grotesk", sans-serif', fontSize: 12, fontWeight: 500,
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                {label}<span style={{ fontSize: 10, opacity: 0.6, fontFamily: '"JetBrains Mono", monospace' }}>{n}</span>
              </button>
            );
          })}
        </div>

        {/* sort + view toggles */}
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <div style={{ fontSize: 10, letterSpacing: '0.2em', color: SR.ink2 }}>SORT</div>
          <select value={sort} onChange={e => setSort(e.target.value)} style={{
            border: `1px solid ${SR.line}`, padding: '8px 10px', background: '#fff',
            fontFamily: 'inherit', fontSize: 12, cursor: 'pointer',
          }}>
            {['Populair', 'Nieuwste', 'Prijs ↑', 'Prijs ↓', 'Stenen ↑', 'Stenen ↓'].map(s => <option key={s}>{s}</option>)}
          </select>
        </div>
      </section>

      {/* main: sidebar + grid */}
      <section style={{ padding: '32px 56px', display: 'grid', gridTemplateColumns: '240px 1fr', gap: 32 }}>
        {/* sidebar filters */}
        <aside style={{ position: 'sticky', top: 110, alignSelf: 'flex-start' }}>
          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2, fontWeight: 700, marginBottom: 10 }}>MERK</div>
            {['Alle', 'LEGO', 'Mattel Bricks'].map(b => (
              <label key={b} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0',
                borderBottom: `1px dotted ${SR.line}`, cursor: 'pointer',
              }}>
                <input type="radio" checked={brand === b} onChange={() => setBrand(b)} style={{ accentColor: SR.copper }}/>
                <span style={{ flex: 1, fontSize: 13 }}>{b}</span>
                <span style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 10, color: SR.ink3 }}>
                  {b === 'Alle' ? PRODUCTS.length : PRODUCTS.filter(p => p.brand === b).length}
                </span>
              </label>
            ))}
          </div>

          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2, fontWeight: 700, marginBottom: 10 }}>PRIJS · €</div>
            <div style={{ position: 'relative', height: 6, background: SR.lineSoft, borderRadius: 99 }}>
              <div style={{ position: 'absolute', left: '8%', right: '12%', height: '100%', background: SR.copper, borderRadius: 99 }}/>
              <div style={{ position: 'absolute', left: '8%', top: '50%', transform: 'translate(-50%, -50%)', width: 14, height: 14, background: SR.copper, borderRadius: '50%' }}/>
              <div style={{ position: 'absolute', left: '88%', top: '50%', transform: 'translate(-50%, -50%)', width: 14, height: 14, background: SR.copper, borderRadius: '50%' }}/>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: '"JetBrains Mono", monospace', fontSize: 11 }}>
              <span>€ 80</span><span>€ 600</span>
            </div>
          </div>

          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2, fontWeight: 700, marginBottom: 10 }}>SCHAAL</div>
            {['1:8', '1:14', '1:18'].map(s => (
              <label key={s} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', cursor: 'pointer' }}>
                <input type="checkbox" defaultChecked style={{ accentColor: SR.copper }}/>
                <span style={{ fontSize: 13 }}>{s}</span>
              </label>
            ))}
          </div>

          <div style={{ marginBottom: 24 }}>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2, fontWeight: 700, marginBottom: 10 }}>ZELDZAAMHEID</div>
            {[5, 4, 3].map(n => (
              <label key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', cursor: 'pointer' }}>
                <input type="checkbox" defaultChecked style={{ accentColor: SR.copper }}/>
                <Stars n={n}/>
              </label>
            ))}
          </div>

          <div>
            <div style={{ fontSize: 10, letterSpacing: '0.25em', color: SR.ink2, fontWeight: 700, marginBottom: 10 }}>STATUS</div>
            {['Op voorraad', 'Pre-order', 'Limited drop'].map(s => (
              <label key={s} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0', cursor: 'pointer' }}>
                <input type="checkbox" defaultChecked={s !== 'Limited drop'} style={{ accentColor: SR.copper }}/>
                <span style={{ fontSize: 13 }}>{s}</span>
              </label>
            ))}
          </div>
        </aside>

        {/* product grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {filtered.map((p, i) => {
            const Car = window[p.shape];
            const isHover = hovered === p.id;
            return (
              <article key={p.id}
                onMouseEnter={() => setHovered(p.id)}
                onMouseLeave={() => setHovered(null)}
                onClick={() => go('product', { id: p.id })}
                style={{
                  background: '#fff', border: `1px solid ${SR.line}`,
                  position: 'relative', overflow: 'hidden', cursor: 'pointer',
                  transition: 'transform .25s, box-shadow .25s',
                  transform: isHover ? 'translateY(-4px)' : 'none',
                  boxShadow: isHover ? '0 24px 48px rgba(0,0,0,0.10)' : '0 2px 6px rgba(0,0,0,0.04)',
                }}>
                <div style={{
                  position: 'absolute', top: 14, left: 14, zIndex: 2, padding: '4px 8px',
                  background: SR.ink, color: '#fff', fontFamily: '"Archivo Narrow", sans-serif',
                  fontWeight: 700, fontSize: 10, letterSpacing: '0.15em',
                }}>{p.tag}</div>
                <Plate style={{ position: 'absolute', top: 14, right: 14, zIndex: 2 }}>{p.plate}</Plate>

                <div style={{
                  height: 200, padding: '20px 20px 0', position: 'relative',
                  background: `linear-gradient(180deg, ${SR.bg} 0%, #fff 100%)`,
                }}>
                  <div style={{
                    position: 'absolute', bottom: 12, left: '10%', right: '10%', height: 8,
                    background: 'radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, transparent 70%)',
                  }} />
                  <ProductImage product={p} color={SR.ink} accent={SR.copper}
                    style={{
                      width: '100%', height: '100%',
                      transition: 'transform .4s cubic-bezier(.2,.7,.3,1)',
                      transform: isHover ? 'translateX(8px)' : 'none',
                    }}/>
                </div>

                <div style={{ padding: '20px 22px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div style={{ fontSize: 10, letterSpacing: '0.2em', color: SR.ink2, fontWeight: 600 }}>
                      {p.brand.toUpperCase()} · {p.cat.toUpperCase()}
                    </div>
                    <Stars n={p.rare} />
                  </div>
                  <h3 style={{
                    fontFamily: '"Instrument Serif", serif', fontWeight: 400, fontSize: 24,
                    margin: '6px 0 14px', letterSpacing: '-0.01em',
                  }}>{p.name}</h3>

                  <div style={{
                    display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10,
                    paddingBottom: 14, borderBottom: `1px dashed ${SR.line}`,
                    fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                  }}>
                    <div><div style={{ color: SR.ink2 }}>STENEN</div><div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>{p.parts.toLocaleString()}</div></div>
                    <div><div style={{ color: SR.ink2 }}>SCHAAL</div><div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>{p.scale}</div></div>
                    <div><div style={{ color: SR.ink2 }}>BOUW</div><div style={{ fontSize: 13, fontWeight: 700, marginTop: 2 }}>~{p.hours}u</div></div>
                  </div>

                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 14 }}>
                    <div style={{ fontFamily: 'Anton, sans-serif', fontSize: 28 }}>€ {p.price}</div>
                    <div style={{
                      background: SR.ink, color: '#fff', padding: '10px 14px',
                      fontFamily: '"Archivo Narrow", sans-serif', fontWeight: 700, fontSize: 11,
                      letterSpacing: '0.15em',
                    }}>BEKIJK →</div>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <ShowroomFooter />
    </div>
  );
};

window.PageCatalog = PageCatalog;