"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TextAbout from '@/components/sections/about/TextAbout';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import Link from 'next/link';
import { Heart } from 'lucide-react';

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Browse Items", id: "/browse" },
    { name: "Report Item", id: "/report" },
    { name: "How It Works", id: "/how-it-works" },
    { name: "Contact", id: "/contact" },
  ];

  const footerColumns = [
    {
      title: "Platform",      items: [
        { label: "Browse Items", href: "/browse" },
        { label: "Report Item", href: "/report" },
        { label: "How It Works", href: "#how-it-works" },
        { label: "Dashboard", href: "/dashboard" },
      ],
    },
    {
      title: "Community",      items: [
        { label: "Success Stories", href: "#testimonials" },
        { label: "Guidelines", href: "#" },
        { label: "Help Center", href: "#" },
        { label: "Contact Support", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About Us", href: "#" },
        { label: "Blog", href: "#" },
        { label: "Careers", href: "#" },
        { label: "Press", href: "#" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Cookie Policy", href: "#" },
        { label: "Contact", href: "#" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="circleGradient"
      cardStyle="solid"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="FindIt" navItems={navItems} />
      </div>

      <div id="contact-intro" data-section="contact-intro">
        <TextAbout
          tag="Get In Touch"
          tagIcon={Heart}
          tagAnimation="blur-reveal"
          title="Have questions, feedback, or need support? Our dedicated support team is here to help. Reach out to us anytime."
          useInvertedBackground={false}
          buttons={[
            { text: "Email Support", href: "mailto:support@finditportal.com" },
            { text: "Visit Dashboard", href: "/dashboard" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqSplitText
          sideTitle="Contact & Support"
          sideDescription="Common questions about contacting FindIt support and getting help with our platform."
          faqs={[
            {
              id: "1",              title: "How can I get in touch with FindIt support?",              content: "You can reach our support team via email at support@finditportal.com. We respond to all inquiries within 24 hours. You can also submit a support request through your dashboard or use our in-app messaging system."},
            {
              id: "2",              title: "What are your support hours?",              content: "Our support team is available Monday through Friday, 9 AM to 6 PM EST. For urgent issues, you can submit a ticket anytime, and we'll respond as soon as possible. Emergency support for safety concerns is available 24/7."},
            {
              id: "3",              title: "How do I report a bug or technical issue?",              content: "If you encounter a technical problem, please report it through our in-app feedback form or email support@finditportal.com with details about the issue. Include screenshots or error messages if possible. We prioritize bug fixes based on severity."},
            {
              id: "4",              title: "Can I suggest a feature for FindIt?",              content: "Absolutely! We love hearing from our community. Submit feature requests through your dashboard feedback section or email us directly. Your suggestions help us improve FindIt and better serve our users."},
          ]}
          useInvertedBackground={true}
          faqsAnimation="blur-reveal"
          textPosition="right"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="FindIt"
          columns={footerColumns}
          copyrightText="© 2025 FindIt. Helping communities reunite with lost items."
        />
      </div>
    </ThemeProvider>
  );
}