Dodanie title 2/2, Poprawki w ładowaniu map Google, poprwka w linach modal dla title

2025-11-23 07:11:17 +01:00
parent e4f47a06a0
commit 65d16575f2
25 changed files with 259 additions and 153 deletions
--- a/src/components/layout/Footer.astro
+++ b/src/components/layout/Footer.astro
@@ -49,7 +49,7 @@ const footer = yaml.load(
        {
          footer.services.map((item: any) => (
            <li>
-              <a href={item.url} class="fuz-footer-link">
+              <a href={item.url} class="fuz-footer-link" title={item.title}>
                {item.name}
              </a>
            </li>
--- a/src/components/maps/MapGoogle.astro
+++ b/src/components/maps/MapGoogle.astro
@@ -1,5 +1,9 @@
 ---
 import "../../styles/map-google.css";
+
+/**
+ * PARAMETRY MAPY
+ */
 const {
    apiKey,
    lat,
@@ -8,106 +12,127 @@ const {
    title = "",
    description = "",
    showMarker = false,
-    mode = "full", // "full" – mapa na całą sekcję, wszystko inne => karta
+    mode = "full",
+    mapStyleId = "8e0a97af9476f2d3"   // Google DEMO mapId (legalne, bez warningów)
 } = Astro.props;

-const mapId = `fuz-map-${Math.random().toString(36).slice(2)}`;
+/** ID kontenera w DOM */
+const domId = `fuz-map-${Math.random().toString(36).slice(2)}`;
 ---

+<!-- Kontener na mapę -->
 <div
-    id={mapId}
-    class={mode === "full"
-        ? "fuz-map--full"
-        : mode === "contact"
-          ? "fuz-map--contact"
-          : "fuz-map--card"}
+    id={domId}
+    class={
+        mode === "full"
+            ? "fuz-map--full"
+            : mode === "contact"
+                ? "fuz-map--contact"
+                : "fuz-map--card"
+    }
    data-lat={lat}
    data-lon={lon}
    data-zoom={zoom}
    data-title={title}
    data-desc={description}
    data-showmarker={showMarker}
->
-</div>
+/></div>

-<script is:inline define:vars={{ apiKey, mapId }}>
-    (function () {
-        // Funkcja inicjująca JEDNĄ konkretną mapę
-        function initSingleMap() {
-            const el = document.getElementById(mapId);
-            if (!el || !window.google || !google.maps) return;
+<script is:inline define:vars={{ apiKey, domId, mapStyleId }}>
+/**
+ * ⭐ FINALNY GOOGLE MAPS API LOADER 2025 ⭐
+ * ------------------------------------------
+ * - Bez callbacków
+ * - Bez deprecated Marker
+ * - Zgodny z importLibrary()
+ * - Zero warningów o async / mapId
+ * - Stabilny w Astro (Vite SSR + SPA)
+ */

-            const lat = Number(el.dataset.lat);
-            const lon = Number(el.dataset.lon);
-            const zoom = Number(el.dataset.zoom);
-            const title = el.dataset.title || "";
-            const desc = el.dataset.desc || "";
-            const showMarker = el.dataset.showmarker === "true";
+(function () {

-            const map = new google.maps.Map(el, {
-                zoom,
-                center: { lat, lng: lon },
-                mapTypeControl: false,
-                fullscreenControl: false,
-                streetViewControl: false,
-                scrollwheel: false,
-                zoomControl: true,
+    /** Ładowanie Google Maps API — stabilna wersja */
+    async function loadGoogleMaps(apiKey) {
+        // Jeśli już załadowane
+        if (window.google?.maps) return window.google.maps;
+
+        // Jeśli trwa ładowanie — użyj tego samego Promise
+        if (!window._GOOGLE_MAPS_LOADING) {
+            window._GOOGLE_MAPS_LOADING = new Promise((resolve, reject) => {
+                const script = document.createElement("script");
+                script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly`;
+                script.async = true;
+                script.defer = true;
+                script.onerror = () => reject("Google Maps API failed to load");
+                script.onload = () => resolve(window.google.maps);
+                document.head.appendChild(script);
+            });
+        }
+
+        return window._GOOGLE_MAPS_LOADING;
+    }
+
+    /** ★ Inicjalizacja pojedynczej mapy */
+    async function initMap() {
+        const el = document.getElementById(domId);
+        if (!el) return;
+
+        /** 1. Ładujemy API */
+        const maps = await loadGoogleMaps(apiKey);
+
+        /** 2. importLibrary — NOWE Google API 2025 */
+        const { Map } = await maps.importLibrary("maps");
+        const { AdvancedMarkerElement } = await maps.importLibrary("marker");
+        const { InfoWindow } = await maps.importLibrary("maps");
+
+        /** 3. Dane konfiguracyjne mapy z data-* */
+        const lat = Number(el.dataset.lat);
+        const lon = Number(el.dataset.lon);
+        const zoom = Number(el.dataset.zoom);
+        const title = el.dataset.title || "";
+        const desc = el.dataset.desc || "";
+        const showMarker = el.dataset.showmarker === "true";
+
+        /** 4. Tworzymy mapę z nowym mapId */
+        const map = new Map(el, {
+            center: { lat, lng: lon },
+            zoom,
+            mapId: mapStyleId,   // ★★ wymagane 2024+ ★★
+            mapTypeControl: false,
+            fullscreenControl: false,
+            streetViewControl: false,
+            scrollwheel: false,
+            zoomControl: true,
+        });
+
+        /** Zapamiętanie referencji */
+        window.fuzMaps = window.fuzMaps || {};
+        window.fuzMaps[domId] = map;
+
+        /** 5. Marker 2025 (AdvancedMarkerElement) */
+        if (showMarker) {
+            const marker = new AdvancedMarkerElement({
+                map,
+                position: { lat, lng: lon }
            });

-            // Zapamiętujemy mapę globalnie (np. dla KML / markerów z zewnątrz)
-            if (!window.fuzMaps) window.fuzMaps = {};
-            window.fuzMaps[mapId] = map;
-
-            if (showMarker) {
-                const marker = new google.maps.Marker({
-                    position: { lat, lng: lon },
-                    map,
+            if (title || desc) {
+                const info = new InfoWindow({
+                    content: `
+                        <div class="fuz-map-infowindow">
+                            <strong>${title}</strong><br/>
+                            ${desc}
+                        </div>
+                    `
                });

-                if (title) {
-                    const info = new google.maps.InfoWindow({
-                        content: `
-              <div class="fuz-map-infowindow">
-                <strong>${title}</strong><br/>
-                ${desc}
-              </div>
-            `,
-                    });
-                    info.open(map, marker);
-                }
+                info.open({ map, anchor: marker });
            }
        }
+    }

-        // 1) Jeśli Google Maps JUŻ załadowane → inicjuj od razu
-        if (window.google && window.google.maps) {
-            initSingleMap();
-            return;
-        }
+    /** Start po załadowaniu DOM */
+    document.addEventListener("DOMContentLoaded", initMap);

-        // 2) Jeżeli jeszcze NIE ma Google Maps → przygotuj kolejkę
-        if (!window.FUZ_GOOGLE_MAPS_LOADER) {
-            window.FUZ_GOOGLE_MAPS_LOADER = true;
-            window.FUZ_GOOGLE_MAPS_QUEUE = [];
-
-            window.FUZ_initGoogleMaps = function () {
-                // Wołana przez &callback=FUZ_initGoogleMaps
-                (window.FUZ_GOOGLE_MAPS_QUEUE || []).forEach((fn) => {
-                    try {
-                        fn();
-                    } catch (e) {
-                        console.error(e);
-                    }
-                });
-                window.FUZ_GOOGLE_MAPS_QUEUE = [];
-            };
-
-            const s = document.createElement("script");
-            s.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&callback=FUZ_initGoogleMaps`;
-            s.async = true;
-            document.head.appendChild(s);
-        }
-
-        // 3) Dodaj tę mapę do kolejki, żeby odpaliła się po załadowaniu SDK
-        window.FUZ_GOOGLE_MAPS_QUEUE.push(initSingleMap);
-    })();
+})();
 </script>
--- a/src/components/sections/SectionContact.astro
+++ b/src/components/sections/SectionContact.astro
@@ -8,11 +8,11 @@ const data = yaml.load(
    fs.readFileSync("./src/content/contact/contact.yaml", "utf8"),
 );
 const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
+const form = data.form;
 ---

 <!-- TODO: Obrobić wysyłanie maila przez api -->
 <section id="contact" class="fuz-section">
-    <!-- GRID 2 kolumny -->
    <div class="fuz-contact-grid">
        <!-- Lewa kolumna -->
        <div class="space-y-6">
@@ -29,14 +29,14 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
                    <input
                        type="text"
                        name="firstName"
-                        placeholder="Imię"
+                        placeholder={form.firstName.placeholder}
                        class="fuz-input"
                        required
                    />
                    <input
                        type="text"
                        name="lastName"
-                        placeholder="Nazwisko"
+                        placeholder={form.lastName.placeholder}
                        class="fuz-input"
                        required
                    />
@@ -46,31 +46,33 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
                    <input
                        type="email"
                        name="email"
-                        placeholder="Email"
+                        placeholder={form.email.placeholder}
                        class="fuz-input"
                        required
+                        autocomplete="email"
                    />
                    <input
                        type="tel"
                        name="phone"
-                        placeholder="Telefon"
+                        placeholder={form.phone.placeholder}
                        class="fuz-input"
                        required
+                        autocomplete="tel"
                    />
                </div>

                <input
                    type="text"
                    name="subject"
-                    placeholder="Temat wiadomości"
+                    placeholder={form.subject.placeholder}
                    class="fuz-input"
                    required
                />

                <textarea
-                    rows="5"
                    name="message"
-                    placeholder="Treść wiadomości"
+                    rows={form.message.rows}
+                    placeholder={form.message.placeholder}
                    class="fuz-input"
                    required></textarea>

@@ -82,31 +84,33 @@ const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
                        required
                    />
                    <span>
-                        Wyrażam zgodę na przetwarzanie moich danych osobowych
-                        zgodnie z
-                        <a href="/polityka-prywatnosci">polityką prywatności</a
+                        {form.rodo.label}
+                        <a href={form.rodo.policyLink} title={form.rodo.policyTitle}>{form.rodo.policyText}</a
                        >.
                    </span>
                </label>

-                <button class="btn btn-outline w-full py-3 text-lg">
-                    Wyślij wiadomość →
+                <button
+                    class="btn btn-outline w-full py-3 text-lg"
+                    title={form.submit.title}
+                >
+                    {form.submit.label}
                </button>
            </form>
        </div>
    </div>

    <div class="fuz-contact-map-wrapper">
-      <MapGoogle
-        apiKey={apiKey}
-        lat={data.lat}
-        lon={data.lng}
-        zoom={16}
-        title={data.markerTitle}
-        description={data.markerAddress}
-        showMarker={true}
-        mode="contact"
-      />
+        <MapGoogle
+            apiKey={apiKey}
+            lat={data.lat}
+            lon={data.lng}
+            zoom={16}
+            title={data.markerTitle}
+            description={data.markerAddress}
+            showMarker={true}
+            mode="contact"
+            mapStyleId={data.maps.mapId}        />
    </div>

    <div id="toast" class="fuz-toast hidden"></div>
--- a/src/components/sections/SectionDefault.astro
+++ b/src/components/sections/SectionDefault.astro
@@ -25,7 +25,7 @@ const reverse = index % 2 === 1;

      {section.button && (
        <div class="mt-8 flex justify-center">
-          <a href={section.button.url} class="btn btn-outline">
+          <a href={section.button.url} class="btn btn-outline" title={section.button.title}>
            {section.button.text}
          </a>
        </div>
--- a/src/components/sections/SectionIframeChannels.astro
+++ b/src/components/sections/SectionIframeChannels.astro
@@ -1,5 +1,5 @@
 ---
-import IframeChannelSwitcher from "../../islands/ChannelSwitcher.jsx";
+import ChannelSwitcher from "../../islands/ChannelSwitcher.jsx";

 const { section } = Astro.props;
 ---
@@ -14,7 +14,7 @@ const { section } = Astro.props;
      <div class="fuz-markdown mb-10" set:html={section.html} />
    )}

-    <IframeChannelSwitcher client:load sets={section.iframe_sets} />
+    <ChannelSwitcher client:load sets={section.iframe_sets} title={section.title} />

  </div>
 </section>
--- a/src/content/contact/contact.yaml
+++ b/src/content/contact/contact.yaml
@@ -17,3 +17,31 @@ lng: 21.456797
 markerTitle: "FUZ Adam Rojek"
 markerAddress: ul. Świętojańska 46</br>07-200 Wyszków
 contactFormTitle: Pisząc wiadomość ...
+
+maps:
+  mapId: "8e0a97af9476f2d3"
+
+form:
+  firstName:
+    placeholder: "Imię"
+  lastName:
+    placeholder: "Nazwisko"
+  email:
+    placeholder: "Email"
+  phone:
+    placeholder: "Telefon"
+  subject:
+    placeholder: "Temat wiadomości"
+  message:
+    placeholder: "Treść wiadomości"
+    rows: 5
+
+  rodo:
+    label: "Wyrażam zgodę na przetwarzanie moich danych osobowych zgodnie z"
+    policyLink: "/polityka-prywatnosci"
+    policyText: "polityką prywatności"
+    policyTitle: "Polityka prywatności FUZ Adam Rojek"
+
+  submit:
+    label: "Wyślij wiadomość →"
+    title: "Wyślij wiadomość pocztową"
--- a/src/content/internet-radiowy/offers.yaml
+++ b/src/content/internet-radiowy/offers.yaml
@@ -2,12 +2,13 @@ przelaczniki:
  - id: "umowa"
    etykieta: "Okres umowy"
    domyslny: "24m"
+    title: Wybierz okres umowy by zobaczyć odpowiednie ceny
    opcje:
      - id: "24m"
        nazwa: "24 miesiące"
      - id: "12m"
        nazwa: "12 miesięcy"
-      - id: "bez"
+      - id: "bezterminowa"
        nazwa: "Bezterminowa"

 funkcje:
@@ -30,7 +31,7 @@ plany:
    ceny:
      24m: "38 zł/mc"
      12m: "45 zł/mc"
-      bez: "80 zł/mc"
+      bezterminowa: "80 zł/mc"
    funkcje:
      predkosc: "4 Mb/s"
      wysylanie: "1 Mb/s"
@@ -45,7 +46,7 @@ plany:
    ceny:
      24m: "45 zł/mc"
      12m: "60 zł/mc"
-      bez: "110 zł/mc"
+      bezterminowa: "110 zł/mc"
    funkcje:
      predkosc: "6 Mb/s"
      wysylanie: "1 Mb/s"
@@ -59,7 +60,7 @@ plany:
    ceny:
      24m: "55 zł/mc"
      12m: "75 zł/mc"
-      bez: "120 zł/mc"
+      bezterminowa: "120 zł/mc"
    funkcje:
      predkosc: "8 Mb/s"
      wysylanie: "1.5 Mb/s"
@@ -73,7 +74,7 @@ plany:
    ceny:
      24m: "80 zł/mc"
      12m: "110 zł/mc"
-      bez: "160 zł/mc"
+      bezterminowa: "160 zł/mc"
    funkcje:
      predkosc: "10 Mb/s"
      wysylanie: "2 Mb/s"
--- a/src/content/internet-swiatlowodowy/offers.yaml
+++ b/src/content/internet-swiatlowodowy/offers.yaml
@@ -2,6 +2,7 @@ przelaczniki:
  - id: "budynek"
    etykieta: "Rodzaj budynku"
    domyslny: "jednorodzinny"
+    title: Zmień rodzaj budynku by zobaczyć odpowiednie ceny
    opcje:
      - id: "jednorodzinny"
        nazwa: "Jednorodzinny"
@@ -11,6 +12,7 @@ przelaczniki:
  - id: "umowa"
    etykieta: "Okres umowy"
    domyslny: "24m"
+    title: Wybierz okres umowy by zobaczyć odpowiednie ceny
    opcje:
      - id: "24m"
        nazwa: "24 miesiące"
@@ -121,4 +123,4 @@ uslugi_dodatkowe:
      - Jeden numer dostępny na wielu urządzeniach jednocześnie
      - Krystalicznie czysty dźwięk HD

-      [Poznaj szczegóły oferty telefonii →](/telefon)
+      [Poznaj szczegóły oferty telefonii →](/telefon "Poznaj szczegóły oferty telefonii")
--- a/src/content/internet-swiatlowodowy/section.yaml
+++ b/src/content/internet-swiatlowodowy/section.yaml
@@ -1,14 +1,18 @@
 sections:
  - title: Sprawdź dostępność usługi
    image: "/assets/internet/internet.webp"
+    button:
+      text: "Sprawdź dostępność pod Twoim adresem →"
+      url: "/mapa-zasiegu" 
+      title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"  
    content: |
      Światłowody nie docierają jeszcze niestety do wszystkich domów.

-      Sprawdź czy pod Twoim adresem dostępna jest nasza usługa internetu światłowodowego.
+      [Sprawdź](/mapa-zasięgu "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ") czy pod Twoim adresem dostępna jest nasza usługa internetu światłowodowego.

      Tam gdzie nie docierają światłowody stosuje się inne technologie. 
      
-      Jeśli pod Twoim adresem nie ma jeszcze usług światłowodowych, to sprawdź czy dociera tam nasz [internet radiowy  →](/internet-radiowy)
+      Jeśli pod Twoim adresem nie ma jeszcze usług światłowodowych, to sprawdź czy dociera tam nasz [internet radiowy](/internet-radiowy "Przejdź do oferty Internetu radiowego").

  - title: Router WiFi 5 AC1200
    image: "/assets/internet/E5400.webp"
--- a/src/content/internet-telewizja/hero.yaml
+++ b/src/content/internet-telewizja/hero.yaml
@@ -11,14 +11,17 @@ description: |
  Sprawdź zasięg usług i wybierz najlepsze łącze dla swojego domu.
 imageUrl: "/images/section-tv.webp"
 ctas:
-  - label: "Zobacz ofertę Internetu"
-    href: "/internet-telewizja"
+  - label: "Zobacz ofertę internetu światłowodowego"
+    href: "/internet-swiatlowodowy"
+    title: "Przejdź do oferty Internetu światłowodowego"
    primary: false
+    
  - label: "Zobacz ofertę telefonu"
    href: "/telefon"
+    title: "Przejdź do oferty telefonu"
+    primary: false
+
+  - label: "Sprawdź dostępność"
+    href: "/mapa-zasiegu"
+    title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
    primary: false   
-  # - label: "Sprawdź dostępność"
-  #   href: "/mapa-zasiegu"
-    # primary: false
-  # - label: "Zobacz ofertę"
-  #   href: "/oferta"
--- a/src/content/internet-telewizja/offers.yaml
+++ b/src/content/internet-telewizja/offers.yaml
@@ -2,6 +2,7 @@ przelaczniki:
  - id: "budynek"
    etykieta: "Rodzaj budynku"
    domyslny: "jednorodzinny"
+    title: Zmień rodzaj budynku by zobaczyć odpowiednie ceny
    opcje:
      - id: "jednorodzinny"
        nazwa: "Jednorodzinny"
@@ -11,6 +12,7 @@ przelaczniki:
  - id: "umowa"
    etykieta: "Okres umowy"
    domyslny: "24m"
+    title: Wybierz okres umowy by zobaczyć odpowiednie ceny
    opcje:
      - id: "24m"
        nazwa: "24 miesiące"
--- a/src/content/internet-telewizja/section.yaml
+++ b/src/content/internet-telewizja/section.yaml
@@ -2,13 +2,13 @@ sections:
  - title: Dodatkowe możliwości naszej telewizji"
    image: "/assets/tv/ekosystem-kyanit.png"
    content: |
-      - **Catchup** — na wybranych kanałach możesz obejrzeć audycję z ostatnich 7 dni. [Więcej →](#catchup)
+      - **Catchup** — na wybranych kanałach możesz obejrzeć audycję z ostatnich 7 dni. [Więcej →](#catchup "Przeczytaj o usłudze CatchUp")

-      - **Nagrywanie** — nagraj interesującą Cię audycję i obejrzyj ją kiedy chcesz. [Więcej →](#nagrywarka)
+      - **Nagrywanie** — nagraj interesującą Cię audycję i obejrzyj ją kiedy chcesz. [Więcej →](#nagrywarka "Przeczytaj o nagrywaniu audycji")

-      - **StartOver** — obejrzyj od początku audycję, która już się rozpoczęła (do 3h wstecz). [Więcej →](#startover)
+      - **StartOver** — obejrzyj od początku audycję, która już się rozpoczęła (do 3h wstecz). [Więcej →](#startover "Przeczytaj o usłudze StartOver")

-      - **Nagrywanie serii** — zaplanuj nagrywanie kolejnych odcinków ulubionego serialu. [Więcej →](#nagrywanie_cykliczne)
+      - **Nagrywanie serii** — zaplanuj nagrywanie kolejnych odcinków ulubionego serialu. [Więcej →](#nagrywanie_cykliczne "Przeczytaj o nagrywaniu cyklicznym")

      - **Pauzowanie** — zatrzymuj i cofaj audycje.

--- a/src/content/site/footer.yaml
+++ b/src/content/site/footer.yaml
@@ -13,15 +13,22 @@ contact:
 services:
  - name: "Internet Światłowodowy"
    url: "/internet-swiatlowodowy"
+    title: "Przejdź do oferty Internetu światłowodowego"
+
  - name: "Internet Radiowy"
    url: "/internet-radiowy"
+    title: "Przejdź do oferty Internetu radiowego"
+
  - name: "Internet + Telewizja"
    url: "/internet-telewizja"
+    title: "Przejdź do oferty Internet + Telewizja w FUZ"
+
  - name: "Telefon"
    url: "/telefon"
+    title: "Przejdź do oferty telefonu"

 recaptcha:
  Ta strona jest chroniona przez reCAPTCHA.
  Obowiązują
-  Google <a href="https://policies.google.com/privacy">Polityka prywatności</a> oraz
-  <a href="https://policies.google.com/terms">Warunki korzystania</a>.
+  Google <a class="fuz-link" href="https://policies.google.com/privacy" title="Odnośnik do polityka prywatności Google">Polityka prywatności</a> oraz
+  <a class="fuz-link" href="https://policies.google.com/terms" title="Odnośnik do warynków korzystania Google">Warunki korzystania</a>.
--- a/src/content/site/site.section.yaml
+++ b/src/content/site/site.section.yaml
@@ -4,8 +4,9 @@ sections:
    dimmed: true
    type: default
    button:
-      text: "Zobacz ofertę →"
+      text: "Zobacz ofertę Internetu Światłowodowego →"
      url: "/internet-swiatlowodowy"    
+      title: "Przejdź do oferty Internetu światłowodowego"
    content: |
      Z naszym światłowodem zyskujesz nie tylko internet, ale przewagę — najwyższą jakość połączenia, która nigdy nie zwalnia. 

@@ -15,8 +16,9 @@ sections:
    image: "/images/section-tv.webp"
    dimmed: true
    button:
-      text: "Zobacz ofertę →"
+      text: "Zobacz ofertę Internetu + Telewizja →"
      url: "/internet-telewizja/"   
+      title: "Przejdź do oferty Internet + Telewizja w FUZ"
    content: |
     Internet + TV to połączenie stabilnego, szybkiego łącza z bogatą ofertą telewizyjną dla całej rodziny. 

@@ -27,8 +29,9 @@ sections:
    dimmed: true
    type: default
    button:
-      text: "Zobacz ofertę →"
+      text: "Zobacz ofertę Internetu Radiowego →"
      url: "/internet-radiowy/" 
+      title: "Przejdź do oferty Internetu radiowego"  
    content: |
     Nowoczesna technologia radiowa gwarantuje stabilny internet o wysokiej wydajności tam, gdzie inne łącza nie mają szans. 
     
@@ -38,8 +41,9 @@ sections:
    image: "/images/section-telefon.webp"
    dimmed: true
    button:
-      text: "Zobacz ofertę →"
+      text: "Zobacz ofertę telefonu →"
      url: "/internet-telewizja/"   
+      title: "Przejdź do oferty telefonu"
    content: |
      Nasza telefonia wykorzystuje zaawansowaną technologię VoIP, dzięki której dźwięk jest wyraźny, a połączenia stabilne. 

--- a/src/content/telefon/hero.yaml
+++ b/src/content/telefon/hero.yaml
@@ -9,9 +9,17 @@ description: |
  Dziś dla wielu to niezbędne narzędzie pełne funkcji – „bez telefonu jak bez ręki". 
 imageUrl: "/images/section-telefon.webp"
 ctas:
-  - label: "Zobacz ofertę Internetu + Telewizji"
-    href: "/internet-telewizja"
-    primary: false
  - label: "Zobacz ofertę internetu światłowodowego"
    href: "/internet-swiatlowodowy"
+    title: "Przejdź do oferty Internetu światłowodowego"
+    primary: false
+
+  - label: "Zobacz ofertę Internetu + Telewizji"
+    href: "/internet-telewizja"
+    title: "Przejdź do oferty Internet + Telewizja w FUZ"
+    primary: false
+
+  - label: "Sprawdź dostępność"
+    href: "/mapa-zasiegu"
+    title: "Sprawdź zasięg Internetu światłowodowego i radiowego FUZ"
    primary: false   
--- a/src/content/telefon/page.yaml
+++ b/src/content/telefon/page.yaml
@@ -21,7 +21,7 @@ paragraphs:

      Dzięki temu możesz cieszyć się niezawodną łącznością głosową dzięki technologii VoIP, jednocześnie korzystając z szybkiego i stabilnego dostępu do Internetu oraz bogatej oferty telewizyjnej.

-      Wybierz naszą usługę telefonu stacjonarnego z [internetem światłowodowym](/internet-swiatlowodowy)  lub [internetem + telewizją](/internet-telewizja) i zyskaj kompleksowe rozwiązanie komunikacyjne dostosowane do Twoich potrzeb.
+      Wybierz naszą usługę telefonu stacjonarnego z [internetem światłowodowym](/internet-swiatlowodowy "Przejdź do oferty Internetu światłowodowego") lub [internetem + telewizją](/internet-telewizja "Przejdź do oferty Internet + Telewizja w FUZ") i zyskaj kompleksowe rozwiązanie komunikacyjne dostosowane do Twoich potrzeb.


 # Kolejne sekcje mozna dodawać poja wiać się bedą pod tabela produktów
--- a/src/content/telefon/section.yaml
+++ b/src/content/telefon/section.yaml
@@ -10,4 +10,4 @@ sections:
      
      Wszystko załatwisz w kilka minut, bez sporządzania pism, wysyłania listów, czy odwiedzania biur obsługi klienta.

-      Masz pytania? [Skontaktuj się](/#contact)
+      Masz pytania? [Skontaktuj się](/#contact "Skontaktuj się z nami")
--- a/src/islands/ChannelSwitcher.jsx
+++ b/src/islands/ChannelSwitcher.jsx
@@ -1,6 +1,6 @@
 import { useState } from "preact/hooks";

-export default function ChannelSwitcher({ sets = [] }) {
+export default function ChannelSwitcher({ sets = [], title = "" }) {
  const [activeId, setActiveId] = useState(sets[0]?.id);

  const active = sets.find((x) => x.id === activeId);
@@ -15,6 +15,7 @@ export default function ChannelSwitcher({ sets = [] }) {
              type="button"
              class={`fuz-switch ${activeId === s.id ? "active" : ""}`}
              onClick={() => setActiveId(s.id)}
+              title={title}
            >
              {s.name}
            </button>
--- a/src/islands/Markdown.jsx
+++ b/src/islands/Markdown.jsx
@@ -48,14 +48,12 @@ export default function FuzMarkdown({ text, ctx = {} }) {

  // Konwersja kinków na modal linki
  processed = processed.replace(
-    /\[([^\]]+)\]\(#([^)]+)\)/g,
-    `<a href="#" class="modal-link" data-modal="$2">$1</a>`
+    /\[([^\]]+)\]\(#([^) "]+)(?:\s+"([^"]+)")?\)/g,
+    (match, label, modalId, title) => {
+      return `<a href="#" class="modal-link" data-modal="${modalId}"${title ? ` title="${title}"` : ""
+        }>${label}</a>`;
+    }
  );
-
-  //   processed = processed.replace(
-  //   /\[([^\]]+)\]\(#([^)]+)\)/g,
-  //   `<button type="button" class="btn btn-outline modal-link" data-modal="$2">$1</button>`
-  // );
  const html = marked(processed);

  return (
--- a/src/islands/Offers/OffersExtraServices.jsx
+++ b/src/islands/Offers/OffersExtraServices.jsx
@@ -30,7 +30,7 @@ export default function OffersExtraServices({
                  <td class="fuz-feature-name">{srv.nazwa}</td>
                  <td class="fuz-feature-cell center">{srv.cena}</td>
                  <td class="fuz-feature-cell-btn center">
-                    <button class="btn-link" onClick={() => toggle(srv.id)}>
+                    <button class="btn-link" onClick={() => toggle(srv.id)} title={openId === srv.id ? "Zwiń opis usługi" : "Rozwiń opis usługi"}>
                      {openId === srv.id ? "Zwiń" : "Więcej"}
                    </button>
                  </td>
--- a/src/islands/Offers/OffersSwitches.jsx
+++ b/src/islands/Offers/OffersSwitches.jsx
@@ -11,10 +11,10 @@ export default function OffersSwitches({ switches, selected, onSwitch }) {
            {sw.opcje.map((op) => (
              <button
                type="button"
-                class={`fuz-switch ${
-                  selected[sw.id] === op.id ? "active" : ""
-                }`}
+                class={`fuz-switch ${selected[sw.id] === op.id ? "active" : ""
+                  }`}
                onClick={() => onSwitch(sw.id, op.id)}
+                title={sw.title}
              >
                {op.nazwa}
              </button>
--- a/src/pages/mapa-zasiegu/index.astro
+++ b/src/pages/mapa-zasiegu/index.astro
@@ -6,6 +6,7 @@ import MapSwitch from "../../components/maps/MapSwitch.astro";
 const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
 const lat = 52.597388
 const lon = 21.456797;
+const mapStyleId="8e0a97af9476f2d3"
 ---

 <DefaultLayout title="FUZ Mapa zasięgu sieci">
@@ -61,6 +62,7 @@ const lon = 21.456797;
      zoom={14}
      showMarker={true}
      mode="full"
+      mapStyleId={mapStyleId}
    />
  </div>

--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -84,6 +84,11 @@
 }

 /* Textarea */
-textarea.fuz-input {
+/* textarea.fuz-input {
  resize: none;
+} */
+
+.fuz-link {
+  color: var(--fuz-accent);
+  transition: color 0.2s ease;
 }
--- a/src/styles/contact.css
+++ b/src/styles/contact.css
@@ -33,6 +33,13 @@
  color: var(--fuz-text);
 }

+.fuz-rodo a {
+  color: var(--fuz-accent);              /* Twój kolor linków */
+}
+
+.fuz-rodo a:hover {
+  color: var(--fuz-accent-hover);        /* jeśli masz globalne zmienne */
+}
 /* --- TOAST --- */

 .fuz-toast {
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -2,9 +2,11 @@
  --fuz-bg: #ffffff;
  --fuz-text: #1a1a1a;
  --fuz-accent: #0066ff;
-  --fuz-accent: #0094ff;
+  --fuz-accent-hover: #9e133d;
  --fuz-accent-text: #ffffff;
  
+
+
  /* Buttons */
  --btn-bg: var(--fuz-accent);
  --btn-text: var(--fuz-accent-text);
@@ -21,8 +23,11 @@
  --fuz-text: #e6edf3;
  --fuz-bg: #0d1117;
  --fuz-accent: #58a6ff;
+  --fuz-accent-hover: #9e133d;
  --fuz-accent-text: #0d1117;

+
+
  /* Buttons */
  --btn-bg: var(--fuz-accent);
  --btn-text: var(--fuz-accent-text);