"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
import Link from "next/link";
import { HelpCircle, Star } from "lucide-react";

export default function ContactPage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Solutions", id: "about" },
    { name: "Security", id: "security" },
    { name: "Team", id: "team" },
  ];

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Features", href: "features" },
        { label: "Security", href: "security" },
        { label: "Pricing", href: "/pricing" },
        { label: "API Docs", href: "#" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About", href: "about" },
        { label: "Team", href: "team" },
        { label: "Careers", href: "#" },
        { label: "Blog", href: "#" },
      ],
    },
    {
      title: "Legal",      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Security", href: "#" },
        { label: "Contact", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="circleGradient"
      cardStyle="subtle-shadow"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="FinFlow"
          navItems={navItems}
          button={{ text: "Get Started", href: "/contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqSplitMedia
          title="Get in Touch with FinFlow"
          description="Contact our sales and support teams. We're here to help transform your financial operations."
          tag="Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How can I schedule a demo?",              content:
                "Our sales team is ready to showcase FinFlow's capabilities. Email us at sales@finflow.io or use our contact form above. We'll schedule a personalized demo tailored to your business needs."},
            {
              id: "2",              title: "What is the typical sales cycle?",              content:
                "Enterprise deals typically close within 4-12 weeks. Initial discovery call (1 week), technical evaluation (2-3 weeks), contract negotiation (1-2 weeks), and final approval (1-2 weeks)."},
            {
              id: "3",              title: "Do you offer custom implementations?",              content:
                "Yes. Our professional services team specializes in custom implementations, data migrations, and integration setup for enterprise clients. Typical projects range from 8-16 weeks."},
            {
              id: "4",              title: "What support channels are available?",              content:
                "Enterprise clients receive 24/7 support via email, Slack, and phone. Our average response time for critical issues is under 15 minutes. Premium support includes dedicated account managers and quarterly business reviews."},
            {
              id: "5",              title: "Can I integrate FinFlow with my current systems?",              content:
                "Absolutely. FinFlow offers 500+ pre-built integrations and flexible APIs. Our integration specialists have successfully connected to legacy banking systems, ERP platforms, and custom applications."},
            {
              id: "6",              title: "Where are your data centers located?",              content:
                "We operate data centers in North America, Europe, and Asia-Pacific. Enterprise clients can choose data residency preferences. We maintain multiple geographic backups for disaster recovery and compliance."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR8GOydHfClbi36f53UKitWZH2/professional-financial-support-team-envi-1772544009073-79e9c5b6.png"
          imageAlt="Financial support team"
          mediaAnimation="slide-up"
          mediaPosition="left"
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact-social" data-section="contact-social">
        <SocialProofOne
          title="Enterprise Support Ready"
          description="Connect with our dedicated teams. Email: sales@finflow.io | Support: support@finflow.io"
          tag="We're Here to Help"
          tagIcon={Star}
          textboxLayout="default"
          useInvertedBackground={true}
          names={[
            "Sales Support",            "Technical Support",            "Implementation Team",            "Account Management",            "Security Team",            "Compliance"]}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={footerColumns}
          copyrightText="© 2025 FinFlow | Enterprise Financial Software. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}