Fix splash cards: move hover state into proper React component

index.html

@@ -1439,6 +1439,38 @@ function GuitarTuner({ onBack, onGoTuner, onGoBasics, onGoSongSearch }) {
   );
 }
 
+
+function SplashCards({ onTuner, onBasics, onSearch }) {
+  const [hovered, setHovered] = useState(null);
+  const cards = [
+    {key:"tuner",  icon:"🎵", title:"Tune your guitar",  desc:"Get in tune before you play. Pluck a string and the tuner guides you.",  action:onTuner},
+    {key:"basics", icon:"📖", title:"Start from basics", desc:"New to guitar? Learn step by step from the very beginning.",              action:onBasics},
+    {key:"search", icon:"🔍", title:"Search any song",   desc:"Already know the basics? Find a song and play along with the mic.",      action:onSearch},
+  ];
+  return (
+    <div style={{display:"flex",flexDirection:"column",gap:12}}>
+      {cards.map(({key,icon,title,desc,action})=>(
+        <button key={key} onClick={action}
+          onMouseEnter={()=>setHovered(key)}
+          onMouseLeave={()=>setHovered(null)}
+          style={{background:C.bg2,
+            border:"1px solid "+(hovered===key?C.sage:C.amber),
+            borderRadius:16,padding:"20px 22px",
+            cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
+            display:"flex",alignItems:"center",gap:18,
+            transition:"border-color 0.2s"}}>
+          <div style={{fontSize:36,flexShrink:0}}>{icon}</div>
+          <div style={{flex:1}}>
+            <div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>{title}</div>
+            <div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>{desc}</div>
+          </div>
+          <div style={{color:hovered===key?C.sage:C.amber,fontSize:20,flexShrink:0,transition:"color 0.2s"}}>›</div>
+        </button>
+      ))}
+    </div>
+  );
+}
+
 function App() {
   const [splash, setSplash] = useState(true);
   const [showTuner, setShowTuner] = useState(false);
@@ -1547,36 +1579,11 @@ function App() {
             </p>
           </div>
 
-          {(()=>{
+          <SplashCards
-            const [hovered, setHovered] = React.useState(null);
+            onTuner={()=>setShowTuner(true)}
-            const cards = [
+            onBasics={()=>go(0)}
-              {key:"tuner",  icon:"🎵", title:"Tune your guitar",  desc:"Get in tune before you play. Pluck a string and the tuner guides you.",   action:()=>setShowTuner(true)},
+            onSearch={()=>go(7)}
-              {key:"basics", icon:"📖", title:"Start from basics", desc:"New to guitar? Learn step by step from the very beginning.",               action:()=>go(0)},
+          />
-              {key:"search", icon:"🔍", title:"Search any song",   desc:"Already know the basics? Find a song and play along with the mic.",       action:()=>go(7)},
-            ];
-            return (
-              <div style={{display:"flex",flexDirection:"column",gap:12}}>
-                {cards.map(({key,icon,title,desc,action})=>(
-                  <button key={key} onClick={action}
-                    onMouseEnter={()=>setHovered(key)}
-                    onMouseLeave={()=>setHovered(null)}
-                    style={{background:C.bg2,
-                      border:"1px solid "+(hovered===key?C.sage:C.amber),
-                      borderRadius:16,padding:"20px 22px",
-                      cursor:"pointer",textAlign:"left",fontFamily:"sans-serif",
-                      display:"flex",alignItems:"center",gap:18,
-                      transition:"border-color 0.2s"}}>
-                    <div style={{fontSize:36,flexShrink:0}}>{icon}</div>
-                    <div style={{flex:1}}>
-                      <div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:3}}>{title}</div>
-                      <div style={{fontSize:13,color:C.muted,lineHeight:1.5}}>{desc}</div>
-                    </div>
-                    <div style={{color:hovered===key?C.sage:C.amber,fontSize:20,flexShrink:0,transition:"color 0.2s"}}>›</div>
-                  </button>
-                ))}
-              </div>
-            );
-          })()}
         </div>
       </div>
     </div>