{/* Content */}

{/* Meta & Actions */}

📍 {post.location} {isNuclear && '🔥'} • 🕒 {timeAgo(post.timestamp)}{post.editedAt ? ' (edited)' : ''} {isDetail && ( <> • 👁️ {viewsCount} views • 📅 {fullDate(post.timestamp)} )}

{isAuthor && (

)}

{/* Text */} {post.text && (

{post.text}

)} {/* Media Attachments */} {post.imageUrl && (

)} {post.videoUrl && (

)} {post.audioUrl && (

)} {/* Comments and Views count (Feed only) */} {!isDetail && (

💬 {(post.comments || []).length} replies 👁️ {viewsCount} views

)}

{/* Voting */}

e.stopPropagation()}> {post.score}

); }; return (

{currentView === 'feed' && (

{/* Header */}

Maize Memes 〽️

🐿️

{/* Tabs */}

{(sortedFeed || []).length === 0 && (

No hot takes yet. Be the first to drop one! 🔥

)} {(sortedFeed || []).map(post => ( openDetail(post.id)} /> ))}

{/* Compose FAB/Bar */}

)} {(currentView === 'compose' || currentView === 'edit') && (

{currentView === 'edit' ? 'Edit Hot Take' : 'New Hot Take'}

setComposeText(e.target.value)}
              placeholder="Spill it..."
              style={{
                width: '100%',
                minHeight: 120,
                fontSize: (composeText || []).length > 100 ? 18 : 24, border: 'none', outline: 'none', resize: 'none',
                fontFamily: 'inherit', color: '#111827', fontWeight: 700,
                animation: (composeText || []).length > 150 ? 'typing-shake 0.1s infinite' : 'none',
                ...getDeepFryStyles(composeDeepFry)
              }}
            />

{/* Media Previews */}
            {composeImage && (
              <div style={{ position: 'relative', marginTop: 16, borderRadius: 12, overflow: 'hidden' }}>
                <img src={composeImage} style={{ width: '100%', maxHeight: 200, objectFit: 'cover', display: 'block', ...getDeepFryStyles(composeDeepFry) }} alt="Preview" />
                <button onClick={() => setComposeImage(null)} style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(0,0,0,0.5)', color: '#fff', border: 'none', borderRadius: '50%', width: 32, height: 32, cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
              </div>
            )}
            {composeVideo && (
              <div style={{ position: 'relative', marginTop: 16, borderRadius: 12, overflow: 'hidden' }}>
                <video src={composeVideo} controls style={{ width: '100%', maxHeight: 200, objectFit: 'cover', display: 'block', ...getDeepFryStyles(composeDeepFry) }} />
                <button onClick={() => setComposeVideo(null)} style={{ position: 'absolute', top: 8, right: 8, background: 'rgba(0,0,0,0.5)', color: '#fff', border: 'none', borderRadius: '50%', width: 32, height: 32, cursor: 'pointer', fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
              </div>
            )}
            {composeAudio && (
              <div style={{ position: 'relative', marginTop: 16, padding: 8, backgroundColor: '#f9fafb', borderRadius: 12, border: '1px solid #e5e7eb', ...getDeepFryStyles(composeDeepFry) }}>
                <audio controls src={composeAudio} style={{ width: '100%', height: 40 }} />
                <button onClick={() => setComposeAudio(null)} style={{ position: 'absolute', top: -8, right: -8, background: '#ef4444', color: '#fff', border: 'none', borderRadius: '50%', width: 24, height: 24, cursor: 'pointer', fontSize: 12, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>✕</button>
              </div>
            )}

{/* Media Upload & Recording */}
            <div style={{ marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 8, paddingTop: 16 }}>
              <label style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center', gap: 8, padding: '10px 16px', backgroundColor: '#f3f4f6', borderRadius: 100, cursor: 'pointer', fontWeight: 700, color: '#4b5563' }}>
                📷 Img
                <input type="file" accept="image/*" onChange={e => handleFileChange(e, 'image')} style={{ display: 'none' }} />
              </label>

<label style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center', gap: 8, padding: '10px 16px', backgroundColor: '#f3f4f6', borderRadius: 100, cursor: 'pointer', fontWeight: 700, color: '#4b5563' }}>
                🎞️ Vid
                <input type="file" accept="video/*" onChange={e => handleFileChange(e, 'video')} style={{ display: 'none' }} />
              </label>

{isRecording ? (
                <button onClick={stopRecording} style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center', gap: 8, padding: '10px 16px', backgroundColor: '#ef4444', color: '#fff', borderRadius: 100, cursor: 'pointer', fontWeight: 700, border: 'none', animation: 'nuclear-shake 0.3s infinite' }}>
                  🛑 Stop
                </button>
              ) : (
                <button onClick={startRecording} style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center', gap: 8, padding: '10px 16px', backgroundColor: '#f3f4f6', borderRadius: 100, cursor: 'pointer', fontWeight: 700, color: '#4b5563', border: 'none' }}>
                  🎤 Mic
                </button>
              )}
            </div>

{/* Unhinged Tools Panel */}
            <div style={{ marginTop: 16, backgroundColor: '#f9fafb', borderRadius: 16, padding: 12, border: '1px solid #e5e7eb' }}>
              <div style={{ fontSize: 12, fontWeight: 800, color: '#4b5563', textTransform: 'uppercase', marginBottom: 8, letterSpacing: 1 }}>
                Chaos Modifiers
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                <button 
                  onClick={() => setComposeDeepFry(f => f + 1)}
                  style={{ flex: 1, minWidth: '40%', padding: '10px', borderRadius: 8, border: composeDeepFry > 0 ? '2px solid #ef4444' : '1px solid #d1d5db', backgroundColor: composeDeepFry > 0 ? '#fef08a' : '#fff', fontWeight: 800, fontSize: 14, cursor: 'pointer' }}
                >
                  🍟 Deep Fry {composeDeepFry > 0 ? `(Lvl ${composeDeepFry})` : ''}
                </button>
                <button 
                  onClick={() => handleTextTransform('spongebob')}
                  style={{ flex: 1, minWidth: '25%', padding: '10px', borderRadius: 8, border: '1px solid #d1d5db', backgroundColor: '#fff', fontWeight: 800, fontSize: 14, cursor: 'pointer' }}
                >
                  🧽 SpOnGe
                </button>
                <button 
                  onClick={() => handleTextTransform('scream')}
                  style={{ flex: 1, minWidth: '25%', padding: '10px', borderRadius: 8, border: '1px solid #d1d5db', backgroundColor: '#fff', fontWeight: 800, fontSize: 14, cursor: 'pointer' }}
                >
                  🤬 SCREAM
                </button>
                <button 
                  onClick={() => handleTextTransform('zalgo')}
                  style={{ flex: 1, minWidth: '100%', padding: '10px', borderRadius: 8, border: '1px solid #000', backgroundColor: '#000', color: '#00FFCC', fontWeight: 800, fontSize: 14, cursor: 'pointer', fontFamily: 'monospace' }}
                >
                  👹 Cursed / Zalgo
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

{currentView === 'detail' && (
        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', backgroundColor: '#f2f4f7' }}>
          <div style={{ display: 'flex', alignItems: 'center', padding: 'max(env(safe-area-inset-top, 20px), 20px) 16px 16px', backgroundColor: '#00274C', color: '#fff', position: 'sticky', top: 0, zIndex: 10, boxShadow: '0 2px 10px rgba(0,0,0,0.1)' }}>
            <button onClick={closeDetail} style={{ background: 'none', border: 'none', color: '#FFCB05', fontSize: 24, cursor: 'pointer', marginRight: 16 }}>←</button>
            <div style={{ fontSize: 18, fontWeight: 900, textTransform: 'uppercase', letterSpacing: 1 }}>Thread</div>
          </div>
          
          <div style={{ padding: 16, flex: 1, overflowY: 'auto' }}>
            {(() => {
              const post = (feed || []).find(y => y.id === selectedPostId);
              if (!post) return <div style={{ textAlign: 'center', padding: 40, fontWeight: 700, color: '#9ca3af' }}>Post deleted.</div>;
              return (
                <>
                  <PostCard post={post} isDetail={true} />
                  <div style={{ marginTop: 16, backgroundColor: '#fff', borderRadius: 16, overflow: 'hidden', border: '1px solid #e5e7eb', boxShadow: '0 2px 8px rgba(0,0,0,0.04)' }}>
                    <div style={{ padding: 12, backgroundColor: '#f9fafb', borderBottom: '1px solid #e5e7eb', fontSize: 13, fontWeight: 800, color: '#4b5563', textTransform: 'uppercase', letterSpacing: 1 }}>
                      Comments ({(post.comments || []).length})
                    </div>
                    {(post.comments || []).map(comment => {
                      const isCommentAuthor = comment.authorId === currentUserId;
                      return (
                        <div key={comment.id} style={{ padding: 16, borderBottom: '1px solid #e5e7eb' }}>
                          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 4 }}>
                            <div style={{ display: 'flex', gap: 8, fontSize: 12, color: '#6b7280', fontWeight: 600, flexWrap: 'wrap' }}>
                              <span>💬 🐿️ Anon</span>
                              <span>•</span>
                              <span>🕒 {timeAgo(comment.timestamp)}{comment.editedAt ? ' (edited)' : ''}</span>
                            </div>
                            
                            {isCommentAuthor && (
                              <div style={{ display: 'flex', gap: 8, marginLeft: 8 }}>
                                <button 
                                  onClick={() => { setEditingCommentId(comment.id); setCommentText(comment.text); }} 
                                  style={{ background: 'rgba(0,39,76,0.05)', border: 'none', color: '#00274C', cursor: 'pointer', padding: '4px 8px', borderRadius: 4, fontSize: 12, fontWeight: 700 }}
                                >
                                  Edit
                                </button>
                                <button 
                                  onClick={() => handleDeleteComment(post.id, comment.id)} 
                                  style={{ background: 'rgba(239,68,68,0.1)', border: 'none', color: '#ef4444', cursor: 'pointer', padding: '4px 8px', borderRadius: 4, fontSize: 12, fontWeight: 700 }}
                                >
                                  Delete
                                </button>
                              </div>
                            )}
                          </div>
                          <div style={{ fontSize: 15, color: '#111827', lineHeight: 1.4, whiteSpace: 'pre-wrap' }}>
                            {comment.text}
                          </div>
                        </div>
                      );
                    })}
                    {(post.comments || []).length === 0 && (
                      <div style={{ padding: 32, textAlign: 'center', color: '#9ca3af', fontSize: 14, fontWeight: 600 }}>
                        It's quiet... Too quiet. Drop a reply!
                      </div>
                    )}
                  </div>
                </>
              );
            })()}
          </div>

{/* Comment input */}
          <div style={{ padding: '16px 16px env(safe-area-inset-bottom, 16px)', backgroundColor: '#fff', borderTop: '1px solid #e5e7eb', display: 'flex', flexDirection: 'column', gap: 8, boxShadow: '0 -4px 10px rgba(0,0,0,0.02)' }}>
            {editingCommentId && (
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#6b7280', fontWeight: 600, padding: '0 4px' }}>
                <span>Editing comment...</span>
                <button 
                  onClick={() => { setEditingCommentId(null); setCommentText(''); }} 
                  style={{ background: 'none', border: 'none', color: '#6b7280', cursor: 'pointer', textDecoration: 'underline' }}
                >
                  Cancel Edit
                </button>
              </div>
            )}
            <div style={{ display: 'flex', gap: 12 }}>
              <input 
                value={commentText}
                onChange={e => setCommentText(e.target.value)}
                placeholder={editingCommentId ? "Edit your comment..." : "Add a comment..."}
                style={{ flex: 1, padding: '12px 16px', borderRadius: 100, border: '2px solid #e5e7eb', fontSize: 16, outline: 'none', fontWeight: 600, fontFamily: 'inherit' }}
              />
              <button 
                onClick={() => handleComment(selectedPostId, commentText)}
                disabled={!commentText.trim()}
                style={{ backgroundColor: '#00274C', color: '#FFCB05', border: 'none', borderRadius: 100, padding: '0 24px', fontWeight: 900, cursor: commentText.trim() ? 'pointer' : 'default', opacity: commentText.trim() ? 1 : 0.5, textTransform: 'uppercase', letterSpacing: 1 }}
              >
                {editingCommentId ? 'Save' : 'Send'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>