New redesign

Co-authored-by: Copilot <copilot@github.com>

app/page.tsx

@@ -2,6 +2,9 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { AudioPlayer, CapacitorWindow, STREAM_URL } from './AudioPlayer';
+import { RadioControls } from './components/RadioControls';
+import { WebsitePanel } from './components/WebsitePanel';
+import { ACTIVE_SITE } from './config/sites';
 
 export default function HomePage() {
   const audioRef = useRef<HTMLAudioElement | null>(null);
@@ -39,25 +42,21 @@ export default function HomePage() {
   }, [player, backgroundMode]);
 
   return (
-    <main className="page-shell">
-      <section className="player-card" aria-label="KRYZ live stream player">
-        <p className="eyebrow">KRYZ Go!</p>
-        <h1>Live Radio</h1>
-        <p className="status" aria-live="polite">
-          {status}
-        </p>
-
-        <div className="controls">
-          <button type="button" className='playpause' onClick={() => void player.play(backgroundMode)} disabled={isPlaying}>
-            ▶️
-          </button>
-          <button type="button" className='playpause' onClick={() => player.stop()} disabled={!isPlaying}>
-            ⏹️
-          </button>
-        </div>
-
-        <audio ref={audioRef} preload="none" />
+    <main className="home-layout">
+      <section className="website-zone">
+        <WebsitePanel label={ACTIVE_SITE.label} url={ACTIVE_SITE.url} />
       </section>
+
+      <div className="radio-controls-wrap">
+        <RadioControls
+          status={status}
+          isPlaying={isPlaying}
+          onPlay={() => player.play(backgroundMode)}
+          onStop={() => player.stop()}
+        />
+      </div>
+
+      <audio ref={audioRef} preload="none" />
     </main>
   );
 }