// templates.jsx — Templates / Effects gallery
// Inspired by Vidu's 模板库 (kiss/hug/dress-up viral templates) and AdpexAI Effects (figurine/dance/style transfer).
//
// Two layers of content:
//   - VIRAL TEMPLATES: end-to-end scenes (kiss video, 3D figurine, ghibli portrait, product ad)
//   - STYLE EFFECTS: one-click style filters (cyberpunk, anime, oil painting...)

const TEMPLATE_CATEGORIES = [
  { id: 'all', label: 'All' },
  { id: 'viral', label: '🔥 Trending', count: 12 },
  { id: 'portrait', label: 'Portrait', count: 18 },
  { id: 'product', label: 'Product', count: 9 },
  { id: 'animation', label: 'Animation', count: 14 },
  { id: 'effect', label: 'Style FX', count: 24 },
  { id: 'social', label: 'Social posts', count: 11 },
];

// Each template renders a faux preview card. We use CSS gradients + emoji-free fake "scenes"
// instead of bitmap thumbnails — keeps the prototype self-contained.
const TEMPLATES = [
  // VIRAL — top of the page, big cards
  { id: 't1', cat: 'viral', name: 'Kiss video', sub: 'Two photos → animated romantic scene', uses: '2.4M', credits: 8, hot: true,
    scene: { hue: 340, vibe: 'romance', tag: 'Video · 4s' } },
  { id: 't2', cat: 'viral', name: '3D Figurine', sub: 'Selfie → collectible-style figure', uses: '1.8M', credits: 4, hot: true,
    scene: { hue: 30, vibe: 'figurine', tag: 'Image' } },
  { id: 't3', cat: 'viral', name: 'Ghibli portrait', sub: 'Portrait → Studio Ghibli painting', uses: '3.1M', credits: 3, hot: true,
    scene: { hue: 180, vibe: 'ghibli', tag: 'Image' } },
  { id: 't4', cat: 'viral', name: 'Hug video', sub: 'Two people → embrace animation', uses: '890K', credits: 8,
    scene: { hue: 280, vibe: 'embrace', tag: 'Video · 4s' } },
  { id: 't5', cat: 'viral', name: 'AI dress-up', sub: 'Try outfits with one click', uses: '1.2M', credits: 5,
    scene: { hue: 320, vibe: 'fashion', tag: 'Image' } },
  { id: 't6', cat: 'viral', name: 'Plant blooming', sub: 'Static frame → time-lapse bloom', uses: '670K', credits: 6,
    scene: { hue: 100, vibe: 'bloom', tag: 'Video · 5s' } },

  // PORTRAIT
  { id: 't10', cat: 'portrait', name: 'Cinematic headshot', sub: 'LinkedIn-ready portrait', uses: '410K', credits: 3,
    scene: { hue: 220, vibe: 'cinematic', tag: 'Image' } },
  { id: 't11', cat: 'portrait', name: 'Anime avatar', sub: 'Selfie → anime character', uses: '2.0M', credits: 3,
    scene: { hue: 280, vibe: 'anime', tag: 'Image' } },
  { id: 't12', cat: 'portrait', name: 'Vintage film', sub: '70s film grain look', uses: '180K', credits: 2,
    scene: { hue: 30, vibe: 'vintage', tag: 'Image' } },
  { id: 't13', cat: 'portrait', name: 'Talking avatar', sub: 'Photo + audio → lip sync', uses: '95K', credits: 12,
    scene: { hue: 200, vibe: 'lipsync', tag: 'Video · 8s' } },
  { id: 't14', cat: 'portrait', name: 'Age progression', sub: 'See yourself in 30 years', uses: '230K', credits: 4,
    scene: { hue: 240, vibe: 'age', tag: 'Image' } },

  // PRODUCT
  { id: 't20', cat: 'product', name: 'Floating product', sub: 'Product on infinite gradient', uses: '320K', credits: 4,
    scene: { hue: 200, vibe: 'product', tag: 'Image' } },
  { id: 't21', cat: 'product', name: 'Spin showcase', sub: 'Product 360° rotation', uses: '78K', credits: 10,
    scene: { hue: 280, vibe: 'rotation', tag: 'Video · 5s' } },
  { id: 't22', cat: 'product', name: 'Lifestyle scene', sub: 'Place product into a setting', uses: '195K', credits: 5,
    scene: { hue: 100, vibe: 'lifestyle', tag: 'Image' } },

  // ANIMATION
  { id: 't30', cat: 'animation', name: 'Manga to anime', sub: 'Comic page → animated', uses: '510K', credits: 12,
    scene: { hue: 340, vibe: 'manga', tag: 'Video · 4s' } },
  { id: 't31', cat: 'animation', name: 'Logo reveal', sub: 'Static logo → cinematic reveal', uses: '88K', credits: 8,
    scene: { hue: 200, vibe: 'logo', tag: 'Video · 3s' } },
  { id: 't32', cat: 'animation', name: 'Loop GIF', sub: 'Photo → seamless loop', uses: '142K', credits: 6,
    scene: { hue: 280, vibe: 'loop', tag: 'GIF' } },

  // STYLE FX
  { id: 't40', cat: 'effect', name: 'Cyberpunk neon', sub: 'Neon-lit dystopia', uses: '610K', credits: 2,
    scene: { hue: 290, vibe: 'cyber', tag: 'FX' } },
  { id: 't41', cat: 'effect', name: 'Oil painting', sub: 'Renaissance brushwork', uses: '380K', credits: 2,
    scene: { hue: 30, vibe: 'oil', tag: 'FX' } },
  { id: 't42', cat: 'effect', name: 'Watercolor', sub: 'Soft watercolor wash', uses: '220K', credits: 2,
    scene: { hue: 200, vibe: 'watercolor', tag: 'FX' } },
  { id: 't43', cat: 'effect', name: 'Pencil sketch', sub: 'Hand-drawn pencil', uses: '150K', credits: 2,
    scene: { hue: 0, vibe: 'pencil', tag: 'FX' } },
  { id: 't44', cat: 'effect', name: 'Pop art', sub: 'Warhol comic style', uses: '90K', credits: 2,
    scene: { hue: 50, vibe: 'pop', tag: 'FX' } },
  { id: 't45', cat: 'effect', name: 'Pixel art', sub: '8-bit retro game', uses: '170K', credits: 2,
    scene: { hue: 130, vibe: 'pixel', tag: 'FX' } },

  // SOCIAL POSTS
  { id: 't50', cat: 'social', name: 'Instagram story', sub: '9:16 vertical with text', uses: '440K', credits: 3,
    scene: { hue: 320, vibe: 'story', tag: 'Image · 9:16' } },
  { id: 't51', cat: 'social', name: 'TikTok hook', sub: '3s opener with text overlay', uses: '780K', credits: 5,
    scene: { hue: 290, vibe: 'tiktok', tag: 'Video · 3s' } },
  { id: 't52', cat: 'social', name: 'YouTube thumbnail', sub: 'High-CTR thumbnail', uses: '210K', credits: 3,
    scene: { hue: 0, vibe: 'thumb', tag: 'Image · 16:9' } },
];

