// Browse screen — the home of 888 Artworks
function BrowseScreen({ artworks, loading, onOpenArtwork, savedIds, toggleSave }) {
  const [cat, setCat] = React.useState('All');
  const categories = ['All', 'Paintings', 'Prints', 'Commission', 'Under $500'];

  const filtered = (artworks || []).filter((a) => {
    if (cat === 'All') return true;
    if (cat === 'Commission') return a.status === 'commission_only';
    if (cat === 'Under $500') return (a.price_cents || 0) < 50000;
    return true;
  });

  return (
    <>
      <AppHeader
        title="888 Artworks"
        trailing={<div style={{ display: 'flex', gap: 14 }}>
          <Icon name="search" size={22} color="var(--fg)"/>
          <Icon name="bag" size={22} color="var(--fg)"/>
        </div>}
      />

      <div style={{ padding: '24px 20px 8px' }}>
        <Eyebrow>八 · This week's arrivals</Eyebrow>
        <h1 style={{
          margin: '10px 0 8px', fontFamily: 'var(--font-display)', fontSize: 34, fontWeight: 400,
          lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--fg)', textWrap: 'pretty',
        }}>Paintings, prints, and one-of-ones. <em style={{ fontWeight: 400 }}>Quietly chosen.</em></h1>
        <p style={{ margin: 0, fontFamily: 'var(--font-body)', fontSize: 14, color: 'var(--fg-muted)', lineHeight: 1.5 }}>
          Forty-two new pieces this month. Each one signed, photographed on cream paper.
        </p>
      </div>

      <div style={{ display: 'flex', gap: 8, padding: '14px 20px 6px', overflowX: 'auto' }}>
        {categories.map(c => <Chip key={c} active={cat === c} onClick={() => setCat(c)}>{c}</Chip>)}
      </div>

      {loading && (
        <div style={{ padding: '40px 20px', textAlign: 'center', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--fg-muted)' }}>
          Shaking the 8-ball…
        </div>
      )}

      {/* Featured row — horizontal rail */}
      <div style={{ padding: '14px 0 8px' }}>
        <div style={{ padding: '0 20px 10px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Eyebrow>Featured</Eyebrow>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--fg-muted)' }}>See all</span>
        </div>
        <div style={{ display: 'flex', gap: 12, padding: '0 20px', overflowX: 'auto' }}>
          {filtered.slice(0, 3).map(a => (
            <div key={a.id} onClick={() => onOpenArtwork(a)} style={{ minWidth: 180, cursor: 'pointer' }}>
              <ArtworkFrame
                image={a.image_url}
                gradient={a.grad}
                alt={`${a.title} — ${a.artist}`}
                tag={a.tag && <Tag tone={a.tag.tone}>{a.tag.label}</Tag>}
                saved={savedIds.has(a.id)}
                onSave={() => toggleSave(a.id)}
              />
              <div style={{ padding: '10px 2px 0', display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 500, color: 'var(--fg)', lineHeight: 1.2 }}>{a.title}{a.num && <span style={{ color: 'var(--fg-faint)', fontStyle: 'italic' }}>, {a.num}</span>}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 12, color: 'var(--fg-muted)', marginTop: 2 }}>— {a.artist}</div>
                </div>
                {a.price && <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 500, color: 'var(--fg)' }}>{a.price}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Grid */}
      <div style={{ padding: '20px' }}>
        <Eyebrow style={{ marginBottom: 12 }}>The full catalog</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
          {filtered.slice(0, 6).map(a => (
            <div key={a.id} onClick={() => onOpenArtwork(a)} style={{ cursor: 'pointer' }}>
              <ArtworkFrame
                image={a.image_url}
                gradient={a.grad}
                alt={`${a.title} — ${a.artist}`}
                tag={a.tag && <Tag tone={a.tag.tone}>{a.tag.label}</Tag>}
                saved={savedIds.has(a.id)}
                onSave={() => toggleSave(a.id)}
              />
              <div style={{ padding: '10px 2px 0' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 500, color: 'var(--fg)', lineHeight: 1.2 }}>{a.title}{a.num && <span style={{ color: 'var(--fg-faint)', fontStyle: 'italic' }}>, {a.num}</span>}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 4, alignItems: 'baseline' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 11, color: 'var(--fg-muted)' }}>— {a.artist}</div>
                  {a.price && <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 500, color: 'var(--fg)' }}>{a.price}</div>}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

    </>
  );
}

window.BrowseScreen = BrowseScreen;