Porządkowanie kodu, dodanie sekcji wyszukiwania kanałów

src/pages/kontakt/index.astro

@@ -1,14 +1,179 @@
 ---
 import DefaultLayout from "../../layouts/DefaultLayout.astro";
-import SectionContact from "../../components/sections/SectionContact.astro";
+import MapGoogle from "../../components/maps/MapGoogle.astro";
 
-const seo = {
-  title: "Kontakt – FUZ",
-  description: "Kontakt – FUZ",
-  canonical: "/kontakt"
-};
+import yaml from "js-yaml";
+import fs from "fs";
+
+const data = yaml.load(
+  fs.readFileSync("./src/content/contact/contact.yaml", "utf8"),
+);
+
+const seo = yaml.load(
+  fs.readFileSync("./src/content/internet-swiatlowodowy/seo.yaml", "utf8"),
+);
+
+const apiKey = import.meta.env.PUBLIC_GOOGLE_MAPS_KEY;
+const form = data.form;
 ---
 
 <DefaultLayout seo={seo}>
-  <SectionContact />
+  <section id="kontakt" class="f-section">
+    <div class="f-contact-grid">
+      <!-- Kolumna lewa -->
+      <div class="f-contact-col-1">
+        <h2>{data.title}</h2>
+        <div class="f-contact-item" set:html={data.description} />
+      </div>
+
+      <div class="f-contact-col-2">
+        <h2>{data.contactFormTitle}</h2>
+        <form id="contactForm" class="f-contact-form">
+          <div class="f-contact-form-inner">
+            <input
+              type="text"
+              name="firstName"
+              placeholder={form.firstName.placeholder}
+              class="f-input"
+              required
+            />
+            <input
+              type="text"
+              name="lastName"
+              placeholder={form.lastName.placeholder}
+              class="f-input"
+              required
+            />
+          </div>
+
+          <div class="grid grid-cols-2 gap-4">
+            <input
+              type="email"
+              name="email"
+              placeholder={form.email.placeholder}
+              class="f-input"
+              required
+              autocomplete="email"
+            />
+            <input
+              type="tel"
+              name="phone"
+              placeholder={form.phone.placeholder}
+              class="f-input"
+              required
+              autocomplete="tel"
+            />
+          </div>
+
+          <input
+            type="text"
+            name="subject"
+            placeholder={form.subject.placeholder}
+            class="f-input"
+            required
+          />
+
+          <textarea
+            name="message"
+            rows={form.message.rows}
+            placeholder={form.message.placeholder}
+            class="f-input"
+            required></textarea>
+
+          <label class="f-rodo">
+            <input type="checkbox" name="rodo" required />
+            <span>
+              {form.rodo.label}
+              <a href={form.rodo.policyLink} title={form.rodo.policyTitle}
+                >{form.rodo.policyText}</a
+              >.
+            </span>
+          </label>
+
+          <button title={form.submit.title}>{form.submit.label}</button>
+        </form>
+      </div>
+    </div>
+
+    <div class="f-contact-map">
+      <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="f-toast"></div>
+  </section>
+
+  <!-- ReCaptcha v3 -->
+  <script
+    is:inline
+    define:vars={{ siteKey: import.meta.env.PUBLIC_RECAPTCHA_SITE_KEY }}
+  >
+    window.FUZ_RECAPTCHA_KEY = siteKey;
+
+    const s = document.createElement("script");
+    s.src = "https://www.google.com/recaptcha/api.js?render=" + siteKey;
+    s.async = true;
+    document.head.appendChild(s);
+  </script>
+
+  <script
+    is:inline
+    define:vars={{
+      successMsg: form.successMessage,
+      errorMsg: form.errorMessage,
+    }}
+  >
+    document.addEventListener("DOMContentLoaded", () => {
+      const form = document.getElementById("contactForm");
+      const toast = document.getElementById("toast");
+
+      if (!form) return;
+
+      form.addEventListener("submit", async (e) => {
+        if (!form.reportValidity()) return;
+        e.preventDefault();
+
+        const data = Object.fromEntries(new FormData(form).entries());
+        data.rodo = form.rodo.checked;
+
+        const token = await grecaptcha.execute(window.FUZ_RECAPTCHA_KEY, {
+          action: "submit",
+        });
+        data.recaptcha = token;
+
+        const resp = await fetch("/api/contact/contact", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+
+        const json = await resp.json();
+
+        showToast(
+          json.ok ? successMsg : errorMsg,
+          json.ok ? "success" : "error",
+        );
+
+        if (json.ok) form.reset();
+      });
+
+      function showToast(msg, type) {
+        toast.innerHTML = `<div class="f-toast-msg ${type}">${msg}</div>`;
+        toast.classList.remove("visible");
+        void toast.offsetWidth;
+        toast.classList.add("visible");
+
+        setTimeout(() => toast.classList.remove("visible"), 3000);
+      }
+    });
+  </script>
 </DefaultLayout>