"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { HelpCircle, Bell } from "lucide-react";

const ContactPage = () => {
  const navItems = [
    { name: "How It Works", id: "how-it-works" },
    { name: "Vehicles", id: "vehicles" },
    { name: "Features", id: "features" },
    { name: "Testimonials", id: "testimonials" },
    { name: "FAQ", id: "faq" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "How It Works", href: "#how-it-works" },
        { label: "Browse Vehicles", href: "#vehicles" },
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#pricing" },
      ],
    },
    {
      items: [
        { label: "About Us", href: "/about" },
        { label: "For Owners", href: "/for-owners" },
        { label: "Blog", href: "/blog" },
        { label: "Careers", href: "/careers" },
      ],
    },
    {
      items: [
        { label: "Contact Support", href: "/contact" },
        { label: "Safety", href: "#safety" },
        { label: "Insurance", href: "#insurance" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "#privacy" },
        { label: "Terms & Conditions", href: "#terms" },
        { label: "Refund Policy", href: "#refund" },
        { label: "Cancellation Policy", href: "#cancellation" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="MultiVehicle"
          navItems={navItems}
          button={{
            text: "Book Now",
            href: "/booking",
          }}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions & Support"
          description="Get instant answers to your questions about booking, payments, refunds, and more."
          tag="Help Center"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          mediaAnimation="blur-reveal"
          faqsAnimation="slide-up"
          mediaPosition="left"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B1TY1lVycNB6OP7jUCAv0IEeap/illustration-showing-customer-support-co-1773655711606-628b70c3.png?_wi=2"
          imageAlt="Customer Support"
          faqs={[
            {
              id: "faq1",
              title: "How do I contact customer support?",
              content: "You can reach our 24/7 support team via in-app chat, email at support@multivehicle.com, or call our helpline. Response time is typically under 2 hours.",
            },
            {
              id: "faq2",
              title: "What should I do if I have an accident?",
              content: "Report the incident immediately through the app. Our insurance team will assess the damage and guide you through the claims process. All our bookings include comprehensive coverage.",
            },
            {
              id: "faq3",
              title: "Can I modify my booking dates?",
              content: "Yes! You can modify your booking up to 24 hours before pickup at no extra charge. After that, we charge a small amendment fee based on availability.",
            },
            {
              id: "faq4",
              title: "What payment methods do you accept?",
              content: "We accept all major credit and debit cards, UPI, net banking, digital wallets (Google Pay, Apple Pay, PhonePe), and BNPL options for eligible customers.",
            },
            {
              id: "faq5",
              title: "Is there a loyalty program?",
              content: "Yes! Frequent renters earn reward points on every booking. Points can be redeemed for discounts or applied to future bookings. Premium members get exclusive deals.",
            },
            {
              id: "faq6",
              title: "How do I report an issue with a vehicle?",
              content: "Use the 'Report Issue' feature in the app with photos and details. Our support team reviews it within 1 hour and arranges a replacement or refund if necessary.",
            },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="Have More Questions?"
          description="Subscribe to our support newsletter for tips, updates, and exclusive offers. Our team is always here to help!"
          background={{
            variant: "animated-grid",
          }}
          useInvertedBackground={false}
          tagIcon={Bell}
          tagAnimation="slide-up"
          inputPlaceholder="Enter your email to get support updates"
          buttonText="Subscribe"
          termsText="We'll send you helpful resources, booking tips, and platform updates. Unsubscribe anytime in your account settings."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="MultiVehicle"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
};

export default ContactPage;