// Community page — Discover collections published by content creators
// Dribbble-style visual grid with tall image cards + collection metadata

function CommunityPage() {
  const [activeTab, setActiveTab] = React.useState('discover');
  const [activeCategory, setActiveCategory] = React.useState('all');

  const categories = [
    { id: 'all', label: 'All' },
    { id: 'ai', label: 'AI & ML' },
    { id: 'product', label: 'Product' },
    { id: 'design', label: 'Design' },
    { id: 'engineering', label: 'Engineering' },
    { id: 'marketing', label: 'Marketing' },
    { id: 'startups', label: 'Startups' },
    { id: 'leadership', label: 'Leadership' },
    { id: 'finance', label: 'Finance' },
  ];

  const collections = [
    {
      id: 'c1', source: 'Lenny Rachitsky', sourceType: 'LinkedIn',
      title: "Lenny's Podcast Transcripts",
      desc: 'Projects to access Lenny\'s Podcast Insights',
      tags: ['Product', 'Growth'],
      favorites: 4200, items: 186,
      bannerColor: '#FDDCB5', bannerAccent: '#F97316',
      category: 'product', trending: true,
      bannerPattern: 'radial-gradient(circle at 75% 40%, #F97316 0%, #FDDCB5 70%)',
    },
    {
      id: 'c2', source: 'Aakash Gupta', sourceType: 'Substack',
      title: 'Premium AI PM Resources',
      desc: 'Complete PM MBA by Aakash Gupta',
      tags: ['AI PM', 'Deep-dives'],
      favorites: 3100, items: 94,
      bannerColor: '#1a1a2e', bannerAccent: '#6366F1',
      category: 'ai', trending: true,
      bannerPattern: 'linear-gradient(135deg, #1a1a2e 0%, #3730A3 100%)',
    },
    {
      id: 'c3', source: 'Julie Zhuo', sourceType: 'Substack',
      title: 'The Looking Glass Archive',
      desc: 'Essays on design, management, and building products',
      tags: ['Design', 'Management'],
      favorites: 5800, items: 243,
      bannerColor: '#FEE2E2', bannerAccent: '#EF4444',
      category: 'design', trending: true,
      bannerPattern: 'linear-gradient(145deg, #FEE2E2 0%, #FECACA 50%, #FCA5A5 100%)',
    },
    {
      id: 'c4', source: 'Sahil Bloom', sourceType: 'X',
      title: 'Frameworks for Life & Business',
      desc: 'Mental models, decision frameworks, and life lessons',
      tags: ['Frameworks', 'Wisdom'],
      favorites: 2900, items: 127,
      bannerColor: '#DBEAFE', bannerAccent: '#2563EB',
      category: 'startups',
      bannerPattern: 'linear-gradient(160deg, #DBEAFE 0%, #93C5FD 100%)',
    },
    {
      id: 'c5', source: 'Wes Kao', sourceType: 'LinkedIn',
      title: 'Executive Communication Playbook',
      desc: 'How to communicate with rigor and clarity',
      tags: ['Communication', 'Career'],
      favorites: 1800, items: 68,
      bannerColor: '#F0FDF4', bannerAccent: '#10B981',
      category: 'leadership',
      bannerPattern: 'linear-gradient(135deg, #F0FDF4 0%, #A7F3D0 100%)',
    },
    {
      id: 'c6', source: 'The Pragmatic Engineer', sourceType: 'Substack',
      title: 'Inside Big Tech Engineering',
      desc: 'Deep dives into engineering practices at scale',
      tags: ['Engineering', 'Architecture'],
      favorites: 6200, items: 312,
      bannerColor: '#1F2937', bannerAccent: '#F59E0B',
      category: 'engineering', trending: true,
      bannerPattern: 'linear-gradient(135deg, #1F2937 0%, #374151 60%, #F59E0B22 100%)',
    },
    {
      id: 'c7', source: 'Li Jin', sourceType: 'Substack',
      title: 'Creator Economy Deep Dives',
      desc: 'The future of the passion economy and creator tools',
      tags: ['Creators', 'Venture'],
      favorites: 2100, items: 89,
      bannerColor: '#FAE8FF', bannerAccent: '#A855F7',
      category: 'startups',
      bannerPattern: 'linear-gradient(145deg, #FAE8FF 0%, #E9D5FF 100%)',
    },
    {
      id: 'c8', source: 'Packy McCormick', sourceType: 'Substack',
      title: 'Not Boring Collection',
      desc: 'Optimistic deep dives on business strategy and tech',
      tags: ['Strategy', 'Tech'],
      favorites: 3400, items: 156,
      bannerColor: '#FEF3C7', bannerAccent: '#D97706',
      category: 'startups', trending: true,
      bannerPattern: 'linear-gradient(160deg, #FEF3C7 0%, #FDE68A 100%)',
    },
    {
      id: 'c9', source: 'Emily Zhang', sourceType: 'LinkedIn',
      title: 'AI Research Paper Summaries',
      desc: 'Weekly breakdowns of the most impactful ML papers',
      tags: ['Research', 'ML'],
      favorites: 4500, items: 210,
      bannerColor: '#0F172A', bannerAccent: '#38BDF8',
      category: 'ai', trending: true,
      bannerPattern: 'linear-gradient(135deg, #0F172A 0%, #1E3A5F 60%, #38BDF822 100%)',
    },
    {
      id: 'c10', source: 'Adam Grant', sourceType: 'LinkedIn',
      title: 'Rethinking Work Culture',
      desc: 'Evidence-based insights on leadership and org psychology',
      tags: ['Leadership', 'Psychology'],
      favorites: 7100, items: 198,
      bannerColor: '#ECFDF5', bannerAccent: '#059669',
      category: 'leadership', trending: true,
      bannerPattern: 'linear-gradient(145deg, #ECFDF5 0%, #6EE7B7 100%)',
    },
    {
      id: 'c11', source: 'Lenny Rachitsky', sourceType: 'Substack',
      title: 'Growth Tactics Vault',
      desc: 'Proven growth strategies from top PMs and founders',
      tags: ['Growth', 'Tactics'],
      favorites: 3800, items: 145,
      bannerColor: '#FFF1F2', bannerAccent: '#E11D48',
      category: 'marketing',
      bannerPattern: 'linear-gradient(160deg, #FFF1F2 0%, #FECDD3 100%)',
    },
    {
      id: 'c12', source: 'Shreyas Doshi', sourceType: 'X',
      title: 'Product Craft Threads',
      desc: 'Curated threads on product management craft and strategy',
      tags: ['Product', 'Strategy'],
      favorites: 2600, items: 74,
      bannerColor: '#EFF6FF', bannerAccent: '#3B82F6',
      category: 'product',
      bannerPattern: 'linear-gradient(135deg, #EFF6FF 0%, #BFDBFE 100%)',
    },
  ];

  const sourceTypeColors = {
    LinkedIn: { color: '#0A66C2', bg: '#EFF6FF' },
    Substack: { color: '#FF6719', bg: '#FFF7ED' },
    X: { color: '#536471', bg: '#F3F4F6' },
  };

  const filtered = activeTab === 'trending'
    ? collections.filter(c => c.trending).sort((a, b) => b.favorites - a.favorites)
    : activeCategory === 'all'
      ? collections
      : collections.filter(c => c.category === activeCategory);

  const formatCount = (n) => n >= 1000 ? (n / 1000).toFixed(1).replace(/\.0$/, '') + 'k' : n;

  return (
    <div className="main-inner wide">
      <div className="page-head">
        <div>
          <span className="page-section-chip chip-muted">
            <I.Globe className="icon icon-xs" style={{width:10,height:10}} /> Community
          </span>
          <h1 className="page-title">Community</h1>
          <p className="page-subtitle">Discover collections published by content creators and thought leaders</p>
        </div>
        <div className="page-actions">
          <button className="btn btn-ghost btn-sm"><I.Filter className="icon icon-sm" /> Filters</button>
          <button className="btn btn-primary btn-sm"><I.Plus className="icon icon-sm" /> Publish collection</button>
        </div>
      </div>

      {/* Tabs: Discover / Trending */}
      <div style={{ display:'flex', gap:0, borderBottom:'1.5px solid var(--border-sub)', marginBottom:0 }}>
        {[
          { id: 'discover', label: 'Discover', icon: I.Globe },
          { id: 'trending', label: 'Trending', icon: I.ArrowUp },
        ].map(t => {
          const TabIcon = t.icon;
          return (
            <button
              key={t.id}
              onClick={() => setActiveTab(t.id)}
              style={{
                display:'inline-flex', alignItems:'center', gap:5,
                padding:'10px 16px', border:'none', background:'none', cursor:'pointer',
                fontSize:13, fontWeight: activeTab === t.id ? 600 : 400, fontFamily:'inherit',
                color: activeTab === t.id ? 'var(--blue)' : 'var(--text-3)',
                borderBottom: activeTab === t.id ? '2px solid var(--blue)' : '2px solid transparent',
                marginBottom:'-1.5px', transition:'all 150ms ease',
              }}
            >
              <TabIcon className="icon icon-xs" style={{ width:14, height:14 }} />
              {t.label}
            </button>
          );
        })}
      </div>

      {/* Category pills (only on Discover tab) */}
      {activeTab === 'discover' && (
        <div className="community-cat-pills" style={{ display:'flex', gap:6, padding:'16px 0 8px', flexWrap:'wrap' }}>
          {categories.map(cat => (
            <button
              key={cat.id}
              onClick={() => setActiveCategory(cat.id)}
              style={{
                padding:'6px 14px', borderRadius:20, border:'1px solid var(--border)',
                background: activeCategory === cat.id ? 'var(--text-1)' : 'var(--surface)',
                color: activeCategory === cat.id ? 'var(--bg)' : 'var(--text-3)',
                fontSize:12, fontWeight:500, cursor:'pointer', fontFamily:'inherit',
                transition:'all 150ms ease',
              }}
            >{cat.label}</button>
          ))}
        </div>
      )}

      {/* Trending header */}
      {activeTab === 'trending' && (
        <div style={{ padding:'16px 0 8px', display:'flex', alignItems:'center', gap:8 }}>
          <div style={{ width:6, height:6, borderRadius:'50%', background:'#EF4444', animation:'pulse 2s infinite' }}></div>
          <span style={{ fontSize:12, fontWeight:600, color:'var(--text-3)' }}>
            Collections growing fastest this week · sorted by favorites
          </span>
        </div>
      )}

      {/* Grid / Carousel */}
      <div className="community-grid" style={{
        display:'grid',
        gridTemplateColumns:'repeat(3, 1fr)',
        gap:16,
        paddingTop:12,
        paddingBottom:48,
      }}>
        {filtered.map((col, i) => {
          const stc = sourceTypeColors[col.sourceType] || { color: '#666', bg: '#F5F5F5' };
          const isLight = ['#FDDCB5','#FEE2E2','#DBEAFE','#F0FDF4','#FAE8FF','#FEF3C7','#ECFDF5','#FFF1F2','#EFF6FF'].includes(col.bannerColor);

          return (
            <div
              key={col.id}
              className="card"
              style={{
                padding:0, overflow:'hidden', cursor:'pointer',
                transition:'box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease)',
                animation:'fadeUp var(--t-base) var(--ease) both',
                animationDelay: `${i * 0.03}s`,
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow='var(--shadow-md)'; e.currentTarget.style.transform='translateY(-3px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow='none'; e.currentTarget.style.transform='translateY(0)'; }}
            >
              {/* Banner image area */}
              <div style={{
                background: col.bannerPattern,
                height:180,
                position:'relative',
                overflow:'hidden',
              }}>
                {/* Source badge */}
                <div style={{
                  position:'absolute', top:12, left:12,
                  background:'rgba(255,255,255,0.92)', backdropFilter:'blur(8px)',
                  padding:'4px 10px', borderRadius:6,
                  fontSize:10, fontWeight:700, letterSpacing:'0.06em', textTransform:'uppercase',
                  color: col.bannerAccent,
                }}>
                  SOURCE: {col.source.toUpperCase()}
                </div>

                {/* Decorative elements based on category */}
                <div style={{
                  position:'absolute', bottom:16, right:16,
                  width:48, height:48, borderRadius:12,
                  background:'rgba(255,255,255,0.15)',
                  backdropFilter:'blur(4px)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  color: isLight ? col.bannerAccent : 'rgba(255,255,255,0.7)',
                  fontSize:20,
                }}>
                  {col.category === 'ai' ? '⚡' : col.category === 'product' ? '◆' : col.category === 'design' ? '◎' : col.category === 'engineering' ? '⚙' : col.category === 'marketing' ? '▲' : col.category === 'leadership' ? '★' : col.category === 'startups' ? '◇' : col.category === 'finance' ? '$' : '●'}
                </div>

                {/* Items count badge */}
                <div style={{
                  position:'absolute', bottom:12, left:12,
                  background:'rgba(0,0,0,0.5)', backdropFilter:'blur(6px)',
                  padding:'3px 8px', borderRadius:5,
                  fontSize:10, fontWeight:600, color:'#fff',
                }}>
                  {col.items} items
                </div>
              </div>

              {/* Card body */}
              <div style={{ padding:'14px 16px 16px' }}>
                {/* Source type indicator */}
                <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:8 }}>
                  <span style={{ width:7, height:7, borderRadius:'50%', background: stc.color }}></span>
                  <span style={{ fontSize:11, color:'var(--text-4)', fontWeight:500 }}>{col.sourceType}</span>
                </div>

                {/* Title */}
                <div style={{ fontSize:15, fontWeight:700, color:'var(--text-1)', letterSpacing:'-0.01em', marginBottom:4, lineHeight:1.3 }}>
                  {col.title}
                </div>

                {/* Description */}
                <div style={{ fontSize:12, color:'var(--text-3)', lineHeight:1.5, marginBottom:10 }}>
                  {col.desc}
                </div>

                {/* Tags */}
                <div style={{ display:'flex', gap:5, flexWrap:'wrap', marginBottom:12 }}>
                  {col.tags.map(t => (
                    <span key={t} style={{
                      padding:'3px 10px', borderRadius:14, border:'1px solid var(--border)',
                      fontSize:11, color:'var(--text-3)', fontWeight:500,
                    }}>{t}</span>
                  ))}
                </div>

                {/* Footer: favorites + save */}
                <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', paddingTop:8, borderTop:'0.5px solid var(--border-sub)' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:12 }}>
                    <div style={{ display:'flex', alignItems:'center', gap:4, fontSize:12, color:'var(--text-3)' }}>
                      <I.Star className="icon icon-xs" style={{ width:13, height:13, fill: col.trending ? '#F59E0B' : 'none', color: col.trending ? '#F59E0B' : 'var(--text-4)' }} />
                      <span style={{ fontWeight:600 }}>{formatCount(col.favorites)}</span>
                    </div>
                    <div style={{ display:'flex', alignItems:'center', gap:4, fontSize:12, color:'var(--text-4)' }}>
                      <I.Bookmark className="icon icon-xs" style={{ width:13, height:13 }} />
                    </div>
                  </div>
                  <button className="btn btn-ghost btn-sm" style={{ fontSize:11, padding:'4px 10px' }}>
                    + Follow
                  </button>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

window.CommunityPage = CommunityPage;