{/* Ambient particles */} {[...Array(8)].map((_, i) => (

))} {/* Spark burst effect */} {local.sparkBurst && (

{[...Array(6)].map((_, i) => (

✨

))}

)} {/* Header - Book spine */}

━━ UT AUSTIN ━━

EST. MDCCCXXXIII · HOOK 'EM

{/* Page navigation tabs */}

{(pages || []).map((p, i) => ( ))}

{/* Main content area - The Tome */}

{/* Filigree corners */}

❧

{/* Gold border line */}

{/* Page title */}

{currentPageData.title}

{currentPageData.subtitle}

{currentPageData.desc}

{/* Scrollable content zone */}

{/* PAGE 0: The Grimoire cover */} {currentPage === 0 && (

📖

"Within these pages lies the collected wisdom of scholars who walk the Forty Acres. Each entry, a candle lit against the dark — together, an illumination."

{/* Live stats */}

{[ { label: 'Inscriptions', value: (quillEntries || []).length, icon: '🪶' }, { label: 'Scholars', value: (memberList || []).length, icon: '🎓' }, { label: 'Illuminations', value: Object.keys(votes || {}).length, icon: '⭐' } ].map((s, i) => (

{s.icon}

{s.value}

{s.label}

))}

{/* Tap prompt */}

━ Turn the pages above to explore ━

)} {/* PAGE 1: The Quill Hall - Write entries */} {currentPage === 1 && (

{/* Quill input */}

🪶 INSCRIBE YOUR WISDOM

saveData({ ...state, newEntry: e.target.value })}
                  placeholder="Share a secret, a thought, a piece of Longhorn lore..."
                  style={{
                    width: '100%',
                    minHeight: 80,
                    background: 'rgba(30,24,18,0.8)',
                    border: '1px solid rgba(201,168,76,0.2)',
                    borderRadius: 10,
                    padding: 14,
                    color: '#E8DCC8',
                    fontFamily: 'inherit',
                    fontSize: 15,
                    resize: 'none',
                    outline: 'none',
                    boxSizing: 'border-box',
                    lineHeight: 1.6
                  }}
                  maxLength={280}
                />
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 10 }}>
                  <span style={{ fontSize: 12, color: '#8B7355' }}>
                    {(newEntry ?? '').length}/280
                  </span>
                  <button
                    onClick={addEntry}
                    disabled={!(newEntry ?? '').trim()}
                    style={{
                      background: (newEntry ?? '').trim() ? 'linear-gradient(135deg, #C9A84C, #A07830)' : 'rgba(201,168,76,0.15)',
                      border: 'none',
                      borderRadius: 20,
                      padding: '10px 24px',
                      color: (newEntry ?? '').trim() ? '#1a1510' : '#8B7355',
                      fontFamily: 'inherit',
                      fontSize: 14,
                      fontWeight: 700,
                      cursor: (newEntry ?? '').trim() ? 'pointer' : 'default',
                      transition: baseTransition,
                      letterSpacing: 1
                    }}
                  >
                    INSCRIBE ✦
                  </button>
                </div>
              </div>

