Refine admin content flow and improve Q&A mobile UX

src/AdminPage.tsx

@@ -1829,9 +1829,9 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
             <section className="admin-panel-section">
               <div className="admin-panel-head">
                 <h2>Current Series</h2>
-                <p>Update the active study card and companion guide content.</p>
+                <p>Update the active series card shown on the homepage and episodes page.</p>
               </div>
-              {FIELDS.filter(f => f.section === 'series').map(({ key, label, multiline }) => (
+              {FIELDS.filter(f => f.section === 'series' && !['studyGuideTitle', 'studyGuideDescription', 'studyGuideUrl'].includes(f.key)).map(({ key, label, multiline }) => (
                 <div className="admin-field" key={key}>
                   <label htmlFor={`field-${key}`}>{label}</label>
                   {multiline ? (
@@ -1844,6 +1844,7 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
                   )}
                 </div>
               ))}
+              <p className="admin-stats-note">Companion study guide title, description, and Amazon link are now managed in Downloads.</p>
               {renderSaveStatus()}
             </section>
           )}
@@ -2075,11 +2076,6 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
                     <label htmlFor="resources-study-guide-description">Description</label>
                     <textarea id="resources-study-guide-description" rows={3} value={form.studyGuideDescription} placeholder="Describe the study guide download." onChange={e => handleChange('studyGuideDescription', e.target.value)} />
                   </div>
-                  <div className="admin-field">
-                    <label htmlFor="resources-series-image-url">Cover Image URL</label>
-                    <input id="resources-series-image-url" type="text" value={form.seriesImageUrl} placeholder="/uploads/study-guide-cover.png" onChange={e => handleChange('seriesImageUrl', e.target.value)} />
-                    {renderImageAssetSelector(form.seriesImageUrl, value => handleChange('seriesImageUrl', value), 'resources-series-image-url-asset')}
-                  </div>
                   <div className="admin-field">
                     <label htmlFor="resources-study-guide-download-url">Primary Download URL</label>
                     <input id="resources-study-guide-download-url" type="url" value={form.studyGuideDownloadUrl} placeholder="/uploads/new-guide.pdf or https://..." onChange={e => handleChange('studyGuideDownloadUrl', e.target.value)} />
@@ -2225,7 +2221,12 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
             <section className="admin-panel-section">
               <div className="admin-panel-head">
                 <h2>Custom Links</h2>
-                <p>Add links to show in the platform buttons row or footer navigation.</p>
+                <p>Add links to show in platform buttons, footer navigation, or the More Resources download library.</p>
+              </div>
+
+              <div className="admin-panel-subhead">
+                <h3>Platform + Footer Links</h3>
+                <p>Links that appear on the listen buttons row or footer nav.</p>
               </div>
               {(form.customLinks ?? []).filter(link => link.placement !== 'resources').length === 0 && (
                 <p className="admin-stats-note">No custom links yet.</p>
@@ -2267,6 +2268,55 @@ export default function AdminPage({ content, onSave, onLogout }: Props) {
                 </div>
               ))}
               <button type="button" className="btn-admin-add" onClick={addLink}>+ Add Link</button>
+
+              <div className="admin-panel-subhead">
+                <h3>More Resources Links</h3>
+                <p>These create cards in Downloads → More guides, worksheets, and past study downloads.</p>
+              </div>
+              {(form.customLinks ?? []).filter(link => link.placement === 'resources').length === 0 && (
+                <p className="admin-stats-note">No resource links yet.</p>
+              )}
+              {(form.customLinks ?? []).filter(link => link.placement === 'resources').map(link => (
+                <div key={link.id} className="admin-array-row">
+                  <div className="admin-array-fields">
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-label-${link.id}`}>Label</label>
+                      <input id={`resources-link-label-${link.id}`} type="text" value={link.label} placeholder="Resource title" onChange={e => updateLink(link.id, 'label', e.target.value)} />
+                    </div>
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-url-${link.id}`}>Download URL</label>
+                      <input id={`resources-link-url-${link.id}`} type="url" value={link.url} placeholder="https://..." onChange={e => updateLink(link.id, 'url', e.target.value)} />
+                    </div>
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-description-${link.id}`}>Description</label>
+                      <textarea id={`resources-link-description-${link.id}`} rows={3} value={link.description ?? ''} placeholder="Description shown on the download page" onChange={e => updateLink(link.id, 'description', e.target.value)} />
+                    </div>
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-image-${link.id}`}>Image URL</label>
+                      <input id={`resources-link-image-${link.id}`} type="text" value={link.imageUrl ?? ''} placeholder="/uploads/example.png" onChange={e => updateLink(link.id, 'imageUrl', e.target.value)} />
+                      {renderImageAssetSelector(link.imageUrl, value => updateLink(link.id, 'imageUrl', value), `resources-link-image-${link.id}-asset`)}
+                    </div>
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-amazon-url-${link.id}`}>Amazon URL (optional)</label>
+                      <input id={`resources-link-amazon-url-${link.id}`} type="url" value={link.amazonUrl ?? ''} placeholder="https://amazon.com/..." onChange={e => updateLink(link.id, 'amazonUrl', e.target.value)} />
+                    </div>
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-amazon-label-${link.id}`}>Amazon Button Label</label>
+                      <input id={`resources-link-amazon-label-${link.id}`} type="text" value={link.amazonLabel ?? ''} placeholder="Get it on Amazon" onChange={e => updateLink(link.id, 'amazonLabel', e.target.value)} />
+                    </div>
+                    <div className="admin-field">
+                      <label htmlFor={`resources-link-tags-${link.id}`}>Tags</label>
+                      <input id={`resources-link-tags-${link.id}`} type="text" value={(link.tags ?? []).join(', ')} placeholder="worksheet, study, pdf" onChange={e => updateLink(link.id, 'tags', e.target.value.split(',').map(tag => tag.trim()).filter(Boolean))} />
+                    </div>
+                    <div className="admin-field">
+                      <label>Quick Action</label>
+                      <button type="button" className="btn-admin-apply" onClick={() => updateLink(link.id, 'placement', 'platforms')}>Move to Platform Buttons</button>
+                    </div>
+                  </div>
+                  <button type="button" className="btn-admin-remove" onClick={() => removeLink(link.id)}>Remove</button>
+                </div>
+              ))}
+              <button type="button" className="btn-admin-add" onClick={addResource}>+ Add Resource Link</button>
               {renderSaveStatus()}
             </section>
           )}