ContactSection add, zmiany w MapGoogle

src/components/sections/SectionContact.astro

@@ -0,0 +1,173 @@
+---
+import yaml from "js-yaml";
+import fs from "fs";
+import MapGoogle from "../maps/MapGoogle.astro";
+import "../../styles/contact.css";
+
+const data = yaml.load(
+    fs.readFileSync("./src/content/contact/contact.yaml", "utf8"),
+);
+const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
+---
+<!-- 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">
+            <h2 class="fuz-section-title">{data.title}</h2>
+            <div class="fuz-contact-description" set:html={data.description} />
+        </div>
+
+        <!-- Formularz -->
+        <div class="fuz-contact-box">
+            <h2 class="fuz-section-title">{data.contactFormTitle}</h2>
+
+            <form id="contactForm" class="fuz-contact-form">
+                <div class="grid grid-cols-2 gap-4">
+                    <input
+                        type="text"
+                        name="firstName"
+                        placeholder="Imię"
+                        class="fuz-input"
+                        required
+                    />
+                    <input
+                        type="text"
+                        name="lastName"
+                        placeholder="Nazwisko"
+                        class="fuz-input"
+                        required
+                    />
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <input
+                        type="email"
+                        name="email"
+                        placeholder="Email"
+                        class="fuz-input"
+                        required
+                    />
+                    <input
+                        type="tel"
+                        name="phone"
+                        placeholder="Telefon"
+                        class="fuz-input"
+                        required
+                    />
+                </div>
+
+                <input
+                    type="text"
+                    name="subject"
+                    placeholder="Temat wiadomości"
+                    class="fuz-input"
+                    required
+                />
+
+                <textarea
+                    rows="5"
+                    name="message"
+                    placeholder="Treść wiadomości"
+                    class="fuz-input"
+                    required></textarea>
+
+                <label class="fuz-rodo">
+                    <input
+                        type="checkbox"
+                        name="rodo"
+                        class="mt-1 h-4 w-4"
+                        required
+                    />
+                    <span>
+                        Wyrażam zgodę na przetwarzanie moich danych osobowych
+                        zgodnie z
+                        <a href="/polityka-prywatnosci">polityką prywatności</a
+                        >.
+                    </span>
+                </label>
+
+                <button class="btn btn-outline w-full py-3 text-lg">
+                    Wyślij wiadomość →
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- GOOGLE MAPS -->
+    <MapGoogle
+        apiKey={apiKey}
+        lat={data.lat}
+        lon={data.lng}
+        zoom={16}
+        title={data.markerTitle}
+        description={data.markerAddress}
+    />
+
+    <div id="toast" class="fuz-toast hidden"></div>
+</section>
+
+<!-- ReCaptcha init -->
+<script
+    is:inline
+    define:vars={{ siteKey: import.meta.env.PUBLIC_RECAPTCHA_SITE_KEY }}
+>
+    window.FUZ_RECAPTCHA_KEY = siteKey;
+
+    const recaptchaScript = document.createElement("script");
+    recaptchaScript.src =
+        "https://www.google.com/recaptcha/api.js?render=" + siteKey;
+    document.head.appendChild(recaptchaScript);
+</script>
+
+<!-- Formularz + toast -->
+<script is:inline>
+    document.addEventListener("DOMContentLoaded", () => {
+        const form = document.getElementById("contactForm");
+        const toast = document.getElementById("toast");
+
+        if (!form) return; // Safety
+
+        form.addEventListener("submit", async (e) => {
+            if (!form.reportValidity()) return;
+
+            e.preventDefault();
+
+            const formData = new FormData(form);
+
+            const payload = Object.fromEntries(formData.entries());
+            payload.rodo = formData.get("rodo") === "on";
+
+            const token = await grecaptcha.execute(window.FUZ_RECAPTCHA_KEY, {
+                action: "submit",
+            });
+            payload.recaptcha = token;
+
+            const resp = await fetch("/api/contact", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload),
+            });
+
+            const json = await resp.json();
+            showToast(
+                json.ok ? "Wiadomość wysłana!" : "Błąd podczas wysyłania.",
+                json.ok ? "success" : "error",
+            );
+
+            if (json.ok) form.reset();
+        });
+
+        function showToast(message, type = "success") {
+            toast.innerHTML = `
+        <div class="fuz-toast-msg ${type}">
+          ${message}
+        </div>
+      `;
+
+            toast.classList.remove("hidden");
+            setTimeout(() => toast.classList.add("hidden"), 3000);
+        }
+    });
+</script>