"use client";

import Link from "next/link";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
  MessageSquare,
  Phone,
  Clock,
  Globe,
  Mail,
  Twitter,
  Linkedin,
  Github,
} from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Features", id: "/services" },
    { name: "Pricing", id: "/pricing" },
    { name: "About", id: "/about" },
    { name: "Resources", id: "/resources" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="mediumLarge"
      sizing="medium"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="CloudSync"
          navItems={navItems}
          button={{
            text: "Get Started",            href: "/pricing"}}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          faqs={[
            {
              id: "1",              title: "What's included in the free trial?",              content:
                "Your 14-day free trial includes full access to all Pro features. No credit card required to start."},
            {
              id: "2",              title: "How is billing handled?",              content:
                "We bill monthly or annually. You can upgrade, downgrade, or cancel anytime with no long-term contracts."},
            {
              id: "3",              title: "Do you offer refunds?",              content:
                "Yes. If you're not satisfied within 30 days, we'll refund your payment in full. No questions asked."},
          ]}
          ctaTitle="Get in Touch"
          ctaDescription="Have questions? Our team is ready to help you find the perfect solution."
          ctaButton={{
            text: "Schedule Demo",            href: "#"}}
          ctaIcon={MessageSquare}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Support Channels"
          description="Multiple ways to reach us - we're here to help"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: Clock,
              title: "Response Time",              value: "< 1 Hour"},
            {
              id: "2",              icon: Phone,
              title: "Support Hours",              value: "24/7"},
            {
              id: "3",              icon: Mail,
              title: "Support Channels",              value: "5+"},
            {
              id: "4",              icon: Globe,
              title: "Languages",              value: "15+"},
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Contact & Support"
          sideDescription="Ways to connect with our team"
          textPosition="left"
          useInvertedBackground={false}
          animationType="smooth"
          faqsAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How do I reach support?",              content:
                "You can reach our support team via email (support@cloudsync.com), live chat, phone, or your dedicated account manager for enterprise accounts. We respond to all inquiries within 1 hour."},
            {
              id: "2",              title: "What are your support hours?",              content:
                "Our support team is available 24/7 to assist you. We maintain 99.9% uptime with dedicated on-call engineers."},
            {
              id: "3",              title: "Do you offer onboarding assistance?",              content:
                "Yes. All plans include onboarding support. Pro and Enterprise customers receive personalized onboarding sessions with our team."},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard
          logoText="CloudSync"
          copyrightText="© 2025 CloudSync. All rights reserved."
          socialLinks={[
            {
              icon: Twitter,
              href: "https://twitter.com/cloudsync",              ariaLabel: "Twitter"},
            {
              icon: Linkedin,
              href: "https://linkedin.com/company/cloudsync",              ariaLabel: "LinkedIn"},
            {
              icon: Github,
              href: "https://github.com/cloudsync",              ariaLabel: "GitHub"},
          ]}
        />
      </div>
    </ThemeProvider>
  );
}