"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Phone, HelpCircle } from 'lucide-react';

export default function ContactPage() {
  const navItems = [
    { name: "Shop", id: "shop" },
    { name: "Collections", id: "collections" },
    { name: "About", id: "about" },
    { name: "Contact", id: "contact" },
    { name: "Cart", id: "https://example.com/cart" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-elevated"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple 
          brandName="STUDIO LUXE"
          navItems={navItems}
        />
      </div>

      <div id="contact-section" data-section="contact-section">
        <ContactFaq
          faqs={[
            {
              id: "1",              title: "What's your response time?",              content: "Our design team responds to inquiries within 24 business hours. For urgent matters, please call our hotline at 1-800-LUXE-FRN for immediate assistance."
            },
            {
              id: "2",              title: "Do you offer design consultations?",              content: "Yes! We provide complimentary initial design consultations. Our experts will help you select pieces that match your vision, space, and budget. Schedule via our contact form."
            },
            {
              id: "3",              title: "Can you help with custom orders?",              content: "Absolutely. Our custom fabrication team can modify dimensions, finishes, and materials. Custom pieces typically take 8-10 weeks. Contact our team for a detailed quote."
            }
          ]}
          ctaTitle="Get in Touch"
          ctaDescription="Let's discuss your furniture needs and find the perfect pieces for your space."
          ctaButton={{ text: "Contact Our Team", href: "https://example.com/contact-form" }}
          ctaIcon={Phone}
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      <div id="contact-faq" data-section="contact-faq">
        <FaqSplitMedia
          title="Common Questions"
          description="Find answers to frequently asked questions about ordering, delivery, and support."
          tag="Help"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, Apple Pay, and Google Pay. We also offer 0% APR financing through Klarna and Affirm for purchases over $500."
            },
            {
              id: "2",              title: "Is there a showroom I can visit?",              content: "Yes! Our flagship showroom is located in New York City. By appointment, you can experience our furniture collection firsthand. Schedule a visit through our website or call us directly."
            },
            {
              id: "3",              title: "What is your warranty coverage?",              content: "All Studio Luxe pieces come with a 5-year structural warranty covering defects in materials and craftsmanship. Extended warranties available up to 10 years."
            }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/blonde-charming-woman-silk-black-jumpsuit-stylish-eyeglasses-sits-brown-big-soft-sofa-ho_197531-33650.jpg"
          imageAlt="Customer enjoying Studio Luxe furniture"
          mediaAnimation="opacity"
          mediaPosition="right"
          textboxLayout="default"
          useInvertedBackground={true}
          faqsAnimation="blur-reveal"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Furniture", href: "shop" },
                { label: "Seating", href: "shop" },
                { label: "Tables", href: "shop" },
                { label: "Storage", href: "shop" },
                { label: "New Arrivals", href: "shop" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Design Philosophy", href: "about" },
                { label: "Sustainability", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Care Guide", href: "#" },
                { label: "Warranty", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 Studio Luxe. All rights reserved. Crafted for those who value timeless design."
        />
      </div>
    </ThemeProvider>
  );
}