Update src/app/contact/page.tsx

src/app/contact/page.tsx

@@ -2,12 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import HeroLogo from "@/components/sections/hero/HeroLogo";
 import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
-import FaqSplitText from "@/components/sections/faq/FaqSplitText";
+import ContactFaq from "@/components/sections/contact/ContactFaq";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
-import Link from "next/link";
-import { MessageCircle } from "lucide-react";
+import { Phone, Mail, MapPin, Clock, MessageCircle } from "lucide-react";
 
 export default function ContactPage() {
   const navItems = [
@@ -18,24 +16,9 @@ export default function ContactPage() {
     { name: "Kontakt", id: "contact" },
   ];
 
-  const navItemsWithHref = navItems.map((item) => {
-    const hrefMap: { [key: string]: string } = {
-      home: "/",
-      menu: "/menu",
-      about: "/about",
-      gallery: "/gallery",
-      contact: "/contact",
-    };
-    return {
-      ...item,
-      href: hrefMap[item.id] || "#",
-    };
-  });
-
   const footerColumns = [
     {
-      title: "Lidhje të Shpejta",
-      items: [
+      title: "Lidhje të Shpejta",      items: [
         { label: "Shtëpia", href: "/" },
         { label: "Menu", href: "/menu" },
         { label: "Rreth Nesh", href: "/about" },
@@ -43,8 +26,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Kontakt",
-      items: [
+      title: "Kontakt",      items: [
         { label: "+355 69 351 4999", href: "tel:+355693514999" },
         { label: "Rruga Besim Mema, Tiranë", href: "#" },
         { label: "info@watamitirana.al", href: "mailto:info@watamitirana.al" },
@@ -52,8 +34,7 @@ export default function ContactPage() {
       ],
     },
     {
-      title: "Në Rrjet",
-      items: [
+      title: "Në Rrjet",      items: [
         { label: "Facebook", href: "#" },
         { label: "Instagram", href: "#" },
         { label: "WhatsApp", href: "#" },
@@ -62,6 +43,24 @@ export default function ContactPage() {
     },
   ];
 
+  const contactFaqs = [
+    {
+      id: "faq-1",      title: "Si mund të bëj një rezervim?",      content:
+        "Mund të bëni një rezervim duke plotësuar formularin e kontaktit në këtë faqe. Alternativat: thirrni +355 69 351 4999 ose dërgoni email në info@watamitirana.al. Preferohet të rezervoni të paktën 2 orë më parë."},
+    {
+      id: "faq-2",      title: "Sa është koha e dorëzimit?",      content:
+        "Për porosit për të marrë: 15-20 minuta. Për dorëzim në shtëpi: 30-45 minuta në varësi të lokacionit tuaj në Tiranë. Përgatitja fillon menjëherë pas pranimit të porosisë."},
+    {
+      id: "faq-3",      title: "Çfarë metodash pagese pranoni?",      content:
+        "Pranojmë pagesa në para, kartela krediti/debiti, dhe portalin e-payment. Për porosi online, e-payment është i detyrueshëm."},
+    {
+      id: "faq-4",      title: "A ka alergjie ose kufizime ushqimore?",      content:
+        "Po, këshillojmë që të na kontaktoni paraprakisht për opsionet pa gjalp, pa gluten, ose për alergji specifike ndaj peshkut ose shelfish. Mos hezitoni të na njoftoni në formularin e kontaktit."},
+    {
+      id: "faq-5",      title: "Cili është horari juaj i punës?",      content:
+        "Hapat tonë: Dinshmë deri të martën 12:00 - 23:00, e mërkurë të diel 12:00 - 00:00 (mesnatë). Ndalim të dielën. Këshillojmë të vizitoni gjatë orëve jokulminante për përvojën më të mirë."},
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="text-shift"
@@ -75,158 +74,193 @@ export default function ContactPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="extrabold"
     >
-      {/* Navbar */}
-      <div id="nav" data-section="nav">
+      <div id="nav" data-section="nav" className="mx-auto px-4 md:px-6">
         <NavbarLayoutFloatingInline
           brandName="Watami Tirana"
-          navItems={navItems}
+          navItems={[
+            { name: "Shtëpia", id: "home" },
+            { name: "Menu", id: "menu" },
+            { name: "Rreth Nesh", id: "about" },
+            { name: "Galeri", id: "gallery" },
+            { name: "Kontakt", id: "contact" },
+          ]}
           button={{
-            text: "Rezervo Tavolë",
-            href: "/contact",
-          }}
+            text: "Rezervo Tavolë",            href: "/contact"}}
           animateOnLoad={true}
         />
       </div>
 
-      {/* Hero Section */}
-      <div id="hero-contact" data-section="hero-contact">
-        <HeroLogo
-          logoText="Kontakt & Rezervim"
-          description="Rezervo tavolën tënde tani ose na kontakto për më shumë informacione - ne jemi këtu për të përgatitur përvojën më të mirë"
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1gbcom&_wi=4"
-          imageAlt="Kontakt"
-          buttons={[
-            {
-              text: "Thirrje Drejtpërdrejt",
-              href: "tel:+355693514999",
-            },
-          ]}
-          buttonAnimation="blur-reveal"
-        />
-      </div>
-
-      {/* Contact Form Section */}
-      <div id="contact-form" data-section="contact-form">
+      <div
+        id="contact-form"
+        data-section="contact-form"
+        className="mx-auto px-4 md:px-6"
+      >
         <ContactSplitForm
-          title="Rezervim & Pytje"
-          description="Plotëso formën më poshtë për të rezervuar tavolën tënde ose për të bërë ndonjë pytje. Mund të na kontaktosh gjithashtu drejtpërdrejt nëpër telefon ose WhatsApp."
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ewzroy&_wi=5"
-          imageAlt="Watami Tirana"
+          title="Rezervo Tavolën Tënde Tani"
+          description="Plotëso formularin e mposhtë dhe shtimi ynë do të konfirmojë rezervimin tuaj brenda 2 orësh. Për pyetje urgjente, na thirrni në +355 69 351 4999."
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1gbcom&_wi=3"
+          imageAlt="Watami Tirana - Premium Sushi Dining Experience"
           mediaAnimation="blur-reveal"
           mediaPosition="right"
           useInvertedBackground={false}
           inputs={[
             {
-              name: "name",
-              type: "text",
-              placeholder: "Emri yt",
-              required: true,
+              name: "name",              type: "text",              placeholder: "Emri juaj",              required: true,
             },
             {
-              name: "email",
-              type: "email",
-              placeholder: "Email",
-              required: true,
+              name: "phone",              type: "tel",              placeholder: "+355 69 xxx xxxx",              required: true,
             },
             {
-              name: "phone",
-              type: "tel",
-              placeholder: "+355 69 xxx xxxx",
-              required: true,
-            },
-            {
-              name: "guests",
-              type: "number",
-              placeholder: "Numri i mysafirëve",
-              required: true,
-            },
-            {
-              name: "date",
-              type: "date",
-              placeholder: "Data e kërkuar",
-              required: true,
-            },
-            {
-              name: "time",
-              type: "time",
-              placeholder: "Ora e kërkuar",
-              required: true,
+              name: "date",              type: "date",              placeholder: "Data e kërkuar",              required: true,
             },
           ]}
           textarea={{
-            name: "message",
-            placeholder: "Mesazhi ose kërkesa të veçanta (përjashtim i opsionalit)",
-            rows: 4,
-            required: false,
+            name: "message",            placeholder: "Mesazh shtesë (p.sh. kërkesa të veçanta, alergjitë)",            rows: 4,
           }}
-          buttonText="Dërgo Rezervimin"
+          buttonText="Konfirmo Rezervimin"
         />
       </div>
 
-      {/* FAQ Section */}
-      <div id="faq-contact" data-section="faq-contact">
-        <FaqSplitText
-          sideTitle="Pyetje të Shpeshta"
-          sideDescription="Përgjigjet për pyetjet më të zakonshme rreth Watami Tirana"
-          faqs={[
-            {
-              id: "faq-1",
-              title: "Sa është koha mesatare e pritjes për një rezervim?",
-              content:
-                "Zakonisht, koha e pritjes varet nga numri i mysafirëve dhe ora e rezervimit. Për pikat më të zëna, mund të pritet 15-30 minuta. Rekomandojmë të rezervoni paraprakisht për të siguruar tavolën tuaj.",
-            },
-            {
-              id: "faq-2",
-              title: "A pranoni porosi të shuara?",
-              content:
-                "Po! Mund të porosni përmes platformave të dorëzimit si Wolt ose t'na kontaktoni drejtpërdrejt në +355 69 351 4999 për dorëzim të personalizuar në zona specifike.",
-            },
-            {
-              id: "faq-3",
-              title: "A keni opsione vegetariane?",
-              content:
-                "Po, kemi opsione vegetariane në menunë tonë. Mund të na kontaktoni gjithashtu për të kufizuar pjata sipas kërkesave tuaja dijetike të veçanta.",
-            },
-            {
-              id: "faq-4",
-              title: "Sa është madhësia e një porosie standarde?",
-              content:
-                "Porositë standarde të sushit zakonisht përbëhen nga 6-8 copë për rol. Mund të porositni edhe pjata kombinuese ose sezon të pjatave.",
-            },
-            {
-              id: "faq-5",
-              title: "A keni alergje ose ndalime ushqimore?",
-              content:
-                "Ne sjellim kostot shumë seriozisht. Ju lutemi informojeni rreth ndonjë alergije ose ndalimi ushqimor kur porositni.",
-            },
-            {
-              id: "faq-6",
-              title: "Sa është koha e dorëzimit?",
-              content:
-                "Kohët e dorëzimit zakonisht ndryshojnë përvarësisht se ku jeni. Zakonisht, dorëzimi merr 30-45 minuta brenda Tiranës.",
-            },
-          ]}
-          textPosition="left"
+      <div
+        id="contact-info"
+        data-section="contact-info"
+        className="mx-auto px-4 md:px-6 py-16 md:py-24"
+      >
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          <div className="bg-card border border-foreground/10 rounded-lg p-8 hover:border-primary-cta/30 transition-colors">
+            <div className="flex items-center gap-4 mb-4">
+              <MapPin className="w-6 h-6 text-primary-cta" />
+              <h3 className="text-lg font-semibold text-foreground">
+                Lokacioni
+              </h3>
+            </div>
+            <p className="text-foreground/70 leading-relaxed">
+              Rruga Besim Mema<br />
+              Tiranë, 1000<br />
+              Shqipëri
+            </p>
+            <a
+              href="https://maps.google.com/?q=Watami+Tirana"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block mt-4 text-primary-cta hover:text-primary-cta/80 transition-colors font-medium"
+            >
+              Shiko në Hartë →
+            </a>
+          </div>
+
+          <div className="bg-card border border-foreground/10 rounded-lg p-8 hover:border-primary-cta/30 transition-colors">
+            <div className="flex items-center gap-4 mb-4">
+              <Clock className="w-6 h-6 text-primary-cta" />
+              <h3 className="text-lg font-semibold text-foreground">
+                Horari i Punës
+              </h3>
+            </div>
+            <div className="text-foreground/70 space-y-2">
+              <p>
+                <span className="font-medium">Mon-Tue:</span> 12:00 - 23:00
+              </p>
+              <p>
+                <span className="font-medium">Wed-Sat:</span> 12:00 - 23:00
+              </p>
+              <p>
+                <span className="font-medium">Sunday:</span> 12:00 - 00:00
+              </p>
+              <p>
+                <span className="font-medium text-accent">Ndalim të dielën</span>
+              </p>
+            </div>
+          </div>
+
+          <div className="bg-card border border-foreground/10 rounded-lg p-8 hover:border-primary-cta/30 transition-colors">
+            <div className="flex items-center gap-4 mb-4">
+              <Phone className="w-6 h-6 text-primary-cta" />
+              <h3 className="text-lg font-semibold text-foreground">
+                Kontakti
+              </h3>
+            </div>
+            <div className="space-y-3 text-foreground/70">
+              <p>
+                <a
+                  href="tel:+355693514999"
+                  className="hover:text-primary-cta transition-colors font-medium"
+                >
+                  +355 69 351 4999
+                </a>
+              </p>
+              <p>
+                <a
+                  href="mailto:info@watamitirana.al"
+                  className="hover:text-primary-cta transition-colors font-medium"
+                >
+                  info@watamitirana.al
+                </a>
+              </p>
+              <p className="text-sm">
+                Përgjigja brenda 2 orësh gjatë orëve të punës
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="social-media"
+        data-section="social-media"
+        className="mx-auto px-4 md:px-6 py-12 md:py-16 text-center"
+      >
+        <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
+          Ndiqni Rrjetet Shoqërore
+        </h2>
+        <p className="text-foreground/70 mb-8 max-w-2xl mx-auto">
+          Mbiqini përditësimet më të fundit, fotot e pjatave dhe ofertat ekskluzive
+          në rrjetet tona shoqërore.
+        </p>
+        <div className="flex justify-center gap-6 flex-wrap">
+          <a
+            href="#"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-card border border-foreground/10 rounded-lg hover:border-primary-cta/50 hover:bg-primary-cta/5 transition-all"
+          >
+            <MessageCircle className="w-5 h-5" />
+            <span className="font-medium">Facebook</span>
+          </a>
+          <a
+            href="#"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-card border border-foreground/10 rounded-lg hover:border-primary-cta/50 hover:bg-primary-cta/5 transition-all"
+          >
+            <MessageCircle className="w-5 h-5" />
+            <span className="font-medium">Instagram</span>
+          </a>
+          <a
+            href="#"
+            className="inline-flex items-center gap-2 px-6 py-3 bg-card border border-foreground/10 rounded-lg hover:border-primary-cta/50 hover:bg-primary-cta/5 transition-all"
+          >
+            <MessageCircle className="w-5 h-5" />
+            <span className="font-medium">WhatsApp</span>
+          </a>
+        </div>
+      </div>
+
+      <div
+        id="contact-faq"
+        data-section="contact-faq"
+        className="mx-auto px-4 md:px-6"
+      >
+        <ContactFaq
+          faqs={contactFaqs}
+          ctaTitle="Nuk e gjen përgjigjen që kërkoni?"
+          ctaDescription="Kontaktoni shtimin tonë direkt. Jemi këtu për të ndihmuar!"
+          ctaButton={{
+            text: "Kontakto Shtimin",            href: "#contact-form"}}
+          ctaIcon={Phone}
           useInvertedBackground={false}
-          animationType="smooth"
+          animationType="blur-reveal"
+          accordionAnimationType="smooth"
           showCard={true}
-          faqsAnimation="blur-reveal"
-          buttons={[
-            {
-              text: "Kontakto Nëpër Telefon",
-              href: "tel:+355693514999",
-            },
-            {
-              text: "Kontakto Në WhatsApp",
-              href: "#",
-            },
-          ]}
-          buttonAnimation="blur-reveal"
         />
       </div>
 
-      {/* Footer */}
-      <div id="footer-contact" data-section="footer-contact">
+      <div id="footer-home" data-section="footer-home" className="mx-auto px-4 md:px-6">
         <FooterBaseCard
           logoText="Watami Tirana"
           copyrightText="© 2025 Watami Tirana. Të gjitha të drejtat e rezervuara."
@@ -235,4 +269,4 @@ export default function ContactPage() {
       </div>
     </ThemeProvider>
   );
-}
+}