Add FAQ section and footer phone contact picker

components/layout/Footer.tsx

@@ -4,12 +4,15 @@ import { FaLinkedin } from "react-icons/fa6";
 import { SiGitea, SiViber, SiWhatsapp } from "react-icons/si";
 import type { Locale, Dictionary } from "@/lib/dictionaries";
 import { LogoMark } from "@/components/ui/Logo";
+import FooterPhoneLink from "@/components/layout/FooterPhoneLink";
 
 interface FooterProps {
   locale: Locale;
   dict: Dictionary;
 }
 
+const PHONE_NUMBER = "+387 66 644 094";
+
 export default function Footer({ locale, dict }: FooterProps) {
   const footerLinks = {
     [dict.footer.product]: [
@@ -23,7 +26,8 @@ export default function Footer({ locale, dict }: FooterProps) {
     [dict.footer.connect]: [
       { label: "Source Code", href: "https://git.ksan.dev/ksan", external: true },
       { label: "Email", href: "mailto:contact@ksan.dev", external: true },
-      { label: "+387 66 644 094", href: "tel:+38766644094", external: true },
+      // Opens the call / WhatsApp / Viber picker instead of jumping straight to tel:.
+      { label: PHONE_NUMBER, href: "tel:+38766644094", phone: true },
       { label: "LinkedIn", href: "https://www.linkedin.com/in/%C4%91or%C4%91e-k%C5%A1an-886871266", external: true },
     ],
   };
@@ -87,7 +91,9 @@ export default function Footer({ locale, dict }: FooterProps) {
               <ul className="space-y-3">
                 {links.map((link) => (
                   <li key={link.label}>
-                    {"external" in link && link.external ? (
+                    {"phone" in link && link.phone ? (
+                      <FooterPhoneLink number={link.label} dict={dict} />
+                    ) : "external" in link && link.external ? (
                       <a
                         href={link.href}
                         target={link.href.startsWith("http") ? "_blank" : undefined}

components/layout/FooterPhoneLink.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import PhoneChoiceModal from "@/components/ui/PhoneChoiceModal";
+import type { Dictionary } from "@/lib/dictionaries";
+
+interface FooterPhoneLinkProps {
+  number: string;
+  dict: Dictionary;
+}
+
+// Keeps the footer itself a server component — only the phone entry needs state.
+export default function FooterPhoneLink({ number, dict }: FooterPhoneLinkProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="text-left text-sm text-text-secondary transition-colors hover:text-text-primary"
+      >
+        {number}
+      </button>
+
+      <PhoneChoiceModal
+        open={open}
+        number={number}
+        dict={dict}
+        onClose={() => setOpen(false)}
+      />
+    </>
+  );
+}