"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactText from "@/components/sections/contact/ContactText";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterCard from "@/components/sections/footer/FooterCard";
import Link from "next/link";
import { HelpCircle, Instagram, Facebook, MessageCircle } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "home" },
    { name: "Menu", id: "menu" },
    { name: "Reservations", id: "reservations" },
    { name: "Gallery", id: "gallery" },
    { name: "Contact", id: "contact" },
  ];

  const contactFaqs = [
    {
      id: "contact-1",
      title: "What are your contact details?",
      content: "You can reach us at +92 (300) 1234567 via phone or WhatsApp. Our location is Behind GEO Shinwari, Karachi–Hyderabad Motorway, near Nasra School, Sector 3B Gulzar-e-Hijri Scheme 33, Karachi, Pakistan. Email inquiries can also be sent to info@thederapakistan.com.",
    },
    {
      id: "contact-2",
      title: "What are your business hours?",
      content: "The Dera Cafe & Restaurant is open daily from morning through 3 AM for late-night dining and hangouts. We're available 7 days a week to serve you. Whether it's breakfast, lunch, dinner, or late-night cravings, we're here for you.",
    },
    {
      id: "contact-3",
      title: "How do I get to The Dera from the airport?",
      content: "From Karachi International Airport, it's approximately 30-35 minutes by car to our location. We recommend using Google Maps or your preferred ride-sharing service. Our location markers are clearly visible on all major maps. For directions, visit our Google Maps listing or call us for detailed guidance.",
    },
    {
      id: "contact-4",
      title: "Can I reach you on social media?",
      content: "Yes! Follow us on Instagram and Facebook @TheDeraPakistan for daily updates, menu specials, and event announcements. You can also send us direct messages on social media for inquiries, reservations, or feedback. We respond to messages within 2-4 hours during business hours.",
    },
    {
      id: "contact-5",
      title: "How do I provide feedback or file a complaint?",
      content: "We value your feedback! You can reach out directly through WhatsApp, email, or call our management team. You can also fill out our feedback form on this website or leave a review on Google, Daraz Food, or Foodpanda. We take all feedback seriously and respond promptly.",
    },
    {
      id: "contact-6",
      title: "Do you have a physical address for mail correspondence?",
      content: "Our physical address is Behind GEO Shinwari, Karachi–Hyderabad Motorway, near Nasra School, Sector 3B Gulzar-e-Hijri Scheme 33, Karachi, Pakistan. For official correspondence or collaboration inquiries, please email info@thederapakistan.com or call during business hours.",
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="grid"
      cardStyle="glass-elevated"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="The Dera"
          navItems={navItems}
          button={{
            text: "Order Online",
            href: "#order",
          }}
        />
      </div>

      <div id="contact-hero" data-section="contact-hero">
        <ContactText
          text="Get in Touch with The Dera"
          animationType="reveal-blur"
          buttons={[
            {
              text: "Call Us",
              href: "tel:+923001234567",
            },
            {
              text: "WhatsApp Message",
              href: "https://wa.me/923001234567",
            },
            {
              text: "Email Us",
              href: "mailto:info@thederapakistan.com",
            },
          ]}
          background={{
            variant: "radial-gradient",
          }}
          useInvertedBackground={true}
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqDouble
          title="Contact & Location Information"
          description="Find all the details you need to reach us and visit The Dera Cafe & Restaurant"
          tag="Get In Touch"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          faqs={contactFaqs}
          faqsAnimation="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="smooth"
          ariaLabel="Contact FAQ section"
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactText
          text="Ready to Visit or Order?"
          animationType="entrance-slide"
          buttons={[
            {
              text: "Make a Reservation",
              href: "/reservations",
            },
            {
              text: "Order Online",
              href: "#order",
            },
            {
              text: "Back to Home",
              href: "/",
            },
          ]}
          background={{
            variant: "downward-rays-animated-grid",
          }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="The Dera Cafe & Restaurant"
          copyrightText="© 2025 The Dera Cafe & Restaurant. All rights reserved. | Karachi, Pakistan"
          socialLinks={[
            {
              icon: Instagram,
              href: "https://instagram.com",
              ariaLabel: "Instagram",
            },
            {
              icon: Facebook,
              href: "https://facebook.com",
              ariaLabel: "Facebook",
            },
            {
              icon: MessageCircle,
              href: "https://wa.me/923001234567",
              ariaLabel: "WhatsApp",
            },
          ]}
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}