Api do wyszukiwania dostepności, korekty w powiązanych stronach

package.json

@@ -12,13 +12,16 @@
     "@astrojs/preact": "^4.1.3",
     "@preact/signals": "^2.5.1",
     "astro": "^5.16.0",
+    "better-sqlite3": "^12.4.6",
     "globby": "^16.0.0",
     "js-yaml": "^4.1.0",
     "marked": "^17.0.1",
+    "nodemailer": "^7.0.10",
     "preact": "^10.27.2"
   },
   "devDependencies": {
     "@astrojs/tailwind": "^5.0.0",
+    "@types/better-sqlite3": "^7.6.13",
     "autoprefixer": "^10.4.0",
     "postcss": "^8.4.0",
     "tailwindcss": "^3.4.0"

src/components/layout/Header.astro

@@ -17,10 +17,10 @@ const links = [
 
     <!-- Logo -->
     <a href="/" class="flex items-center gap-2 font-semibold">
-      <span class="inline-flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold">
-        <img src="/assets/logo.webp" alt="FUZ Logo" class="h-5 w-5" />
+      <!-- <span class="inline-flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold"> -->
+        <img src="/src/assets/logo.webp" alt="FUZ Logo" class="my-0"/>
       </span>
-      <span>FUZ</span>
+      <!-- <span>FUZ</span> -->
     </a>
 
     <!-- Linki desktop -->

src/components/sections/SectionContact.astro

@@ -11,7 +11,6 @@ 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">
     <div class="fuz-contact-grid">
         <!-- Lewa kolumna -->
@@ -85,7 +84,10 @@ const form = data.form;
                     />
                     <span>
                         {form.rodo.label}
-                        <a href={form.rodo.policyLink} title={form.rodo.policyTitle}>{form.rodo.policyText}</a
+                        <a
+                            href={form.rodo.policyLink}
+                            title={form.rodo.policyTitle}
+                            >{form.rodo.policyText}</a
                         >.
                     </span>
                 </label>
@@ -110,10 +112,11 @@ const form = data.form;
             description={data.markerAddress}
             showMarker={true}
             mode="contact"
-            mapStyleId={data.maps.mapId}        />
+            mapStyleId={data.maps.mapId}
+        />
     </div>
 
-    <div id="toast" class="fuz-toast hidden"></div>
+    <div id="toast" class="fuz-toast"></div>
 </section>
 
 <!-- ReCaptcha init -->
@@ -130,7 +133,13 @@ const form = data.form;
 </script>
 
 <!-- Formularz + toast -->
-<script is:inline>
+<script
+    is:inline
+    define:vars={{
+        successMsg: JSON.stringify(form.submit.successMessage),
+        errorMsg: JSON.stringify(form.submit.errorMessage),
+    }}
+>
     document.addEventListener("DOMContentLoaded", () => {
         const form = document.getElementById("contactForm");
         const toast = document.getElementById("toast");
@@ -160,7 +169,7 @@ const form = data.form;
 
             const json = await resp.json();
             showToast(
-                json.ok ? "Wiadomość wysłana!" : "Błąd podczas wysyłania.",
+                json.ok ? JSON.parse(successMsg) : JSON.parse(errorMsg),
                 json.ok ? "success" : "error",
             );
 
@@ -169,13 +178,21 @@ const form = data.form;
 
         function showToast(message, type = "success") {
             toast.innerHTML = `
-        <div class="fuz-toast-msg ${type}">
-          ${message}
-        </div>
-      `;
+      <div class="fuz-toast-msg ${type}">
+        ${message}
+      </div>
+    `;
+            // reset animacji
+            toast.classList.remove("visible");
+            void toast.offsetWidth; // magiczny hack forcing reflow
 
-            toast.classList.remove("hidden");
-            setTimeout(() => toast.classList.add("hidden"), 3000);
+            // pokaż
+            toast.classList.add("visible");
+
+            // ukryj po 3s
+            setTimeout(() => {
+                toast.classList.remove("visible");
+            }, 3000);
         }
     });
 </script>

src/content/contact/contact.yaml

@@ -21,6 +21,10 @@ contactFormTitle: Pisząc wiadomość ...
 maps:
   mapId: "8e0a97af9476f2d3"
 
+mail:
+  from_name: "www.fuz.pl"
+  to: "cieniu2009@gmail.com"
+
 form:
   firstName:
     placeholder: "Imię"
@@ -35,6 +39,8 @@ form:
   message:
     placeholder: "Treść wiadomości"
     rows: 5
+  successMessage: "Dziękujemy! Wiadomość została wysłana."
+  errorMessage: "Wystąpił błąd — spróbuj ponownie."
 
   rodo:
     label: "Wyrażam zgodę na przetwarzanie moich danych osobowych zgodnie z"

src/content/mapa-zasiegu/page.yaml

@@ -0,0 +1,12 @@
+przelaczniki:
+  - id: "zasieg"
+    etykieta: "Rodzaj zasiegu"
+    domyslny: "none"
+    title: "Zmień rodzaj"
+    opcje:
+      - id: "swiatlowodowy"
+        nazwa: "Światłowodowy"
+      - id: "radiowy"
+        nazwa: "Radiowy"
+      - id: "none"
+        nazwa: "Ukryj zasięgi"

src/islands/MapRangeSwitch.jsx

@@ -0,0 +1,33 @@
+import { useState } from "preact/hooks";
+import "../styles/offers/offers-switches.css";
+
+export default function MapRangeSwitch() {
+    const [selected, setSelected] = useState("none");
+
+    const options = [
+        { id: "swiatlowodowy", nazwa: "Światłowodowy" },
+        { id: "radiowy", nazwa: "Radiowy" },
+        { id: "none", nazwa: "Ukryj" }
+    ];
+
+    const update = (id) => {
+        setSelected(id);
+        window?.handleMapSwitch?.(id);
+    };
+
+    return (
+<div class="map-range-switch fuz-switches-wrapper">
+  <div class="fuz-switch-group flex sm:flex-row flex-col w-full">
+                {options.map((op) => (
+                    <button
+                        type="button"
+                        class={`fuz-switch ${selected === op.id ? "active" : ""} w-full sm:w-auto`}
+                        onClick={() => update(op.id)}
+                    >
+                        {op.nazwa}
+                    </button>
+                ))}
+            </div>
+        </div>
+    );
+}

src/islands/Offers/OffersExtraServices.jsx

@@ -11,7 +11,7 @@ export default function OffersExtraServices({
 
   return (
     <div class="fuz-extra-services">
-      <h3 class="fuz-title-small">Usługi dodatkowe</h3>
+      <h1 class="fuz-title-small">Usługi dodatkowe</h1>
 
       <div class="fuz-table-wrapper">
         <table class="fuz-table">

src/islands/RangeForm.jsx

@@ -0,0 +1,350 @@
+import { useState, useEffect, useRef } from "preact/hooks";
+
+export default function RangeForm() {
+    const [city, setCity] = useState("");
+    const [citySuggest, setCitySuggest] = useState([]);
+    const [highlightIndex, setHighlightIndex] = useState(-1);
+
+    const [street, setStreet] = useState("");
+    const [streetSuggest, setStreetSuggest] = useState([]);
+    const [streetHighlightIndex, setStreetHighlightIndex] = useState(-1);
+
+    const [streetDisabled, setStreetDisabled] = useState(true);
+    const [streetRequired, setStreetRequired] = useState(false);
+
+    const [number, setNumber] = useState("");
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(false);
+
+    const cityListRef = useRef(null);
+    const streetListRef = useRef(null);
+
+    let timeoutCity = null;
+    let timeoutStreet = null;
+
+    // =====================================================
+    // AUTOCOMPLETE MIASTO
+    // =====================================================
+    async function fetchCitySuggestions(q) {
+        const res = await fetch(`/api/cities-autocomplete?q=${encodeURIComponent(q)}`);
+        setCitySuggest(await res.json());
+        setHighlightIndex(-1);
+    }
+
+    function onCityInput(e) {
+        const value = e.target.value;
+        setCity(value);
+        setError("");
+
+        if (timeoutCity) clearTimeout(timeoutCity);
+
+        if (value.trim().length < 2) {
+            setCitySuggest([]);
+            return;
+        }
+
+        timeoutCity = setTimeout(() => fetchCitySuggestions(value), 250);
+    }
+
+    function onCityKeyDown(e) {
+        if (!citySuggest.length) return;
+
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setHighlightIndex((prev) => (prev + 1) % citySuggest.length);
+        }
+
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setHighlightIndex((prev) =>
+                prev <= 0 ? citySuggest.length - 1 : prev - 1
+            );
+        }
+
+        if (e.key === "Enter" && highlightIndex >= 0) {
+            e.preventDefault();
+            const chosen = citySuggest[highlightIndex];
+            setCity(chosen);
+            setCitySuggest([]);
+            setHighlightIndex(-1);
+        }
+
+        if (e.key === "Escape") {
+            setCitySuggest([]);
+            setHighlightIndex(-1);
+        }
+    }
+
+    useEffect(() => {
+        if (highlightIndex < 0 || !cityListRef.current) return;
+        cityListRef.current.children[highlightIndex]?.scrollIntoView({ block: "nearest" });
+    }, [highlightIndex]);
+
+    // =====================================================
+    // AUTO-MATCH MIASTO — NOWE!
+    // =====================================================
+    useEffect(() => {
+        if (!citySuggest.length) return;
+
+        const exact = citySuggest.find(
+            (c) => c.toLowerCase() === city.toLowerCase()
+        );
+
+        if (exact) {
+            setCity(exact);
+            setCitySuggest([]);
+            setHighlightIndex(-1);
+            updateStreetAvailability(exact);
+        }
+    }, [city, citySuggest]);
+
+    // =====================================================
+    // DOSTĘPNOŚĆ ULIC
+    // =====================================================
+    async function updateStreetAvailability(currentCity) {
+        if (!currentCity) {
+            setStreetDisabled(true);
+            setStreetRequired(false);
+            setStreet("");
+            setStreetSuggest([]);
+            setStreetHighlightIndex(-1);
+            return;
+        }
+
+        const res = await fetch(`/api/has-streets?city=${encodeURIComponent(currentCity)}`);
+        const { hasStreets } = await res.json();
+
+        if (!hasStreets) {
+            setStreetDisabled(true);
+            setStreetRequired(false);
+            setStreet("");
+            setStreetSuggest([]);
+            setStreetHighlightIndex(-1);
+            return;
+        }
+
+        setStreetDisabled(false);
+        setStreetRequired(true);
+        setStreetSuggest([]);
+        setStreetHighlightIndex(-1);
+    }
+
+    useEffect(() => {
+        updateStreetAvailability(city);
+    }, [city]);
+
+    // =====================================================
+    // AUTOCOMPLETE ULICA
+    // =====================================================
+    async function fetchStreetSuggestions(q, c) {
+        const res = await fetch(
+            `/api/streets-autocomplete?city=${encodeURIComponent(c)}&q=${encodeURIComponent(q)}`
+        );
+        setStreetSuggest(await res.json());
+        setStreetHighlightIndex(-1);
+    }
+
+    function onStreetInput(e) {
+        const value = e.target.value;
+        setStreet(value);
+        setError("");
+
+        if (!city || streetDisabled) return;
+
+        if (!value) {
+            setStreetSuggest([]);
+            setStreetHighlightIndex(-1);
+            return;
+        }
+
+        if (timeoutStreet) clearTimeout(timeoutStreet);
+        timeoutStreet = setTimeout(() => fetchStreetSuggestions(value, city), 250);
+    }
+
+    function onStreetKeyDown(e) {
+        if (!streetSuggest.length) return;
+
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setStreetHighlightIndex((prev) => (prev + 1) % streetSuggest.length);
+        }
+
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setStreetHighlightIndex((prev) =>
+                prev <= 0 ? streetSuggest.length - 1 : prev - 1
+            );
+        }
+
+        if (e.key === "Enter" && streetHighlightIndex >= 0) {
+            e.preventDefault();
+            setStreet(streetSuggest[streetHighlightIndex]);
+            setStreetSuggest([]);
+            setStreetHighlightIndex(-1);
+        }
+
+        if (e.key === "Escape") {
+            setStreetSuggest([]);
+            setStreetHighlightIndex(-1);
+        }
+    }
+
+    useEffect(() => {
+        if (streetHighlightIndex < 0 || !streetListRef.current) return;
+        streetListRef.current.children[streetHighlightIndex]?.scrollIntoView({ block: "nearest" });
+    }, [streetHighlightIndex]);
+
+    // =====================================================
+    // AUTO-MATCH ULICA — NOWE!
+    // =====================================================
+    useEffect(() => {
+        if (!streetSuggest.length) return;
+
+        const exact = streetSuggest.find(
+            (s) => s.toLowerCase() === street.toLowerCase()
+        );
+
+        if (exact) {
+            setStreet(exact);
+            setStreetSuggest([]);
+            setStreetHighlightIndex(-1);
+        }
+    }, [street, streetSuggest]);
+
+    // =====================================================
+    // SUBMIT
+    // =====================================================
+    async function onSubmit(e) {
+        e.preventDefault();
+        setError("");
+
+        if (streetRequired && !street.trim()) {
+            setError("Ulica jest wymagana w tej miejscowości.");
+            return;
+        }
+
+        setLoading(true);
+
+        const res = await fetch("/api/search", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ city, street, number }),
+        });
+
+        const data = await res.json();
+
+        if (!data.ok || !data.result) {
+            setError("Adres nie znajduje się w zasięgu.");
+            setLoading(false);
+            return;
+        }
+
+        window.showAddressOnMap(data.result);
+
+        setCity("");
+        setStreet("");
+        setNumber("");
+        updateStreetAvailability(city);
+        setLoading(false);
+    }
+
+    // =====================================================
+    // RENDER
+    // =====================================================
+    return (
+        <form class="flex flex-col gap-2" onSubmit={onSubmit} autocomplete="off">
+
+
+            {/* CITY */}
+            <div class="autocomplete-wrapper">
+                <input
+                    class={`fuz-input w-full ${citySuggest.length ? "autocomplete-open" : ""}`}
+                    placeholder="Wpisz miejscowość..."
+                    value={city}
+                    onInput={onCityInput}
+                    onKeyDown={onCityKeyDown}
+                    required
+                />
+
+                {citySuggest.length > 0 && (
+                    <ul class="autocomplete-list" ref={cityListRef}>
+                        {citySuggest.map((item, idx) => (
+                            <li
+                                class={idx === highlightIndex ? "active" : ""}
+                                onPointerDown={() => {
+                                    setCity(item);
+                                    setCitySuggest([]);
+                                    setHighlightIndex(-1);
+                                }}
+                            >
+                                {item}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            {/* STREET */}
+            <div class="autocomplete-wrapper">
+                <input
+                    class={`fuz-input w-full ${
+                        streetSuggest.length ? "autocomplete-open" : ""
+                    } ${streetDisabled ? "opacity-50 cursor-not-allowed" : ""}`}
+                    placeholder={
+                        streetDisabled
+                            ? "W tej miejscowości nie występują"
+                            : "Wpisz ulicę..."
+                    }
+                    value={street}
+                    readOnly={streetDisabled}
+                    onInput={streetDisabled ? undefined : onStreetInput}
+                    onKeyDown={streetDisabled ? undefined : onStreetKeyDown}
+                    required={streetRequired}
+                />
+
+                {streetSuggest.length > 0 && (
+                    <ul class="autocomplete-list" ref={streetListRef}>
+                        {streetSuggest.map((item, idx) => (
+                            <li
+                                class={idx === streetHighlightIndex ? "active" : ""}
+                                onPointerDown={() => {
+                                    setStreet(item);
+                                    setStreetSuggest([]);
+                                    setStreetHighlightIndex(-1);
+                                }}
+                            >
+                                {item}
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            {/* NUMBER */}
+            <input
+                class="fuz-input"
+                placeholder="np. 1A"
+                value={number}
+                onInput={(e) => setNumber(e.target.value)}
+                required
+            />
+
+            {/* ERROR */}
+            {error && (
+                <p class="text-red-600 dark:text-red-400 text-sm">{error}</p>
+            )}
+
+            {/* BUTTON */}
+            <button
+                class="btn btn-outline w-full py-3 flex items-center justify-center gap-2"
+                disabled={loading}
+            >
+                {loading ? (
+                    <span class="w-5 h-5 border-2 border-[var(--fuz-accent)] border-t-transparent rounded-full animate-spin"></span>
+                ) : (
+                    "Sprawdź dostępność →"
+                )}
+            </button>
+        </form>
+    );
+}

src/pages/api/all-cities.ts

@@ -0,0 +1,18 @@
+import type { APIRoute } from "astro";
+import Database from "better-sqlite3";
+
+type CityRow = { city: string };
+
+export const GET: APIRoute = async () => {
+  const db = new Database("./src/data/ServicesRange.db", { readonly: true });
+
+  const rows = db
+    .prepare(`SELECT DISTINCT city FROM ranges ORDER BY city`)
+    .all() as CityRow[];
+
+  const cities = rows.map(r => r.city);
+
+  return new Response(JSON.stringify(cities), {
+    headers: { "Content-Type": "application/json" },
+  });
+};

src/pages/api/cities-autocomplete.ts

@@ -0,0 +1,47 @@
+import type { APIRoute } from "astro";
+import Database from "better-sqlite3";
+
+// 🔥 Funkcja normalizująca — identyczna jak w C#
+function normalize(input: string): string {
+  return input
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "") // usuwa ogonki
+    .toLowerCase();
+}
+
+type CityRow = {
+  city: string;
+};
+
+export const GET: APIRoute = async ({ request }) => {
+  const url = new URL(request.url);
+  const q = url.searchParams.get("q")?.trim() || "";
+
+  if (q.length < 2) {
+    return new Response(JSON.stringify([]), {
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const db = new Database("./src/data/ServicesRange.db", { readonly: true });
+
+  // 🔥 Pobieramy wszystkie miasta (jest ich mało – to działa błyskawicznie)
+  const stmt = db.prepare(`
+    SELECT DISTINCT city
+    FROM ranges
+  `);
+
+  const rows = stmt.all() as CityRow[];
+
+  // 🔥 Normalizujemy po stronie Node — ZERO problemów z kolacją SQLite
+  const pattern = normalize(q);
+
+  const filtered = rows
+    .filter((row) => normalize(row.city).includes(pattern))
+    .slice(0, 20) // LIMIT 20
+    .map((r) => r.city);
+
+  return new Response(JSON.stringify(filtered), {
+    headers: { "Content-Type": "application/json" },
+  });
+};

src/pages/api/contact.ts

@@ -0,0 +1,52 @@
+import type { APIRoute } from "astro";
+import nodemailer from "nodemailer";
+import yaml from "js-yaml";
+import fs from "fs";
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const form = await request.json();
+
+    // Wczytanie YAML
+    const mailCfg = yaml.load(
+      fs.readFileSync("./src/content/contact/contact.yaml", "utf8")
+    ) as any;
+
+    // Stworzenie transportera
+    const transporter = nodemailer.createTransport({
+      host: import.meta.env.SMTP_HOST,
+      port: Number(import.meta.env.SMTP_PORT),
+      secure: true,
+      auth: {
+        user: import.meta.env.SMTP_USER,
+        pass: import.meta.env.SMTP_PASS,
+      },
+      tls: {
+        rejectUnauthorized: false,
+      },
+    });
+
+    // Wysyłka
+    await transporter.sendMail({
+      from: `"${mailCfg.mail.from_name}" <${import.meta.env.SMTP_USER}>`,
+      to: mailCfg.mail.to,
+      subject: `Od ${form.firstName} ${form.lastName}`,
+      text: `
+Imię: ${form.firstName}
+Nazwisko: ${form.lastName}
+Email: ${form.email}
+Telefon: ${form.phone}
+Temat: ${form.subject}
+
+Wiadomość:
+${form.message}
+      `,
+    });
+
+    return new Response(JSON.stringify({ ok: true }), { status: 200 });
+
+  } catch (error) {
+    console.error("MAIL ERROR:", error);
+    return new Response(JSON.stringify({ ok: false, error }), { status: 500 });
+  }
+};

src/pages/api/has-streets.ts

@@ -0,0 +1,35 @@
+import type { APIRoute } from "astro";
+import Database from "better-sqlite3";
+
+interface HasStreetsRow {
+  cnt: number;
+}
+
+export const GET: APIRoute = async ({ request }) => {
+  const url = new URL(request.url);
+  const city = url.searchParams.get("city")?.trim() || "";
+
+  if (!city) {
+    return new Response(JSON.stringify({ hasStreets: false }), {
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const db = new Database("./src/data/ServicesRange.db", { readonly: true });
+
+  const stmt = db.prepare(`
+  SELECT COUNT(*) AS cnt
+    FROM ranges
+    WHERE LOWER(city) = LOWER(?)
+      AND TRIM(street) <> ''
+  `);
+
+  const row = stmt.get(city) as HasStreetsRow;
+
+  return new Response(
+    JSON.stringify({
+      hasStreets: row.cnt > 0,
+    }),
+    { headers: { "Content-Type": "application/json" } }
+  );
+};

src/pages/api/search.ts

@@ -0,0 +1,85 @@
+import type { APIRoute } from "astro";
+import Database from "better-sqlite3";
+
+interface RangeRow {
+  city: string;
+  street: string;
+  number: string;
+  availableFiber: number;
+  availableRadio: number;
+  lat: number;
+  lon: number;
+}
+
+export const POST: APIRoute = async ({ request }) => {
+  try {
+    const body = await request.json();
+    const city = body.city?.trim() || "";
+    const street = body.street?.trim() || "";
+    const number = body.number?.trim() || "";
+
+    if (!city || !number) {
+      return new Response(JSON.stringify({ ok: false }), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    const db = new Database("./src/data/ServicesRange.db", { readonly: true });
+
+    const stmtHas = db.prepare(`
+      SELECT COUNT(*) AS cnt
+      FROM ranges
+      WHERE LOWER(city) = LOWER(?) AND TRIM(street) <> ''
+    `);
+
+    const has = (stmtHas.get(city) as { cnt: number }).cnt > 0;
+    let row: RangeRow | undefined;
+
+    if (!has) {
+      const stmt = db.prepare(`
+        SELECT *
+        FROM ranges
+        WHERE LOWER(city) = LOWER(?)
+          AND TRIM(number) = ?
+        LIMIT 1
+      `);
+      row = stmt.get(city, number) as RangeRow | undefined;
+
+    } else if (street === "") {
+      const stmt = db.prepare(`
+        SELECT *
+        FROM ranges
+        WHERE LOWER(city) = LOWER(?)
+          AND TRIM(number) = ?
+        LIMIT 1
+      `);
+      row = stmt.get(city, number) as RangeRow | undefined;
+
+    } else {
+      const stmt = db.prepare(`
+        SELECT *
+        FROM ranges
+        WHERE LOWER(city) = LOWER(?)
+          AND LOWER(street) = LOWER(?)
+          AND TRIM(number) = ?
+        LIMIT 1
+      `);
+      row = stmt.get(city, street, number) as RangeRow | undefined;
+    }
+
+    if (!row) {
+      return new Response(JSON.stringify({ ok: false }), {
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    return new Response(
+      JSON.stringify({ ok: true, result: row }),
+      { headers: { "Content-Type": "application/json" } }
+    );
+
+  } catch (err) {
+    console.error("SEARCH API ERROR:", err);
+    return new Response(JSON.stringify({ ok: false }), { status: 500 });
+  }
+};

src/pages/api/streets-autocomplete.ts

@@ -0,0 +1,51 @@
+import type { APIRoute } from "astro";
+import Database from "better-sqlite3";
+
+type StreetRow = {
+  street: string;
+};
+
+// 🔥 Funkcja normalizująca — taka sama jak dla miast
+function normalize(input: string): string {
+  return input
+    .normalize("NFD")
+    .replace(/\p{Diacritic}/gu, "") // usuwa ogonki
+    .toLowerCase();
+}
+
+export const GET: APIRoute = async ({ request }) => {
+  const url = new URL(request.url);
+
+  const city = url.searchParams.get("city")?.trim() || "";
+  const q = url.searchParams.get("q")?.trim() || "";
+
+  if (!city || q.length < 1) {
+    return new Response(JSON.stringify([]), {
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+
+  const db = new Database("./src/data/ServicesRange.db", { readonly: true });
+
+  // 🔥 Pobieramy WSZYSTKIE ulice tego miasta (jest ich mało)
+  const stmt = db.prepare(`
+    SELECT DISTINCT street
+    FROM ranges
+    WHERE city = ?
+    ORDER BY street
+  `);
+
+  const rows = stmt.all(city) as StreetRow[];
+
+  // 🔥 Normalizujemy porównanie — SQLite LIKE NIE JEST UŻYWANE
+  const pattern = normalize(q);
+
+  const filtered = rows
+    .filter((row) => normalize(row.street).includes(pattern))
+    .slice(0, 20)
+    .map((r) => r.street);
+
+  return new Response(JSON.stringify(filtered), {
+    headers: { "Content-Type": "application/json" },
+  });
+};

src/pages/mapa-zasiegu/index.astro

@@ -1,219 +1,228 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
 import MapGoogle from "../../components/maps/MapGoogle.astro";
-import MapSwitch from "../../components/maps/MapSwitch.astro";
+import MapRangeSwitch from "../../islands/MapRangeSwitch.jsx";
+import RangeForm from "../../islands/RangeForm.jsx";
+import "../../styles/map-google.css";
 
 const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
-const lat = 52.597388
+const lat = 52.597388;
 const lon = 21.456797;
-const mapStyleId="8e0a97af9476f2d3"
+const mapStyleId = "8e0a97af9476f2d3";
+const res = await fetch(Astro.url.origin + "/api/all-cities");
+const cities = await res.json();
 ---
 
-<DefaultLayout title="FUZ Mapa zasięgu sieci">
-
-  <section class="flex flex-col md:flex-row min-h-screen">
-
-  <!-- PANEL (mobile = pełna szerokość, desktop = 340px) -->
-  <aside
-    class="w-full md:w-[340px]
-           bg-[var(--fuz-bg)]
-           text-[var(--fuz-text)]
-           border-r border-gray-200 dark:border-slate-700
-           pt-6 px-6
-           flex flex-col gap-6
-           overflow-y-auto
-           z-40">
-
-    <h3 class="text-3xl">Pokaż zasięg sieci</h3>
-
-    <div class="flex flex-col gap-4">
-      <MapSwitch id="fiber-toggle" label="ZASIĘG ŚWIATŁOWODU" />
-      <MapSwitch id="radio-toggle" label="ZASIĘG RADIOWY" />
-    </div>
-
-    <h3 class="text-3xl">Sprawdź dostępność</h3>
-
-    <div>
-      <label class="block text-sm mb-1 text-[var(--fuz-text)]">Miasto</label>
-      <select id="city" class="fuz-input"></select>
-    </div>
-
-    <div>
-      <label class="block text-sm mb-1">Ulica</label>
-      <select id="street" class="fuz-input"></select>
-    </div>
-
-    <div>
-      <label class="block text-sm mb-1">Numer</label>
-      <input id="number" type="text" placeholder="np. 1A" class="fuz-input" />
-    </div>
-
-    <button id="search-btn" class="btn btn-outline w-full py-3">
-      Sprawdź dostępność →
-    </button>
-  </aside>
-
-  <!-- MAPA (mobile = wysoka, desktop = pełna wysokość) -->
-  <div class="flex-1 relative z-10 min-h-[70vh] md:min-h-0">
-    <MapGoogle 
-      apiKey={apiKey}
-      lat={lat}
-      lon={lon}
-      zoom={14}
-      showMarker={true}
-      mode="full"
-      mapStyleId={mapStyleId}
-    />
-  </div>
-
-</section>
-
-
-  <!-- ======================= -->
-  <!-- LOGIKA MAPY (KML warstwy) -->
-  <!-- ======================= -->
-<script is:inline>
-  let fiberLayer = null;
-  let radioLayer = null;
-
-  function getActiveMap() {
-    if (!window.fuzMaps) return null;
-    // pobierz pierwszą mapę na stronie
-    return Object.values(window.fuzMaps)[0] || null;
-  }
-
-  function fiberRangeShow() {
-    const map = getActiveMap();
-    if (!map) return;
-
-    if (fiberLayer) {
-      fiberLayer.setMap(null);
-      fiberLayer = null;
-    } else {
-      fiberLayer = new google.maps.KmlLayer(
-        "https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
-        { suppressInfoWindows: true, preserveViewport: false }
-      );
-      fiberLayer.setMap(map);
-    }
-  }
-
-  function radioRangeShow() {
-    const map = getActiveMap();
-    if (!map) return;
-
-    if (radioLayer) {
-      radioLayer.setMap(null);
-      radioLayer = null;
-    } else {
-      radioLayer = new google.maps.KmlLayer(
-        "https://www.google.com/maps/d/kml?mid=1c08LxJ9uCbWWfCCyopJmAMLQI1rmTkA&forcekml=1",
-        { suppressInfoWindows: true, preserveViewport: true }
-      );
-      radioLayer.setMap(map);
+<script>
+  declare global {
+    interface Window {
+      handleMapSwitch?: (mode: string) => void;
+      showAddressOnMap?: (result: any) => void;
+      fuzMaps?: any;
     }
   }
 </script>
-  <!-- LOGIKA MIASTO/ULICA/NUMER – możesz tymczasowo wyłączyć API -->
+
+<DefaultLayout title="FUZ Mapa zasięgu sieci">
+  <section class="flex flex-col md:flex-row h-full min-h-[80vh]">
+    <!-- PANEL -->
+    <aside
+      class="w-full md:w-[340px] bg-[var(--fuz-bg)] text-[var(--fuz-text)]
+             border-r border-gray-200 dark:border-slate-700 pt-6 px-6
+             flex flex-col gap-6 overflow-y-auto z-40"
+    >
+      <h3 class="text-3xl">Sprawdź dostępność usług</h3>
+      <p class="text-sm">
+        Wybierz swoją miejscowość i ulicę oraz numer budynku, aby sprawdzić dostępność naszych
+        usług internetowych w Twojej okolicy.
+      </p>
+
+      <!-- 🔵 WYNIOSŁY FORMULARZ (ISLAND) -->
+      <RangeForm client:load />
+    </aside>
+
+    <!-- MAPA -->
+    <div class="flex-1 relative min-h-[50vh] md:min-h-0">
+      <div class="map-range-container">
+        <MapRangeSwitch client:load />
+      </div>
+
+      <MapGoogle
+        apiKey={apiKey}
+        lat={lat}
+        lon={lon}
+        zoom={12}
+        showMarker={true}
+        mode="full"
+        mapStyleId={mapStyleId}
+      />
+    </div>
+  </section>
+
+  <!-- ===================================================== -->
+  <!-- WARSTWY KML -->
+  <!-- ===================================================== -->
+
   <script is:inline>
-    const citySelect = document.getElementById("city");
-    const streetSelect = document.getElementById("street");
-    const numberInput = document.getElementById("number");
-    const searchBtn = document.getElementById("search-btn");
+    let fiberLayer = null;
+    let radioLayer = null;
 
-    async function loadCities() {
-      try {
-        const res = await fetch("/api/cities");
-        if (!res.ok) throw new Error("API off");
-        const list = await res.json();
-        citySelect.innerHTML = list.map(c => `<option>${c}</option>`).join("");
-        loadStreets();
-      } catch {
-        console.info("API do zasięgu wyłączone — czeka na backend.");
-      }
-    }
+    window.getActiveMap = function () {
+      if (!window.fuzMaps) return null;
+      return Object.values(window.fuzMaps)[0] || null;
+    };
 
-    async function loadStreets() {
-      try {
-        const city = citySelect.value;
-        const res = await fetch(`/api/streets?city=${encodeURIComponent(city)}`);
-        if (!res.ok) throw new Error("API off");
-        const list = await res.json();
-        streetSelect.innerHTML = list.map(s => `<option>${s}</option>`).join("");
-      } catch {
-        // ignorujemy na razie
-      }
-    }
+    window.fiberRangeShow = function (show) {
+      const map = window.getActiveMap();
+      if (!map) return;
 
-    citySelect?.addEventListener("change", loadStreets);
-
-    searchBtn?.addEventListener("click", async () => {
-      const city = citySelect.value;
-      const street = streetSelect.value;
-      const number = numberInput.value.trim();
-
-      if (!number) {
-        showToast("Podaj numer domu / lokalu.", "error");
+      if (!show && fiberLayer) {
+        fiberLayer.setMap(null);
+        fiberLayer = null;
         return;
       }
 
-      try {
-        const res = await fetch("/api/search", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ city, street, number }),
-        });
-
-        if (!res.ok) throw new Error("API off");
-
-        const result = await res.json();
-
-        if (!result) {
-          showToast("Brak usługi pod wskazanym adresem.", "info");
-          return;
-        }
-
-        if (typeof showAddressOnMap === "function") {
-          showAddressOnMap(result);
-          showToast("Znaleziono adres – zaznaczono na mapie!", "success");
-        }
-      } catch {
-        showToast("API do zasięgu wyłączone — czeka na backend.", "info");
+      if (show && !fiberLayer) {
+        fiberLayer = new google.maps.KmlLayer(
+          "https://www.google.com/maps/d/kml?mid=1Or8SF_9qx6QMdidS-99V_jqQuhF9de0&forcekml=1",
+          { suppressInfoWindows: true, preserveViewport: false },
+        );
+        fiberLayer.setMap(map);
       }
-    });
+    };
 
-    loadCities();
+    window.radioRangeShow = function (show) {
+      const map = window.getActiveMap();
+      if (!map) return;
+
+      if (!show && radioLayer) {
+        radioLayer.setMap(null);
+        radioLayer = null;
+        return;
+      }
+
+      if (show && !radioLayer) {
+        radioLayer = new google.maps.KmlLayer(
+          "https://www.google.com/maps/d/kml?mid=1c08LxJ9uCbWWfCCyopJmAMLQI1rmTkA&forcekml=1",
+          { suppressInfoWindows: true, preserveViewport: false },
+        );
+        radioLayer.setMap(map);
+      }
+    };
+
+    window.handleMapSwitch = function (mode) {
+      if (mode === "swiatlowodowy") {
+        window.fiberRangeShow(true);
+        window.radioRangeShow(false);
+      } else if (mode === "radiowy") {
+        window.fiberRangeShow(false);
+        window.radioRangeShow(true);
+      } else {
+        window.fiberRangeShow(false);
+        window.radioRangeShow(false);
+      }
+    };
   </script>
 
-  <!-- TOAST -->
-  <div
-    id="toast"
-    class="fixed top-5 left-1/2 -translate-x-1/2 z-[9999] 
-           space-y-3 flex flex-col items-center"
-  ></div>
+  <!-- ===================================================== -->
+  <!-- FUNKCJA: POKAZYWANIE MARKERA NA MAPIE -->
+  <!-- ===================================================== -->
 
   <script is:inline>
-    function showToast(message, type = "info") {
-      const toastContainer = document.getElementById("toast");
+    window.showAddressOnMap = async function (result) {
+      const map = window.getActiveMap();
+      if (!map) return;
 
-      const el = document.createElement("div");
-      el.className = `
-        px-4 py-3 rounded-xl shadow-lg text-white text-sm 
-        animate-fade-in-down
-        ${type === "error" ? "bg-red-600" : ""}
-        ${type === "success" ? "bg-green-600" : ""}
-        ${type === "info" ? "bg-[var(--fuz-accent)]" : ""}
-      `;
-      el.textContent = message;
+      // Jeśli API jeszcze się nie załadowało – czekamy na Promise
+      if (!window.google?.maps?.importLibrary) {
+        await new Promise((resolve) => {
+          const int = setInterval(() => {
+            if (window.google?.maps?.importLibrary) {
+              clearInterval(int);
+              resolve(true);
+            }
+          }, 50);
+        });
+      }
 
-      toastContainer.appendChild(el);
+      // NOWE LIBRARIES
+      const { AdvancedMarkerElement } =
+        await google.maps.importLibrary("marker");
+      const { InfoWindow } = await google.maps.importLibrary("maps");
 
-      setTimeout(() => {
-        el.style.opacity = 0;
-        el.style.transform = "translateY(-10px)";
-        setTimeout(() => el.remove(), 300);
-      }, 3000);
-    }
+      // Kasujemy stare
+      if (window._activeMarker) window._activeMarker.map = null;
+      if (window._activeInfo) window._activeInfo.close();
+
+      const pos = { lat: result.lat, lng: result.lon };
+
+      // ★ Nowy marker
+      const marker = new AdvancedMarkerElement({
+        map,
+        position: pos,
+        title: `${result.city} ${result.street ?? ""} ${result.number}`,
+      });
+
+      window._activeMarker = marker;
+
+      // ★ Nowy infoWindow — działa tak samo, ale z importLibrary
+      const html = `
+      <div style="font-size:14px; line-height:1.5; padding:2px; color:#000;">
+        <div style="margin-bottom:6px;">
+          <strong>${result.city}</strong><br/>
+          <strong>${result.street ?? ""} ${result.number}</strong>
+        </div>
+
+        <div>
+          ${
+            result.availableFiber
+              ? '✔ <span style="color:green;">Internet światłowodowy dostępny</span>'
+              : '✖ <span style="color:red;">Internet światłowodowy niedostępny</span>'
+          }<br/>
+          ${
+            result.availableRadio
+              ? '✔ <span style="color:green;">Internet radiowy dostępny</span>'
+              : '✖ <span style="color:red;">Internet radiowy niedostępny</span>'
+          }
+        </div>
+
+        <a href="/#kontakt"
+           style="display:block; margin-top:8px;
+                  background:#00aaff; color:white;
+                  padding:6px 8px; text-align:center;
+                  text-decoration:none; border-radius:6px;"
+                  title="Przejdź do formularza kontaktowego">
+          Przejdź do kontaktu →
+        </a>
+      </div>
+    `;
+
+      const info = new InfoWindow({ content: html });
+      window._activeInfo = info;
+
+      info.open({
+        map,
+        anchor: marker,
+      });
+
+      map.setCenter(pos);
+      map.setZoom(16);
+    };
   </script>
-
 </DefaultLayout>
+
+<style is:global>
+  .fade-in {
+    animation: fuzFadeIn 0.25s ease-out forwards;
+  }
+  @keyframes fuzFadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-6px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>

src/styles/buttons.css

@@ -1,4 +1,3 @@
-/* Podstawowe ustawienia wspólne */
 .btn {
   @apply inline-flex items-center justify-center 
          font-semibold rounded-lg px-6 py-3
@@ -6,7 +5,6 @@
          cursor-pointer select-none;
 }
 
-/* Wariant główny */
 .btn-primary {
   background-color: var(--btn-bg);
   color: var(--btn-text);
@@ -16,7 +14,6 @@
   filter: brightness(0.95);
 }
 
-/* Wariant outline */
 .btn-outline {
   background-color: transparent;
   border: 2px solid var(--btn-outline-border);
@@ -27,7 +24,6 @@
   background-color: var(--btn-outline-bg-hover);
 }
 
-/* Wariant ghost (bez obramowania) */
 .btn-ghost {
   background-color: transparent;
   color: var(--btn-ghost-text);
@@ -92,3 +88,40 @@
   color: var(--fuz-accent);
   transition: color 0.2s ease;
 } */
+
+
+/* Kapsuła — input + dropdown jako jedna całość */
+.autocomplete-wrapper {
+  position: relative;
+}
+
+/* Input (gdy dropdown otwarty) */
+.autocomplete-open {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  border-bottom-width: 0 !important;
+}
+
+/* Dropdown */
+.autocomplete-list {
+  @apply absolute left-0 right-0 z-50 bg-[var(--fuz-bg)] text-[var(--fuz-text)]
+         border border-gray-300 dark:border-slate-700
+         rounded-b-xl shadow-xl max-h-56 overflow-auto;
+
+  border-top: none; /* ważne */
+  animation: fadeIn 0.12s ease-out;
+}
+
+.autocomplete-list li {
+  @apply px-4 py-2 cursor-pointer transition-colors;
+}
+
+.autocomplete-list li:hover,
+.autocomplete-list li.active {
+  @apply bg-gray-100 dark:bg-slate-800;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-2px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

src/styles/contact.css

@@ -33,30 +33,36 @@
   color: var(--fuz-text);
 }
 
-.fuz-rodo a {
-  color: var(--fuz-accent);              /* Twój kolor linków */
-}
+/* .fuz-rodo a {
+  color: var(--fuz-accent);            
+} */
 
 .fuz-rodo a:hover {
   color: var(--fuz-accent-hover);        /* jeśli masz globalne zmienne */
 }
 /* --- TOAST --- */
+/* --- TOAST SYSTEM (Tailwind version) --- */
 
 .fuz-toast {
-  @apply fixed top-5 right-5 z-[9999];
+  @apply fixed top-5 left-1/2 z-[9999] pointer-events-none;
+  @apply opacity-0 -translate-y-3 -translate-x-1/2 transition-all duration-300 ease-out;
+}
+
+.fuz-toast.visible {
+  @apply opacity-100 translate-y-0;
 }
 
 .fuz-toast-msg {
-  @apply px-5 py-3 rounded-xl shadow-lg;
+  @apply px-5 py-3 rounded-xl shadow-lg text-sm;
+  background: var(--fuz-accent);
   color: var(--fuz-accent-text);
 }
 
-/* SUKCES = accent */
 .fuz-toast-msg.success {
-  background-color: var(--fuz-accent);
+  background: var(--fuz-accent);
 }
 
-/* ERROR — czerwony zostaje, bo to wyjątek */
 .fuz-toast-msg.error {
-  background-color: #ff4d4f;
+  @apply bg-red-500 text-white;
 }
+

src/styles/map-google.css

@@ -21,3 +21,37 @@
   /* @apply col-span-2 w-full border-cyan-200; */
   @apply w-full max-w-7xl mx-auto mt-6;
 }
+
+.map-range-container {
+  @apply sticky top-[67px] z-[999] flex justify-center w-full pointer-events-auto;
+  /* position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 9000;
+  display: flex;
+  justify-content: center; */
+
+}
+
+.map-range-switch {
+  background: var(--fuz-bg);
+}
+
+.map-range-switch .fuz-switch-group {
+  display: flex;
+  gap: 8px;
+}
+
+/* Mobile: pionowo */
+@media (max-width: 640px) {
+  .map-range-switch .fuz-switch-group {
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .map-range-switch .fuz-switch {
+    width: 100%;
+    text-align: center;
+  }
+}

src/styles/offers/offers-switches.css

@@ -3,7 +3,7 @@
 }
 
 .fuz-switch-group {
-  @apply inline-flex rounded-full overflow-hidden relative;
+  @apply inline-flex overflow-hidden relative;
   background: rgba(0, 0, 0, 0.08);
 }
 
@@ -16,16 +16,16 @@
 .fuz-switch {
   @apply px-6 py-2 text-sm font-semibold cursor-pointer select-none transition-all;
   color: var(--fuz-text);
-  opacity: 0.7;
+  /* opacity: 0.7; */
 }
 
 .fuz-switch:hover {
-  opacity: 0.9;
+  /* opacity: 0.9; */
 }
 
 .fuz-switch.active {
   background: var(--fuz-accent);
   color: var(--btn-text);
-  opacity: 1;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+  /* opacity: 1; */
+  /* box-shadow: 0 2px 8px rgba(0,0,0,0.18); */
 }