// src/screens.jsx — Home, Categoria, Detalhe
const { useState: useS, useMemo, useEffect: useE, useRef: useR } = React;

/* ============================================================
   Header (in-app) — sticky top with logo + back + theme
   ============================================================ */
function AppHeader({ route, onBack, theme, setTheme, onOpenMenu }) {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'color-mix(in oklch, var(--bg) 85%, transparent)',
      backdropFilter: 'blur(20px)',
      WebkitBackdropFilter: 'blur(20px)',
      borderBottom: '1px solid var(--line-soft)',
      padding: '14px 20px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      {route.name !== 'home' ? (
        <button onClick={onBack} style={{
          width: 36, height: 36, borderRadius: 999,
          border: '1px solid var(--line)',
          background: 'var(--bg-elev)',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: 'var(--ink)',
        }}>
          <IconArrowLeft size={16}/>
        </button>
      ) : (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <img src="assets/prestes-logo.png" alt="Prestes"
               style={{ width: 28, height: 28, objectFit: 'contain' }} />
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Prestes</span>
            <span style={{ fontSize: 13, fontWeight: 600 }}>Catálogo</span>
          </div>
        </div>
      )}
      <div style={{ flex: 1 }}/>
      {route.name !== 'home' && (
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
          {route.name === 'category' && route.id}
          {route.name === 'detail' && PLACA_DETAIL.code}
        </div>
      )}
      <button onClick={onOpenMenu} aria-label="Abrir menu" style={{
        width: 36, height: 36, borderRadius: 999,
        border: '1px solid var(--line)',
        background: 'var(--bg-elev)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--ink)',
      }}>
        <IconMenu size={16}/>
      </button>
    </header>
  );
}

/* ============================================================
   HOME — Manual de marca + grid de categorias
   ============================================================ */
function HomeScreen({ onOpenCategory, frame }) {
  const isMobile = frame === 'mobile';
  return (
    <div style={{ paddingBottom: 80 }}>
      {/* Hero */}
      <section style={{
        padding: isMobile ? '32px 22px 24px' : '72px 80px 56px',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div className="eyebrow" style={{ marginBottom: isMobile ? 18 : 28 }}>
          Manual de Marca · v2.1 · Mar/2026
        </div>
        <h1 className="display" style={{
          fontSize: isMobile ? 44 : 96,
          margin: 0,
          maxWidth: isMobile ? '100%' : 980,
        }}>
          Padronização<br/>
          <span style={{
            background: 'linear-gradient(120deg, var(--prestes-teal) 0%, var(--prestes-green-deep) 100%)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            color: 'transparent',
            fontStyle: 'italic',
          }}>de materiais</span><br/>
          para fornecedores.
        </h1>
        <p style={{
          marginTop: isMobile ? 18 : 32,
          maxWidth: 560,
          color: 'var(--ink-soft)',
          fontSize: isMobile ? 14 : 16,
          lineHeight: 1.55,
        }}>
          Tudo que você precisa para produzir materiais com a identidade da Prestes.
          Cada peça acompanha medidas, arquivos editáveis, fontes e indicação de uso.
        </p>

        {/* Floating logo mark */}
        {!isMobile && (
          <div style={{
            position: 'absolute',
            top: 64, right: 80,
            width: 220, height: 220,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <img src="assets/prestes-logo.png" alt=""
                 style={{ width: '100%', height: '100%', objectFit: 'contain', opacity: 0.95 }}/>
          </div>
        )}
      </section>

      {/* Quick stats / KPI strip */}
      <section style={{
        margin: isMobile ? '0 22px 28px' : '0 80px 56px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
        gap: isMobile ? 1 : 1,
        background: 'var(--line)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--radius-lg)',
        overflow: 'hidden',
      }}>
        {[
          { k: '103', l: 'Materiais ativos' },
          { k: '08',  l: 'Categorias' },
          { k: '24',  l: 'Placas catalogadas' },
          { k: 'v2.1', l: 'Versão do manual', mono: true },
        ].map((s, i) => (
          <div key={i} style={{
            background: 'var(--bg-elev)',
            padding: isMobile ? '18px 16px' : '24px 24px',
          }}>
            <div className={s.mono ? 'mono' : 'display'} style={{
              fontSize: isMobile ? 28 : 40,
              lineHeight: 1,
              marginBottom: 8,
            }}>{s.k}</div>
            <div className="eyebrow">{s.l}</div>
          </div>
        ))}
      </section>

      {/* Search */}
      <section style={{ margin: isMobile ? '0 22px 24px' : '0 80px 32px' }}>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '14px 18px',
          background: 'var(--bg-elev)',
          border: '1px solid var(--line)',
          borderRadius: 999,
        }}>
          <IconSearch size={18}/>
          <input
            placeholder="Buscar por código, nome ou insumo Sienge…"
            style={{
              flex: 1, border: 'none', outline: 'none',
              background: 'transparent', color: 'var(--ink)',
              fontFamily: 'inherit', fontSize: 14,
            }}
          />
          <span className="mono" style={{
            fontSize: 10, color: 'var(--ink-faint)',
            padding: '4px 8px',
            border: '1px solid var(--line)',
            borderRadius: 6,
            letterSpacing: '0.08em',
          }}>⌘ K</span>
        </div>
      </section>

      {/* Categories grid */}
      <section style={{ margin: isMobile ? '0 22px' : '0 80px' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          marginBottom: 20,
        }}>
          <h2 className="display" style={{ fontSize: isMobile ? 26 : 36, margin: 0 }}>
            Categorias
          </h2>
          <span className="eyebrow">{CATEGORIES.length} grupos</span>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
          gap: isMobile ? 10 : 16,
        }}>
          {CATEGORIES.map(cat => (
            <CategoryCard key={cat.id} cat={cat}
              onClick={() => cat.active && onOpenCategory(cat.id)}
              isMobile={isMobile} />
          ))}
        </div>
      </section>

      {/* Footer */}
      <footer style={{
        marginTop: 60,
        padding: isMobile ? '24px 22px' : '32px 80px',
        borderTop: '1px solid var(--line-soft)',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: 14,
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between',
      }}>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          © 2026 Prestes · Catálogo digital para fornecedores
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)' }}>
          duvidas@prestes.com.br
        </div>
      </footer>
    </div>
  );
}

