From 584b25720ad7056a6889648046b4360f2beb355f Mon Sep 17 00:00:00 2001
From: francy <francyenamakkal@email.com>
Date: Fri, 30 Jan 2026 01:05:11 +0100
Subject: [PATCH] feat: Enable restoring generated sheet state in Hero
 component, update Gallery sheet action labels, and add sections to mock data.

---
 src/components/Gallery.jsx |  4 ++--
 src/components/Hero.jsx    | 42 ++++++++++++++++++++++++++++++++++++++
 src/data/mockData.js       |  3 +++
 3 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/Gallery.jsx b/src/components/Gallery.jsx
index 4f89fcef..babb6893 100644
--- a/src/components/Gallery.jsx
+++ b/src/components/Gallery.jsx
@@ -49,8 +49,8 @@ export const Gallery = ({ items, title = "Most Popular Printables", onRestore })
                                     className="shadow-xl"
                                     onClick={() => onRestore && onRestore(item)}
                                 >
-                                    <Download className="mr-2" size={18} />
-                                    {onRestore ? "Open & Download" : "Download PDF"}
+                                    <Wand2 className="mr-2" size={18} />
+                                    {onRestore ? "Open in Editor" : "View Sheet"}
                                 </Button>
                             </div>
                         </div>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index 9a775ddc..777ca05e 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -12,6 +12,48 @@ export const Hero = ({ onGenerate, generatedSheet, isGenerating }) => {
     const [age, setAge] = useState(5);
     const [selectedSection, setSelectedSection] = useState('coloring');
 
+    // Sync state when a sheet is restored
+    React.useEffect(() => {
+        if (generatedSheet) {
+            setTheme(generatedSheet.title || '');
+            if (generatedSheet.age) setAge(generatedSheet.age);
+            // If sections exist, restore the first one's type as selected
+            if (generatedSheet.sections && generatedSheet.sections.length > 0) {
+                // Map section type back to ID if possible, or fallback
+                const secType = generatedSheet.sections[0].type; // e.g. "coloring"
+                // Our IDs match the types mostly, but let's be safe
+                // IDs: coloring, numbers, writing, find-the-way, counting
+                // Types from prompt: coloring|numbers|writing|find-the-way|counting
+                // So direct mapping should work.
+                // But wait, finding the ID that matches the type/id from result
+                // In App.jsx we assume result has sections. 
+                // The prompt returns 'type' and we use that? No, prompt returns 'id' and 'type'.
+                // Let's use the first section's ID if valid.
+                const secId = generatedSheet.sections[0].id; // e.g. "coloring-123"
+                // This ID from AI might be "coloring-main". We need to map it to our internal IDs: 'coloring', 'writing', 'numbers', etc.
+                // Internal IDs in Hero are: 'coloring', 'numbers', 'writing', 'find-way' (wait, it's 'find-way' not 'find-the-way'!), 'counting'.
+
+                // Let's check mockData for IDs.
+                // sections: [{id: 'find-way', label: 'Find the Way', ...}]
+
+                // AI prompt was: "find-the-way" for type.
+                // We need to map "find-the-way" -> "find-way".
+
+                const typeToId = {
+                    'coloring': 'coloring',
+                    'numbers': 'numbers',
+                    'writing': 'writing',
+                    'find-the-way': 'find-way',
+                    'counting': 'counting'
+                };
+
+                if (typeToId[secType]) {
+                    setSelectedSection(typeToId[secType]);
+                }
+            }
+        }
+    }, [generatedSheet]);
+
     const handleSectionChange = (id) => {
         if (!isGenerating) {
             setSelectedSection(id);
diff --git a/src/data/mockData.js b/src/data/mockData.js
index 257f34cf..bbae9baa 100644
--- a/src/data/mockData.js
+++ b/src/data/mockData.js
@@ -8,6 +8,7 @@ export const popularSheets = [
         type: "Math",
         bgColor: "bg-green-50",
         image: "https://images.unsplash.com/photo-1559810686-353c7a974b7c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3",
+        sections: [{ type: "Math", content: "Dinosaur Math Content (Placeholder)" }]
     },
     {
         id: 2,
@@ -18,6 +19,7 @@ export const popularSheets = [
         type: "Maze",
         bgColor: "bg-pink-50",
         image: "https://images.unsplash.com/photo-1555557760-b610c1f207d5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3",
+        sections: [{ type: "Maze", content: "Princess Maze Content (Placeholder)" }]
     },
     {
         id: 3,
@@ -28,6 +30,7 @@ export const popularSheets = [
         type: "Writing",
         bgColor: "bg-slate-50",
         image: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3",
+        sections: [{ type: "Writing", content: "Space Writing Content (Placeholder)" }]
     }
 ];