"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { HelpCircle, MessageCircle, Zap } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="large"
      background="floatingGradient"
      cardStyle="gradient-mesh"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Webild Studio"
          navItems={[
            { name: "Work", id: "/portfolio" },
            { name: "Services", id: "/services" },
            { name: "About", id: "/about" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Get Started",            href: "/contact"
          }}
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <MetricSplitMediaAbout
          tag="Get in Touch"
          tagIcon={MessageCircle}
          title="Let's Create Something Amazing Together"
          description="Ready to transform your digital presence? We'd love to hear about your project and explore how we can help bring your vision to life. Whether you need a complete brand overhaul, a new website, or strategic digital guidance, our team is here to deliver exceptional results."
          metrics={[
            { value: "24h", title: "Response Time" },
            { value: "100%", title: "Project Success Rate" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/disabled-man-wheelchair-working-his-office-job_23-2149571107.jpg"
          imageAlt="Webild Studio team ready to help"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqSplitMedia
          title="Common Questions"
          description="Get quick answers to frequently asked questions about our process, pricing, and project approach"
          tag="FAQ"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How do you handle project pricing?",              content: "We provide transparent, fixed-price proposals based on project scope and requirements. After our initial consultation, you'll receive a detailed proposal outlining deliverables, timeline, and investment. No hidden fees, no surprises."
            },
            {
              id: "2",              title: "What's your typical project timeline?",              content: "Timeline varies by project complexity. Brand identity projects typically take 4-6 weeks, websites range from 6-12 weeks, and custom applications can take 12-24 weeks. We'll provide a detailed timeline during our discovery phase."
            },
            {
              id: "3",              title: "Do you work with clients remotely?",              content: "Absolutely! We work with clients worldwide and have perfected our remote collaboration process. We use modern project management tools, regular video calls, and clear communication protocols to ensure seamless collaboration regardless of location."
            },
            {
              id: "4",              title: "What information should I prepare for our first call?",              content: "Come prepared to discuss your goals, target audience, budget range, and timeline. If you have existing brand materials, competitive references, or inspiration examples, those are helpful too. We'll guide you through the rest during our discovery process."
            },
            {
              id: "5",              title: "Do you offer ongoing support after project completion?",              content: "Yes, we provide comprehensive post-launch support including maintenance, updates, performance monitoring, and strategic guidance. We offer various support packages to ensure your digital presence continues to evolve and perform optimally."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Contact support illustration"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          animationType="smooth"
        />
      </div>

      <div id="next-steps" data-section="next-steps">
        <MetricSplitMediaAbout
          tag="Next Steps"
          tagIcon={Zap}
          title="Ready to Get Started?"
          description="The best projects start with great conversations. Reach out to schedule a complimentary consultation where we'll discuss your goals, explore possibilities, and determine how we can best support your success. We're excited to learn about your vision and share how our expertise can help make it a reality."
          metrics={[
            { value: "Free", title: "Initial Consultation" },
            { value: "30min", title: "Discovery Call" }
          ]}
          imageSrc="https://img.b2bpic.net/free-vector/infographic-dashboard-user-panel_52683-30026.jpg"
          imageAlt="Project planning and consultation"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/abstract-geometric-memphis-background_1409-1845.jpg"
          imageAlt="Creative footer background"
          logoText="Webild Studio"
          copyrightText="© 2025 Webild Studio. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Brand Design", href: "/services" },
                { label: "Web Development", href: "/services" },
                { label: "Mobile Apps", href: "/services" },
                { label: "Digital Marketing", href: "/services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Team", href: "/about" },
                { label: "Portfolio", href: "/portfolio" },
                { label: "Careers", href: "/contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "/contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}