From 03b4c6cafb2c374e3fa9db8400d7d61dc3386677 Mon Sep 17 00:00:00 2001
From: A Charlwood <andrew.charlwood@gmail.com>
Date: Fri, 13 Feb 2026 23:59:54 +0000
Subject: [PATCH] US-015: Modify EducationTile: richer content, panel trigger

- Show richer inline content: MPharm research score (75.1%), Mary Seacole score (78%), A-level grades
- Each education entry is now clickable -> opens detail panel
- Hover state: border color shift to teal with shadow deepening
- Use documents data from documents.ts for accurate content
- Maintains existing visual hierarchy and spacing

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/tiles/EducationTile.tsx | 157 ++++++++++++++++++-------
 1 file changed, 114 insertions(+), 43 deletions(-)

diff --git a/src/components/tiles/EducationTile.tsx b/src/components/tiles/EducationTile.tsx
index 2690c07..000d411 100644
--- a/src/components/tiles/EducationTile.tsx
+++ b/src/components/tiles/EducationTile.tsx
@@ -1,63 +1,134 @@
+import { useState } from 'react'
 import { Card, CardHeader } from '../Card'
+import { useDetailPanel } from '@/contexts/DetailPanelContext'
+import { documents } from '@/data/documents'
 
 /**
  * Education tile - displays academic qualifications
  * Full-width card below Career Activity
+ * Each entry is clickable to open detail panel
  */
 export function EducationTile() {
-  // Education entries from CV, presented in reverse chronological order
-  const educationEntries = [
-    {
-      degree: 'MPharm (Hons) — 2:1',
-      detail: 'University of East Anglia · 2015',
-    },
-    {
-      degree: 'NHS Leadership Academy — Mary Seacole Programme',
-      detail: '2018 · 78%',
-    },
-    {
-      degree: 'A-Levels: Mathematics (A*), Chemistry (B), Politics (C)',
-      detail: 'Highworth Grammar School · 2009–2011',
-    },
+  const { openPanel } = useDetailPanel()
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+
+  // Filter to main education entries in reverse chronological order
+  const educationDocuments = [
+    documents.find((d) => d.id === 'doc-mary-seacole')!,
+    documents.find((d) => d.id === 'doc-mpharm')!,
+    documents.find((d) => d.id === 'doc-alevels')!,
   ]
 
+  // Build rich inline content for each entry
+  const getInlineContent = (doc: typeof educationDocuments[0]) => {
+    switch (doc.id) {
+      case 'doc-mpharm':
+        return {
+          title: 'MPharm (Hons) — 2:1',
+          institution: 'University of East Anglia',
+          year: '2015',
+          extra: 'Research project: 75.1% (Distinction)',
+        }
+      case 'doc-mary-seacole':
+        return {
+          title: 'NHS Leadership Academy — Mary Seacole Programme',
+          institution: 'NHS Leadership Academy',
+          year: '2018',
+          extra: 'Programme score: 78%',
+        }
+      case 'doc-alevels':
+        return {
+          title: 'A-Levels',
+          institution: 'Highworth Grammar School',
+          year: '2009–2011',
+          extra: 'Mathematics A* · Chemistry B · Politics C',
+        }
+      default:
+        return {
+          title: doc.title,
+          institution: doc.institution,
+          year: doc.date,
+          extra: doc.classification,
+        }
+    }
+  }
+
   return (
     <Card full tileId="education">
       <CardHeader dotColor="purple" title="EDUCATION" />
 
       <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        {educationEntries.map((entry, index) => (
-          <div
-            key={index}
-            style={{
-              padding: '7px 10px',
-              background: 'var(--surface)',
-              border: '1px solid var(--border-light)',
-              borderRadius: 'var(--radius-sm)',
-              fontSize: '11.5px',
-              color: 'var(--text-primary)',
-            }}
-          >
-            <span
+        {educationDocuments.map((doc, index) => {
+          const content = getInlineContent(doc)
+          const isHovered = hoveredIndex === index
+
+          return (
+            <button
+              key={doc.id}
+              onClick={() => openPanel({ type: 'education', document: doc })}
+              onMouseEnter={() => setHoveredIndex(index)}
+              onMouseLeave={() => setHoveredIndex(null)}
               style={{
-                display: 'block',
-                fontWeight: 600,
+                padding: '10px 12px',
+                background: 'var(--surface)',
+                border: `1px solid ${isHovered ? 'var(--accent)' : 'var(--border-light)'}`,
+                borderRadius: 'var(--radius-sm)',
+                fontSize: '12px',
+                color: 'var(--text-primary)',
+                cursor: 'pointer',
+                textAlign: 'left',
+                transition: 'border-color 150ms ease-out, box-shadow 150ms ease-out',
+                boxShadow: isHovered
+                  ? '0 2px 8px rgba(26,43,42,0.08)'
+                  : '0 1px 2px rgba(26,43,42,0.05)',
               }}
             >
-              {entry.degree}
-            </span>
-            <span
-              style={{
-                color: 'var(--text-secondary)',
-                fontSize: '11px',
-                marginTop: '2px',
-                display: 'block',
-              }}
-            >
-              {entry.detail}
-            </span>
-          </div>
-        ))}
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'baseline',
+                  gap: '12px',
+                  marginBottom: '4px',
+                }}
+              >
+                <span style={{ fontWeight: 600, fontSize: '12.5px' }}>
+                  {content.title}
+                </span>
+                <span
+                  style={{
+                    fontFamily: 'var(--font-geist-mono)',
+                    fontSize: '10px',
+                    color: 'var(--text-tertiary)',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {content.year}
+                </span>
+              </div>
+              <div
+                style={{
+                  color: 'var(--text-secondary)',
+                  fontSize: '11px',
+                  marginBottom: '4px',
+                }}
+              >
+                {content.institution}
+              </div>
+              {content.extra && (
+                <div
+                  style={{
+                    color: 'var(--text-tertiary)',
+                    fontSize: '10.5px',
+                    fontFamily: 'var(--font-geist-mono)',
+                  }}
+                >
+                  {content.extra}
+                </div>
+              )}
+            </button>
+          )
+        })}
       </div>
     </Card>
   )