// ---- Faux scene preview — replaces a bitmap with stylized CSS ----
const TemplateSceneArt = ({ scene, ratio = '4/5' }) => {
  const { hue, vibe } = scene;
  // Different vibes get different layered backgrounds
  const layers = {
    romance: `radial-gradient(circle at 30% 40%, hsl(${hue} 70% 65%) 0%, hsl(${hue + 20} 60% 35%) 40%, #1a0a14 100%)`,
    figurine: `radial-gradient(ellipse at 50% 60%, hsl(${hue} 80% 70%) 0%, hsl(${hue} 60% 30%) 50%, #0a0814 100%)`,
    ghibli: `linear-gradient(180deg, hsl(${hue} 50% 70%) 0%, hsl(${hue + 40} 45% 55%) 50%, hsl(${hue + 60} 35% 35%) 100%)`,
    embrace: `radial-gradient(circle at 50% 50%, hsl(${hue} 60% 55%) 0%, hsl(${hue} 50% 25%) 60%, #0a0814 100%)`,
    fashion: `linear-gradient(135deg, hsl(${hue} 70% 60%) 0%, hsl(${hue + 40} 65% 40%) 100%)`,
    bloom: `radial-gradient(circle at 50% 70%, hsl(${hue} 60% 55%) 0%, hsl(${hue - 20} 50% 30%) 60%, #0a1408 100%)`,
    cinematic: `linear-gradient(180deg, hsl(${hue} 30% 25%) 0%, hsl(${hue} 50% 12%) 100%)`,
    anime: `radial-gradient(circle at 30% 30%, hsl(${hue} 80% 70%) 0%, hsl(${hue + 30} 70% 40%) 60%, #14081e 100%)`,
    vintage: `linear-gradient(180deg, hsl(${hue} 30% 60%) 0%, hsl(${hue} 40% 35%) 100%)`,
    lipsync: `radial-gradient(circle at 50% 40%, hsl(${hue} 60% 50%) 0%, hsl(${hue} 50% 20%) 80%)`,
    age: `linear-gradient(135deg, hsl(${hue} 25% 50%), hsl(${hue} 35% 25%))`,
    product: `radial-gradient(circle at 50% 50%, hsl(${hue} 50% 80%) 0%, hsl(${hue} 40% 50%) 50%, hsl(${hue} 30% 25%) 100%)`,
    rotation: `conic-gradient(from 0deg at 50% 50%, hsl(${hue} 60% 55%), hsl(${hue + 60} 60% 45%), hsl(${hue + 120} 60% 55%), hsl(${hue + 180} 60% 45%), hsl(${hue} 60% 55%))`,
    lifestyle: `linear-gradient(180deg, hsl(${hue} 40% 70%) 0%, hsl(${hue + 30} 35% 50%) 100%)`,
    manga: `linear-gradient(135deg, hsl(${hue} 70% 55%), hsl(${hue + 40} 60% 30%))`,
    logo: `radial-gradient(ellipse at 50% 50%, hsl(${hue} 80% 60%), #050810)`,
    loop: `conic-gradient(from 90deg at 50% 50%, hsl(${hue} 60% 50%), hsl(${hue + 80} 60% 50%), hsl(${hue} 60% 50%))`,
    cyber: `linear-gradient(135deg, hsl(${hue} 100% 50%) 0%, hsl(${hue + 30} 100% 30%) 50%, #0a001a 100%)`,
    oil: `radial-gradient(circle at 30% 40%, hsl(${hue} 50% 55%) 0%, hsl(${hue + 30} 55% 35%) 70%)`,
    watercolor: `radial-gradient(ellipse at 40% 60%, hsl(${hue} 40% 75%) 0%, hsl(${hue + 40} 35% 55%) 60%, hsl(${hue + 60} 30% 40%) 100%)`,
    pencil: `linear-gradient(180deg, hsl(${hue} 0% 75%) 0%, hsl(${hue} 0% 35%) 100%)`,
    pop: `repeating-linear-gradient(45deg, hsl(${hue} 90% 55%) 0px, hsl(${hue} 90% 55%) 12px, hsl(${hue + 30} 90% 50%) 12px, hsl(${hue + 30} 90% 50%) 24px)`,
    pixel: `conic-gradient(hsl(${hue} 70% 50%) 0deg, hsl(${hue + 60} 70% 50%) 90deg, hsl(${hue + 120} 70% 50%) 180deg, hsl(${hue + 180} 70% 50%) 270deg, hsl(${hue} 70% 50%) 360deg)`,
    story: `linear-gradient(180deg, hsl(${hue} 70% 60%) 0%, hsl(${hue + 60} 60% 35%) 100%)`,
    tiktok: `linear-gradient(135deg, hsl(${hue} 70% 50%), hsl(${hue + 60} 70% 40%), #06080f)`,
    thumb: `linear-gradient(135deg, hsl(${hue} 80% 50%) 0%, hsl(${hue + 30} 70% 30%) 100%)`,
  };

  return (
    <div style={{
      aspectRatio: ratio,
      background: layers[vibe] || layers.cinematic,
      borderRadius: 12,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Two-figure composition for romance/embrace */}
      {(vibe === 'romance' || vibe === 'embrace') && (
        <>
          <div style={{ position: 'absolute', left: '20%', bottom: '10%', width: '32%', aspectRatio: '3/5', borderRadius: '40% 40% 0 0', background: `linear-gradient(180deg, hsl(${hue + 10} 50% 70%) 0%, hsl(${hue} 60% 30%) 100%)` }} />
          <div style={{ position: 'absolute', right: '20%', bottom: '10%', width: '32%', aspectRatio: '3/5', borderRadius: '40% 40% 0 0', background: `linear-gradient(180deg, hsl(${hue - 20} 50% 60%) 0%, hsl(${hue - 10} 50% 25%) 100%)` }} />
        </>
      )}
      {/* Centered figurine */}
      {vibe === 'figurine' && (
        <div style={{ position: 'absolute', left: '30%', top: '20%', width: '40%', aspectRatio: '2/3', background: `radial-gradient(circle at 30% 30%, hsl(${hue + 20} 80% 70%), hsl(${hue} 70% 35%))`, borderRadius: '50% 50% 30% 30%', boxShadow: `0 20px 40px hsl(${hue} 50% 20% / 0.6)` }} />
      )}
      {/* Anime/portrait silhouette */}
      {(vibe === 'anime' || vibe === 'ghibli' || vibe === 'cinematic' || vibe === 'vintage' || vibe === 'lipsync' || vibe === 'age' || vibe === 'manga' || vibe === 'oil' || vibe === 'watercolor' || vibe === 'pencil') && (
        <div style={{ position: 'absolute', left: '30%', bottom: '5%', width: '40%', aspectRatio: '3/4', borderRadius: '50% 50% 35% 35%', background: `linear-gradient(180deg, hsl(${hue + 30} 60% 60%) 0%, hsl(${hue} 50% 25%) 100%)`, opacity: 0.85 }} />
      )}
      {/* Bloom flower */}
      {vibe === 'bloom' && (
        <>
          {[0, 60, 120, 180, 240, 300].map(deg => (
            <div key={deg} style={{ position: 'absolute', left: '50%', top: '50%', width: '20%', aspectRatio: 1, borderRadius: '50%', background: `hsl(${hue + 20} 60% 65%)`, transform: `translate(-50%, -50%) rotate(${deg}deg) translateY(-25%)`, opacity: 0.85 }} />
          ))}
          <div style={{ position: 'absolute', left: '50%', top: '50%', width: '14%', aspectRatio: 1, borderRadius: '50%', background: `hsl(${hue} 80% 60%)`, transform: 'translate(-50%, -50%)' }} />
        </>
      )}
      {/* Product = sphere */}
      {(vibe === 'product' || vibe === 'lifestyle' || vibe === 'rotation') && (
        <div style={{ position: 'absolute', left: '30%', top: '25%', width: '40%', aspectRatio: 1, borderRadius: '50%', background: `radial-gradient(circle at 30% 30%, hsl(${hue + 20} 60% 75%), hsl(${hue} 50% 35%))`, boxShadow: '0 20px 40px rgba(0,0,0,0.4)' }} />
      )}
      {/* Logo block */}
      {vibe === 'logo' && (
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', fontSize: '32%', fontWeight: 800, color: '#fff', letterSpacing: '-0.04em', textShadow: '0 0 30px currentColor' }}>LOGO</div>
      )}
      {/* Fashion stripes */}
      {vibe === 'fashion' && (
        <div style={{ position: 'absolute', left: '32%', top: '15%', width: '36%', aspectRatio: '2/3', background: `linear-gradient(180deg, hsl(${hue} 70% 60%) 0% 30%, hsl(${hue + 40} 70% 50%) 30% 60%, hsl(${hue + 80} 60% 45%) 60% 100%)`, borderRadius: '20% 20% 50% 50%' }} />
      )}
      {/* Cyber lines */}
      {vibe === 'cyber' && (
        <>
          {[20, 35, 50, 65, 80].map(pct => (
            <div key={pct} style={{ position: 'absolute', left: 0, right: 0, top: pct + '%', height: 2, background: `hsl(${hue + 20} 100% 60%)`, opacity: 0.5, boxShadow: `0 0 8px hsl(${hue + 20} 100% 60%)` }} />
          ))}
        </>
      )}
      {/* Pop art dots */}
      {vibe === 'pop' && (
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle, hsl(${hue + 60} 70% 40%) 1.5px, transparent 2px) 0 0/12px 12px` }} />
      )}
      {/* Pixel grid */}
      {vibe === 'pixel' && (
        <div style={{ position: 'absolute', inset: 0, background: `repeating-conic-gradient(from 45deg at 50% 50%, hsl(${hue} 70% 50%) 0deg 90deg, hsl(${hue + 60} 70% 40%) 90deg 180deg) 0 0/16px 16px` }} />
      )}
      {/* Loop circle */}
      {vibe === 'loop' && (
        <div style={{ position: 'absolute', left: '30%', top: '30%', width: '40%', aspectRatio: 1, border: `4px solid hsl(${hue} 80% 70%)`, borderRadius: '50%', borderTopColor: 'transparent', animation: 'spin 3s linear infinite' }} />
      )}
      {/* Vignette */}
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,0.45) 100%)', pointerEvents: 'none' }} />
    </div>
  );
};

// ---- Big featured carousel for trending ----
const FeaturedTemplate = ({ template, onUse }) => (
  <div onClick={() => onUse(template)} style={{
    cursor: 'pointer', borderRadius: 16, overflow: 'hidden', position: 'relative',
    border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.02)',
    transition: 'transform .15s', height: '100%',
  }}
    onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
    <TemplateSceneArt scene={template.scene} ratio="4/5" />
    {template.hot && (
      <div style={{ position: 'absolute', top: 12, left: 12, padding: '4px 10px', borderRadius: 999, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.15)', fontSize: 11, fontWeight: 600, color: '#fbbf24', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
        🔥 {template.uses} uses
      </div>
    )}
    <div style={{ position: 'absolute', top: 12, right: 12, padding: '3px 8px', borderRadius: 6, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(8px)', fontSize: 10, fontWeight: 600, color: '#fff', fontFamily: 'var(--font-mono)' }}>
      {template.scene.tag}
    </div>
    <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '40px 16px 14px', background: 'linear-gradient(180deg, transparent, rgba(6,8,15,0.92))' }}>
      <div style={{ fontSize: 14, fontWeight: 600, color: '#fff', marginBottom: 3 }}>{template.name}</div>
      <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginBottom: 10, lineHeight: 1.4 }}>{template.sub}</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>
          <Icon name="coin" size={10} /> {template.credits}
        </div>
        <button style={{
          height: 26, padding: '0 12px', borderRadius: 999, border: 'none',
          background: 'var(--accent)', color: '#052028', fontSize: 12, fontWeight: 600, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          Use <Icon name="chevron" size={10} color="#052028" />
        </button>
      </div>
    </div>
  </div>
);

const TemplatesScreen = () => {
  const [activeCat, setActiveCat] = React.useState('all');
  const [search, setSearch] = React.useState('');
  const [sort, setSort] = React.useState('popular');

  const filtered = TEMPLATES.filter(t =>
    (activeCat === 'all' || t.cat === activeCat) &&
    (!search || t.name.toLowerCase().includes(search.toLowerCase()) || t.sub.toLowerCase().includes(search.toLowerCase()))
  );
  const trending = TEMPLATES.filter(t => t.hot);

  return (
    <AppShell active="discover">

      {/* Hero */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 48px 0' }}>
        <div style={{ fontSize: 12, color: 'var(--accent)', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 10, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          <Icon name="sparkle" size={12} /> Templates
        </div>
        <h1 style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.025em', margin: '0 0 12px', maxWidth: 720 }}>
          One-click viral content
        </h1>
        <p style={{ fontSize: 16, color: 'var(--fg-2)', maxWidth: 580, lineHeight: 1.5, margin: '0 0 28px' }}>
          Ready-made scenes built on top of our model registry. Drop in your photo, pick a template, get a result in seconds.
        </p>

        {/* Search + sort bar */}
        <div style={{ display: 'flex', gap: 10, marginBottom: 24 }}>
          <div style={{ flex: 1, position: 'relative' }}>
            <Icon name="search" size={14} color="var(--fg-3)" />
            <input value={search} onChange={e => setSearch(e.target.value)} placeholder="Search 88 templates..." className="yt-input"
              style={{ paddingLeft: 36, height: 42, fontSize: 13 }} />
            <div style={{ position: 'absolute', left: 14, top: 14 }}><Icon name="search" size={14} color="var(--fg-3)" /></div>
          </div>
          <select value={sort} onChange={e => setSort(e.target.value)} style={{
            height: 42, padding: '0 14px', borderRadius: 'var(--input-radius, 10px)',
            background: 'rgba(255,255,255,0.03)', border: '1px solid var(--line-2)',
            color: 'var(--fg-1)', fontSize: 13, cursor: 'pointer',
          }}>
            <option value="popular">Most popular</option>
            <option value="recent">Newest</option>
            <option value="cheap">Lowest credits</option>
          </select>
        </div>

        {/* Category chips */}
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 36 }}>
          {TEMPLATE_CATEGORIES.map(c => (
            <button key={c.id} onClick={() => setActiveCat(c.id)} style={{
              height: 32, padding: '0 14px', borderRadius: 999,
              border: '1px solid ' + (activeCat === c.id ? 'rgba(34,211,238,0.4)' : 'var(--line-2)'),
              background: activeCat === c.id ? 'rgba(34,211,238,0.1)' : 'rgba(255,255,255,0.02)',
              color: activeCat === c.id ? '#b3eef9' : 'var(--fg-1)',
              fontSize: 13, fontWeight: 500, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              {c.label}
              {c.count && <span style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{c.count}</span>}
            </button>
          ))}
        </div>
      </div>

      {/* Trending row (only when on All) */}
      {activeCat === 'all' && (
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px 32px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
            <h2 style={{ fontSize: 18, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>🔥 Trending this week</h2>
            <button style={{ background: 'none', border: 'none', color: 'var(--fg-3)', fontSize: 13, cursor: 'pointer' }}>See all →</button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12 }}>
            {trending.map(t => <FeaturedTemplate key={t.id} template={t} onUse={() => {}} />)}
          </div>
        </div>
      )}

      {/* Main grid */}
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px 60px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
          <h2 style={{ fontSize: 18, fontWeight: 600, margin: 0, letterSpacing: '-0.01em' }}>
            {activeCat === 'all' ? 'All templates' : TEMPLATE_CATEGORIES.find(c => c.id === activeCat)?.label}
          </h2>
          <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{filtered.length} results</div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14 }}>
          {filtered.map(t => <FeaturedTemplate key={t.id} template={t} onUse={() => {}} />)}
        </div>
      </div>
    </AppShell>
  );
};

Object.assign(window, { TemplatesScreen, TEMPLATES, TEMPLATE_CATEGORIES, TemplateSceneArt });