// Templates — pre-built playbooks
function Templates() {
  const templates = [
    { id: 'tmpl1', name: 'Cold outbound · founder-to-founder', cat: 'OUTBOUND', icon: 'Bolt', author: 'Demiurge', desc: 'High-conviction direct outreach for SMB founders. Optimized for reply rate, not volume.', uses: 1284, rating: 96 },
    { id: 'tmpl2', name: 'Inbound demo qualifier', cat: 'INBOUND', icon: 'Sparkles', author: 'Demiurge', desc: 'Auto-qualifies new demo requests against your ICP and routes hot leads to the right AE.', uses: 842, rating: 94 },
    { id: 'tmpl3', name: 'Trial activation nudge · D3 D7 D14', cat: 'LIFECYCLE', icon: 'Mail', author: 'Demiurge', desc: 'Nurture sequence that reacts to product usage. Skips active users, focuses on the stuck.', uses: 612, rating: 91 },
    { id: 'tmpl4', name: 'AE follow-up automator', cat: 'SALES', icon: 'Calendar', author: 'Demiurge', desc: 'Drafts post-meeting recap emails with action items. Sends after the AE reviews.', uses: 418, rating: 88 },
    { id: 'tmpl5', name: 'Voice discovery call · 4-min', cat: 'VOICE', icon: 'Phone', author: 'Demiurge', desc: 'Outbound discovery dialer. Hands off to AE on positive signal.', uses: 218, rating: 86 },
    { id: 'tmpl6', name: 'LinkedIn engagement bot', cat: 'CONTENT', icon: 'Megaphone', author: 'Demiurge', desc: 'Replies to comments on your posts in your voice. You approve before send.', uses: 184, rating: 84 },
    { id: 'tmpl7', name: 'Stripe failed payment recovery', cat: 'OPS', icon: 'Database', author: 'Community · @rohan', desc: 'Webhook-triggered retry sequence. Email → SMS → human escalation.', uses: 142, rating: 90 },
    { id: 'tmpl8', name: 'Webinar attendance booster', cat: 'EVENT', icon: 'Calendar', author: 'Community · @nina', desc: 'D-7 → D-1 → 1h reminder sequence. Personalized for each segment.', uses: 84, rating: 89 },
    { id: 'tmpl9', name: 'Tier-1 support deflection', cat: 'SUPPORT', icon: 'Inbox', author: 'Demiurge', desc: 'Reads support inbox, answers what it can, routes the rest to humans with context.', uses: 412, rating: 92 },
  ];
  const cats = ['ALL', ...new Set(templates.map(t => t.cat))];
  const [cat, setCat] = React.useState('ALL');
  const filtered = templates.filter(t => cat === 'ALL' || t.cat === cat);

  return (
    <div>
      <div className="page-hd">
        <div className="page-hd-l">
          <div className="page-eyebrow">Library · {templates.length} templates · curated + community</div>
          <h1 className="page-title">Templates</h1>
          <div className="page-sub">Pre-built playbooks for every operator role. Fork one, customize, deploy in under a minute.</div>
        </div>
        <div className="page-hd-r">
          <button className="btn"><Icon.Filter className="icon"/>Filter</button>
          <button className="btn primary"><Icon.Plus className="icon"/>Submit template</button>
        </div>
      </div>

      <div style={{ padding: '20px 24px 0', display: 'flex', gap: 4, borderBottom: '1px solid var(--border)', flexWrap: 'wrap' }}>
        {cats.map(c => (
          <button key={c} onClick={() => setCat(c)} style={{
            padding: '8px 14px',
            fontSize: 11,
            fontFamily: 'var(--font-mono)',
            letterSpacing: '0.06em',
            color: cat === c ? 'var(--text)' : 'var(--text-dim)',
            borderBottom: cat === c ? '2px solid var(--violet)' : '2px solid transparent',
            marginBottom: -1,
          }}>{c}</button>
        ))}
      </div>

      <div style={{ padding: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: 14 }}>
          {filtered.map(t => {
            const I = Icon[t.icon] || Icon.Bolt;
            return (
              <div key={t.id} className="agent-card" style={{ cursor: 'pointer' }}>
                <div className="agent-hd">
                  <div className="agent-avatar"><I/></div>
                  <div className="agent-info">
                    <div className="row" style={{ justifyContent: 'space-between' }}>
                      <span className="serif" style={{ fontSize: 16, fontStyle: 'italic' }}>{t.name}</span>
                    </div>
                    <span className="row" style={{ gap: 8, marginTop: 2 }}>
                      <span className="mono faint" style={{ fontSize: 10, letterSpacing: '0.08em' }}>{t.cat}</span>
                      <span className="faint mono" style={{ fontSize: 10 }}>· by {t.author}</span>
                    </span>
                  </div>
                </div>
                <div style={{ fontSize: 12, color: 'var(--text-dim)', marginBottom: 14, lineHeight: 1.55, minHeight: 50 }}>{t.desc}</div>
                <div className="row" style={{ justifyContent: 'space-between', paddingTop: 12, borderTop: '1px solid var(--border)' }}>
                  <span className="row mono" style={{ gap: 12, fontSize: 11 }}>
                    <span className="dim">{t.uses.toLocaleString()} deployed</span>
                    <span className="row" style={{ gap: 4 }}><Icon.Star style={{ width: 11, height: 11, color: 'var(--warn)' }}/>{t.rating}</span>
                  </span>
                  <button className="btn sm">Deploy <Icon.ChevronR className="icon" style={{ width: 12, height: 12 }}/></button>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.Templates = Templates;