"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Clock } from 'lucide-react';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="UrbanStyle"
          navItems={[
            { name: "Home", id: "/" },
            { name: "Shop", id: "/products" },
            { name: "About", id: "/about" },
            { name: "Pricing", id: "/pricing" }
          ]}
          button={{
            text: "Contact Us",
            href: "/contact"
          }}
        />
      </div>

      <div id="contact-info" data-section="contact-info">
        <TextSplitAbout
          title="Get in Touch"
          description={[
            "We'd love to hear from you! Whether you have questions about our products, need styling advice, or want to learn more about our membership programs, our team is here to help.",
            "Reach out via email at hello@urbanstyle.com or call us at (555) 123-4567. Our customer service team is available Monday through Friday, 9 AM to 6 PM EST.",
            "Follow us on social media for the latest updates on new arrivals, exclusive drops, and behind-the-scenes content from the UrbanStyle community."
          ]}
          buttons={[
            { text: "Email Us", href: "mailto:hello@urbanstyle.com" },
            { text: "Call Us", href: "tel:+15551234567" }
          ]}
          showBorder={true}
          useInvertedBackground={false}
        />
      </div>

      <div id="support-metrics" data-section="support-metrics">
        <MetricCardSeven
          title="Our Customer Support"
          description="Fast, reliable support that keeps our community happy and stylish"
          tag="Support Performance"
          tagIcon={Clock}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          carouselMode="buttons"
          metrics={[
            {
              id: "1",
              value: "< 24hrs",
              title: "Average Response Time",
              items: ["Email inquiries answered quickly", "Priority support for members", "Weekend coverage available"]
            },
            {
              id: "2",
              value: "95%",
              title: "Customer Satisfaction Rate",
              items: ["Based on support tickets", "Consistently high ratings", "Continuous improvement focus"]
            },
            {
              id: "3",
              value: "24/7",
              title: "Elite Member Support",
              items: ["Round-the-clock availability", "Dedicated VIP hotline", "Priority queue access"]
            }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="UrbanStyle"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Shop", href: "/products" },
                { label: "About", href: "/about" },
                { label: "Pricing", href: "/pricing" }
              ]
            },
            {
              items: [
                { label: "Contact Us", href: "/contact" },
                { label: "FAQ", href: "#" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Accessibility", href: "#" },
                { label: "Sustainability", href: "#" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "Facebook", href: "https://facebook.com" },
                { label: "TikTok", href: "https://tiktok.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}