function CategoryCard({ cat, onClick, isMobile }) {
  const disabled = !cat.active;
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      style={{
        textAlign: 'left',
        background: disabled ? 'var(--bg-elev)' : 'var(--bg-elev)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--radius-lg)',
        padding: isMobile ? 16 : 22,
        cursor: disabled ? 'default' : 'pointer',
        opacity: disabled ? 0.55 : 1,
        position: 'relative',
        overflow: 'hidden',
        transition: 'all 0.15s',
        minHeight: isMobile ? 130 : 180,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}
      onMouseEnter={e => { if (!disabled) e.currentTarget.style.transform = 'translateY(-2px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
    >
      {/* Visual */}
      <div style={{
        width: '100%',
        aspectRatio: '16/9',
        background: 'var(--bg-sunk)',
        borderRadius: 'var(--radius)',
        marginBottom: 14,
        position: 'relative',
        overflow: 'hidden',
      }}>
        <CategoryGlyph id={cat.id}/>
        {cat.active && (
          <div style={{
            position: 'absolute', top: 8, right: 8,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 8px',
            background: 'var(--prestes-green)',
            color: '#0a2a0a',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            fontSize: 9,
            fontWeight: 600,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}>
            <span style={{ width: 4, height: 4, background: '#0a2a0a', borderRadius: 999 }}/>
            Ativo
          </div>
        )}
        {disabled && (
          <div style={{
            position: 'absolute', top: 8, right: 8,
            padding: '4px 8px',
            background: 'var(--bg-elev)',
            color: 'var(--ink-faint)',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            fontSize: 9,
            fontWeight: 500,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <IconLock size={9}/> Em breve
          </div>
        )}
      </div>

      <div>
        <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, marginBottom: 4 }}>
          {cat.label}
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>
          {String(cat.count).padStart(2,'0')} itens · {cat.hint}
        </div>
      </div>
    </button>
  );
}

// Abstract category visual — uses lines/blocks in brand colors, no copyrighted glyphs
function CategoryGlyph({ id }) {
  const base = {
    position: 'absolute', inset: 0,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
  };
  switch (id) {
    case 'logo':
      return <div style={base}>
        <div style={{ width: 44, height: 44, borderRadius: '50% 50% 50% 8px / 50% 50% 50% 8px', background: 'var(--prestes-green)', position: 'relative' }}>
          <div style={{ position: 'absolute', right: 0, top: '40%', width: 18, height: 18, background: 'var(--prestes-teal)', borderRadius: '0 50% 50% 0' }}/>
        </div>
      </div>;
    case 'placas':
      return <div style={base}>
        <div style={{ width: 64, height: 50, background: '#fff', border: '2px solid #0a0a0a', position: 'relative', boxShadow: '4px 4px 0 var(--prestes-green)' }}>
          <div style={{ position: 'absolute', top: 3, left: 3, right: 3, height: 10, background: 'var(--prestes-green)' }}/>
          <div style={{ position: 'absolute', top: 18, left: 5, right: 5, height: 2, background: '#ccc' }}/>
          <div style={{ position: 'absolute', top: 24, left: 5, right: 5, height: 2, background: '#ccc' }}/>
          <div style={{ position: 'absolute', top: 30, left: 5, right: 5, height: 2, background: '#ccc' }}/>
        </div>
      </div>;
    case 'adesivos':
      return <div style={base}>
        <div style={{ width: 50, height: 50, borderRadius: '50%', background: 'var(--prestes-green)', position: 'relative', transform: 'rotate(-12deg)' }}>
          <div style={{ position: 'absolute', inset: 6, borderRadius: '50%', border: '2px dashed var(--prestes-teal)' }}/>
        </div>
      </div>;
    case 'uniformes':
      return <div style={base}>
        <div style={{ width: 60, height: 50, background: 'var(--prestes-teal)', clipPath: 'polygon(20% 0, 80% 0, 100% 25%, 100% 100%, 0 100%, 0 25%)', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)', width: 14, height: 14, background: 'var(--prestes-green)', borderRadius: 2 }}/>
        </div>
      </div>;
    case 'veiculos':
      return <div style={base}>
        <div style={{ width: 72, height: 30, background: '#0a0a0a', borderRadius: '6px 12px 4px 4px', position: 'relative' }}>
          <div style={{ position: 'absolute', top: -10, left: 14, right: 18, height: 14, background: '#0a0a0a', borderRadius: '8px 12px 0 0' }}/>
          <div style={{ position: 'absolute', top: 4, left: 18, width: 28, height: 6, background: 'var(--prestes-green)' }}/>
          <div style={{ position: 'absolute', bottom: -6, left: 8, width: 12, height: 12, background: '#333', borderRadius: '50%', border: '2px solid #888' }}/>
          <div style={{ position: 'absolute', bottom: -6, right: 8, width: 12, height: 12, background: '#333', borderRadius: '50%', border: '2px solid #888' }}/>
        </div>
      </div>;
    case 'papelaria':
      return <div style={base}>
        <div style={{ position: 'relative', width: 56, height: 50 }}>
          <div style={{ position: 'absolute', inset: 0, background: '#fff', border: '1px solid #0a0a0a', transform: 'rotate(-6deg)' }}/>
          <div style={{ position: 'absolute', inset: 0, background: '#fff', border: '1px solid #0a0a0a', transform: 'rotate(4deg) translateX(6px)' }}>
            <div style={{ position: 'absolute', top: 6, left: 6, width: 20, height: 3, background: 'var(--prestes-green)' }}/>
            <div style={{ position: 'absolute', top: 14, left: 6, right: 6, height: 1, background: '#ddd' }}/>
            <div style={{ position: 'absolute', top: 20, left: 6, right: 12, height: 1, background: '#ddd' }}/>
            <div style={{ position: 'absolute', top: 26, left: 6, right: 18, height: 1, background: '#ddd' }}/>
          </div>
        </div>
      </div>;
    case 'obra':
      return <div style={base}>
        <div style={{ width: 70, height: 44, background: 'repeating-linear-gradient(45deg, var(--prestes-green), var(--prestes-green) 8px, #0a0a0a 8px, #0a0a0a 16px)', borderRadius: 4 }}/>
      </div>;
    case 'epis':
      return <div style={base}>
        <div style={{ width: 50, height: 30, background: 'var(--prestes-green)', borderRadius: '50% 50% 8px 8px / 70% 70% 8px 8px', position: 'relative' }}>
          <div style={{ position: 'absolute', bottom: -2, left: -4, right: -4, height: 6, background: '#0a0a0a', borderRadius: 2 }}/>
        </div>
      </div>;
    default:
      return null;
  }
}

/* ============================================================
   CATEGORY — Lista de placas com busca/filtros
   ============================================================ */
function CategoryScreen({ onOpenPlaca, frame }) {
  const isMobile = frame === 'mobile';
  const [q, setQ] = useS('');
  const [view, setView] = useS('grid'); // grid | list
  const [group, setGroup] = useS('todos');

  const groups = useMemo(() => ['todos', ...Array.from(new Set(PLACAS.map(p => p.group)))], []);
  const filtered = PLACAS.filter(p =>
    (group === 'todos' || p.group === group) &&
    (q === '' || (p.name + p.code + p.sienge).toLowerCase().includes(q.toLowerCase()))
  );

  return (
    <div style={{ padding: isMobile ? '24px 22px 60px' : '40px 80px 80px' }}>
      <div className="eyebrow" style={{ marginBottom: 14 }}>Catálogo / Placas</div>
      <h1 className="display" style={{
        fontSize: isMobile ? 40 : 72, margin: 0, marginBottom: 6,
      }}>
        Placas
      </h1>
      <p style={{ color: 'var(--ink-soft)', marginTop: 8, marginBottom: 28, maxWidth: 540 }}>
        Sinalização interna e externa para canteiros, escritórios e fachadas.
        Selecione uma placa para acessar medidas, arquivos e visualização 3D.
      </p>

      {/* Search + view toggle */}
      <div style={{
        display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 12,
        marginBottom: 18,
      }}>
        <div style={{
          flex: 1,
          display: 'flex', alignItems: 'center', gap: 12,
          padding: '12px 16px',
          background: 'var(--bg-elev)',
          border: '1px solid var(--line)',
          borderRadius: 999,
        }}>
          <IconSearch size={16}/>
          <input
            value={q} onChange={e => setQ(e.target.value)}
            placeholder="Buscar por código, nome ou insumo…"
            style={{
              flex: 1, border: 'none', outline: 'none', background: 'transparent',
              color: 'var(--ink)', fontFamily: 'inherit', fontSize: 14,
            }}
          />
          {q && <button onClick={() => setQ('')}
            style={{ color: 'var(--ink-faint)', display: 'inline-flex' }}><IconClose size={14}/></button>}
        </div>
        {!isMobile && (
          <div className="seg">
            <button className={view === 'grid' ? 'on' : ''} onClick={() => setView('grid')}>Grade</button>
            <button className={view === 'list' ? 'on' : ''} onClick={() => setView('list')}>Lista</button>
          </div>
        )}
      </div>

      {/* Filter chips */}
      <div style={{
        display: 'flex', gap: 8, marginBottom: 24,
        flexWrap: 'wrap',
      }}>
        {groups.map(g => (
          <button key={g} onClick={() => setGroup(g)}
            style={{
              padding: '8px 14px',
              border: '1px solid var(--line)',
              background: group === g ? 'var(--ink)' : 'var(--bg-elev)',
              color: group === g ? 'var(--bg)' : 'var(--ink-soft)',
              borderRadius: 999,
              fontSize: 12,
              fontWeight: 500,
              textTransform: 'capitalize',
            }}>
            {g}
            <span className="mono" style={{
              marginLeft: 8, opacity: 0.6, fontSize: 10,
            }}>
              {g === 'todos' ? PLACAS.length : PLACAS.filter(p => p.group === g).length}
            </span>
          </button>
        ))}
      </div>

      <div className="mono" style={{ fontSize: 11, color: 'var(--ink-faint)', marginBottom: 14, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
        {filtered.length} de {PLACAS.length} placas
      </div>

      {/* Grid */}
      {(view === 'grid' || isMobile) ? (
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 12 : 18,
        }}>
          {filtered.map(p => <PlacaCard key={p.id} placa={p} onClick={() => p.active && onOpenPlaca(p.id)} isMobile={isMobile}/>)}
        </div>
      ) : (
        <div style={{
          border: '1px solid var(--line)',
          borderRadius: 'var(--radius)',
          overflow: 'hidden',
          background: 'var(--bg-elev)',
        }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '90px 1fr 1fr 100px 120px 60px',
            padding: '12px 18px',
            borderBottom: '1px solid var(--line)',
            background: 'var(--bg-sunk)',
          }} className="eyebrow">
            <div>Código</div><div>Nome</div><div>Categoria</div><div>Formato</div><div>Inclusão</div><div></div>
          </div>
          {filtered.map(p => (
            <button key={p.id} onClick={() => p.active && onOpenPlaca(p.id)}
              disabled={!p.active}
              style={{
                width: '100%',
                display: 'grid',
                gridTemplateColumns: '90px 1fr 1fr 100px 120px 60px',
                padding: '14px 18px',
                borderBottom: '1px solid var(--line-soft)',
                textAlign: 'left',
                background: 'transparent',
                color: 'var(--ink)',
                opacity: p.active ? 1 : 0.5,
                alignItems: 'center',
                fontSize: 14,
              }}>
              <div className="mono" style={{ fontSize: 12 }}>{p.code}</div>
              <div style={{ fontWeight: 500 }}>{p.name}</div>
              <div style={{ color: 'var(--ink-soft)' }}>{p.group}</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--ink-soft)' }}>{p.w}×{p.h}cm</div>
              <div className="mono" style={{ fontSize: 12, color: 'var(--ink-faint)' }}>{p.date}</div>
              <div style={{ textAlign: 'right', color: 'var(--ink-faint)' }}>
                {p.active ? <IconArrowRight size={16}/> : <IconLock size={14}/>}
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function PlacaCard({ placa, onClick, isMobile }) {
  const disabled = !placa.active;
  return (
    <button onClick={onClick} disabled={disabled} style={{
      background: 'var(--bg-elev)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius-lg)',
      overflow: 'hidden',
      padding: 0,
      textAlign: 'left',
      opacity: disabled ? 0.55 : 1,
      cursor: disabled ? 'default' : 'pointer',
      transition: 'all 0.15s',
      display: 'flex', flexDirection: 'column',
    }}
    onMouseEnter={e => { if (!disabled) e.currentTarget.style.borderColor = 'var(--ink-soft)'; }}
    onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; }}
    >
      <div style={{
        aspectRatio: '160/140',
        background: 'var(--bg-sunk)',
        position: 'relative',
        padding: isMobile ? 14 : 22,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {placa.active ? (
          <PlacaArt size={isMobile ? 120 : 220} rows={10}/>
        ) : (
          <PlacaPlaceholder ratio={placa.w / placa.h} />
        )}
        {placa.active && (
          <div style={{
            position: 'absolute', top: 10, right: 10,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '4px 8px',
            background: 'var(--prestes-green)',
            color: '#0a2a0a',
            borderRadius: 999,
            fontFamily: 'var(--font-mono)',
            fontSize: 9,
            fontWeight: 600,
            letterSpacing: '0.08em',
            textTransform: 'uppercase',
          }}>
            Ativo
          </div>
        )}
      </div>
      <div style={{ padding: isMobile ? 14 : 18, borderTop: '1px solid var(--line-soft)' }}>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 6 }}>
          {placa.code} · {placa.w}×{placa.h}cm
        </div>
        <div style={{ fontSize: isMobile ? 13 : 15, fontWeight: 600, marginBottom: 4, lineHeight: 1.25 }}>
          {placa.name}
        </div>
        <div className="mono" style={{ fontSize: 10, color: 'var(--ink-faint)' }}>
          Sienge {placa.sienge}
        </div>
      </div>
    </button>
  );
}

// Placeholder for non-active placas — striped SVG with mono caption
function PlacaPlaceholder({ ratio = 1 }) {
  return (
    <div style={{
      width: '70%',
      aspectRatio: ratio,
      background: 'repeating-linear-gradient(45deg, transparent, transparent 6px, color-mix(in oklch, var(--ink) 8%, transparent) 6px, color-mix(in oklch, var(--ink) 8%, transparent) 7px)',
      border: '1px dashed var(--line)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'var(--ink-faint)',
      fontFamily: 'var(--font-mono)',
      fontSize: 9,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
    }}>
      arte indisponível
    </div>
  );
}

window.AppHeader = AppHeader;
window.HomeScreen = HomeScreen;
window.CategoryScreen = CategoryScreen;