"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FaqBase from "@/components/sections/faq/FaqBase";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Mail } from "lucide-react";

const navItems = [
  { name: "Products", id: "products" },
  { name: "Categories", id: "categories" },
  { name: "Deals", id: "best-sellers" },
  { name: "About", id: "about" },
  { name: "Contact", id: "contact" },
];

const navButton = {
  text: "Shop Now",
  href: "/products",
};

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumSizeLargeTitles"
      background="noise"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={navItems}
          button={navButton}
          brandName="3DStore"
        />
      </div>

      <div id="contact-form" data-section="contact-form">
        <ContactCenter
          tag="Newsletter"
          title="Stay Updated with Exclusive Offers"
          description="Subscribe to our newsletter for early access to new products, special promotions, and exclusive 3D previews of upcoming collections."
          background={{ variant: "rotated-rays-animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
          termsText="We respect your privacy. Unsubscribe anytime. By subscribing, you agree to receive marketing emails from 3DStore."
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our products, services, and 3D shopping experience."
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          animationType="smooth"
          faqs={[
            {
              id: "1",
              title: "How does 3D product visualization work?",
              content: "Our advanced 3D models allow you to rotate, zoom, and inspect products from every angle using your mouse or touch device. The technology provides realistic textures, lighting, and proportions for accurate product assessment before purchase.",
            },
            {
              id: "2",
              title: "What payment methods do you accept?",
              content: "We accept all major credit cards, PayPal, Apple Pay, Google Pay, and cryptocurrency payments. All transactions are secured with industry-leading encryption and fraud protection to ensure your safety.",
            },
            {
              id: "3",
              title: "What is your return and refund policy?",
              content: "We offer a 30-day hassle-free return policy on all items. If you're not completely satisfied, simply initiate a return through your account dashboard, and we'll provide a prepaid shipping label. Refunds are processed within 5-7 business days.",
            },
            {
              id: "4",
              title: "How fast is the shipping?",
              content: "We offer multiple shipping options: Standard (5-7 business days), Express (2-3 business days), and Overnight. Shipping costs vary by location and selected method. Free shipping is available on orders over $100.",
            },
            {
              id: "5",
              title: "Can I customize products before ordering?",
              content: "Yes! Many of our products offer customization options including color selection, size variants, and engraving. Use the interactive 3D viewer to see your customizations in real-time before completing your purchase.",
            },
            {
              id: "6",
              title: "Is my personal data secure?",
              content: "Absolutely. We use SSL encryption, PCI DSS compliance, and multi-layer security protocols to protect your personal and payment information. We never share your data with third parties without consent.",
            },
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="3DStore"
          columns={[
            {
              items: [
                { label: "Shop All Products", href: "/products" },
                { label: "Categories", href: "#categories" },
                { label: "Best Sellers", href: "#best-sellers" },
                { label: "New Arrivals", href: "/products?sort=new" },
              ],
            },
            {
              items: [
                { label: "About Us", href: "/about" },
                { label: "Our Story", href: "/about" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "/careers" },
              ],
            },
            {
              items: [
                { label: "Customer Support", href: "/contact" },
                { label: "FAQ", href: "#faq" },
                { label: "Shipping Info", href: "/shipping" },
                { label: "Track Order", href: "/track" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "/privacy" },
                { label: "Terms of Service", href: "/terms" },
                { label: "Return Policy", href: "/returns" },
                { label: "Contact Us", href: "/contact" },
              ],
            },
            {
              items: [
                { label: "Follow Facebook", href: "https://facebook.com" },
                { label: "Follow Instagram", href: "https://instagram.com" },
                { label: "Follow Twitter", href: "https://twitter.com" },
                { label: "Follow LinkedIn", href: "https://linkedin.com" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}