{/* Recent entries */}
              <div style={{ fontSize: 12, color: '#8B7355', letterSpacing: 2, marginBottom: 12 }}>RECENT INSCRIPTIONS</div>
              {(sortedEntries || []).slice(0, 8).map((entry, i) => {
                const e = entry ?? {};
                const voted = hasVoted(e.id);
                const count = getVoteCount(e.id);
                return (
                  <div key={e.id ?? i} style={{
                    background: 'rgba(201,168,76,0.04)',
                    borderRadius: 12,
                    padding: 14,
                    marginBottom: 10,
                    border: '1px solid rgba(201,168,76,0.08)',
                    animation: `slideUp 0.4s ease ${i * 0.08}s both`,
                    transition: baseTransition
                  }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
                      <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 12, color: '#C9A84C', marginBottom: 6 }}>
                          {e.emoji ?? '📜'} {e.author ?? 'Unknown'}
                        </div>
                        <div style={{ fontSize: 15, lineHeight: 1.6, color: '#D4C5A9' }}>
                          {e.text ?? ''}
                        </div>
                      </div>
                      <button
                        onClick={() => voteEntry(e.id)}
                        style={{
                          background: voted ? 'rgba(201,168,76,0.2)' : 'rgba(201,168,76,0.06)',
                          border: `1px solid ${voted ? '#C9A84C' : 'rgba(201,168,76,0.15)'}`,
                          borderRadius: 20,
                          padding: '6px 12px',
                          cursor: 'pointer',
                          transition: baseTransition,
                          transform: voted ? 'scale(1.05)' : 'scale(1)',
                          display: 'flex',
                          alignItems: 'center',
                          gap: 4,
                          flexShrink: 0
                        }}
                      >
                        <span style={{ fontSize: 16 }}>{voted ? '⭐' : '☆'}</span>
                        <span style={{ fontSize: 13, color: '#C9A84C', fontFamily: 'inherit' }}>{count}</span>
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          )}

{/* PAGE 2: Gallery of top illuminations */}
          {currentPage === 2 && (
            <div style={{ animation: 'slideUp 0.5s ease' }}>
              <div style={{ fontSize: 12, color: '#8B7355', letterSpacing: 2, marginBottom: 16, textAlign: 'center' }}>
                MOST ILLUMINATED PASSAGES
              </div>
              {(topEntries || []).length === 0 && (
                <div style={{ textAlign: 'center', color: '#8B7355', fontSize: 14, padding: 40 }}>
                  No illuminations yet. Visit the Quill Hall to begin.
                </div>
              )}
              {(topEntries || []).map((entry, i) => {
                const e = entry ?? {};
                const count = getVoteCount(e.id);
                const isTop = i === 0;
                return (
                  <div key={e.id ?? i} style={{
                    background: isTop ? 'linear-gradient(135deg, rgba(201,168,76,0.12), rgba(160,120,48,0.08))' : 'rgba(201,168,76,0.04)',
                    borderRadius: 14,
                    padding: isTop ? 20 : 14,
                    marginBottom: 12,
                    border: `1px solid ${isTop ? 'rgba(201,168,76,0.3)' : 'rgba(201,168,76,0.08)'}`,
                    animation: `slideUp 0.5s ease ${i * 0.1}s both`,
                    position: 'relative',
                    overflow: 'hidden'
                  }}>
                    {isTop && (
                      <div style={{
                        position: 'absolute',
                        top: -5,
                        right: -5,
                        fontSize: 48,
                        opacity: 0.1,
                        transform: 'rotate(15deg)'
                      }}>👑</div>
                    )}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                      <span style={{
                        background: 'linear-gradient(135deg, #C9A84C, #A07830)',
                        color: '#1a1510',
                        borderRadius: 12,
                        padding: '2px 10px',
                        fontSize: 13,
                        fontWeight: 700
                      }}>#{i + 1}</span>
                      <span style={{ fontSize: 12, color: '#C9A84C' }}>{e.author ?? 'Unknown'}</span>
                      <span style={{ marginLeft: 'auto', fontSize: 14 }}>⭐ {count}</span>
                    </div>
                    <div style={{
                      fontSize: isTop ? 17 : 15,
                      lineHeight: 1.7,
                      color: isTop ? '#E8DCC8' : '#C4B59A',
                      fontStyle: isTop ? 'italic' : 'normal'
                    }}>
                      "{e.text ?? ''}"
                    </div>
                  </div>
                );
              })}
            </div>
          )}

{/* PAGE 3: Circle of Scholars */}
          {currentPage === 3 && (
            <div style={{ animation: 'slideUp 0.5s ease' }}>
              <div style={{ fontSize: 12, color: '#8B7355', letterSpacing: 2, marginBottom: 16, textAlign: 'center' }}>
                THOSE GATHERED IN THIS SANCTUM
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
                {(memberList || []).map((m, i) => {
                  const member = m ?? {};
                  const entryCount = (quillEntries || []).filter(e => (e?.authorId) === member.id).length;
                  return (
                    <div key={member.id ?? i} style={{
                      background: 'rgba(201,168,76,0.06)',
                      borderRadius: 16,
                      padding: 16,
                      width: 'calc(50% - 6px)',
                      boxSizing: 'border-box',
                      border: '1px solid rgba(201,168,76,0.12)',
                      textAlign: 'center',
                      animation: `slideUp 0.4s ease ${i * 0.1}s both`,
                      transition: baseTransition
                    }}>
                      <div style={{
                        width: 56,
                        height: 56,
                        borderRadius: '50%',
                        margin: '0 auto 10px',
                        background: member.avatarUrl ? `url(${member.avatarUrl}) center/cover` : 'linear-gradient(135deg, #C9A84C, #8B6914)',
                        border: '2px solid rgba(201,168,76,0.3)',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontSize: member.avatarUrl ? 0 : 24
                      }}>
                        {!member.avatarUrl && '🎓'}
                      </div>
                      <div style={{ fontSize: 14, fontWeight: 700, color: '#E8DCC8', marginBottom: 4 }}>
                        {member.displayName ?? 'Scholar'}
                      </div>
                      <div style={{ fontSize: 11, color: '#C9A84C', letterSpacing: 1 }}>
                        {member.role === 'owner' ? '✦ KEEPER' : '◆ SCHOLAR'}
                      </div>
                      <div style={{ fontSize: 12, color: '#8B7355', marginTop: 6 }}>
                        {entryCount} inscription{entryCount !== 1 ? 's' : ''}
                      </div>
                    </div>
                  );
                })}
              </div>

{/* Sigil */}
              <div style={{
                textAlign: 'center',
                marginTop: 28,
                padding: 20,
                background: 'rgba(201,168,76,0.04)',
                borderRadius: 14,
                border: '1px solid rgba(201,168,76,0.08)'
              }}>
                <div style={{ fontSize: 40, marginBottom: 8 }}>🤘</div>
                <div style={{ fontSize: 14, color: '#C9A84C', fontStyle: 'italic' }}>
                  "What starts here changes the world."
                </div>
                <div style={{ fontSize: 11, color: '#8B7355', marginTop: 6, letterSpacing: 2 }}>
                  THE UNIVERSITY OF TEXAS AT AUSTIN
                </div>
              </div>
            </div>
          )}
        </div>
      </div>

{/* Bottom page turn controls */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '14px 20px 8px',
        opacity: local.mounted ? 1 : 0,
        transition: 'opacity 0.6s ease 0.5s'
      }}>
        <button
          onClick={() => turnPage('left')}
          disabled={currentPage === 0}
          style={{
            background: currentPage > 0 ? 'rgba(201,168,76,0.1)' : 'transparent',
            border: `1px solid ${currentPage > 0 ? 'rgba(201,168,76,0.2)' : 'transparent'}`,
            borderRadius: 12,
            padding: '10px 18px',
            color: currentPage > 0 ? '#C9A84C' : 'rgba(201,168,76,0.2)',
            fontFamily: 'inherit',
            fontSize: 14,
            cursor: currentPage > 0 ? 'pointer' : 'default',
            transition: baseTransition
          }}
        >
          ◄ Prev
        </button>

<div style={{ fontSize: 12, color: '#8B7355', letterSpacing: 2 }}>
          {currentPage + 1} / {(pages || []).length}
        </div>

<button
          onClick={() => turnPage('right')}
          disabled={currentPage === 3}
          style={{
            background: currentPage < 3 ? 'rgba(201,168,76,0.1)' : 'transparent',
            border: `1px solid ${currentPage < 3 ? 'rgba(201,168,76,0.2)' : 'transparent'}`,
            borderRadius: 12,
            padding: '10px 18px',
            color: currentPage < 3 ? '#C9A84C' : 'rgba(201,168,76,0.2)',
            fontFamily: 'inherit',
            fontSize: 14,
            cursor: currentPage < 3 ? 'pointer' : 'default',
            transition: baseTransition
          }}
        >
          Next ►
        </button>
      </div>
    </div>
  );
}
)}</article></body></html>