"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { Mail } from "lucide-react";

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="aurora"
      cardStyle="outline"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="Pahu"
          button={{
            text: "Shop",
            href: "/products"
          }}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get in Touch"
          title="We're Here to Help"
          description="Have questions about our fragrances or need assistance with your order? Contact us and we'll get back to you within 24 hours."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Send Message"
          termsText="We respect your privacy and will never share your information with third parties."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about Pahu fragrances, ordering, and care."
          textPosition="left"
          useInvertedBackground="invertDefault"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How long does Pahu fragrance last?",
              content: "Our fragrances are designed for longevity, typically lasting 8-12 hours depending on skin chemistry and application. For best results, apply to pulse points such as wrists and neck."
            },
            {
              id: "2",
              title: "Can I exchange or return a fragrance?",
              content: "Yes! We offer a 30-day satisfaction guarantee. If you're not completely satisfied, you can exchange or return your purchase for a full refund."
            },
            {
              id: "3",
              title: "Are your fragrances vegan and cruelty-free?",
              content: "Absolutely. All Pahu fragrances are vegan, cruelty-free, and ethically sourced. We're committed to sustainable and responsible fragrance creation."
            },
            {
              id: "4",
              title: "How should I store my Pahu fragrance?",
              content: "Store your fragrance in a cool, dark place away from direct sunlight and heat. Keep the cap tightly closed to preserve the scent's integrity and longevity."
            },
            {
              id: "5",
              title: "Do you offer gift wrapping?",
              content: "Yes! We provide complimentary luxury gift wrapping for all orders. Perfect for special occasions. You can add a personalized message during checkout."
            }
          ]}
        />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with Exclusive Offers"
          description="Subscribe to receive new fragrance launches, special promotions, and insider tips from the Pahu team."
          tagIcon={Mail}
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to our Terms and Privacy Policy."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Pahu"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "About", href: "/about" },
                { label: "Products", href: "/products" },
                { label: "Contact", href: "/contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}