"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Mail, HelpCircle } from "lucide-react";

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

  const footerColumns = [
    {
      items: [
        { label: "Home", href: "/" },
        { label: "Shop", href: "/shop" },
        { label: "About Us", href: "/about" },
        { label: "Contact", href: "/contact" },
      ],
    },
    {
      items: [
        { label: "Collections", href: "/shop" },
        { label: "Custom Orders", href: "/contact" },
        { label: "Bulk Pricing", href: "/contact" },
        { label: "Care Guide", href: "#" },
      ],
    },
    {
      items: [
        { label: "WhatsApp Support", href: "#" },
        { label: "Email Us", href: "#" },
        { label: "Location", href: "#" },
        { label: "Returns", href: "#" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms & Conditions", href: "#" },
        { label: "Shipping Info", href: "#" },
        { label: "FAQ", href: "/contact" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmall"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="Atwab Al Hjaji" navItems={navItems} />
      </div>

      <div id="newsletter" data-section="newsletter">
        <ContactSplit
          tag="Newsletter"
          title="Stay Updated on New Collections"
          description="Subscribe to our newsletter for exclusive fabric releases, design inspiration from Morocco, and special offers for our valued customers."
          tagIcon={Mail}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-vector/abstract-pattern-design_1010-595.jpg"
          imageAlt="Moroccan geometric pattern background"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email address"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe at any time. No spam, only curated fabric collections and design tips."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          faqs={[
            {
              id: "1",
              title: "What makes your Moroccan fabrics authentic?",
              content:
                "Our fabrics are sourced directly from master artisans in Morocco who use traditional weaving techniques passed down through generations. Each piece features authentic geometric patterns inspired by traditional zellige tilework and is made with premium natural fibers.",
            },
            {
              id: "2",
              title: "How do I order and what are the payment options?",
              content:
                "You can order through our online shop or contact us directly via WhatsApp. We accept bank transfers, credit cards, and offer installment plans for bulk orders. All payments are secure and encrypted.",
            },
            {
              id: "3",
              title: "What is your delivery timeline across Morocco?",
              content:
                "Standard delivery takes 3-5 business days to major cities in Morocco. We offer express delivery (1-2 days) for urgent orders. All fabrics are carefully packaged to ensure they arrive in perfect condition.",
            },
            {
              id: "4",
              title: "Can I customize fabrics or place bulk orders?",
              content:
                "Yes! We offer custom fabric orders for large projects and special requests. Contact our team via WhatsApp to discuss your requirements, and we'll provide detailed pricing and timelines for custom orders.",
            },
            {
              id: "5",
              title: "What is your return and exchange policy?",
              content:
                "We offer a 14-day return policy for unwashed fabrics in original condition. If you receive a defective product, we provide a full replacement at no cost. Contact our support team to initiate returns.",
            },
            {
              id: "6",
              title: "How do I care for my Moroccan salon fabrics?",
              content:
                "Most fabrics should be dry-cleaned or hand-washed with mild soap in cool water. Avoid direct sunlight to preserve colors. Detailed care instructions are provided with each purchase. We also offer professional cleaning recommendations.",
            },
          ]}
          title="Frequently Asked Questions"
          description="Find answers to common questions about our Moroccan salon fabrics, ordering process, and shipping."
          tag="Help & Support"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis logoText="Atwab Al Hjaji" columns={footerColumns} />
      </div>
    </ThemeProvider>
  );
}