"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBase from "@/components/sections/footer/FooterBase";

export default function ContactPage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "#services" },
    { name: "About", id: "#about" },
    { name: "Contact", id: "/contact" },
  ];

  const navButton = {
    text: "Get Started",    href: "#"};

  const footerColumns = [
    {
      title: "Product",      items: [
        { label: "Features", href: "#features" },
        { label: "Pricing", href: "#pricing" },
        { label: "Security", href: "#security" },
        { label: "Enterprise", href: "#enterprise" },
      ],
    },
    {
      title: "Company",      items: [
        { label: "About", href: "#about" },
        { label: "Blog", href: "/blog" },
        { label: "Careers", href: "#careers" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      title: "Connect",      items: [
        { label: "LinkedIn", href: "https://linkedin.com" },
        { label: "Twitter", href: "https://twitter.com" },
        { label: "GitHub", href: "https://github.com" },
        { label: "Discord", href: "https://discord.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSizeMediumTitles"
      background="circleGradient"
      cardStyle="glass-depth"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Apex Digital"
          navItems={navItems}
          button={navButton}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Get In Touch"
          title="Ready to transform your digital presence?"
          description="Let's discuss your project goals and explore how Apex Digital Partners can help you achieve digital excellence."
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/a-professional-team-collaboration-scene--1772694293642-0b465240.png"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Your email address"
          buttonText="Schedule a Call"
          termsText="We respect your privacy. We'll get back to you within 24 hours."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Everything you need to know about working with Apex Digital Partners"
          tag="FAQ"
          textboxLayout="default"
          faqsAnimation="none"
          mediaAnimation="none"
          useInvertedBackground={false}
          mediaPosition="left"
          faqs={[
            {
              id: "1",              title: "What is your typical project timeline?",              content:
                "Most web design and development projects take 8-16 weeks from discovery to launch, depending on complexity and scope. We provide detailed timelines during the initial consultation."},
            {
              id: "2",              title: "Do you provide ongoing support after launch?",              content:
                "Absolutely. We offer comprehensive post-launch support including bug fixes, performance optimization, and feature updates. We're committed to long-term partnerships."},
            {
              id: "3",              title: "What technologies do you use?",              content:
                "We leverage modern, best-in-class technologies including React, Next.js, TypeScript, Node.js, and cloud platforms like AWS. We choose technologies based on your project needs."},
            {
              id: "4",              title: "How much does a project cost?",              content:
                "Project costs vary based on scope, complexity, and requirements. Our range typically starts at $25,000 for custom web design projects and scales based on additional services and features."},
            {
              id: "5",              title: "Can you work with our existing team?",              content:
                "Yes, we're experienced in collaborating with internal teams, other agencies, and external contractors. We ensure smooth communication and seamless integration."},
            {
              id: "6",              title: "What if we need design changes after launch?",              content:
                "We build flexibility into all our projects. Changes are accommodated through our support packages, with transparent pricing for additional work beyond the initial scope."},
            {
              id: "7",              title: "Do you handle e-commerce solutions?",              content:
                "Yes, we have extensive e-commerce expertise. We build scalable platforms using Shopify, custom solutions, and integrations with payment processors and fulfillment systems."},
            {
              id: "8",              title: "How do you approach SEO?",              content:
                "SEO is built into our development process from day one. We implement technical SEO best practices, optimize performance, ensure mobile-responsiveness, and provide ongoing optimization strategies."},
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2rAHmDcSblhmPtJ4YXRL0jWg/modern-web-design-concept--1772694293642-0b465240.png"
          imageAlt="FAQ illustration"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Apex Digital"
          copyrightText="© 2025 Apex Digital Partners. All rights reserved."
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}
