Add Viber/WhatsApp contact options

components/sections/ContactForm.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ElementType } from "react";
 import { motion } from "framer-motion";
-import { SiGitea } from "react-icons/si";
+import { SiGitea, SiViber, SiWhatsapp } from "react-icons/si";
 import {
   ArrowRight,
   Mail,
@@ -15,6 +15,7 @@ import {
   AlertCircle,
 } from "lucide-react";
 import GlassCard from "@/components/ui/GlassCard";
+import PhoneChoiceModal from "@/components/ui/PhoneChoiceModal";
 import GlowButton from "@/components/ui/GlowButton";
 import { fadeUp, stagger, viewportConfig } from "@/lib/animations";
 import type { Dictionary } from "@/lib/dictionaries";
@@ -23,11 +24,14 @@ interface ContactFormProps {
   dict: Dictionary;
 }
 
+const PHONE_NUMBER = "+387 66 644 094";
+
 export default function ContactForm({ dict }: ContactFormProps) {
   const t = dict.contactPage;
   const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">(
     "idle",
   );
+  const [phoneOpen, setPhoneOpen] = useState(false);
   const [errorMsg, setErrorMsg] = useState("");
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -68,7 +72,14 @@ export default function ContactForm({ dict }: ContactFormProps) {
     }
   }
 
-  const contactInfo = [
+  const contactInfo: {
+    icon: ElementType;
+    label: string;
+    value: string;
+    href?: string;
+    note?: string;
+    onClick?: () => void;
+  }[] = [
     {
       icon: Mail,
       label: t.emailLabel,
@@ -78,8 +89,9 @@ export default function ContactForm({ dict }: ContactFormProps) {
     {
       icon: Phone,
       label: t.phoneLabel,
-      value: "+387 66 644 094",
-      href: "tel:+38766644094",
+      value: PHONE_NUMBER,
+      note: t.phoneNote,
+      onClick: () => setPhoneOpen(true),
     },
     {
       icon: SiGitea,
@@ -216,8 +228,15 @@ export default function ContactForm({ dict }: ContactFormProps) {
                 <div className="mt-0.5 truncate text-sm font-medium text-text-primary">
                   {item.value}
                 </div>
+                {item.note && (
+                  <div className="mt-1 flex items-center gap-1.5 text-[11px] text-text-secondary">
+                    <SiViber className="h-3 w-3 shrink-0 text-purple-300" />
+                    <SiWhatsapp className="h-3 w-3 shrink-0 text-emerald-300" />
+                    <span className="truncate">{item.note}</span>
+                  </div>
+                )}
               </div>
-              {item.href && (
+              {(item.href || item.onClick) && (
                 <ArrowRight
                   className="h-4 w-4 shrink-0 text-text-secondary transition-transform group-hover:translate-x-0.5"
                   strokeWidth={1.5}
@@ -240,11 +259,27 @@ export default function ContactForm({ dict }: ContactFormProps) {
             >
               {inner}
             </a>
+          ) : item.onClick ? (
+            <button
+              key={item.label}
+              type="button"
+              onClick={item.onClick}
+              className="group block w-full text-left"
+            >
+              {inner}
+            </button>
           ) : (
             <div key={item.label}>{inner}</div>
           );
         })}
       </motion.div>
+
+      <PhoneChoiceModal
+        open={phoneOpen}
+        number={PHONE_NUMBER}
+        dict={dict}
+        onClose={() => setPhoneOpen(false)}
+      />
     </motion.div>
   );
 }