Premium szczegóły zmiana sekcji

src/pages/premium/[tid].astro

@@ -6,7 +6,6 @@ import Markdown from "../../islands/Markdown.jsx";
 import AddonChannelsGrid from "../../islands/jambox/AddonChannelsModal.jsx";
 import "../../styles/jambox-tematyczne.css";
 
-/** Typy minimalne */
 type AddonPriceRow = {
   pakiety?: string[] | any;
   "12m"?: number | string;
@@ -25,7 +24,6 @@ type TvAddon = {
   group_mode?: string;
 };
 
-// ✅ OPCJA A: metadane grupy + CTA
 type GroupCta = {
   label?: string;
   href?: string;
@@ -41,7 +39,6 @@ type GroupMeta = {
 type TvAddonsDoc = {
   tytul?: string;
   opis?: string;
-  cena_opis?: string;
   dodatki?: TvAddon[];
   grupy?: Record<string, GroupMeta>;
 };
@@ -50,113 +47,86 @@ const doc = yaml.load(
   fs.readFileSync("./src/content/internet-telewizja/tv-addons.yaml", "utf8"),
 ) as TvAddonsDoc;
 
-const pageTitle = doc?.tytul ?? "Dodatkowe pakiety TV";
-const pageDesc = doc?.opis ?? "";
-const addons: TvAddon[] = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
+const addons = Array.isArray(doc?.dodatki) ? doc.dodatki : [];
+const groupMeta = doc?.grupy ?? {};
 
-// ✅ mapa meta grup
-const groupMeta: Record<string, GroupMeta> = doc?.grupy ?? {};
-
-// --- dynamic param ---
-const tidParam = Astro.params.tid; // np. "49"
-const tid = Number(tidParam);
-
-const picked =
-  Number.isFinite(tid)
-    ? addons.find((a) => Number(a?.tid) === tid)
-    : null;
+const tid = Number(Astro.params.tid);
+const picked = addons.find((a) => Number(a?.tid) === tid);
 
 if (!picked) {
-  return new Response("Nie znaleziono pakietu dla podanego tid.", { status: 404 });
+  return new Response("Nie znaleziono pakietu.", { status: 404 });
 }
 
-// --- jeśli jest group => bierzemy całą grupę ---
 const pickedGroup = String(picked?.group ?? "").trim();
 
-let viewAddons: TvAddon[] = [];
-if (pickedGroup) {
-  viewAddons = addons.filter((a) => String(a?.group ?? "").trim() === pickedGroup);
-} else {
-  viewAddons = [picked];
-}
+const viewAddons = pickedGroup
+  ? addons.filter((a) => String(a?.group ?? "").trim() === pickedGroup)
+  : [picked];
 
-// (jak miałeś) sortowanie w grupie — możesz zostawić albo wywalić
-viewAddons = viewAddons
-  .slice()
-  .sort((a, b) => Number(a?.tid ?? 0) - Number(b?.tid ?? 0));
-
-// tytuł/description strony
-const singleTitle = pickedGroup
-  ? (groupMeta[pickedGroup]?.tytul ?? pickedGroup.toUpperCase() ?? pageTitle)
-  : (String(picked?.nazwa ?? "").trim() || pageTitle);
-
-const singleDesc = pageDesc;
-
-// ✅ CTA dla tej grupy (jeśli istnieje)
-const footerCta: GroupCta | undefined =
+const footerCta =
   pickedGroup ? groupMeta[pickedGroup]?.rejestracja : undefined;
 ---
 
-<DefaultLayout title={singleTitle} description={singleDesc}>
-  {/* Opcjonalnie: box jak na stronie ogólnej, tylko jeśli jesteśmy w grupie */}
-  <div class={pickedGroup ? "f-addon-group" : ""}>
-    {
-      viewAddons.map((addon: TvAddon, index: number) => {
-        const isAboveFold = index === 0;
+<DefaultLayout
+  title={picked?.nazwa ?? doc?.tytul}
+  description={doc?.opis}
+>
+  {
+    viewAddons.map((addon, index) => {
+      const pkgName = String(addon?.nazwa ?? "").trim();
+      const hasYamlImage = !!String(addon?.image ?? "").trim();
+      const assumeHasMedia = pkgName || hasYamlImage;
+      const isAboveFold = index === 0;
 
-        const pkgName = String(addon?.nazwa ?? "").trim();
-        const hasYamlImage = !!String(addon?.image ?? "").trim();
-        const assumeHasMedia = pkgName ? true : hasYamlImage;
-
-        const anchorId = addon?.tid != null ? `tid-${addon.tid}` : undefined;
-
-        return (
-          <section class="f-section" id={anchorId}>
-            <div
-              class={`f-section-grid f-addon-grid f-addon-section ${
-                assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
-              }`}
-              data-addon-section
-              data-has-media={assumeHasMedia ? "1" : "0"}
-            >
-              <div class="f-addon-text">
-                {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
-                {addon?.opis && <Markdown text={addon.opis} />}
-              </div>
-
-              <div class="f-addon-media">
-                {pkgName ? (
-                  <AddonChannelsGrid
-                    client:idle
-                    packageName={pkgName}
-                    fallbackImage={String(addon?.image ?? "")}
-                    aboveFold={isAboveFold}
-                    title={pkgName}
-                  />
-                ) : null}
-              </div>
+      return (
+        <section class="f-section" id={`tid-${addon.tid}`}>
+          <div
+            class={`f-section-grid f-addon-section ${
+              assumeHasMedia ? "md:grid-cols-2" : "md:grid-cols-1"
+            }`}
+            data-addon-section
+            data-has-media={assumeHasMedia ? "1" : "0"}
+          >
+            {/* MEDIA — odpowiednik <Image /> */}
+            <div class="f-addon-media md:order-2">
+              {pkgName ? (
+                <AddonChannelsGrid
+                  client:idle
+                  packageName={pkgName}
+                  fallbackImage={String(addon?.image ?? "")}
+                  aboveFold={isAboveFold}
+                  title={pkgName}
+                />
+              ) : null}
             </div>
-          </section>
-        );
-      })
-    }
 
-    {/* ✅ STOPKA GRUPY: tylko na stronach grupowych */}
-    {pickedGroup && footerCta?.href && footerCta?.label ? (
-      <div class="f-addon-group-footer fuz-markdown max-w-none">
-        {footerCta.opis ? <p>{footerCta.opis}</p> : null}
+            {/* TEKST */}
+            <div class="md:order-1">
+              {pkgName && <h2 class="f-section-title">{pkgName}</h2>}
+              {addon?.opis && <Markdown text={addon.opis} />}
+            </div>
+          </div>
+        </section>
+      );
+    })
+  }
 
-        <a
-          class="btn btn-primary"
-          href={footerCta.href}
-          title={footerCta.title ?? footerCta.label}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {footerCta.label}
-        </a>
+  {footerCta?.href && footerCta?.label ? (
+    <section class="f-section">
+      <div class="f-section-grid md:grid-cols-1">
+        <div class="fuz-markdown max-w-none">
+          {footerCta.opis && <p>{footerCta.opis}</p>}
+          <div class="f-section-nav">
+            <a
+              class="btn btn-primary"
+              href={footerCta.href}
+              title={footerCta.title ?? footerCta.label}
+            >
+              {footerCta.label}
+            </a>
+          </div>
+        </div>
       </div>
-    ) : null}
-  </div>
-
+    </section>
+  ) : null}
 </DefaultLayout>